使用普通文本编辑工具可以创建,其内容主要由<project>和<target>标签组成,以下是一个简单的脚本:
<?xml version="1.0" encoding="utf-8"?>
<project default="run">
<target name="run">
<echo>Hello World!</echo>
</target>
</project>
介绍
主要是使用 React 和 TypeScript 以及 Ant Design Pro 开发中后台项目,那么就会有人问“可不可开发前台”,回答是“可以”;Ant Design 是蚂蚁金服的UI框架,发展历程可以说是从 saga-redux ->dva ->umi ->ant design ,说 ant design 是 react 的最佳实践确实是名副其实;其中我最喜欢或者说是 dva 最显著的地方就是修缮了 redux 的不足之处。
搭建
安装 cnpm,yarn,tyarn
```
npm i -g cnpm --registry=https://registry.npm.taobao.orgcnpm i yarn -gyarn global add tyarn
```
2. Ant Design Pro 立足于 umijs 、dva,需要安装 umi
```
yarn global add umi
```
3. 创建 Ant Design Pro 项目(先创建test文件夹)
```
mkdir test
cd test
yarn create umi (这里选择 ant design pro ->typescript ->simple)tyarn
yarn start
```
+ config
- config.ts 路由设计
- proxy.ts 代理(打包后无效)
+ mock 模拟数据
+ src
- assets 放一些静态资源文件(png,svg等)
- component 主要放全局组件
- layouts 权限、token获取
- models 详细内容见dva,换言之是redux (interface、数据交互)
- pages 页面
- serives 请求(get,post)
- utils 放一些公用方法
/* 以上为本人对ant design pro各个模块的理解,不足之处还请指教 */
举个栗子(dva)
TypeScript 最突出的就是类型注解,其目的就是减少对类型的试错,从而达到优化
/** * 假设你现在要做一个博客网站,现在你要搭建的是你的博客首页 * 1. 现在你的 page 已经写好了(src/home/index.tsx和src/home/index.less) * 2. 你的后端接口也已经写好了,提供的接口就是 home (GET) * 3. 你也已经在 config/proxy.ts 中写好了代理,代理名 api **/
现在你需要创建一个 src/services/home.ts 去对接后台的接口。
import request from '@/utils/request'// ant design pro 自带(无须修改,每次请求自动携带 token)interfaceHomeParams{currentPage:numberpageSize:number}exportasyncfunctionqueryGetMyHomeData(payload:HomeParams){returnrequest(`/api/home`,{method:'GET',params:{// 填写你需要传给后端的字段...payload,}/** * 如果是 POST 请求,请将 params 修改成 data **/})}
接下来,你需要创建一个 src/models/home.ts 去调用上面那个接口 (详细教程看 dva),我这是临时起意边想边写的(俗称瞎编乱造)。
import{queryGetMyHomeData}from'@/services/home'import{Effect,Reducer}from'umi'exportinterfaceDataItem{// 暂且假设后端回给你的只有(ID、博客标题、发布日期(毫秒数)、摘要)id:numbertitle:stringcreatedDate:numberbrief:string}// state 对应的类型(接口)exportinterfaceHomeState{currentPage:numberdata:Array<DataItem>}exportinterfaceHomeModelType{namespace:string// 说好听点叫做 "命名空间"state:HomeState// 就是 stateeffects:{// effects 里面的可以调用 reducers 里面的getData:Effect,changePage:Effect,}reducers:{setData:Reducer<HomeState>,setPage:Reducer<HomeState>,}}constHomeModel={namespace:'home',state:{currentPage:1,data:[],},effects:{*getData({payload},{call,put}){constres=yieldcall(queryGetMyHomeData,payload)// payload 要对应 queryGetMyHomeData 的形参,否则另当别论constarr=Array.isArray(res.data)?res.data:[]// 我这里假设返回的 res.data 就是我们所需要的数据yieldput({// 将数据放到 state 里面type:'setData',payload:{data:arr,}})},*changePage({payload},{call,put}){yieldput({type:'setPage',payload})// yield take( 'setPage/@@end' ) // 阻塞等待完成再往下执行,当然我们这里并不存在一步造成的问题yieldput({type:'getData',payload})},},reducers:{setData(state,{payload}){return{...state,...payload,}},setPage(state,{payload}){return{...state,...payload,}},}}exportdefaultHomeModel
让 src/pages/home/index.tsx 去 connect HomeModel
importReact,{useEffect}from'react'import{connect,Dispatch}from'umi'import{HomeState}from'@/models/home'interfaceHomeProps{dispatch:Dispatchhome:HomeState}constHome:React.FC<HomeProps>=(props)=>{// 拿到的内容可以直接使用const{dispatch,home:{currentPage,data,}}=props// 获取数据,或者说是初始化数据useEffect(()=>{dispatch({type:'home/getData',payload:{currentPage,pageSize:8,}})},[])// 页码改变事件functionpageChange(page){/** * page的修改是两个 *** 作 * 1. 修改 page * 2. 获取数据 * 3. 如果面临异步问题(我们这里用阻塞)-- 这里不存在此问题 **/dispatch({type:'home/changePage',payload:{currentPage:page,pageSize:8,}})}return(// ... 这里我就省略不写了)}exportdefaultconnect(home:HomeState=>home)(Home)
还有一点要 提醒 ,effects 里面的 和 reducers 里面的函数名不能一样。
有关于 Dva 对 Redux 的修改,见下图
可以使用Apache Ant + Ivy构建Spring Boot项目。该 spring-boot-antlib“的antlib”模块还可以帮助Ant创建可执行的JAR文件。为了声明依赖关系,典型的ivy.xml文件看起来像下面的例子:
<ivy-module version="2.0">
<info organisation="org.springframework.boot" module="spring-boot-sample-ant" />
<configurations>
<conf name="compile" description="everything needed to compile this module" />
<conf name="runtime" extends="compile" description="everything needed to run this module" />
</configurations>
<dependencies>
<dependency org="org.springframework.boot" name="spring-boot-starter" rev="${spring-boot.version}" conf="compile" />
</dependencies>
</ivy-module>
典型的build.xml外观如下例所示:
<project xmlns:ivy="antlib:org.apache.ivy.ant" xmlns:spring-boot="antlib:org.springframework.boot.ant" name="myapp" default="build">
<property name="spring-boot.version" value="2.0.1.RE
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)