Nodejs+vue+Express游戏分享网站的设计与实现 7a2s2

目录

    • 技术栈
    • 具体实现截图
    • 系统设计思路
    • 技术可行性
    • 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 = tokendelete userinfo.dataValues.passwordreq.session.userinfo = userinfotoRes.session(res, 0, '登录成功!', token)} catch(err) {toRes.session(res, 500, '服务器错误!', '', 500)}})// 用户退出接口api.all('/logout', (req, res) => {if (!toRes.auth(req, res, '管理员')) returnreq.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 目录。

源码获取/联系我

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

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Flink垃圾图片分类优胜奖比赛攻略_贪吃的小香猪-148队

关联比赛: Apache Flink极客挑战赛——垃圾图片分类 一. 赛题背景分析及理解 本次竞赛要求结合大数据计算引擎Flink和深度学习的计算平台Intel Analytics Zoo应用在图片识别场景,进行垃圾图片的分类。 目标:对提供的100类大约6000张垃圾图片进行模型训…

五星级可视化页面(30):本系列最后一期,压轴出场。

不知不觉分享了30期高品质的五星级可视化大屏界面,该系列文章也该收尾了,本期为大家分享最后一批界面,我们下一个系列专辑见。

A股上市公司企业创新能力、质量、效率-原始数据+dofile+结果(2006-2023年)

上市公司的创新能力体现在其不断研发新技术、新产品和服务的能力上,这是企业保持竞争优势的关键;质量则是指公司所提供的产品或服务达到高标准的程度,高质量是赢得客户信任和市场份额的基础;效率则涵盖了生产运营中的资源利用程度…

智能车镜头组入门(一)车模的选择

这篇文章,我会简单的介绍下车模的、轮胎和负压的选择 今年的镜头组是自制车模,这比较考验学校之前参赛的经验。我们选择了某飞的mini车模。提供智能车方案的无非就两家,某飞和某邱,我们学校之前都用的是某飞的,在某飞…

鸿蒙Harmony应用开发,数据驾驶舱 项目结构搭建

对于一个项目而言,在拿到我们的开发任务后,我们最重要的就是技术的选型。选型定下来了之后我们便开始脚手架的搭建,然后开始撸代码,开搞. 首先我们需要对一些常见依赖库的引入 我们需要再oh-package.json5的dependencies节点下面…

leetcode:最高乘法得分

