基于vue和express的义工招募系统

Jonesy

发布日期: 2021-04-11 14:17:26 浏览量: 39
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

一、技术简介

1.1 HTML5技术简介

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

1.2 CSS3 简介

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性,这也让跨浏览器开发变得复杂。

1.3 JavaScript语言简介

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是脚本语言JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。JavaScript 很容易学习。

1.4 ES6简介

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,于2015年6月批准通过。ECMAScript6的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。让代码更加准确,更易于阅读。

ECMAScript是JavaScript语言的国际标准,JavaScript是ECMAScript的实现(ES是规范,JS是实现)。在日常场合,这两个词是可以互换的。

1.5 Vue.js 2.x

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

1.6 npm包管理工具

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用

  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用

  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

1.7 Express

基于 Node.js 平台,快速、开放、极简的 web 开发框架。

  • Web 应用:Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用

  • API:丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮、友好的 API 变得既快速又简单

  • 性能:Express 不对 Node.js 已有的特性进行二次抽象,我们只是在它之上扩展了 Web 应用所需的基本功能

1.8 Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

这个状态自管理应用包含以下几个部分:

  • state:驱动应用的数据源

  • view:以声明方式将 state 映射到视图

  • actions,响应在 view 上的用户输入导致的状态变化

但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。

1.9 element UI

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

  • 一致性 Consistency

    • 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念
    • 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等
  • 反馈 Feedback

    • 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作
    • 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态
  • 效率 Efficiency

    • 简化流程:设计简洁直观的操作流程
    • 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策
    • 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担
  • 可控 Controllability

    • 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策
    • 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等

1.10 webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

1.11 MySQL

Mysql是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的RDBMS(Relational Database Management System:关系数据库管理系统)应用软件之一。

在本教程中,会让大家快速掌握Mysql的基本知识,并轻松使用Mysql数据库。

  • Mysql是开源的,所以你不需要支付额外的费用

  • Mysql支持大型的数据库。可以处理拥有上千万条记录的大型数据库

  • MySQL使用标准的SQL数据语言形式

  • Mysql可以允许于多个系统上,并且支持多种语言。这些编程语言包括C、C++、Python、Java、Perl、PHP、Eiffel、Ruby和Tcl等

  • Mysql对PHP有很好的支持,PHP是目前最流行的Web开发语言

  • MySQL支持大型数据库,支持5000万条记录的数据仓库,32位系统表文件最大可支持4GB,64位系统支持最大的表文件为8TB

  • Mysql是可以定制的,采用了GPL协议,你可以修改源码来开发自己的Mysql系统

1.12 Navicat

Navicat 是一套能帮助你快速直观地构建精确模型的图形化工具,使各个层面的用户都能轻松地创建高品质的数据模型。它能为专业人士提供适合其特殊需要的复杂功能,但是对数据模型的新手来说又相当容易上手。

创建一个优良的数据模型可以是很困难的。我们将一切保持简单方便,让你专注于你的数据库设计,而不会令得它变得更复杂。

为了让你无需花费时间学习,便能对你的模型有一个简单而精确的了解,Navicat 拥有难以置信的迅速反应和简洁美观的设计,大大增强了其性能和可用性。

再加上准确的字段类型预测功能和无限次的撤消或重做功能,它就能减省开发所需的时间并提供一个快捷高效的方式来创建和编辑你的表或视图结构。

无论你是想从一个数据模型创建新的数据库,或者从现有数据库导入数据模型。Navicat Data Modeler 就是你所需要的工具。

从设计表或视图,设定关系,甚至插入标签、笔记和图像到模型,它能简化复杂的设计过程,并提供能够满足你需求、帮助你有效地达致自己目标的有用经验。

一个设计优良的模型能提高效率和数据质量,并且可以让不同的人都能清楚地理解。

Navicat透过提供设计概念、逻辑和物理模型的能力,增强了业务和信息技术专业人士之间的沟通和协作。使用全面的绘图工具,丰富你的模型设计,绘制属于你的形状,线条和标签。

1.13 VScode

Visual Studio Code(以下简称vscode)是一个轻量且强大的代码编辑器,支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C++、C#、Python、PHP等其他语言。

据vscode的作者介绍,这款产品可能是微软第一款支持Linux的产品。

