express+mysql+vue,从零搭建一个商城管理系统5--用户注册

提示:学习express,搭建管理系统

文章目录

  • 前言
  • 一、新建user表
  • 二、安装bcryptjs、MD5、body-parser
  • 三、修改config/db.js
  • 四、新建config/bcrypt.js
  • 五、新建models文件夹和models/user.js
  • 五、index.js引入使用body-parser
  • 六、修改routes/user.js
  • 七、启动项目
  • 八、配置Apipost接口/user/register
  • 九、访问/user/register
  • 总结


前言

需求:主要学习express,所以先写service部分

一、新建user表

1、express_service数据库,鼠标右键点击表
在这里插入图片描述
2、点击新建表
在这里插入图片描述
3、创建user表
在这里插入图片描述
3、ctrl+s保存,输入user,点击确认
在这里插入图片描述
在这里插入图片描述
4、设计表添加栏位userID、userName、password
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、安装bcryptjs、MD5、body-parser

bcryptjs是对密码进行加密的插件
body-parser对http请求进行解析

 npm install bcryptjs --save

在这里插入图片描述

npm install md5 --save

在这里插入图片描述

npm install body-parser --save

在这里插入图片描述

三、修改config/db.js

const mysql = require('mysql');
const pool = mysql.createPool({host:'localhost',ipport:'3306',user:'root',password:'123456',database:'express_service'
});const query = (sql,params,callback)=>{return new Promise((resolve,reject)=>{pool.getConnection((err,connect)=>{if(err) reject(err);connect.query(sql,params,(err,result)=>{if(err) reject(err);return resolve(result);});});});
}
module.exports = query;

在这里插入图片描述

四、新建config/bcrypt.js

bcrypt.js

const bcryptJs = require('bcryptjs');const bcrypt = {hash:(txt,salt=9)=>{return bcryptJs.hashSync(txt,salt);},compare:(txt,hash)=>{return bcryptJs.compareSync(txt,hash);},
}module.exports = bcrypt;

在这里插入图片描述

五、新建models文件夹和models/user.js

user.js

const query = require('../config/db');
const bcrypt = require('../config/bcrypt');
const md5 = require('md5');
const secretKey = 'longlongago';const errFun = (msg,code)=>{return {code:code||500,success:false,msg:msg||'操作失败'}
}const sucFun = (data,msg)=>{return {code:200,success:true,msg:msg||'操作成功',data,}
}const userDao = {register:async(data)=>{//这里只添加user到数据库,不做验证和检验const userId = md5(data.userName+secretKey);const password = bcrypt.hash(data.password+secretKey);const sql = `insert into user (userId,userName,password) values('${userId}','${data.userName}','${password}')`;const result = await query(sql);console.log(result)// return result;if(result&&result.affectedRows==1)return sucFun(result[0],'添加用户成功');return errFun('添加用户失败');},
}module.exports = userDao;

在这里插入图片描述

五、index.js引入使用body-parser

const express = require('express');const app = express();
const router = express.Router();const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());const port = 1990;require('./config/db');//初始化路由
require('./routes/index')(router);app.use('/', router);
app.listen(port,()=>{console.log('http://localhost:'+port);
})

在这里插入图片描述

六、修改routes/user.js

const userDao = require('../models/user');
const userRoutes = (router)=>{router.post('/user/register',async (req,res)=>{const result = await userDao.register(req.body);res.json(result);});
}
module.exports = userRoutes;

在这里插入图片描述

七、启动项目

npm run dev

在这里插入图片描述

八、配置Apipost接口/user/register

使用到的工具是Apipost
1、新建目录
在这里插入图片描述
2、目录命名express_service
在这里插入图片描述
3、鼠标右键点击express_service,新建user子目录
在这里插入图片描述
在这里插入图片描述
4、右键点击user子目录,新建接口
在这里插入图片描述
5、接口配置
url:http://localhost:1990/user/register
name:/user/register
params:{
“userName”:“longlongago”,
“password”:“123456”
}
在这里插入图片描述

九、访问/user/register

