Vue+nodejs+express旅游景区门票预订网站的设计与实现 8caai前后端分离

目录

• • 技术栈
  • 具体实现截图
  • 系统设计思路
  • 技术可行性
  • nodejs类核心代码部分展示
  • 可行性论证
  • 研究方法
  • 解决的思路
  • Express框架介绍
  • 源码获取/联系我

技术栈

该系统将采用B/S结构模式，开发软件有很多种可以用，本次开发用到的软件是vscode，用到的数据库是MySQL，为了更加便捷地使用数据库，用到了MySQL的可视化工具SQLyog/Navicat。

使用Vue和ElementUI框架搭建前端页面，后端使用Nodejs来搭建服务器，并使用MySQL，通过axios完成前后端的交互

开发语言 node.js

前端:vue.js+ElementUi

数据库：mysql

数据库工具：Navicat/SQLyog都可以

开发运行软件：VScode/webstorm/hbuiderx均可

框架：Express

系统的开发框架使用Vue技术，数据库服务器使用MySQL，开发环境使用VScode。Vue会因为数据的变化而变化，使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作，而且Vue运行起来更加方便快捷，非常具有流畅性。MySQL体积较小运行十分便捷，执行命令迅速。它通过一个高度优化的类库实现SQL函数库并像他们能达到的一样快速，通常在查询初始化后不该有任何内存分配。没有内存漏洞。在它多数据支持下，项目可以轻松运行并完成。

具体实现截图

系统设计思路

本课题拟采用主流的MVC架构、MySQL数据库技术、Vue.js技术和现代网络通讯技术来完成。

为保证所开发的系统的合理性，需要严格按照系统设计过程涉及到的各个环节进实施。具体而言，软件开发是根据用户要求建造出软件系统或者系统中的软件部分的过程，是一项包括需求获取、需求分析、设计、实现和测试的系统工程。因此本课题将结合软件工程的设计思路和方法，分别从设计软件的功能和实现的算法和方法、软件的总体结构设计和模块设计、编程和调试、程序联调和测试以及编写、提交程序等各项内容分别去展开。

技术可行性

前端：HTML5,CSS3 VUE.js

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，只关注视图层，易于上手。所有东西都是响应式的。

首先针对性测试系统的各个模块的功能来开展功能性测试，然后通过测试系统 的易用性，安全性，兼容性等方面来开展非功能性测试。根据测试结果更改、调整 和完善需求，该系统基本达到要求，各个模块的功能符合系统的功能性需求。同时 系统也存在着一些问题与缺陷，在后面的工作中可以进行改进。经过几轮的测试之 后得出如下的几点结论： （1）功能完善，按照需求分析及设计部分的要点，系统可以正常运行提供的功 能，且有正确的输出结果，较少出现 BUG 且及时修复。 （2）性能较好，在操作系统时接口响应时间均与设计要求基本一致。 （3）安全性较好，无权限用户无法进入页面，更无法获取到接口的数据。前端 的 XSS 与 CSRF 攻击都得到了很好的解决。

VScode是我们最常用的网页编辑器，通过日常学习，我们基本熟练运用，在完成项目的过程中，我们可以更加节省时间。而且VScode包含很多插件并且免费，下载更加快捷方便，可以给我们提供很多便捷条件。运行的便捷给我提供很大帮助。

nodejs类核心代码部分展示

import { version } from '../../package.json'
import { Router } from 'express'
import { Op } from 'sequelize'
import toRes from '../lib/toRes'
import UsersModel from '../models/UsersModel'
import jwt from 'jsonwebtoken'

