vue.js企业员工考勤打卡系统设计app小程序_vue和node登录注册的步骤详解-CSDN博客

本文链接：https://blog.csdn.net/qq_840612233/article/details/147353655

文章目录

具体实现已完成成品部分截图

在这里插入图片描述

开发工具和技术简介

Node被初学者会误以为是一种语言,其实node.js是使得JavaScript能在服务端运行的平台，使得 JavaScript 能像其它的后台语言一样可以操作网络、系统等。它的产生是由于Ryan Dahl认为I/O处理地不好，会因为同步执行造成代码阻塞，以前传统的Web服务技术是对每一个请求都启动一个线程进行处理。因此大部分的时间都宠物在了等待线程上，所以需要大量的资源来管理这些线程。造成服务器的“一个请求就开一个线程”这样的方式并不是很好。Ryan Dahl认为软件应该能够处理多任务，并且能够减少等待处理的时间。故node中出现了很多异步处理，node的执行顺序是①next Tick、Promise他们两个相当于vip任何事件都得等他们执行完后，才能开始执行②set immediate（）③set timeout（）④poll队列中的事件。因为他相当于多线程异步，所以选择node开发，性能消耗低，运行速度快，所以选择node作为后台的开发环境。
在现在IT比较火热的语言大概大家知道的都是关于Java、Python等，对前端语言可能相对于来说比较陌生。而HTML是前端必不可少的一种语言，他是所以页面能呈现的基础，是一种超文本标记语言，并且还有一定的语义化，例如p标签是段落标签，以h开头的是标题等，他是运行在浏览器的语言，浏览器可以将其解析并呈现出来，在本次的课题中以最新的html5为基准,辅以html4.0作为html5的兼容处理。
JavaScript是一种单线程解释型语言，在V8引擎问世后，他的性能得到了极大地提升，从此取代了flash成为了浏览器中最好的脚本语言。该语言可通过异步的方式实现“多线程”，并且他自身的特点也很独特,基于对象的表现既可以创建对象也可以使用自己原型链上已有的,使用起来很简单,没有很严格的要求，他主要添加到使用HTML和CSS构建的网站中，他不依附于操作系统，只要浏览器支持即可，因此它的兼容性也极好，市面上的所有浏览器都支持他的运行，理论上可以实现浏览器环境中的任何功能，这个语言因此成为了前端的必需品。
MySQL 是关系型数据库管理系统的代表，因为MySQL是其免费开源的，而且MySQL的功能已经足够用对于学习和中小型企业来讲，所以开发中小型网站都会选择MySQL作为网站的数据库。[13]
MySQL具有开放性，它是一种关系型数据库管理系统，并且它的源代码可以被大众所熟知[3]。由于MySQL是开放源代码的，因此，只要经过授权就可以在自己需求的基础上对其进行修改。MySQL因为其固有的特点而备受关注，它具有很强的适应性，并且十分可靠，查询速度快。MySQL安装起来非常方便，且数据存储量大，不需要事务化处理。Sql语言拥有很多的方法，在项目中编写sql语句时使用起来是非常方便的，不会像其他语言那样需要编写更多的语句。正因为MySQL使用sql语言进行数据库管理，所以它收到了大多数程序员的热爱。
React与Vue 都采用虚拟DOM.核心功能都在核心库中，其他类似路由这样的功能则由其他库进行处理React的生态系统更庞大，由ReactNative来进行混合App开发; Vue更轻量. React由独特的JSX语法; Vue是基于传统的Web计数进行扩展(HTML、CSS、NodejsScript)，更容易学习。

项目技术介绍

本系统基于Express框架实现，Express 是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用MySQL数据库存储数据，体积小、速度快、总体拥有成本低，还有着广泛的应用，性能卓越。
本系统在功能上，不仅仅有传统的文件收发、审核，更利用计算机的强大功能进行统计、汇总、分析，方便管理者对比赛开展情况进行了解，不仅方便文件收集审核工作，也方便用户的使用，节约人力物力，提高效率。
本课题研究，前端使用 vue 框架，后端使用node、mysql链接数据库完成前端与后端开发。
后端使用nodejs来搭建服务器
前端:Vue和ElementUI
数据库：mysql
数据库工具：Navicat/SQLyog都可以
开发运行软件：VScode/webstorm/hbuiderx均可

技术开发思路之实施方案：