在这里插入图片描述
在这里插入图片描述

总结

踩坑路漫漫长@~@

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

书生·浦语大模型全链路开源体系介绍

背景介绍 随着人工智能技术的迅猛发展,大模型技术已成为当今人工智能领域的热门话题。2022 年 11 月 30 日,美国 OpenAI 公司发布了 ChatGPT 通用型对话系统 并引发了全球 的极大关注,上线仅 60 天月活用户数便超过 1 亿,成为历史…

【实践总结】文件上传可能导致的DoS

通过CVE-2023-24998了解上传的可能隐患 Apache Commons FileUpload场景 条件1&#xff1a; &#xff08;影响版本&#xff09; <!-- Apache Commons FileUpload --><dependency><groupId>commons-fileupload</groupId><artifactId>commons-file…

【小沐学QT】QT学习之OpenGL开发笔记

文章目录 1、简介2、Qt QOpenGLWidget gl函数3、Qt QOpenGLWidget qt函数4、Qt QOpenGLWindow5、Qt glut6、Qt glfw结语 1、简介 Qt提供了与OpenGL实现集成的支持&#xff0c;使开发人员有机会在更传统的用户界面的同时显示硬件加速的3D图形。 Qt有两种主要的UI开发方…

【Azure 架构师学习笔记】-Azure Synapse -- Link for SQL 实时数据加载

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Synapse】系列。 前言 Azure Synapse Link for SQL 可以提供从SQL Server或者Azure SQL中接近实时的数据加载。通过这个技术&#xff0c;使用SQL Server/Azure SQL中的新数据能够几乎实时地传送到Synapse&#xff08;…

前端路由与后端路由的区别

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

SQL注入漏洞解析--less-7

我们先看一下第七关 页面显示use outfile意思是利用文件上传来做 outfile是将检索到的数据&#xff0c;保存到服务器的文件内&#xff1a; 格式&#xff1a;select * into outfile "文件地址" 示例&#xff1a; mysql> select * into outfile f:/mysql/test/one f…

Vue源码系列讲解——实例方法篇【一】(数据相关方法)

目录 0. 前言 1. vm.$watch 1.1 用法回顾 1.2 内部原理 2. vm.$set 2.1 用法回顾 2.2 内部原理 3. vm.$delete 3.1 用法回顾 3.2 内部原理 0. 前言 与数据相关的实例方法有3个&#xff0c;分别是vm.$set、vm.$delete和vm.$watch。它们是在stateMixin函数中挂载到Vue原…

【OnlyOffice】 桌面应用编辑器,版本8.0已发布,PDF表单、RTL支持、Moodle集成、本地界面主题

ONLYOFFICE桌面编辑器v8.0是一款功能强大、易于使用的办公软件&#xff0c;适用于个人用户、企业团队和教育机构&#xff0c;帮助他们高效地处理文档工作并实现协作。无论是在Windows、macOS还是Linux平台上&#xff0c;ONLYOFFICE都能提供无缝的编辑和共享体验。 目录 ONLYOFF…

ESP32语音转文字齐护百度在线语音识别

