测试平台系列(5) 引入Ant Design Pro
引入Ant Design Pro
回顾
还是继续回顾下之前的作业, 返回的中文变成了ascii字符，不要紧，我们光荣地百度一哈。
随便点进去看看，都可以找到正确答案:
可以看到，我们需要修改config中的「JSON_AS_ASCII」字段为False。
但是我们本身是没有这个配置项的，所以直接给加上就好了。
pity/config.py
import os
class Config(object):
ROOT = os.path.dirname(os.path.abspath(__file__))
LOG_NAME = os.path.join(ROOT, 'logs', 'pity.log')
# Flask jsonify编码问题
JSON_AS_ASCII = False
再试一下，可以发现问题完美解决了，这里篇幅原因就不上图了。
前言
在开始之前，希望读者们已经能够掌握了一部分「react」的知识，这里假定我们已经了解了react，redux和dva/umi相关的知识。并有做过相关练习。
如果还不了解以上相关的知识，建议去以下网站学习一遍，下面给出一个大概学习的路线吧。
-
html/css/js
这里推荐大家去w3cschool稍作了解，不过看本篇文章的同学肯定都是有一定基础的。那么就当做巩固好了。
-
es6
这里我没有系统看过教程，我是在一本叫做
react学习手册的书上面看到的。这里还是放一下地址吧，可以去阮一峰老师的博客看，也可以去这里学习es6的一些新特性。比如箭头函数，promise，let等。 -
react+redux
react的话，一开始我几乎是没有入门。拿着react-element里的demo就开始实操了，遇到了各种各样的问题。在寻找solution的时候遇到了一本名曰react小书的教程，觉得实在是再合适不过了。同时里面还有redux的部分教程(第三部分)。
-
dva
dva是一个封装了redux和router等方法的框架，掌握了它的api，可以快速完成react项目的开发。具体教程还请看 官网dvajs。
Ant Design Pro介绍
「Ant Design」(简称antd)，它是蚂蚁金服的前端设计团队出品的一款UI组件库，如果要类比的话，我会把他比作bootstrap，但是它又远远比bootstrap好看且交互性更强。而antd pro，就是它的专业版。为什么呢，因为antd pro已经是一个完整的中后台项目，我们如果需要快速开发的话，直接拿着里面的页面修改便是了。但是我个人总结了一下，缺点也很明显，就是antd pro做出来的系统几乎都长一个样，长久了会有审美疲劳，至少我对bootstrap也是这样的，当然蚂蚁出的东西品质是真的棒！
话不多说，先看看它的预览页面。
以下是随便截取的几个图片，感受一下它的美。
条件准备
-
确保你安装了「Nodejs」，这样你就拥有强大的包管理工具「Npm」
-
使用npm安装cnpm，因为国内有很多资源是访问受限的，所以需要淘宝开源的cnpm。
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
安装yarn
cnpm install -g yarn
-
安装Umi
cnpm install -g umi
-
创建antd pro项目
先在pity同级建立pityWeb项目, 然后进入pityWeb输入如下命令, 开始等待:
yarn create umi
选择ant design pro并回车
选择pro v4并回车
选择JavaScript并回车
选择simple并回车
选择ant design 4并回车
-
安装antd pro依赖包
进入「pityWeb」目录执行命令cnpm install
尝试在本地运行antd pro
-
尝试在本地运行antd pro
在「pityWeb」目录下输入npm start并回车
接着浏览器就自动打开了页面http://localhost:8000（如果没有的话就手动打开），那么我们的antd pro就成功部署了。
后端代码地址: https://github.com/wuranxu/pity
前端代码地址: https://github.com/wuranxu/pityWeb
「觉得有用的话可以帮忙点个Star哦QAQ」