摘 要

Web前端开发技术更容易展示给用户视觉效果及操作体验，而数据库是一个计算机存储数据，处理数据最好的工具，服务器是前端向后端发送请求的必要工具，将三者所有的优点结合在一起就可以建设一个友好，视觉可观的科研项目管理系统页面。

该科研项目管理系统主要采取vue2.0框架 node的轻量级express框架搭建后台服务器 mongo数据库的技术开发科研项目管理系统，采用B/S模式，其中项目中页面还引用饿了么的ui库element ui，配合vue框架的使用，在Google 浏览器中即可查看系统页面，同时使用本系统的所有功能，方便用户体验。本文主要研究了高校对科研项目管理系统的需求，简单的设计，全面的设计，编写项目代码，检查bug，测试运行的模块。在本地不接入网络的情况下已经测试完成，能够完成基本的项目管理功能，具体的功能有登录系统功能，注册账号功能，修改账号信息功能，修改账号密码功能，注销用户功能，项目申请功能，项目审批功能，增加项目功能，删除项目,修改项目功能。

关键词: 申请；审批；项目管理；vue express mongodb

Research project management system based on Web

Abstract

Web front-end development technology is easier to show users visual effects and operational experience, while database is the best tool to store data and process data, and server is the front-end to send requests to the back-end. The necessary tools, combining all the advantages of the three together, can build a friendly, visual and considerable scientific research project management system page.

This scientific research project management system mainly adopts the technology of vue2.0 framework node lightweight express framework to build background server Mongo database to develop scientific research project management system. It adopts B/S mode, in which the page of the project also refers to hungry UI library element ui. With the use of Vue framework, the system page can be viewed in Google browser, and all the functions of the system can be used at the same time. Convenient user experience. This paper mainly studies the university's demand for scientific research project management system, simple design, comprehensive design, writing project code, checking bugs, testing and running modules. In the case of no local access to the network, it has been tested and completed, and can complete the basic project management function. Specific functions include login system function, registration account function, modify account information function, modify account password function, cancel user function, project application function, project approval function, increase project function, delete project function,edit project function.

Key words: application； approval； project management； Vue Express mongodb

目录

前言 1

1系统需求分析 2

1.1系统简介 2

1.2系统的用户需求 2

1.3系统模型图 3

2系统概要设计 4

2.1系统设计思想 4

2.2系统设计原则 5

2.3系统的特点 6

2.4系统结构分析 6

2.5系统功能模块划分 7

2.6数据库设计 7

2.7系统的开发平台 13

2.8系统的运行平台 14

3系统详细设计 16

3.1开发技术简介 16

3.1.1 html技术介绍 16

3.1.2 css技术介绍 16

3.1.3 javascript技术介绍 16

3.1.4 vue.js框架技术介绍 17

3.2详细设计功能模块图 17

3.3系统功能的详细描述 18

3.4用户功能描述 18

3.4.1学生功能 18

3.4.2教师功能 18

3.5系统模块的具体实现 16

3.5.1登录界面图 19

3.5.2学生注册图 20

3.5.3教师注册图 20

3.5.4审批申请图 21

3.5.5新建项目图 22

3.5.6成果新增图 23

3.5.7成果删除图 23

3.5.8成果修改图 24

3.5.9个人信息修改图 25

3.5.10密码修改图 26

3.5.11系统注销图 26

4系统测试及运行 27

4.1测试目的 27

4.2测试方法 27

4.3测试内容 27

4.4测试结果 29

4.5系统运行 29

结论 30

致谢 31

参考文献 32

前 言

在网络化的时代中，通过对科研项目管理方式的调查与统计，同时为了与社会不脱节，高校应该主动开发一款属于自己学校的科研项目管理系统，功能适用于本校的系统，且与科研项目管理工作对接完整。该系统的建立可以便利科研管理工作者，在时间，精力上超越普通的管理模式，为高校科研管理工作提供一个完美的网络工作环境。

学校教师通过填写传统的表格进行科研项目信息的申请，教师把填好的表格传递给学校科研项目管理部门，再由他们进行汇总和管理。与此同时，科研项目管理部门的人员还需要手动计算并统计老师和项目组的科研经费和专利费用；对于众多的科研项目申请表格进行审批，这样子，教师得到的反馈信息也就会很缓慢，所以这种科研项目管理方法经常出现错误，完成时间超时，项目工作量大，从而导致高校科研项目管理效率低的现象。教师希望能有相应的管理系统可以高效便利地进行科研成果的申报和项目的审批，学生也可以通过管理系统查看学校的科研成果。通过和学校教师与科研项目管理部门主管的交流后，为了调整学校科研项目管理的模式和提高效率，并且可以充分使用互联网的优势，开发一款适合学校使用的科研项目管理系统已经成为一个必要的趋势。

基于web的B/S开发模式的科研项目管理系统，是以前端相关技术为基础创建web页面来呈现给用户，在vue2.0框架中通过html css来构建静态页面，javascript来渲染页面的动态效果，本系统还引用了饿了么推出的elementui的插件来美化页面，前台的工作就完成了，之后使用node的一个小型框架express来自建服务器，服务器建好后连接mongo数据库，这样一个完整的科研项目管理系统就搭建完成了。一个完善的科研项目管理系统可以方便每一个老师和科研项目管理人员，使科研工作更加高效，便利。