Antd Pro使用过程的总结记录

前端文件

基于Ant Design Pro

这里是Antd Pro使用过程中的总结

1. 关于和服务端连接的问题。
   Antd Pro与后端相连的方法都集中在model文件夹内，采用redux和Promise异步操作来获取服务器数据。关于这方面的知识，参考 页面加载原理及过程，@connect 装饰器
   总结来说，
   • 在class外，@connect装饰器中，添加与model中某一文件中namespace同名的参数。
   • componentDidMount方法中，从props取到dispatch，dispatch中type定义为namespace/函数名，payload定义为传给后端的参数。
   • 在@/services/api.js文件中增加到后端url的request，Antd Pro会将payload中的参数转为json发送到后端url。
   • 同时要在models文件夹中的js文件定义reducer函数，用于将从服务器得到的参数更新state。
   • 最后在class中用props得到namespace同名的参数，这个object就是从后端拿来的。
2. 关于所有页面新增或提交数据，但是页面需要刷新才能显示的问题
   依靠上一个问题的知识，本来以为在handleSubmit中的参数e表示当前事件，e.preventDefault();可以实现不刷新页面更新数据，这是没问题的，但是要在reducer函数中更新数据。本前端中，每次handleSubmit都没有调用reducer方法，也就意味着state没有更新，页面就不会重新渲染，必须刷新后，在重新从服务器拿数据，更新页面。这也是后期需要改进的地方。
3. 关于提取组件的方法
   在components文件夹内新建dir，在dir内新建index.html，index.less，然后再pages页面中，import XXX from '@/components/XXX';调用时
4. 关于同一对话框，不同提交方法的解决方案
   会有同一Modal，但是需要根据不同情况做出不同解决的情况。例如，收货地址页面，新增地址和修改地址所用对话框一样。目前想到两个办法解决。
   • 靠后端，点击modal确定按钮后，将这个数据增加id属性，传给后端，后端根据数据库中有没有这个id决定更新还是增加
   • 靠前端，点击新增按钮，采用handleSubmit方法，点击修改按钮，采用handleUpdate方法。此方法在state中增加一个控制属性，根据情况判断修改即可。
5. 关于箭头函数和this的问题
   懵懵懂懂，暂未解决
6. 关于页面跳转逻辑的问题
   • 用户未登录时，不能访问个人中心。
     通过cookie解决。登录或注册成功后，后端带上cookie发过来，前端取到cookie，若cookie为空，点击个人中心转到登录界面。
   • 购物车界面点击提交订单时，如果没有收货地址，则跳转到收货地址界面，如果没有个人数据，则跳转到个人数据界面。
     点击提交按钮，在handleSubmit函数中，利用第一个问题的解决方案，从后端拿到收货地址数据，个人信息数据，if判断，为空跳转。
7. 关于在耦合表格和列表的问题
   购物车界面，通过table来显示用户购物车信息，但是需要用户选择身体数据，所以身体数据需要作为table中的一项，table中增加一个option，在table中的column数组中，可以支持render函数，并且这个函数会拥有两个参数，第一个参数是这一行这个dataIndex的值，第二个参数是这一行的object，这使得option能实现。将option抽离成为一个class,connect，dispatch得到身体数据列表，map返回option，即可实现。
8. 关于商品详情页设计问题
   import { Link } from 'dva/router'。设计详情页模板，在商品页用包括商品，id为商品的id，点击商品后，从服务器拿到这个id的商品，即可显示。
9. 关于设置启动端口的问题
   在package.json中，在scripts下某个命令，修改为"set port=8000 && XXX"，使用这个命令时，可以指定端口。
10. 关于改变网页标签logo和默认title的问题
    src/document.ejs文件，修改title，public/文件夹下，替换所有图片为自己的logo。页面内的svg格式的logo在src/assets
11. 关于网页静态资源例如图片等的存放问题
    我才用所有图片放在npm run build打包后的static文件夹中，使用时http://nginx-ip/static/.../...png...，其实也可以用nginx实现动静分离
12. 未完待续…

前端小白，如有错误，烦请指正?