微软对于vscode的定位如下图,位于编辑器与IDE之间,但是更像一个编辑器。有人说是披着编辑器外衣的IDE,我觉得是披着IDE外衣的编辑器。

深入了解了vscode之后发现了vscode很贴心地内置了很多功能,让我觉得我可以很快适应到vscode的使用。

二、系统概要设计

系统的设计主要前台和后台两个部分,前台客户端是展现给用户的,包括登录注册、查看招募信息、搜索招募信息、查看招募详情、查看图片、报名应召、修改个人信息,查看个人应召信息等功能。前台青旅老板端是给青旅老板使用的,包括登录注册、发布/更改应召信息、发布/更改青旅信息、查看应召学生个人资料、修改个人信息等功能。后台管理端是给网站管理员使用的,包括审核学生信息、审核青旅老板信息、审核青旅、审核招募信息、对以上信息的删除、超级管理员可对管理员进行增删改等功能。

2.1 系统需求分析

  • 客户端

    • 青旅老板
      • 注册/登陆
      • 修改个人信息(密码、手机号等)
      • 编辑青旅信息(青旅名称,简介,省市,详细地址,邮箱,青旅图片(最少上传五张))
      • 发布招募信息(招募标题,招募要求,工作待遇)
      • 查看应聘者信息
      • 对招募信息进行编辑/删除
    • 用户
      • 注册(姓名、性别、出生年月、联系方式、身份证号、所在院校、附件等)/登录
      • 修改个人信息(密码、手机号等)
      • 关键字查询
      • 报名义工
  • 管理端

    • 管理员
      • 登陆
      • 审核注册用户信息
      • 审核招募信息
      • 修改密码
    • 超级管理员
      • 新增、编辑、删除其他管理员信息
      • 普通管理员所有功能

2.2 可行性分析

这里讲的可行性分析的任务是从技术上、经济上分析需解决的问题是否存在可行性。其目的是在尽可能短的时间内用尽可能小的代价确定问题是否有解。

2.2.1 技术可行性

技术上的可行性分析主要分析技术条件能否顺利完成开发工作,硬、软件能否满足开发者的需要等。

本系统前端设计主要由Vue.js实现,vue 的开发体验是非常令人感到愉悦的。Vue在数据交互,组件化开发方面有非常大的优势,每个组件都是一个.vue文件,可以把页面拆成很多组件,方便开发与维护,使用时只需引入组件即可,通过vue-router实现路由跳转,可以很容易地创建单页面应用程序,只需要把vue-router添加到vue工程中,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。

本系统数据库使用的MySQL,MySQL是最流行的关系型数据库管理系统,在WEB应用方面MySQL是最好的关系型数据库,轻量、开源、简便易用,使用Navicat Premium 12做数据库图形化管理更高效率进行前后端开发

2.2.2 经济可行性

如今是信息化时代,信息化管理可以使招募义工的管理工作更加系统化、快速化、全面化。这样可以为社会带来较高的工作效益和经济效益,本系统对计算机配置的要求不高,普通私人电脑都可以完全满足需要,本系统作为一个设计,其开发目的是为巩固所学知识,无需开发经费,因此在经济上也是可行的。

综上所述,本系统的开发目标已经明确,且在技术和经济上都是可行的,因此系统的开发是完全可行的。

2.2.3 操作可行性

该系统如投入使用,预期作到界面友好,管理方便,使用简单,管理人员经过培训,也是完全能够使用本系统管理相关信息的。

综上所述,本系统的开发目标已经明确,且在技术和经济上都是可行的,因此系统的开发是完全可行的。

2.3 前台模块

前台模块包括

  • 首页:本网站的门面,包括导航栏,登录与注册,网站主banner图等

  • 用户登录与注册:用户可以登录/注册本站账号

  • 用户修改个人信息:用户可以修改自己的密码,手机号,头像等个人资料

  • 招募信息展示:用户可以了解到本站提供的招募信息

  • 查看招募详情:用户可以点击进入查看详情

  • 关键字查询:用户可以根据关键字进行查询相关招募信息

  • 报名招募(应召):用户可以报名招募信息

  • 应召列表:用户可以查看自己的应召列表,并点入查看详情

