href可以请求后台么_使用antdesign开发完整的后台系统

# 安装脚手架
yarn global add &＃64;vue/cli# 初始化项目
vue create antd-demo# 引入vue ant design
yarn add ant-design-vue

// main.js
import Vue from &＃39;vue&＃39;
import Antd from &＃39;ant-design-vue&＃39;
import &＃39;ant-design-vue/dist/antd.less&＃39;Vue.use(Antd)


// request.js
import Vue from &＃39;vue&＃39;
import notification from &＃39;ant-design-vue/es/notification&＃39;
import JSONbig from &＃39;json-bigint&＃39; // 处理大数据&＃xff0c; 建议大数字后端变成字符串传回// 创建 auth axios 实例
const auth &＃61; axios.create({headers: {&＃39;Content-Type&＃39;: &＃39;application/json;charset&＃61;UTF-8&＃39;,&＃39;X-Requested-With&＃39;: &＃39;XMLHttpRequest&＃39;},baseURL: &＃39;api&＃39;, // api base_urltimeout: 10 * 60 * 1000, // 请求超时时间 10 分钟transformResponse: [function (data) {return JSONbig.parse(data)}],
})// 请求拦截器
auth.interceptors.request.use(config &＃61;> {const token &＃61; Vue.ls.get(ACCESS_TOKEN)if (token) {config.headers[ &＃39;Authorization&＃39; ] &＃61; &＃39;JWT &＃39;&＃43; token // 让每个请求携带自定义 token 请根据实际情况自行修改}return config
}, err)// 响应拦截器
auth.interceptors.response.use(response &＃61;> {if (response.code &＃61;&＃61;&＃61; 10140) {loginTimeOut()} else {return response.data}}, error &＃61;> { // 错误处理// 超时if(error.response && error.response.status &＃61;&＃61;&＃61; 500){notice({title: &＃96;服务端异常 ${error.response.statusText}&＃96;,}, &＃39;notice&＃39;, &＃39;error&＃39;, 5)return}// ...notice({title: &＃96;${error.response && error.response.data && error.response.data.msg}&＃96;,}, &＃39;notice&＃39;, &＃39;error&＃39;, 5)}
)


# api目录
- api- basic_config- device.js- ...- index.js

// device.js
import { auth } from &＃39;&＃64;/utils/request&＃39;export function getDeviceList(params) {return auth({url: &＃39;/path/to/url&＃39;,method: &＃39;get&＃39;,params})
}export default {getDeviceList
}


// index.js
import bc_device from &＃39;./basis_config/device&＃39;
// ...const api &＃61; {bc_device
}export default apiexport const ApiPlugin &＃61; {}ApiPlugin.install &＃61; function (Vue, options) {Vue.prototype.api &＃61; api // 挂载api在原型上
}


// vue.config.jsconst HOST &＃61; &＃39;0.0.0.0&＃39;;
const PORT &＃61; &＃39;9002&＃39;;
const DEV_URL &＃61; &＃39;http://10.***.**.***&＃39; // 测试环境
module.exports &＃61; {devServer: {host: HOST,port: PORT,https: false,hotOnly: false,proxy: { // 配置跨域&＃39;/api&＃39;: {//要访问的跨域的api的域名target: &＃96;${DEV_URL}&＃96;,ws: true,changOrigin: true,// pathRewrite: {// &＃39;^/api&＃39;: &＃39;&＃39;// }} }}// ...
};


# 部分页面目录
- views- basis_config- comp # 这里是私有组件的存放- device_manage.vue




# 新建一个空的文件夹作为项目目录&＃xff0c;并在目录下执行&＃xff1a;
yarn create umi# 选择&＃96;ant-design-pro&＃96;
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.app - Create project with a simple boilerplate, support typescript.block - Create a umi block.library - Create a library with umi.plugin - Create a umi plugin.

// request.ts
/*** request 网络请求工具* 更详细的 api 文档: https://github.com/umijs/umi-request*/
import { getStore, removeStore } from &＃39;&＃64;/utils/storage&＃39;;import { extend } from &＃39;umi-request&＃39;;import { notification } from &＃39;antd&＃39;;import { stringify } from &＃39;querystring&＃39;;import { router } from &＃39;umi&＃39;;/*** 异常处理程序*/
const errorHandler &＃61; (error: {response: Response;data: { code: number; message: string };
}): Response &＃61;> {const { response, data } &＃61; error;if (response && response.status) {// const errorText &＃61; codeMessage[response.status] || response.statusText;const errorText &＃61; data ? data.message : &＃39;错误了&＃xff01;&＃39;;const { status } &＃61; response;notification.error({message: &＃96;请求错误 - ${status}&＃96;,description: errorText,});/*** 10000 IP change* 10001 token timeout*/if (response.status &＃61;&＃61;&＃61; 401 && (data.code &＃61;&＃61;&＃61; 10000 || data.code &＃61;&＃61;&＃61; 10001)) {router.replace({pathname: &＃39;/user/login&＃39;,search: stringify({redirect: window.location.href,}),});removeStore(&＃39;token&＃39;);}} else if (!response) {notification.error({description: &＃39;您的网络发生异常&＃xff0c;无法连接服务器&＃39;,message: &＃39;网络异常&＃39;,});}return response;
};/*** 配置request请求时的默认参数*/
const request &＃61; extend({errorHandler, // 默认错误处理credentials: &＃39;include&＃39;, // 默认请求是否带上COOKIE
});// 请求拦截器
request.interceptors.request.use((url, options) &＃61;> {const token &＃61; getStore(&＃39;token&＃39;) || &＃39;&＃39;; // 401的时候要清空下tokenif (token) {options.headers &＃61; {// 处理header中的token&＃39;Content-Type&＃39;: &＃39;application/json&＃39;,Accept: &＃39;application/json&＃39;,Authorization: &＃96;** ${token}&＃96;,};}return {url,options: { ...options },};
});request.interceptors.response.use(async (response: any) &＃61;> response);export default request;

// 接口的部分目录
- services- port.ts- ...
import request from &＃39;&＃64;/utils/request&＃39;;// 获取配置端口列表
export async function getNginxPort(params: object) {return request(&＃39;/path/to/url&＃39;, {method: &＃39;get&＃39;,params,});
}

// config/proxy.ts
/*** 在生产环境 代理是无法生效的&＃xff0c;所以这里没有生产环境的配置* The agent cannot take effect in the production environment* so there is no configuration of the production environment* For details, please see* https://pro.ant.design/docs/deploy*/
export default {dev: {&＃39;/api/&＃39;: {target: &＃39;http://***.**.***.**&＃39;,changeOrigin: true,pathRewrite: { &＃39;^&＃39;: &＃39;&＃39; },},},
};

// pages/port/index.tsx
import React, { Component } from &＃39;react&＃39;;
import { PageHeaderWrapper } from &＃39;&＃64;ant-design/pro-layout&＃39;;
import { Table, message, Tag, Row, Input, Button } from &＃39;antd&＃39;;
import {SearchOutlined,DeleteOutlined,PlusOutlined,InfoCircleOutlined,
} from &＃39;&＃64;ant-design/icons&＃39;;
import { getNginxPort, postNginxPortItem, deleteNginxPortItem } from &＃39;&＃64;/services/port&＃39;;
import moment from &＃39;moment&＃39;;const { confirm } &＃61; Modal;interface NginxPortProps {}interface NginxPortState {data: object[];loading: boolean;current: number;pageSize: number;total: number;showSizeChanger: boolean;showQuickJumper: boolean;
}class NginxPort extends Component {constructor(props: any) {super(props);this.state &＃61; {data: [],loading: false,current: 1,pageSize: 10,total: 0,showSizeChanger: true, // 展示页条数与否showQuickJumper: true, // 展示跳转与否search: &＃39;&＃39;};}componentDidMount() {this.getList();}getList &＃61; () &＃61;> {const rn &＃61; this;const { pageSize, current } &＃61; rn.state;rn.setState({loading: true,});getNginxPort({page_size: pageSize,page: current}).then((res: any) &＃61;> {if (res.code &＃61;&＃61;&＃61; 200) {rn.setState({data: res.data.lists || [],total: res.data.total || 0,});} else {message.warn(res.msg || &＃39;获取端口列表失败&＃xff01;&＃39;);}}).finally(() &＃61;> {rn.setState({loading: false,});});};// 改变表格onchange &＃61; (pagination: any) &＃61;> {this.setState({current: pagination.current,pageSize: pagination.pageSize,},this.getList,);};render() {const columns &＃61; [{title: &＃39;端口号&＃39;,dataIndex: &＃39;port&＃39;,key: &＃39;port&＃39;,width: 120,},{title: &＃39;服务代号&＃39;,dataIndex: &＃39;sercode&＃39;,key: &＃39;sercode&＃39;,},{title: &＃39;GIT地址&＃39;,dataIndex: &＃39;git&＃39;,key: &＃39;git&＃39;,},{title: &＃39;类型&＃39;,dataIndex: &＃39;type&＃39;,key: &＃39;type&＃39;,render: (type: any) &＃61;> {type},width: 120,},{title: &＃39;创建时间&＃39;,dataIndex: &＃39;created_on&＃39;,key: &＃39;created_on&＃39;,render: (text: number) &＃61;> {moment(text * 1000).format(&＃39;YYYY-MM-DD&＃39;)},width: 120,},];const {data,loading,total,current,pageSize,showSizeChanger,showQuickJumper,showModal,} &＃61; this.state;return ( record.id}pagination&＃61;{{total,current,pageSize,showTotal: (_total) &＃61;> &＃96;共 ${_total} 条数据&＃96;,showSizeChanger,showQuickJumper,}}/>);}
}export default NginxPort;