Antd-pro的交互和部署

Antd-pro部署计划

在react框架中，集成化的脚手架最方便的当然是Antd-pro了，在框架中和后台数据交互时，我们可以使用axios、jquery(不推荐)、使用框架自带的proxy(代理)，本篇博客中主要讲述了关于如何在antd-pro中使用proxy和框架自带的request和后台交互，以及如何部署到apache2服务器中。

数据交互

1.proxy的配置，首先在项目的目录下有config文件夹，打开config下的config.js文件，在最底部进行配置

proxy: {
     
    '/api/': {
       	//api相当于接口地址的别名
      target: 'http://接口的IP地址/ ',
      changeOrigin: false,
      pathRewrite: {
      '^/api': '' },
    },
  },

2.在项目根目录中的src下的services中新建一个xx.js文件，这个文件主要包括：

import request from '@/utils/request';
var baseURL='http://接口地址'
//部署时的写法
export async function findAllCata() {
     
  return request(baseURL+'/mp_man_catalog/catanestlist/');
}
//本地使用测试的写法
export async function findAllCata() {
     
  return request('/api/mp_man_catalog/catanestlist/');
}

3.在项目根目录中的src下的modules中新建一个xx.js文件，这个文件主要包括：

import {
      findAllCata} from '@/services/Db';

const Db={
     
	namespace:'Db',//区分每一个state
	state:{
      catalist: [{
     childs:[]}]},
	effects:{
     
		//异步函数，相当于action
		// 获取所有编目
    *fetchCata(_, {
      call, put }) {
     
      const response = yield call(findAllCata);
	      yield put({
     
	        type: 'reloadCatalist',
	        payload: response.data,
	      });
    	},
	},
	reducers: {
     			//改变state只能在reducer中进行
    // 更新状态中的catalist
    reloadCatalist(state, action) {
     
      return {
     
        ...state,
        catalist: action.payload,
      };}
    }
}

4.在页面中

 //分发action，action是一个对象，对象中有俩个属性type（要进行的操作）,和payload（携带的数据）
 this.props.Db.dispatch({
     
      type:"Db/fetchCata"
 })

以上是react当中的redux机制。更详细的配置请参考自述redux。

项目部署

1.首先在config目录下config.js中配置

 manifest: {
     
    basePath: './',
  },
  base:'./',
  history:'hash',
  publicPath:'./',
  // outputPath:'',  输出目录命名，但是我在这里直接默认到dist中
  chainWebpack: webpackPlugin,
  proxy: {
     
    '/api/': {
     
      target: '接口地址',
      changeOrigin: false,
      pathRewrite: {
      '^/api': '' },
    },
  },

2.在项目的package.json文件中，加一个字段。

{
     
  "name": "resource-admin-ui",
  "version": "1.0.0",
  "private": true,
  "homepage": "."  //确保能找到打包之后的静态文件
  ...
}

3.注意的是，部署时src/services中的所有文件要使用数据交互当中的第2步中的部署写法，不要使用本地测试的写法。在命令台，进入项目的目录下，执行 npm run build。完毕之后目录下会出现dist文件夹。

4.利用FileZilla软件，连接到你的云服务器，把dist文件夹放到
/var/www/html 中即可。然后通过http://云服务器的IP地址:port(apache2的端口号)/dist 访问项目