web项目管理系统的设计

简介

某某管理系统（员工信息，学生成绩，办事流程等等）应该是很多web开发者最先接触到的项目之一，也是许多非科技企业主要维护的项目，可以说是学习web项目最佳练手工具，虽然很老旧，但依旧充当着很重要的角色。

本人也开发过某某管理系统（大作业项目），因此来分享类似的web项目的开发流程和知识点。

关系模式设计（ER）

根据要设计的管理系统，我们需要对其涉及的实体以及关系进行抽象。也就是要设计出经典的ER图。以影院管理系统为例，实体主要包括：电影院，电影，排片等等，关系主要包括：影院——电影，顾客——订单，电影——排片等等。其实也不困难，这些在设计表结构的时候需要多注意，我们要注意到哪些属性受到哪些属性制约的，分清楚强实体集和弱实体集。

能画清楚ER图，就很好设计sql了，这些不搞清楚，后面增删改查的时候，问题就大了。打个比方，订单信息是弱实体集，同时也是复合实体，它与排片之间有联系，与顾客之间也有联系。所以这个表必须用REFERENCES（外键）设计好。不然你改了影片名，顾客名，这订单却一点没变化，数据就不一致了。而且你可以会加上修改订单的功能，如果没设计好依赖关系，表是错的，操作到后面数据全乱了也有可能发生。

开发框架敲定

总得拿个工具来开发是吧！所以要想好用什么来开发。

如果是团队项目，最好是前后端分离，不然一人挑大梁，其他人就反馈bug，比较难合作，要合作也只能分配不同的板块进行设计，不高效。

如果是个人项目，最好也是前后端分离，毕竟是主流，这样可以学很多东西。当然，要学php，学jsp，就没必要分了，页面效果和数据都在自己操作之下，说实话开发起来还更快。

前端：三大框架最值得学习的（Vue/Angular/React），其中最推荐Vue，因为最简单，接着是React，大厂用得多，Angular语法想较前两者可能复杂点。
前端UI：写界面还是很难的，当然，想认真学通css的自己写比较合适，不然就乖乖用UI，UI和前端框架一般是相契合的，根据你选的前端框架查一下。
后端：1. 主要学前端的可以考虑 express，超级简单，而且可以熟悉nodejs，或者考虑flask，python好用且易学，我们就不用纠结各类配置。2. 主要学后端的，首先是推荐java，学习资料多，而且企业用的也多，难点在于环境配置，各种依赖烦得很。其次是推荐golang，这是一门有活力的语言，竞争压力比java小很多。

下面我就以 vue + element-ui + express 为例子，谈谈接下来的开发。

前端设计

前端以vue为开发框架，采用element ui作为ui框架进行开发，核心是应用vue的组件化开发思想。也就是开发时，构思好你想看到的界面和想用到的功能，一个一个击破，最后再联系在一起。

组件管理与设计

前端三大框架都有组件的思想，由于采用了element-ui，很多组件不需要我们写（比如菜单栏目，布局，表格，页码等等）。但是一些大的组件（一般单独放在page/view文件夹里）还是要分出来的，比如：影院信息管理页面组件，顾客信息管理页面组件，订单管理页面组件等等。

另外，组件自然是抽离得越细越规范，比如你可以把一个简单的信息展示（几个

标签或者几个

标签就能解决的）也抽出来。但是没必要，最后管理起来很麻烦。所有这种抽离的小组件应当放在common或者特定的文件夹下，与主视图组件区分开来。

组件访问逻辑

你可以用导航栏+a标签进行跳转，当然，还是前端路由更为推荐。

前端路由用的是hash或history，可以做到页面不刷新。我们只要吧导航栏和前端路由表结合在一起，就可以轻松的做到点击导航栏跳转到对应的视图组件。

https://blog.csdn.net/CSDN_Yong/article/details/104186851

前端路由可以参考上面链接的文章

组件代码的编写

这个是基本功，像vue只要用好@和:这两个就能写出很多东西了，不知道怎么写可以考虑去github多搬运代码就会了。

cookies的使用

import cookies from 'vue-cookies'
Vue.use(cookies);

登陆控制一般是要用到的，而且你要阻止用户企图未登陆就通过修改url的方式访问到对应的组件。这时候只要比对cookies是否存在就可以判断先前有没有登陆。具体怎么用可以查阅其他文章。

后端实现

这一块不同的框架细节不太一样。但简单来说，就是根据前端的要求提供出一系列的api并对数据库进行各种操作。

基本构造（express）

//app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var session = require('express-session');
var indexRouter = require('./routes/index');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//托管静态文件
app.use(express.static('public'));
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.listen(3000);
module.exports = app;

express脚手架基本就自带了上面的东西。use那里主要看开发要用到什么，要到的就用npm搞进去就行。

跨域错误避免

app.all("*", function(req, res, next) {
 if (!req.get("Origin")) return next();
 // use "*" here to accept any origin
 res.set("Access-Control-Allow-Origin","*");
 res.set("Access-Control-Allow-Methods", "GET");
 res.set("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-
Type,Accept");
 // res.set('Access-Control-Allow-Max-Age', 3600);
 if ("OPTIONS" === req.method) return res.sendStatus(200);
 next();

静态资源存储

一般不同后端框架存储文件夹不太一样，不过可以肯定的一点，必须在代码中指定出来（也可能可以在IDEA中标出来，反正肯定不是直接放）。设置好之后，这个文件夹一般就放图片文件。

API接口设计

与前端协商好，需要请求或上传哪些数据，然后制定相应的url就可以了。

API接口实现

都是要导入依赖项的，也要提前配置好依赖（比如javaweb有单独的依赖配置文件），导入后，我们可以调用sql接口。以express为例子。

const mysql = require('mysql');
const conn = mysql.createConnection({
 host:'localhost',   //数据库地址
 user:'root', //用户名
 password:'123456', //密码
 database:'mysql' //数据库名
});
conn.connect();
module.exports = conn;

配置数据库，这个最好单独做成一个文件。

conn.query(sqlStr,[name,password],(error,result,field)=>{
	\\dosomething
})

然后我们就可以通过这个东西查询数据库了。

学好ajax，又知道怎么查数据库了，其他不是很大的问题。当然，大的项目后台是要考虑并发，代理什么的，这里不考虑。

前后端联合开发

在不分前后端时，比如传统的jsp+java+servlet可能不太好区分。在分离的情况下，一般采用下面的套路（当然是限于小型项目，那些企业级的大有手段协调开发）

开发时

在前后端分离的情况下，后台维护API，数据库，前端维护界面就行。一般就是后台跑在某个服务器上，给出端口和基础的url，前端根据基础的url和端口拼接对应的请求url发给服务器以获取数据。最后前端要跑在另一个服务器上，用户访问的时候是访问前端这个服务器的。关系差不多如下：
在这里插入图片描述
这样做的好处就是两个服务器都可以启动热部署，开发效率比疯狂打包快得多得多，每一次更新都能立马进行调试。