用auto可以过 class Solution { public:long long maxScore(vector<int>& a, vector<int>& b) {int n b.size();vector<vector<long long>> memo(4,vector<long long>(b.size(), LLONG_MIN));auto dfs [&](auto&& dfs, i…

Qt安卓开发连接手机调试(红米K60为例)

1.前置条件 本人默认您已经完成Qt安卓环境的配置&#xff0c;若还没配置请参考链接文章&#xff1a;【Qt】最详细教程&#xff0c;如何从零配置Qt Android安卓环境_qt_七夕先生-开放原子开发者工作坊。准备一台目前主流在用的手机&#xff0c;其实自己用的就行(只要你不是某些…

LeetCode-137. 只出现一次的数字 II【位运算 数组】

LeetCode-137. 只出现一次的数字 II【位运算 数组】 题目描述&#xff1a;解题思路一&#xff1a;解题思路二&#xff1a;符号位一起判断。背诵版解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每…

CentOS7.9环境上NFS搭建及使用

Linux环境NFS搭建及使用 1. 服务器规划2. NFS服务器配置2.1 主机名设置2.2 nfs安装2.2.1 repo文件替换2.2.2 NFS服务安装 2.3 nfs配置2.4 服务查看2.5 资源发布2.6 配置nfs服务开机自启2.7 端口开放 3.应用服务器配置3.1 主机名设置3.2 nfs安装3.2.1 repo文件替换3.2.2 NFS服务…

XML映射器-高级查询结果映射

01-高级查询结果映射 emp表 dept表 02-多表关联查询映射 多对一映射 项目中Emp类的数据 项目中dept类的数据 想要多表查询需要建个公共类里面写入两个表中的属性,如下面方法 type里要写用到的类型,由于继承Emp所有Emp里面的属性直接写,column是写数据库的别字,property是写字…

WSL中使用AMBER GPU串行版

前提是已经安装过wsl 1 在 WSL 2 中启用 NVIDIA CUDA 参考在 WSL 2 上启用 NVIDIA CUDA | Microsoft Learn 注意&#xff1a;勿在 WSL 中安装任何 Linux 显示驱动程序。Windows 显示驱动程序将同时安装本机 Windows 和 WSL 支持的常规驱动程序组件。 2 在WSL2中配置Cuda 不安…

SEO之页面优化(一-页面标题2)

初创企业搭建网站的朋友看1号文章&#xff1b;想学习云计算&#xff0c;怎么入门看2号文章谢谢支持&#xff1a; 1、我给不会敲代码又想搭建网站的人建议 2、“新手上云”能够为你开启探索云世界的第一步 博客&#xff1a;阿幸SEO~探索搜索排名之道 &#xff08;接上一篇。。…

Fiddler抓包工具实战

文章目录 &#x1f7e2; Fiddler入门到精通&#x1f449;主要功能&#x1f449;使用场景 &#x1f7e2; 一、Fiddler抓包和F12抓包对比&#x1f7e2; 二、Fiddler的核心功能&#x1f7e2; 三、Fiddler的工作原理&#x1f7e2; 四、Fiddler功能配置使用&#x1f449;规则设置&am…

信息学奥赛报考指南

近年来&#xff0c;信息学奥林匹克竞赛&#xff08;NOI&#xff09;越来越受到家长和学生的重视。这项竞赛不仅能培养孩子的编程与算法思维&#xff0c;还为优秀的选手提供了进入国内顶尖大学的保送资格&#xff0c;并有机会参加国际级赛事。因此&#xff0c;许多家长都希望了解…

Microsoft Office LTSC 2024 离线安装ISO镜像

微软近日正式发布了 Microsoft Office 2024 LTSC&#xff08;长期服务版本&#xff09;&#xff0c;为那些不适用订阅模式的企业提供了最新的 Office 版本。LTSC 版本专为需要稳定、长期支持的用户设计&#xff0c;适合需要长期部署在特定硬件环境中的企业或组织。 ​从Office …

2024年【四川省安全员B证】新版试题及四川省安全员B证考试试卷

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 四川省安全员B证新版试题参考答案及四川省安全员B证考试试题解析是安全生产模拟考试一点通题库老师及四川省安全员B证操作证已考过的学员汇总&#xff0c;相对有效帮助四川省安全员B证考试试卷学员顺利通过考试。 1、…

9.18日常记录

一.信号和槽机制 信号和槽:是对象之间通信的一种机制 信号classA不关心有多少槽函数与之绑定&#xff0c;它只管触发信号&#xff0c;具体要触发哪些槽函数&#xff0c;是由Qt的信号和槽机制来实现的。这样的话就充分的体现了面向对象的解耦原则了&#xff0c;因为对于classA来…

CSS概览

概述 是什么 cascading style css 层叠样式表 由W3C制定的网页元素定义规则 为什么 美化 怎么办 设置样式 布局 css 引入 内部样式表 在head标签内部使用style标签 <html><head><style>.id{width: 400px;height: 400px;border: 1px solid black;ma…

Revit API:Element 的分类

前言 Revit的继承体系以Element作为作为最上层的元素&#xff0c;在这个体系里面&#xff0c;所有的构件都是从 Element 派生出来的。我们可以把这个派生的关系本身当作一个分类方式&#xff0c;但这种方式分的类别太多了&#xff0c;不一定可以记住。参考&#xff1a;Revit A…

【QML 基础】QML ——描述性脚本语言,用于用户界面的编写

文章目录 1. QML 定义 1. QML 定义 &#x1f427; QML全称为Qt Meta-Object Language&#xff0c;QML是一种描述性的脚本语言&#xff0c;文件格式以.qml结尾。支持javascript形式的编程控制。QML是Qt推出的Qt Quick技术当中的一部分&#xff0c;Qt Quick是 Qt5中用户界面的涵…