本网站前端使用vue框架，后端使用js的node，满足用户的讯息接受，信息搜索，资讯查看的操作。
前端使用web技术html、css、js等进行静态网页开发。做到基础的框架设计以及css定位。
后端使用mysql+node进行开发。对后台的数据可进行增删改查。方便管理后台数据。

通过阅读官网文档、观看老师提供的教学视频，再结合实践项目案例以及相关书籍，学习掌握相关核心知识和技术。
使用axios网络请求库等工具，实现前后端数据的交互。
通过数据库，将不同的数据进行规划整理，设计出较为高效的方案。
在设计网站过程中，注重页面的加载速度，界面美观度，交互的流畅性等。

错误处理和异常处理

node.js是一种脚本语言，能够把数据库与js页面实现交互，与大部分后端语言一样，能够把js页面传递过来的数据进行处理，对数据库进行更新，之后把数据库的记录传递到js页面当中，能够为分布式程序提供基础操作。使得程序员能够简单实现数据在前后端之间进行相互传递，在后端能够利用数据库SQL语句把信息取出，把数据显示在js页面当中，node.js运用的是单线程技术，与多线程程序不同，因此可以很大程度避免了程序堵塞的问题，虽然是单线程技术，但是node.js具有超强的并发能力，能够在服务器上建立高并发的程序。

在系统中，设计了一个健壮的错误处理和异常处理策略。系统会捕获可能发生的错误和异常情况，并提供相应的处理和反馈机制。
系统将采用适宜的异常类别来描述各种类型的错误和异常状况，并通过异常处理策略去捕获和应对这些异常。在处理异常时，系统会提供相关的错误数据和日志记录，以协助开发者和管理者进行问题诊断和解决。此外，系统还会向用户提供友好的错误提示，以确保用户能够理解问题并采取适当的行动。

工作计划

（1）完成选题 2024年11月20日 — 2024年11月26日
（2）完成任务书下达 2024年11月27日 — 2024年12月15日
（3）完成开题报告 2024年12月16日 — 2025年01月24日
（4）完成中期检查 2025年01月25日 — 2025年02月25日
（5）完成论文初稿 2025年02月26日 — 2025年03月31日
（6）完成论文定稿 2025年04月01日 — 2025年04月30日
（7）完成相似比检测 2025年04月15日 — 2025年05月15日
（8）完成答辩 2025年05月14日 — 2025年05月22日
（9）材料归档 2025年05月25日 — 2025年06月03日

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('/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)
		}
	})
	// 顾客登录接口
	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, '退出成功！')
		})
	})

主要参考文献

[1]冯彦. 基于JSP和Struts框架的动态Web开发技术研究以及实践[D]. 吉林大学, 2023(3)：12-19.
[2]贾广宇. MVC设计模式下Web开发框架的研究与应用[D]. 大连海事大学, 2020(19)：135-142.
[3]Ferrel P J, Kawai K, Everhart D, et al. Distributing web applications across a pre-existing web: US, US8943035[P]. 2023(16)：113-121.
[4]陈佳, 李树强. web开发实践 : 慕课版[M]. 人民邮电出版社, 2023(10)：8-16.
5]温晓南.基于兴趣的分享式社交网络开发[D].吉林.吉林大学2023(30)
[6]徐俊.基于Vue框架的阅读平台管理系统研究与设计[D].北京.北京邮电大学.2024
[7]李平.基于jsp技术的web数据库设计[j].电脑与信息技术，2020(9)：77-79.
[8]冯小强．企业网站的建设与分析[J]．考试周刊， 2023(8)：132-138.
[9]李兴华,王月清.名师讲坛:Java Web开发实战经典基础篇(JSP、Servlet、Struts、Ajax) [平装][M].清华大学出版社,2023(13)：210-222.
[10]李张永, 陈和平, 顾进广. 跨平台移动Web开发框架与数据交互方法[J]. 计算机工程与设计, 2023(2)：56.
[11]吕浩志. 基于DWZ、NHibernate和ASP.NET MVC3架构的Web开发应用[J]. 科技视界, 2020(27)：120.
[12]许巍巍.基于GPON技术的宽带接入应用研究[J].科学技术创新,2023(12)：90-91.
[13]陆洋.互联网宽带接入技术及其工程实践研究[D].南京:南京邮电大学,2018.