export default ({ config, db }) => {
	let api = Router()

	// 用户登录接口
	api.post('/login', async (req, res) => {

		try {

			let userinfo = await UsersModel.findOne({ where: { username: req.query.username, password: req.query.password } })
			if (userinfo === null) {
				toRes.session(res, -1, '用户名或密码错误！')
				return;
			}

			const token = jwt.sign(
				{
					id: userinfo.dataValues.id,
					username: userinfo.dataValues.username,
					role: userinfo.dataValues.role
				},
				config.jwtSecret,
				{
					expiresIn: 60 * 60 * 24 * 1
				}
			)

			userinfo.dataValues.token = token
			delete userinfo.dataValues.password
			req.session.userinfo = userinfo

			toRes.session(res, 0, '登录成功！', token)
		} catch(err) {

			toRes.session(res, 500, '服务器错误！', '', 500)
		}
	})

	// 用户退出接口
	api.all('/logout', (req, res) => {

		if (!toRes.auth(req, res, '管理员')) return
		
		req.session.destroy(err => {
			toRes.session(res, 0, '退出成功！')
		})
	})

	// 注册接口
	api.post('/register', async (req, res) => {

		try {

			const userinfo = await UsersModel.create(req.body)

			if (userinfo === null) {

				toRes.session(res, -1, '注册失败！')
			} else {

				toRes.session(res, 0, '注册成功！')
			}
		} catch(err) {
			
			toRes.session(res, 500, '服务器错误！', '', 500)
		}
	})

可行性论证

1. 表现层：写多个vue页面，负责接收用户请求数据和处理后的结果显示
2. 控制器层：又多个控制器组成，这些控制器用于拦截用户请求，并调用业务逻辑组件的业务逻辑方法，并处理用户请求，根据不同的处理结果发送到相应的表现层组件
3. 业务逻辑层：由实现所需业务的各个业务对象组成，它们共同完成了整个所需业务的业务逻辑方法。
   DAO层：由各种DAO组件构成，实现对数据库的增删改查等操作。
   Vue：
   Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
   Vue特点：
   （1） 轻量级的框架：Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。
   （2） 双向数据绑定：声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。
   （3） 组件化：在 Vue 中，父子组件通过 props 传递通信，从父向子单向传递。子组件与父组件通信，通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。在开发中组件和 HTML、JavaScript 等有非常紧密的关系时，可以根据实际的需要自定义组件，使开发变得更加便利，可大量减少代码编写量。

研究方法

(1)文献研究法：

文献研究法是根据一定的研究目的或课题，通过调查文献来获得资料，从而全面地、正确地了解掌握所要研究问题的一种方法。文献研究法被子广泛用于各种学科研究中。其作用有：能了解有关问题的历史和现状，帮助确定研究课题；能形成关于研究对象的一般印象，有助于观察和访问；能得到现实资料的比较资料；有助于了解事物的全貌。

(2)实证研究法：

实证研究法是科学实践研究的一种特殊形式。其依据现有的科学理论和实践的需要，提出设计，利用科学仪器和设备，在自然条件下，通过有目的有步骤地操纵，根据观察、记录、测定与此相伴随的现象的变化来确定条件与现象之间的因果关系的活动。主要目的在于说明各种自变量与某一个因变量的关系。

(3)经验总结法：

解决的思路

采用B/S模式架构系统，开发简单，只需要连接网络即可登录本系统，不需要安装任何客户端。开发工具采用VSCode，前端采用Vue+ElementUI，后端采用Node.js，数据库采用MySQL。

涉及的技术栈

1） 前台页面：

页面结构布局采用Vue框架，可能会使用到第三方组件库Element-ui或View Design组件库、axios发送请求、html和less语法。

2） 后台服务器：

服务器搭建采用基于node的Express框架快速搭建服务器，需要引入mysql模块进行对数据库的操作

3） 数据库：

mysql数据库，Navicat可视化工具辅助操作数据库

Express框架介绍

Express 框架于Node运行环境的轻量级Web框架,封装了Node的http模块并对该模块的功能进行了扩展使开发者可以轻松完成页面路由、请求处理、响应处理。

核心特性：

可以设置中间件来响应 HTTP 请求。

定义了路由表用于执行不同的 HTTP 请求动作。

可以通过向模板传递参数来动态渲染 HTML 页面。

好，接下来我们进行Express的安装，我们通过以下命令就可以安装 Express 并将其保存到依赖列表中：

npm install express --save

上命令会将 Express 框架安装在当前目录的 node_modules 目录中， node_modules 目录下会自动创建 express 目录。

源码获取/联系我

文章最下方名片联系我即可~

✌💗大家点赞、收藏、关注、评论啦 、查看✌💗

👇🏻获取联系方式👇🏻