2.4 青旅老板模块

  • 青旅管理:对青旅进行添加、删除、修改

  • 招募信息管理:对招募信息的添加、删除、修改、预览视频

  • 应召学生管理:查看应召学生信息

  • 个人资料管理:对个人资料进行修改

  • 登录注册

2.5 后台模块

  • 系统用户管理:对系统用户添加、删除、修改

  • 青旅信息管理:审核,删除青旅信息

  • 招募信息管理:审核,删除青旅信息

  • 学生管理:审核,删除学生信息

  • 青旅老板管理:审核,删除青旅老板

  • 个人信息管理:管理员可以修改自己的信息

  • 管理员管理:超级管理员可管理其他管理员信息

2.5 网站模型

客户端用户注册流程图

客户端用户首次登陆流程图

客户端拉取信息流程图

客户端权限验证流程图

管理员首次登录流程图

管理员登陆拉取信息流程图

管理员异步加载权限路由流程图

2.6 Server端模型

系统基本结构

利用Express服务器,用于连接客户端和数据库服务器。对于客户端发出的需要对数据库进行访问的请求,Express服务器负责客户端与数据库服务器的网络通信,并将相关数据嵌入返回给客户端的页面;对于客户端发出的不需要对数据库进行访问的请求,Express服务器将直接处理这些请求,并将最终生成的数据发往客户端浏览器。

三、数据库设计

3.1 数据概念结构设计

E-R模型是数据进行第一层抽象的表示方法。它的主要成分包括:实体、联系和属性。我们可以用E-R图将内容表达出来,辅助设计的实现。

3.2 数据库关系设计

该系统数据库关系图如下所示:

数据库前端关系

数据库后台关系图

四、前台详细设计

4.1 用户登录与注册

4.1.1 登录部分

用户手动登录,将用户名密码发送到Server,Server用时间戳生成一个token返回前台,然后根据此token去Server端获取用户信息,若登录时勾选了自动登录,这个token会存放在cookie里,并且有效期为七天,下次进入页面,浏览器读取cookie自动登录。

由于vue本身状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长,状态管理比较复杂,所以登录状态我使用Vuex进行状态管理,把登录状态和用户个人信息在state里进行托管,在vue组件里用computed计算属性监听变化,当获取数据的时候通过commit调用mutations中的方法修改state中的,这样每次当登录状态改变的时候,整个vue项目中的登录状态都会改变。

4.1.2 注册部分

用户注册需要校验很多权限,用户名长度应在5-16字符之间并且只能以汉字、字母开头,密码须以字母开头,长度在6~18之间,只能包含字母、数字和下划线,两次密码需要一致,手机号需要支持最新的网段,该系统中我还加入了最新的166网段的手机号验证,保证用户注册正常填写信息。

输入用户名后,可以点击“验证用户名”按钮检验该用户名是否被注册,只有当用户名检验通过并且表单项全部验证正常才可提交表单。

为了避免检验用户名后该用户名在其他地方被注册,在后台我做了一个容错机制,当发生该情况时后台向前端发送一个“手慢了哦,该用户名已被占用,换一个试试吧”的消息,确保用户名在数据库中不会重复。

4.2 网站首页

网站首页和很多功能类网站类似,首页为登录注册,登录成功后显示基本个人信息。

4.3 招募列表页面

招募列表页面通过查询数据库获取数据并通过vue的v-for指令循环出列表,在输入框中输入关键字可查询到相关招募信息,点击列表的item可进入详情页面。

4.4 招募信息详情

招募详情页由课程列表页跳转路由而来,跳转时直接在url后拼上参数,以便分享连接,每次进入页面根据url参数获取课程信息,若链接不带参数,则会跳入404页面。

代码

当游客(未登录用户)浏览课程详情时不会发送匹配订单的请求,招募按钮不会显示,只会显示请先登录,Vue组件中watch监听isLogin的变化,当Vuex中的状态改变,Vue中的计算属性isLogin也随之改变,触发监听事件,发起查询order的接口,判断当前用户是否已报名次招募,如果已应召,卡片中的按钮会变为“已应召”,并将状态变为disabled。

已报名状态

未应召状态

前端代码

Server端代码

4.5 招募信息管理

在招募信息页面中,进入页面先对用户是否登录进行判断,如果未登录,则弹出提示框并强制跳转路由至首页,这个功能在修改个人资料,查看收藏夹同样适用,进入页面后可以查看自己的历史应召信息。

