nodejs基于vue电子产品商城销售网站的设计与实现 _bugfu

目录

    • 技术栈
    • 具体实现截图
    • 系统设计思路
    • 技术可行性
    • 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 目录。

源码获取/联系我

文章最下方名片联系我即可~
✌💗大家点赞、收藏、关注、评论啦 、查看✌💗
👇🏻获取联系方式👇🏻

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/882296.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

论文集搜索网站-dblp 详细使用方法

分享在dblp论文集中的两种论文搜索方式:关键字搜索,指定会议/期刊搜索。 关键字搜索 进入dblp官方网址dblp: computer science bibliography,直接在上方搜索栏,搜索关键字,底下会列出相关论文。 指定会议/期刊搜索 …

三菱FX5U PLC故障处理(各种出错的内容、原因及处理方法进行说明。)

对使用系统时发生的各种出错的内容、原因及处理方法进行说明。 故障排除的步骤 发生故障时,按以下顺序实施故障排除。 1.确认各模块是否正确安装或正确配线。 2、确认CPU模块的LED。 3.确认各智能功能模块的LED。(各模块的用户手册) 4、连接工程工具,启…

从数据仓库到数据中台再到数据飞轮:我了解的数据技术进化史

这里写目录标题 前言数据仓库:数据整合的起点数据中台:数据共享的桥梁数据飞轮:业务与数据的双向驱动结语 前言 在当今这个数据驱动的时代,企业发展离不开对数据的深度挖掘和高效利用。从最初的数据仓库,到后来的数据…

828华为云征文|华为Flexus云服务器搭建Cloudreve私人网盘

一、华为云 Flexus X 实例:开启高效云服务新篇🌟 在云计算的广阔领域中,资源的灵活配置与卓越性能犹如璀璨星辰般闪耀。华为云 Flexus X 实例恰似一颗最为耀眼的新星,将云服务器技术推向了崭新的高度。 华为云 Flexus X 实例基于…

使用SpringCloud构建可伸缩的微服务架构

Spring Cloud是一个用于构建分布式系统的开源框架。它基于Spring Boot构建,并提供了一系列的工具和组件,用于简化开发分布式系统的难度。Spring Cloud可以帮助开发人员快速构建可伸缩的微服务架构。 要使用Spring Cloud构建可伸缩的微服务架构&#xff0…

对接阿里asr和Azure asr

1&#xff1a;对接阿里asr 1.1&#xff1a;pom <dependency><groupId>com.alibaba.nls</groupId><artifactId>nls-sdk-recognizer</artifactId><version>2.2.1</version> </dependency>1.2&#xff1a;生成token package c…

C++之STL—vector容器基础篇

头文件 #include <vector> //vector容器 #include <algorithm> //算法 基本用法&&概念 vector<int> v; v.push_back(10); vector<int >::iterator v.begin(); v.end(); 三种遍历方式 #include <vector> #include <algorithm>…

基于区块链的相亲交易系统源码解析

随着区块链技术的成熟与发展&#xff0c;其去中心化、不可篡改的特性逐渐被应用于各行各业。特别是在婚恋市场中&#xff0c;区块链技术的应用为相亲平台带来了新的可能性 。本文将探讨如何利用区块链技术构建一个透明、高效的相亲交易系统&#xff0c;并提供部分源码示例。 区…

大模型的实践应用30-大模型训练和推理中分布式核心技术的应用

大家好,我是微学AI,今天给大家介绍一下大模型的实践应用30-大模型训练和推理中分布式核心技术的应用。本文深入探讨了大模型训练和推理中分布式核心技术的应用。首先介绍了项目背景,阐述了大模型发展对高效技术的需求。接着详细讲解了分布式技术的原理,包括数据并行、模型并…

数据转换器——佛朗哥Chater2

【注:本文基于《数据转换器》一书进行学习、总结编撰,适合新手小白进行学习】 目录 2.1 数据转换器类别 2.2 工作条件 2.3 转换器性能参数 2.3.1 基本特性参数 2.4 静态性能参数 2.5 动态性能参数 2.6 数字和开关性能参数 2.1 数据转换器类别 转换器类型可以被分为两…

