游戏交流社区BBS论坛设计与实现

目录
一、绪论 3
（一）选题背景简介 3
（二）目的和意义 4
二 技术简介 4
（一） React 4
（二） Typescript 4
（三）Ant Design 4
（四）Redux 5
（五）Nest 5
（六）TypeORM 5
（七）MySQL 5
（八）Flutter 5
（九）VScode 5
三、系统概要设计 6
（一） 系统需求分析 6
（二）可行性分析 7
1.技术可行性 7
2.经济可行性 7
3.操作可行性 7
（五） 网站流程图 8

1. 管理端登录 8
2. 用户管理 9
3. 游戏分类管理 10
4. 游戏管理 10
5. 文章管理 11
6. 管理员管理 11
   （六） APP流程图 12
7. 首页 12
8. 文章页 12
9. 搜索页 13
10. 游戏专区页 13
11. 游戏分类页 13
12. 通知页 13
    四、数据库设计 14
    （一）数据概念结构设计 14
    （二）数据库模型图 14
    （三）数据库结构 15
    五、 前端部分 15
    （一）管理端部分 15
13. 登录部分 15
14. 用户管理 16
15. 游戏管理 17
16. 文章管理 20
17. 修改密码 22
18. 管理员管理 23
19. 404 26
    （二） 客户端部分 27
20. 首页 27
21. 侧边栏 28
22. 登录页面 30
23. 注册页面 31
24. 文章页 34
25. 游戏专区页 41
26. 分类页 44
27. 分类结果页 45
28. 搜索页 46
29. 搜索结果页 49
30. 收藏与关注 51
31. 通知 53
    六、后台部分 55
32. 鉴权 55
33. 分类 56
34. 文件存储 58
    结论 59
    三、系统概要设计
    系统的设计主要管理端、客户端和服务端。
    管理端是后台管理人员使用的，包括登入/登出、用户管理、游戏分类管理、游戏管理、文章管理、修改密码、管理员管理等功能
    客户端是用户使用的，包括登录与注册、个人信息设置、查看文章列表、搜索游戏与文章、按分类查找游戏、查看游戏专区、查看文章详情、收藏与关注、评论等功能
    服务端用于对前台请求的校验、处理与响应、对数据库的增删改查等功能
    （一）系统需求分析
    管理端：
    1.登录/登出
    2.用户查询/删除
    3.游戏分类的新增/删除/编辑
    4.游戏的查询/新增/删除/编辑
    5.文章的查询/新增/删除/预览
    6.修改个人密码
    7.管理员的查询/新增/删除/重置密码
    客户端：
    1.首页展示最新文章列表
    2.注册/登录/登出
    3.查询游戏与文章
    4.根据分类查询游戏
    5.查看文章详情
    6.查看游戏专区
    7.对文章添加/取消收藏
    8.对游戏关注/取消关注
    9.评论文章
    10.查看对我的评论
    11.查看我的收藏/批量取消收藏
    12.查看我的关注/批量取消关注
    13.修改个人信息
    （二）可行性分析
    这里讲的可行性分析的任务是从技术上、经济上分析需解决的问题是否存在可行性。其目的是在尽可能短的时间内用尽可能小的代价确定问题是否有解。
    1.技术可行性
    技术上的可行性分析主要分析技术条件能否顺利完成开发工作，硬、软件能否满足开发者的需要等。
    本系统管理端使用React实现，React可以非常轻松地创建用户交互界面，设计简洁的状态视图，在数据改变时，高效地更新渲染界面。使用虚拟DOM的概念，性能好，速度快。虚拟DOM帮助解决了跨浏览器问题，并为我们提供了标准化的API。代码一切皆是组件，更加模块化，重用代码更容易，本文转载自http://www.biyezuopin.vip/onews.asp?id=14577可维护性高。
    客户端使用Flutter。Flutter的优点非常明显，如果你选择一个跨平台框架，与众多基于html的跨平台框架相比，Flutter绝对是体验最好，性能与构建思路几乎最接近原生开发的框架。
    服务端使用Nest.js。NestJS 是一个精心制作的服务器端（后端）应用程序框架，以支持开发人员的生产力。

import React from "react";
import { Form, Icon, Input, Button, Checkbox, message } from "antd";
import { FormComponentProps } from "antd/es/form";
import { useHistory } from "react-router-dom";
import styled from 'styled-components';
import { loginApi } from '@/api/user'
import { setToken } from '@/utils/cookie'
import md5 from "js-md5";

const Title = styled.div`
	text-align: center;
	font-size: 30px;
	height: 80px;
`

interface IUserFormProps extends FormComponentProps {
	name: string;
	password: string;
	remember: boolean;
}
interface ILoginResErr {
	code: number
	msg: string
}
interface ILoginResSucc {
	token: string
}
const LoginCard: React.FC<IUserFormProps> = props => {
	const hisrory = useHistory()
	const handleSubmit = (e: React.FormEvent<EventTarget>) => {
		e.preventDefault();
		props.form.validateFields(async (err, values) => {
			if (!err) {
				const res = await loginApi<ILoginResSucc, ILoginResErr>({ name: values.name, password: md5(values.password) })
				if (res.code) {
					message.error('用户名密码错误，请重试')
				} else {
					if (values.remember) {
						setToken(res.token)
					}
                    message.success('欢迎回来！')
					hisrory.push('/dashboard')
				}
			}
		});
	};
	const { getFieldDecorator } = props.form;
	return (
		<>
			<Title>
				登录系统
			</Title>
			<Form onSubmit={handleSubmit}>
				<Form.Item>
					{getFieldDecorator("name", {
						rules: [{ required: true, message: "请输入用户名！" }]
					})(
						<Input
							prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
							placeholder="用户名"
						/>
					)}
				</Form.Item>
				<Form.Item>
					{getFieldDecorator("password", {
						rules: [{ required: true, message: "请输入密码！" }]
					})(
						<Input
							prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
							type="password"
							placeholder="密码"
						/>
					)}
				</Form.Item>
				<Form.Item>
					{getFieldDecorator("remember", {
						valuePropName: "checked",
						initialValue: true
					})(<Checkbox>记住密码</Checkbox>)}
					<Button
						type="primary"
						htmlType="submit"
						block={true}
					>
						登录
          			</Button>
				</Form.Item>
			</Form>
		</>
	);
};
export default Form.create<IUserFormProps>()(LoginCard);