回顾
上回我们编写好了添加项目和查询项目2个接口,那今天我们就把它应用到项目中吧!所以本节内容会以前端部分为主,目的是为了联调后端编写好的接口,并在页面上能够给用户使用。
调整项目表
是这样的,因为我们的项目有对应的图片,并且缺少描述字段,所以我们这里把项目表进行一些调整。
- 图片字段
- 描述字段
描述字段很好说,至于图片字段就比较麻烦了!如果对于单节点部署的应用,图片可以放入类似static的目录中,以xxx.jpg的形式存在。但是如果我们需要部署到多台机器的话,假设是2台机器,用户上传一次图片,其中只有一个服务接收到了图片文件,那就会很麻烦。
那么怎么解决这个问题呢?
在企业中,一般公司会有oss(云存储)服务,比如: 阿里云oss,腾讯云cos,还有七牛云等等。我之前太监的项目用的就是七牛云+自有域名,由于没续费,所以我们换一种简单的方式:
直接在数据库加一个TEXT字段,存放图片的base64数据,但是注意大小一定要限制,然后html里面通过img标签解析数据即可。
由于项目可能不太需要头像这种东西,以后这种图片留到个人头像会比较好一点,antd提供了文字头像,相信大家用过钉钉等IM工具的都知道,有的人如果没有头像的话,会用名字当头像比如"鸣人"。
所以我们这里就不用那么麻烦了,直接只加一个描述字段就好了!头像用默认的就行!
- 调整models/Project.py
- 调整ProjectDao.py
- 调整添加项目接口
把描述字段加进去即可,因为这个字段不是必填的,所以我们给他一个默认值: 空字符串
构思页面
回忆一下我们当时编写postman页面的时候,我们是把对应的组件分层了。由于我们当时做postman页面的时候是有成品给我们参考的,但是关于项目管理页面,我们的的确确是没有任何参考,所以我们先要在脑海里构思一下页面大概长什么样!
参考Ant Design Pro,我们就可以有个大概的方向了!
采用这种卡片列表,可以帮助我们展示项目。
引入滚动条
这个页面是我从之前一个太监了的项目里面拷贝来的,为了节约时间就继续沿用了。
- 安装依赖
cnpm install nprogress --save
在src/utils/utils.js添加方法
import NProgress from 'nprogress';
// 引入样式
import 'nprogress/nprogress.css'
export const process = async func => {
NProgress.start();
await func();
NProgress.done();
};
这样当我们需要在某个方法执行之前加载进度条的时候,调用process方法即可。
项目卡片列表页面代码
其实react并不是一个很复杂的框架,可能对于Jsx需要有一定的了解。
我们的组件都可以细分成4个部分:
-
引用
即引入其他组件或者库
-
状态管理
状态是什么概念呢,举个例子,你页面有个loading组件,什么时候他loading,什么时候结束loading,你通过什么来判断它是否loading,这个判断的变量,就叫做状态。
而咱们的页面也有很多地方通过状态来展示,比如我们通过data(数组)来存放我们的项目列表,初始化为空数组。当页面开始渲染,组件开始加载的时候,我们变去后端服务拉取数据,改写data数组,把项目的信息放入到数组里面。
注意,这个时候状态就发生了变更!react会自动对比变更的状态来渲染新的页面,这里面过程很复杂。建议去查阅react相关资料,笔者也不是很熟悉里面的细节,想要了解的话,去搜索virtual dom。
-
交互方法的编写
我们有很多组件都有涉及到一些交互方法,比如说: 点击某个按钮,触发什么事件。这些都是需要编写方法的,比如上图中 用户点击添加项目,我们需要做什么呢?
我们需要把对话框显示出来对不对?所以我们需要做的就是: 改变对话框的状态,把他从隐藏改为显示。
-
类HTML页面的编写
这一步比较简单了,采用jsx的语法去编写html页面。大体上和html都差不多,只不过这边可以写一些js代码,通过
{}
就可以包裹JS代码,相对来说还是很方便的!掌握了jsx,es6,基本上react上手就很快了!
import React, {
useEffect, useState } from 'react';
import {
PageContainer } from '@ant-design/pro-layout';
import {
Avatar, Button, Card, Col, Empty, Input, Popover, Row, Select, Spin, Tooltip } from 'antd';
import {
QuestionCircleOutlined } from '@ant-design/icons';
import FormForModal from '@/components/PityForm/FormForModal';
import {
history } from 'umi';
import {
listProject }