英飞凌TC3xx -- Bootstrap Loader分析

目录 1.Bootstrap Loaders作用 2.CAN BSL详解 2.1 CAN BSL的时钟系统 2.2 CAN BSL流程 3.小结 英飞凌TC3xx的Platform Firmware章节里&#xff0c;提供了多种启动模式&#xff1a; Internal start from Flash&#xff1a;b111Alternate Boot Mode&#xff1a;b110Generic …

杀软对抗 ---> Perfect Syscall??

好久没更了&#xff0c;今天想起来更新了&#x1f60b;&#x1f60b;&#x1f60b;&#x1f60b; 目录 1.AV && EDR 2.Perfect Syscall&#xff1f;&#xff1f; 3.Truly Perfect ??? 在开始之前先来展示一下这次的免杀效果 1.AV && EDR 360 天擎EDR …

[c++进阶(九)] STL之deque深度剖析

1.前言 本章重点 本章将会着重的介绍deque底层到底是如何实现它能够双向进出的&#xff0c;并且双向进出的消耗率还特别低&#xff0c;并且讲解deque的优缺点。 2.deque的使用 如果没有看我前面两篇文章的&#xff0c;请先看前面两篇文章再来看这篇文章&#xff0c;可以有助于…

手写Spring第三篇,原来Spring容器是使用反射来初始化对象的

上次是不是你小子和大家说你拿来做登记的样品被我收了&#xff0c;然后取豆子的时候就是这个样品的&#xff1f; 今天我来辟一下谣&#xff0c;真的是这样的。这小子的样品确实被我收了&#xff0c;不过这小子没给真东西给我&#xff0c;只给了一个指针&#xff0c;害我宝贝得存…

Git rebase 的使用(结合图与案例)

目录 Git rebase 的使用Git rebase 概念Git rebase 原理rebase和merge的选择 Git rebase 的使用 在 Git 中整合来自不同分支的修改主要有两种方法&#xff1a;merge 以及 rebase Git rebase 概念 **rebase概念&#xff1a;**用来重新应用提交&#xff08;commits&#xff09…

Llama 3.1 技术研究报告-1

llama3模型 现代⼈⼯智能&#xff08;AI&#xff09;系统由基础模型驱动。本⽂介绍了⼀组新的基础模型&#xff0c;称为Llama 3。它是⼀个语⾔模型群&#xff0c;原⽣⽀持多语⾔性、编码、推理和⼯具使⽤。我们最⼤的模型是⼀个密集变换器&#xff0c;有 405B个参数&#xff0…

oracle 插入date日期类型的数据、插入从表中查出的数据,使用表中的默认数据

date sysdate to_date 插入从表中查出的数据 方式一 方式二 或者指定列名称 下边这个案例的前提是指定列插入&#xff0c;如果不指定&#xff0c;则也是默认的

消息中间件---Kafka

一、什么是Kafka&#xff1f; Kafka是一个分布式流处理平台,类似于消息队列或企业消息传递系统&#xff1b; 流处理事什么呢&#xff1f; 流处理就是数据处理工作流&#xff0c;本质上是一种计算机编程范例。流处理是对接收到的新数据事件的连续处理。‌它涉及对从生产者到消…

HTML+CSS学习笔记

目录 HTML 1.开发环境 2.创建HTML文件 3.HTML元素 3.1HTML文件结构 3.2HTML标签 3.3HTML属性​编辑​编辑 3.4HTML区块 3.4.1块元素 3.4.2行内元素 3.5HTML表单 CSS 1.CSS简介 2.CSS语法​编辑 3.CSS三种导入方式 内联样式 内部样式 外部样式 4.选择器​ 5.C…

9月23日

思维导图 作业 统计家目录下.c文件的个数 #!/bin/bashnum0for file in ~/*.c; doif [ -f "$file" ]; then((num))fi doneecho "家目录下.c文件的个数: $num"