21.编写项目的增删改查接口和页面(3)
回顾
上回我们编写好了添加项目和查询项目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 } from '@/services/project';
import auth from '@/utils/auth';
import { process } from '@/utils/utils';
const {Search} = Input;
const {Option} = Select;
export default () => {
const [data, setData] = useState([]);
const [pagination, setPagination] = useState({current: 1, pageSize: 10, total: 0});
const [visible, setVisible] = useState(false);
const [users, setUsers] = useState([]);
const [userMap, setUserMap] = useState({});
useEffect(async () => {
await process(async ()=> {
const res = await listProject({page: pagination.current, size: pagination.size});
if (auth.response(res)) {
setData(res.data)
setPagination({...pagination, total: res.total})
}
});
}, [])
const onSearchProject = projectName => {
// this.props.dispatch({
// type: 'project/fetch',
// payload: {page: 1, size: 1000, projectName}
// })
}
const onHandleModal = status => {
setVisible(status);
}
const onHandleCreate = values => {
// this.props.dispatch({
// type: 'project/insert',
// payload: values,
// })
}
const content = (item) => {
return <div>
{/* <p>负责人: {userMap[item.owner].name}</p> */}
{/* <p>简介: {item.description || '无'}</p> */}
{/* <p>更新时间: {item.updateTime}</p> */}
</div>
};
const opt = <Select placeholder="请选择项目组长">
{
users.map(item => <Option key={item.value} value={item.value}>{item.label}</Option>)
}
</Select>
const fields = [
{
name: 'projectName',
label: '项目名称',
required: true,
message: "请输入项目名称",
type: 'input',
placeholder: "请输入项目名称",
},
{
name: 'owner',
label: '项目负责人',
required: true,
component: opt,
type: 'select',
},
{
name: 'description',
label: '项目描述',
required: false,
message: "请输入项目描述",
type: 'textarea',
placeholder: "请输入项目描述",
},
{
name: 'private',
label: '是否私有',
required: true,
message: "请选择项目是否私有",
type: 'switch',
valuePropName: "checked",
},
]
return (
<PageContainer title={false}>
<FormForModal width={600} title="添加项目" left={6} right={18} record={{}}
visible={visible} onCancel={() => {
onHandleModal(false)
}} fields={fields} onFinish={onHandleCreate}
/>
<Row gutter={8} style={{marginBottom: 16}}>
<Col span={18}>
<Button type="primary" onClick={() => {
onHandleModal(true)
}}>创建项目
<Tooltip title="只有超级管理员可以创建项目"><QuestionCircleOutlined/></Tooltip>
</Button>
</Col>
<Col span={6}>
<Search onSearch={onSearchProject} style={{float: 'right'}} placeholder="请输入项目名称"/>
</Col>
</Row>
<Spin spinning={false}>
<Row gutter={16}>
{
data.length === 0 ? <Col span={24} style={{textAlign: 'center', marginBottom: 12}}>
<Card><Empty description="暂无项目, 快点击『创建项目』创建一个吧!"/></Card>
</Col> :
data.map(item =>
<Col span={4} style={{marginBottom: 12}}>
<Popover content={content(item)} placement="rightTop">
<Card hoverable bordered={false} style={{borderRadius: 16, textAlign: 'center'}}
bodyStyle={{padding: 16}} onClick={() => {
history.push(`/project/${item.id}`);
}}>
<Avatar style={{backgroundColor: '#87d068'}} size={64}
>{item.name.slice(0, 2)}</Avatar>
<p style={{
textAlign: 'center',
fontWeight: 'bold',
fontSize: 18,
marginTop: 8
}}>{item.name}</p>
</Card>
</Popover>
</Col>
)
}
</Row>
</Spin>
</PageContainer>
)
}
先大致瞅瞅这段代码，后续笔者会跟进讲解。今天内容就到这里吧~😁