1.项目介绍
1.1 此项目为一个前后台分离的后台管理SPA，包括前端PC应用和后端应用
1.2 包括用户管理/商品分类管理/商品管理/权限管理等功能模块
1.3 前端：使用React全家桶 + antd + axios + es6 + webpack等技术
1.4 后端: 使用Node + Koa + 云mongodb 数据库
1.5 采用模块化和组件化和工程化的模式开发
2. 项目功能界面
- 登录页面
- 商品修改和添加页面
3. 项目源码基本目录设计
4. 项目开发部分细节
- 配置代理。首先，npm i http-proxy-middleware。然后在src/文件夹新建一个名为setupProxy.js的文件。写入以下代码
- 注释：其中target: http://localhost:5000 (这个填自己后端开发时的地址)
"/api" 为请求前缀，这个必须要和后端开发的一致。可以填自己喜欢的。
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api', { target: 'http://localhost:5000' }));
};
- 以下为antd自定义主题，其中首先需要安装。npm i customize-cra。然后在项目根目录下新建config-overrides.js
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}),
);
5. 总结
