以ant design pro示例框架为基础的前端开发小结

如上图，为ant design pro基本机构，最外层还有一个重要文件.roadhogrc.mock.js。

在该框架中，执行的基本逻辑如下：

 

1. 先搭建路由，src/common下有menu和router两个文件，先在menu里写入预备在slider里边展示的路径，然后在router里进行配置，将路由和文件的路径相匹配，并连接该页面的model（models文件夹下的文件，页面需要的）
2. 在src/routes下新建文件夹（eg:Temp）,可以在下边分别见index.js和index.less
3. 在src/components下写各页面公共组件。
4. 在src/models中建立页面所需model，最好名称对应（eg:temp）,该文件用来连接页面和services，主要内容是action（该页面调用了service的func）
5. 在src/services/api中配置页面进行前后台数据请求的路径并调用src/utils/request文件中fetch方法向后台发送请求
6. .roadhogrc.mock.js用于配置请求的url使前后台链接起来

• 在若用mock数据，在mock文件中写好并导出，如原文件，
•  或者 ‘GET /api/users' : getUser（mock文件导出的内容） 
• 当与后台联调时，改：‘GET /api/users' : { users : [ 1 , 2] }  为  'GET /api/users' : http://服务器id:端口号（eg: http://127.0.0.1:8080/）, 多个请求如下图写更方便，改域名的话直接改上边的变量：
• 
•             错！！！！ 
• 'GET /api/users' :  http://127.0.0.1:8080/api/users

    7.最后，可以在theme文件中改主体及各个基础设置，颜色，宽高，大小等；其他的theme不能改的样式，可以加类名或者找组件渲染之后的类名，在src的index.less中改

8.最近发现了fetch在IE中的兼容性问题，IE不识别promise，所以用babel-polyfill转，或者在发送请求的文件utils>request.js中，改fetch请求为ajax,我们之前的项目没有兼容IE，所以就不改了，但是在vue中处理过这个问题，可以在这个文件中二次封装原生ajax，嗯，应该也可以用jq，理论上，以后可以试一下，不过不喜欢引入太多框架，就ajax凑合用吧。。哈哈