基于vue和node.js的志愿者招募网站设计

目录
一 技术简介 1
（一） HTML5技术简介 1
（二） CSS3 简介 1
（三）JavaScript语言简介 2
（四）ES6简介 2
（五）Vue.js 2.x 2
（七）npm包管理工具 2
（八）Express 3
（九）Vuex 3
（十）element UI 4
（十一） webpack 4
（十二）MySQL 5
（十三）Navicat 5
（十四）VScode 6
二、系统概要设计 6
（一） 系统需求分析 6
（二）可行性分析 7
1.技术可行性 7
2.经济可行性 7
3.操作可行性 8
（三）前台模块 8
（四）青旅老板模块 8
（五）后台模块 8
（五） 网站模型 9
（六）Server端模型 13
三、数据库设计 13
（一）数据概念结构设计 13
（二）数据库关系设计 13
四、 前台详细设计 15
（一）用户登录与注册 15
1.登录部分： 15
2.注册部分： 16
（二）网站首页 17
（三）招募列表页面 17
（四）招募信息详情 18
（六）招募信息管理 20
（八）404 NO FOUND 21
五、青旅老板端详细设计 22
（一）写在前面 22
（二） 登录页面设计 23
1.登录部分： 23
2.用户信息部分： 24
（三） 青旅管理 24
（四） 招募信息管理 25
（四） 个人信息管理 26
六、后台详细设计 26
（一）写在前面 26
1.权限控制部分： 26
（二） 招募管理与青旅页面设计 28
1.招募信息与青旅列表部分： 28
（三）学生管理页面设计 29
1.学生列表部分： 29
（五）管理员管理 30
七、Server端设计 30
（一）解决跨域问题 30
（二）文件系统 30
（二）连接数据库 31
（一）系统需求分析
客户端：
青旅老板：

1. 注册/登陆
2. 修改个人信息（密码、手机号等）
3. 编辑青旅信息（青旅名称，简介，省市，详细地址，邮箱，青旅图片（最少上传五张）））
4. 发布招募信息（招募标题，招募要求，工作待遇）
5. 查看应聘者信息
6. 对招募信息进行编辑/删除
   用户：
7. 注册（姓名、性别、出生年月、联系方式、身份证号、所在院校、附件等）/登录
8. 修改个人信息（密码、手机号等）
9. 关键字查询
10. 报名义工

管理端：
管理员：

1. 登陆
2. 审核注册用户信息
3. 审核招募信息
4. 修改密码
   超级管理员：
5. 新增、编辑、删除其他管理员信息
6. 普通管理员所有功能
   （二）可行性分析
   这里讲的可行性分析的任务是从技术上、经济上分析需解决的问题是否存在可行性。其目的是在尽可能短的时间内用尽可能小的代价确定问题是否有解。
   1.技术可行性
   技术上的可行性分析主要分析技术条件能否顺利完成开发工作，硬、软件能否满足开发者的需要等。
   本系统前端设计主要由Vue.js实现，vue 的开发体验是非常令人感到愉悦的。Vue在数据交互，组件化开发方面有非常大的优势，每个组件都是一个.vue文件，可以把页面拆成很多组件，方便开发与维护，使用时只需引入组件即可，通过vue-router实现路由跳转，可以很容易地创建单页面应用程序，只需要把vue-router添加到vue工程中，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。
   本系统数据库使用的MySQL，MySQL是最流行的关系型数据库管理系统，在WEB应用方面MySQL是最好的关系型数据库，轻量、开源、简便易用，使用Navicat Premium 12做数据库图形化管理更高效率进行前后端开发
   2.经济可行性
   如今是信息化时代，信息化管理可以使招募义工的管理工作更加系统化、快速化、全面化。这样可以为社会带来较高的工作效益和经济效益，本系统对计算机配置的要求不高，普通私人电脑都可以完全满足需要，本系统作为一个设计，其开发目的是为巩固所学知识，无需开发经费，因此在经济上也是可行的。
   综上所述，本系统的开发目标已经明确，且在技术和经济上都是可行的，因此系统的开发是完全可行的。
   3.操作可行性
   该系统如投入使用，本文转载自http://www.biyezuopin.vip/onews.asp?id=15085预期作到界面友好，管理方便，使用简单，管理人员经过培训，也是完全能够使用本系统管理相关信息的。
   综上所述，本系统的开发目标已经明确，且在技术和经济上都是可行的，因此系统的开发是完全可行的。

（三）前台模块
前台模块包括：
●首页 本网站的门面，包括导航栏，登录与注册，网站主banner图等。
●用户登录与注册 用户可以登录/注册本站账号
●用户修改个人信息 用户可以修改自己的密码，手机号，头像等个人资料
●招募信息展示 用户可以了解到本站提供的招募信息。
●查看招募详情 用户可以点击进入查看详情。
●关键字查询 用户可以根据关键字进行查询相关招募信息。
●报名招募（应召） 用户可以报名招募信息。
●应召列表 用户可以查看自己的应召列表，并点入查看详情。
（四）青旅老板模块
● 青旅管理 对青旅进行添加、删除、修改。
● 招募信息管理 对招募信息的添加、删除、修改、预览视频。
● 应召学生管理 查看应召学生信息。
● 个人资料管理 对个人资料进行修改。
● 登录注册

（五）后台模块
● 系统用户管理 对系统用户添加、删除、修改。
● 青旅信息管理 审核，删除青旅信息。
● 招募信息管理 审核，删除青旅信息。
● 学生管理 审核，删除学生信息。
● 青旅老板管理 审核，删除青旅老板。
● 个人信息管理 管理员可以修改自己的信息。
● 管理员管理 超级管理员可管理其他管理员信息。

var orm = require('orm');
var connection = null;

function setup(db, cb) {
  require('./product_info')(orm, db);
  require('./order')(orm, db);
  
…		// 引入更多数据库
  return cb(null, db);
}

module.exports = function (cb) {
  if (connection) return cb(null, connection);
// orm.express("mysql://root:1@localhost/question_system"
  orm.connect("mysql://root:1@localhost/question_system", function (err, db) {
    if (err) return cb(err);

    connection = db;
    db.settings.set('instance.returnAllErrors', true);
    setup(db, cb);
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23