简介

某某管理系统(员工信息,学生成绩,办事流程等等)应该是很多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 originres.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发给服务器以获取数据。最后前端要跑在另一个服务器上,用户访问的时候是访问前端这个服务器的。关系差不多如下:

    这样做的好处就是两个服务器都可以启动热部署,开发效率比疯狂打包快得多得多,每一次更新都能立马进行调试。

    发布时

    当然是要打包了,首先打包前端,比如vue,就是 npm run build,获取dist文件夹,把这个dist文件夹塞到后端的静态文件那里去,然后制定index.html作为后端服务器启动入口,就大功告成啦!就想下图一样:

    总结

    这类管理项目侧重点在于前端,作为练手项目,我们基本是不可能遇到后端开发真正的难点的(协调,并发,分布式等)。所以想好好练后台开发的,尽早实习,看看实际业务代码会有很大帮助。前端还是布局和组件化思想比较重要,我这篇文章可能有很多地方是不对的,很多话也是不对,但是应该能对想做一个练手项目的你有点帮助。

web项目管理系统的设计相关推荐

  1. 基于Java EE平台项目管理系统的设计与实现(论文+PPT+源码)

    分类号_______________ 密级________________ UDC _______________ 学号 毕业设计(论文) 论文题目 基于Java EE平台项目管理系统的设计与实现 T ...

  2. 毕业设计 基于Web停车场管理系统的设计与实现

    文章目录 前言 一.项目设计 1. 模块设计 2. 实现效果 二.部分源码 项目源码 前言 今天学长向大家分享一个 java web 项目: 基于Web停车场管理系统的设计与实现 可用于毕业设计.课程 ...

  3. 基于WEB工作流管理系统的设计与实现

    出处: http://www.mypm.net/articles/show_article_content.asp?articleID=12162&pageNO=3 摘要:根据对工程项目管理的 ...

  4. java采购管理系统设计_毕业论文-基于java web企业采购管理系统的设计与实现.doc...

    惠州学院 HUIZHOU UNIVERSITY 毕 业 论 文(设 计) 中文题目:基于java web企业采购管理系统的设计与实现 英文题目:The design and implementatio ...

  5. Java项目管理系统 的设计与实现

    随着信息技术的飞速发展,商业之间的竞争也越演越烈,进入信息化时代,每个企业都必须紧跟时代的步伐,加强企业竞争力和提升现代化企业的管理能力,以适应整个社会的发展变化.然而网络化办公的出现正是给这一问题提 ...

  6. 毕业设计 - java web 酒店管理系统的设计与实现【源码+论文】

    文章目录 前言 一.项目设计 1. 模块设计 总体设计具体模块 数据库部分设计 2. 实现效果 二.部分源码 项目工程 前言 今天学长向大家分享一个 优秀的毕业设计项目: 酒店管理系统的设计与实现 一 ...

  7. html5 人力资源管理系统,基于web人力资源管理系统的设计与实现精要.doc

    引 言 人力资源管理就是预测组织人力资源需求并作出人力需求计划.招聘选择人员并进行有效组织.考核绩效支付报酬并进行有效激励.结合组织与个人需要进行有效开发以便实现最优组织绩效的全过程.运用现代化的科学 ...

  8. Oracle项目管理系统之设计任务下达及成果交付

    卷首语 如果设计管理人员把一个卷册中包含的图纸分批次多次提交,系统会根据图纸目录和图纸相关属性自动统计相关工作量.出图量.同时系统在后台汇总生成成果提交的最新版本图纸目录. 方案概述 设计管理是建设工 ...

  9. web项目API接口设计与开发总结

    当前公司自主开发的一个AI图片识别项目,需要对外开放提供接口,领导二话没说把这个任务交给我来做,算是对我的一次考验.虽然以前自己没有设计过接口,但是调用过别人写的接口,如百度提供的接口,还有以前在项目 ...

最新文章

  1. SC-A-LOAM:在A-LOAM中加入回环检测
  2. Android异步下载网络图片(其三:ExecutorService)
  3. 综述论文要写英文摘要吗_速成本科毕业论文初稿!!!
  4. PhpStrom xdeubg jet ide support
  5. jQuery常用的方法
  6. [ASP.NET 控件实作 Day14] 继承 CompositeControl 实作 Toolbar 控件
  7. daocloud创建mysql_GitHub - DaoCloud/php-apache-mysql-sample
  8. java ldap 分页_具有从属引用的 LDAP 分页查询未正确处理
  9. BZOJ——3343: 教主的魔法 || 洛谷—— P2801 教主的魔法
  10. Rust 逆袭!位列 Stack Overflow 2018 最受欢迎编程语言榜首
  11. 用MySQLdb操作数据库流程示例:
  12. django多条件筛选搜索(项目实例)
  13. ArcGIS中修改面图层中相邻面的公共边
  14. [Android] Windows 7下 Android studio 安装 Genymotion 来调试 Android 遇到的问题总结
  15. android studio 配置应用生成多个dex
  16. Windows小技巧:巧用CMD命令设置定时关机
  17. A-Unimodal Array
  18. Mac安装与使用MacTeX
  19. 浅聊前端程序员,后端程序员,全栈程序员的工作
  20. 有趣的十个Python实战项目,让你瞬间爱上Python!

热门文章

  1. c语言item需要什么头文件,==把VIM打造成开发C的IDE==
  2. python将字符串写成二进制文件
  3. 我见过的极品代码bug
  4. 程序三年,遇到的趣事盘点。
  5. 【工具使用】——Metasploit(MSF)使用详解(超详细)
  6. Rimworld Mod制作教程3 使用Xpath制作patch(补丁)
  7. 往事如烟 - 老钟27
  8. 合唱团招新策划20080905
  9. Web编程原理之HTTP协议
  10. stylus入门学习笔记