引入 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 相关的知识。并有做过相关练习。

如果还不了解以上相关的知识,建议去以下网站学习一遍,下面给出一个大概学习的路线吧。

这里推荐大家去w3cschool稍作了解,不过看本篇文章的同学肯定都是有一定基础的。那么就当做巩固好了。

这里我没有系统看过教程,我是在一本叫做react学习手册的书上面看到的。这里还是放一下地址吧,可以去阮一峰老师的博客看,也可以去这里学习 es6 的一些新特性。比如箭头函数,promise,let 等。

react 的话,一开始我几乎是没有入门。拿着react-element里的 demo 就开始实操了,遇到了各种各样的问题。在寻找 solution 的时候遇到了一本名曰react 小书的教程,觉得实在是再合适不过了。同时里面还有 redux 的部分教程 (第三部分)。

dva 是一个封装了 redux 和 router 等方法的框架,掌握了它的 api,可以快速完成 react 项目的开发。具体教程还请看 官网 dvajs

Ant Design Pro 介绍

Ant Design(简称 antd),它是蚂蚁金服的前端设计团队出品的一款 UI 组件库,如果要类比的话,我会把他比作 bootstrap,但是它又远远比 bootstrap 好看且交互性更强。而 antd pro,就是它的专业版。为什么呢,因为 antd pro 已经是一个完整的中后台项目,我们如果需要快速开发的话,直接拿着里面的页面修改便是了。但是我个人总结了一下,缺点也很明显,就是antd pro做出来的系统几乎都长一个样,长久了会有审美疲劳,至少我对bootstrap也是这样的,当然蚂蚁出的东西品质是真的棒!

话不多说,先看看它的预览页面

以下是随便截取的几个图片,感受一下它的美。

条件准备

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g umi

先在 pity 同级建立 pityWeb 项目, 然后进入 pityWeb 输入如下命令, 开始等待:

yarn create umi

选择 ant design pro 并回车

选择 pro v4 并回车

选择 JavaScript 并回车

选择 simple 并回车

选择 ant design 4 并回车

安装成功截图

进入pityWeb目录执行命令cnpm install

尝试在本地运行 antd pro

pityWeb目录下输入npm start并回车

接着浏览器就自动打开了页面http://localhost:8000antd(如果没有的话就手动打开),那么我们的 pro 就成功部署了。

后端代码地址: https://github.com/wuranxu/pity

前端代码地址: https://github.com/wuranxu/pityWeb

觉得有用的话可以帮忙点个 Star 哦 QAQ


↙↙↙阅读原文可查看相关链接,并与作者交流