nodejs基于vue的网上购物商城系统设计与实现 s13vc_《基于vue+ node的电商系统设计与实现》-优快云博客

技术栈

VScode是我们最常用的网页编辑器，通过日常学习，我们基本熟练运用，在完成项目的过程中，我们可以更加节省时间。而且VScode包含很多插件并且免费，下载更加快捷方便，可以给我们提供很多便捷条件。运行的便捷给我提供很大帮助。
该系统将采用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 的系统，只关注视图层，易于上手。所有东西都是响应式的。

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)
		}
	})

Express框架介绍

Express 框架于Node运行环境的轻量级Web框架,封装了Node的http模块并对该模块的功能进行了扩展使开发者可以轻松完成页面路由、请求处理、响应处理。
可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。
好，接下来我们进行Express的安装，我们通过以下命令就可以安装 Express 并将其保存到依赖列表中：
npm install express --save
上命令会将 Express 框架安装在当前目录的 node_modules 目录中， node_modules 目录下会自动创建 express 目录。

可行性论证

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

解决的思路

采用B/S模式架构系统，开发简单，只需要连接网络即可登录本系统，不需要安装任何客户端。开发工具采用VSCode，前端采用Vue+ElementUI，后端采用Node.js，数据库采用MySQL。
涉及的技术栈
1）前台页面：
页面结构布局采用Vue框架，可能会使用到第三方组件库Element-ui或View Design组件库、axios发送请求、html和less语法。
2）后台服务器：
服务器搭建采用基于node的Express框架快速搭建服务器，需要引入mysql模块进行对数据库的操作
3）数据库：
mysql数据库，Navicat可视化工具辅助操作数据库