一、导入(10分钟&#xff09; 学习目的 二、新授(70分钟) 1.预展示结果(5分钟) 2.本节课所用的软硬件(5分钟) 4.图形化块介绍(10分钟) 5.单个模块的简单使用(10分钟) 6.在线语音转换工具逻辑分析(10分钟) 7.在线语音转换工具分步实现(30分钟) 三、巩固练习(5分钟) 四、课堂小结…

腾讯云4核8G的云服务器性能水平?使用场景说明

腾讯云4核8G服务器适合做什么&#xff1f;搭建网站博客、企业官网、小程序、小游戏后端服务器、电商应用、云盘和图床等均可以&#xff0c;腾讯云4核8G服务器可以选择轻量应用服务器4核8G12M或云服务器CVM&#xff0c;轻量服务器和标准型CVM服务器性能是差不多的&#xff0c;轻…

【办公类-21-04】20240227单个word按“段落数”拆分多个Word(三级育婴师操作参考题目 有段落文字和表格 1拆13份)

作品展示 背景需求&#xff1a; 最近学育婴师&#xff0c;老师发了一套doc操作参考 但是老师是一节节授课的&#xff0c;每节都有视频&#xff0c;如果做在一个文档里&#xff0c;会很长很长&#xff0c;容易找不到。所以我需要里面的单独文字的docx。 以前的方法是 1、打开源…

Android studio 六大基本布局详解

Android studio 六大基本布局详解 一、Android studio1.Android studio简介2.架构组成3.地址3.1 [官网地址](https://developer.android.google.cn/)3.2 [官方下载地址](https://developer.android.google.cn/studio?hlzh-cn) 二、Android studio六大基本布局详解1.Android六大…

【JavaEE】_前端POST请求借助form表单向后端传参

目录 1. 前端POST请求借助form表单向后端传参 2. 关于parameter方法获取参数的优先性问题 前端向后端传参通常有三种方法&#xff1a; 第一种&#xff1a;使用GET请求的query string部分向后端传参&#xff1a; 本专栏中已经详述了前端使用GET请求的query string向后端传参…

在本地运行 LLMs 的 6 种方法

商业人工智能和大型语言模型 (LLM) 有一个很大的缺点&#xff1a;隐私。在处理敏感数据或专有数据时&#xff0c;我们无法从这些工具中获益。因此&#xff0c;我们需要了解如何在本地运行私人 LLM。开源模型提供了一种解决方案&#xff0c;但它们也有自己的挑战和优势。 设定期…

网安入门18-XSS(靶场实战)

HTML实体化编码 为了避免 XSS 攻击&#xff0c;会将<>编码为<与>&#xff0c;这些就是 HTML 实体编码。 编码前编码后不可分的空格 < (小于符号)< > (大于符号)> & (与符号)&amp;″ (双引号)&quot;’ (单引号)&apos;© (版权符…

微服务-商城订单服务项目

文章目录 一、需求二、分析三、设计四、编码4.1 商品服务4.2 订单服务4.3 分布式事务4.4 订单超时 商品、购物车 商品服务&#xff1a; 1.全品类购物平台 SPU:Standard Product Unit 标准化产品单元。是商品信息聚合的最小单位。是一组可复用、易检索的标准化信息的集合&#x…

[Flutter]设置应用包名、名称、版本号、最低支持版本、Icon、启动页以及环境判断、平台判断和打包

一、设置应用包名 在Flutter开发中&#xff0c;修改应用程序的包名&#xff08;也称作Application ID&#xff09;涉及几个步骤&#xff0c;因为包名是在项目的Android和iOS平台代码中分别配置的。请按照以下步骤操作&#xff1a; 1.Android Flutter工程中全局搜索替换包名 …

企业网络布局的新宠——SD-WAN

在数字化转型的浪潮下&#xff0c;企业对网络的需求日益复杂和多样化。面对分支机构间的协作需求和不断增长的网络流量&#xff0c;企业亟需一种更加高效、灵活且成本可控的组网方案。SD-WAN&#xff08;软件定义广域网络&#xff09;正是在这样的背景下应运而生&#xff0c;成…

【漏洞复现】大华智慧园区综合管理平台信息泄露漏洞

Nx01 产品简介 大华智慧园区综合管理平台是一款综合管理平台&#xff0c;具备园区运营、资源调配和智能服务等功能。该平台旨在协助优化园区资源分配&#xff0c;满足多元化的管理需求&#xff0c;同时通过提供智能服务&#xff0c;增强使用体验。 Nx02 漏洞描述 大华智慧园区…

主题公园保管资产难?三防加固平板对此说不!

主题公园是一个活跃&#xff0c;快节奏的环境&#xff0c;主题公园最重要的资产之一是他们的表演者和每天制作的节目。但是检查道具以及寻找服装的去向是一项艰巨的任务&#xff1b;如果没有适当的系统和流程&#xff0c;可能会导致资产损失和材料放错位置&#xff0c;最终导致…