应召信息管理

代码实现

4.6 404 NO FOUND

五、青旅老板端详细设计

5.1 写在前面

后台管理部分使用Vue做基础框架,用Vuex做状态管理,用element UI做UI框架。

对数据的增和改,调用的同一个接口,减少代码复杂度,由于修改数据,必须传入id,通过id修改数据库内容,当我增加数据的时候,只需要不传入id,在后台做一个判断,当id不存在,则进行增加数据操作,若有id,则通过id对数据库进行更改。

自动增加代码

以下所有删除部分的处理在页面上与增改功能不同,增改在发送请求后,返回一个异步的response ,由于增和改数据处理较复杂,所以选择处理后重新发送请求,获取数据,重新绘制表格上的数据。

自动跟新代码

而删除部分,在获取到异步response之后,只是将页面上的该条数据删除,没有重新发送获取数据的请求,减少发送请求次数,减轻页面和服务器负担。

5.2 登录页面设计

进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能。我们所要做到的是:不同的权限对应着不同的路由,同时侧边栏也需根据不同的权限,异步生成。这里先简单说一下,我实现登录和权限验证的思路。

  • 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到cookie中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息)

  • 权限验证:通过token获取用户对应的 role,动态根据用户的 role 算出其对应有权限的路由,通过 router.addRoutes 动态挂载这些路由

上述所有的数据和操作都是通过vuex全局管理控制的。(补充说明:刷新页面后 vuex的内容也会丢失,所以需要重复上述的那些操作)接下来,我们一起一步一步实现这个系统。

5.2.1 登录部分

登录成功后,服务端会返回一个 token(该token的是一个能唯一标示用户身份的一个key,这里用时间戳简单代替),之后我们将token存储在本地cookie之中,这样下次打开页面或者刷新页面的时候能记住用户的登录状态,不用再去登录页面重新登录了。这个token在服务端存在数据库中,为了保证安全,在服务端加了一个过期日期的时间戳字段,时间是首次登陆的一周后,在页面发起查询token请求的时候,若发现token已过期,则将该条token删除,要求客户重新登陆,确保后台用户不会因为电脑遗失或者其它原因被人随意使用账号。

5.2.2 用户信息部分

用户登录成功之后,我们会在全局钩子router.beforeEach中拦截路由,判断是否已获得token,在获得token之后我们就要去获取用户的基本信息了就如前面所说的,我只在本地存储了一个用户的token,并没有存储别的用户信息(如用户权限,用户名,用户头像等)。有些人会问为什么不把一些其它的用户信息也存一下?主要出于如下的考虑:假设我把用户权限和用户名也存在了本地,但我这时候用另一台电脑登录修改了自己的用户名,之后再用这台存有之前用户信息的电脑登录,它默认会去读取本地 cookie 中的名字,并不会去拉去新的用户信息。

所以现在的策略是:页面会先从 cookie 中查看是否存有 token,没有,就走一遍上一部分的流程重新登录,如果有token,就会把这个 token 返给后端去拉取user_info,保证用户信息是最新的。当然如果是做了单点登录得功能的话,用户信息存储在本地也是可以的。当你一台电脑登录时,另一台会被提下线,所以总会重新登录获取最新的内容。而且从代码层面我建议还是把 login和get_user_info两件事分开比较好,在这个后端全面微服务的年代,后端也想写优雅的代码

5.3 青旅管理

在这里可以新建,编辑青旅信息,查看青旅图片(轮播)。

5.4 招募信息管理

在这里可以查看发布的招募信息,招募详情及应召学生列表。

5.5 个人信息管理

在这里可以对个人信息进行修改,分为基本个人信息与密码修改,密码修改必须进行一步验证

六、后台详细设计

6.1 写在前面

权限控制部分

由于后台设计了管理员和超级管理员两种权限,超级管理员可以显示某些路由,而普通管理员无法进入该路由在之前通过后端动态返回前端路由一直很难做的,因为vue-router必须是要vue在实例化之前就挂载上去的,不太方便动态改变。不过好在vue2.2.0以后新增了router.addRoutes。

实现方法

  • 创建vue实例的时候将vue-router挂载,但这个时候vue-router挂载一些登录或者不用权限的公用的页面

  • 当用户登录后,获取用role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表

  • 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由

  • 使用vuex管理路由表,根据vuex中可访问的路由渲染侧边栏组件

在一开始,只挂载通用路由。

而异步路由通过权限控制是否显示在页面上。

  • 异步挂载的路由

  • 动态需要根据权限加载的路由表

超级管理员可以看到的路由

管理员可以看到的路由

6.2 招募管理与青旅页面设计

招募信息与青旅列表部分

进入路由页面,请求相关数据,表格、编辑弹框和视频播放框均为子组件,通过v-bind传入子路由,子路由通过props接收,处理过数据后,通过$emit传回父组件,实现新增和修改课程项目。

删除使用post请求而没有使用delete请求,在数据库里只是将一个删除的标识字段由0改为1,下次查询数据库的时候滤掉该字段,实现“假删除”,方便后期数据维护,此方式在青旅、学生、青旅老板等删除操作同样适用。

6.3 学生管理页面设计

学生列表部分

后台没有做新增学生的功能,学生新增账号必须在前台进行注册,在后台审核,审核通过后,前台的学生用户才可以用积分购买并观看视频课程

审核功能在后台以一个标识符存在,在获取学生列表的时候,判断该学生的审核状态,若审核已通过,,显示为已审核,点击会提示“此学生为已审核状态”,若未审核,点击会弹出“是否确定将此学生修改为已审核状态?”的对话框,以此审核学生信息

6.4 管理员管理

前文在登陆页面中已经涉及过此处,只有超级管理员可以看到管理员管理中的管理员设置功能,在此处可以添加,删除,编辑管理员信息,但是不可以删除自己,不符合基本业务逻辑。

非超级管理员的管理员在此处只能看到个人信息的按钮,在里面可以编辑自己的信息,同样,不可删除自己

七、Server端设计

7.1 解决跨域问题

跨域是前后端联调开发中经常会遇到的问题,由于浏览器有同源策略,用来防止CSRF攻击,当前端发出请求的时候,请求的协议名,地址,端口号与当前的有一个不同,就会引发浏览器拒绝跨域请求,解决跨域问题的方法有很多,比如jsonp,服务器代理,document.domain + iframe等等方式解决跨域问题,我选择了在服务端,允许前端跨域发出PUT, POST, GET, DELETE, OPTIONS请求,成功地解决了ajax跨域问题。

  1. app.all('*',function (req, res, next) {
  2. res.header('Access-Control-Allow-Origin', '*');
  3. res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild,X-Token');
  4. res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  5. if (req.method == 'OPTIONS') {
  6. res.send(200); /*让options请求快速返回*/
  7. }
  8. else {
  9. next();
  10. }
  11. }); //解决跨域问题

7.2 文件系统

此处调用node.js的文件系统,并且用formidable对表单数据进行解析。Formidable是一个用于解析表单数据的Node.js模块,尤其是文件上传。

7.3 连接数据库

由于本系统使用的是express+node+MySQL数据库,处理数据也均由JavaScript实现,为了更方便维护代码,使代码可读性更强,这里我使用node-orm2连接和处理数据库,node-orm2是一个 Node.js 对象关系映射模块,它可以更方便地创建模型,同步,删除,批量创建,获取,查找,移除,计数,聚合函数,可以完全只通过JavaScript实现创建模型的关联,查找,检查,创建和移除,有非常好的模型实例的缓存和一致性。

  1. var orm = require('orm');
  2. var connection = null;
  3. function setup(db, cb) {
  4. require('./product_info')(orm, db);
  5. require('./order')(orm, db);
  6. // 引入更多数据库
  7. return cb(null, db);
  8. }
  9. module.exports = function (cb) {
  10. if (connection) return cb(null, connection);
  11. // orm.express("mysql://root:1@localhost/question_system"
  12. orm.connect("mysql://root:1@localhost/question_system", function (err, db) {
  13. if (err) return cb(err);
  14. connection = db;
  15. db.settings.set('instance.returnAllErrors', true);
  16. setup(db, cb);
  17. });
  18. };
上传的附件 cloud_download 基于vue和express的义工招募系统.7z ( 16.70mb, 2次下载 )
error_outline 下载需要11点积分

发送私信

如果这世界上真有奇迹,那只是努力的另一个名字

15
文章数
11
评论数
最近文章
eject