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.rhkb.cn/news/265152.html

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

相关文章

数字化运维与AIOps

干掉传统运维的不是devops,不是容器化,而是AI。随着未来基础设施的膨胀和复杂度急剧提升,人类运维能力已经显得力不从心。运维最终的归宿一定是人类决策,AI汇报与执行。 什么是数字化运维 数字化运维是一种基于信息技术手段数字化…

【GB28181】wvp-GB28181-pro部署安装教程(Ubuntu平台)

目录 前言1 安装依赖2 安装MySQL3 安装redis4 编译ZLMediaKit代码及依赖下载编译运行(如果要运行wvp整个项目,这步可以先不执行) 5 编译wvp-pro下载源码(建议从github上下载,gitee上维护有时候不是很同步)编…

USB Micro引脚及相应原理图绘制

前言:博主为实现绘制USB Micro输入口原理图,首先在 GD32F103XX的数据手册中找到引脚的功能描述,找到USBDM与USBDP功能,分别为引脚PA11与引脚PA12。然后进行相应的原理图绘制。 * USBDM。USBDM 引脚是与通用串行总线 (Universal Se…

Python 光速入门课程

首先说一下,为啥小编在即PHP和Golang之后,为啥又要整Python,那是因为小编最近又拿起了 " 阿里天池 " 的东西,所以小编又不得不捡起来大概五年前学习的Python,本篇文章主要讲的是最基础版本,所以比…

年龄性别预测4:C/C++实现年龄性别预测和识别(含源码,可实时预测)

年龄性别预测4:C/C实现年龄性别预测和识别(含源码,可实时预测) 目录 年龄性别预测4:C/C实现年龄性别预测和识别(含源码,可实时预测) 1.年龄性别预测和识别方法 2.人脸检测方法 3.年龄性别预测和识别模型(Python) &#xff0…

prometheus+grafana监控nginx的简单实现

1.编译安装NGINX 加入编译安装nginx-module-vts模块,目的是为了获取更多的监控数据(虚拟主机,upstream等) nginx下载 http://nginx.org/download/nginx-1.20.2.tar.gz nginx-module-vts下载 https://github.com/vozlt/nginx-module-vts/archive/refs/tags/v0.2…

【Docker】安装及相关的命令

目录 一 Docker简介 1.1 是什么 1.2 优缺点 1.3 应用场景 1.4 安装 二 命令 2.1 Docker基本命令 2.2 Docker镜像命令 2.3 Docker容器命令 一 Docker简介 1.1 是什么 Docker是一个开源的应用容器引擎,它基于Go语言实现,并利用操作系统本身已有的…

【亚马逊云】跨AWS账号创建复制规则同步S3存储桶中的数据

文章目录 注意事项一、创建存储桶【创建方&接收方完成操作】二、上传数据至bucket-transmit待同步测试三、创建复制规则【创建方完成操作】四、接收复制的对象【接收方完成操作】五、创建复制任务【创建方操作】六、运行批处理操作【创建方完成操作】七、检查是否完成跨账号…

leetcode:134.加油站

解题思路:需要注意开始时的编号,有的可以走一圈,有的走不了 模拟过程:for循环主要是用来模拟线性的过程,而在这里它是环状的; 可以用暴力解法,但是在这里我用贪心来解决。 常见疑惑&#xff1…

Django配置静态文件

Django配置静态文件 目录 Django配置静态文件静态文件配置调用方法 一般我们将html文件都放在默认templates目录下 静态文件放在static目录下 static目录大致分为 js文件夹css文件夹img文件夹plugins文件夹 在浏览器输入url能够看到对应的静态资源,如果看不到说明…

网络安全之内容安全

内容安全 攻击可能只是一个点,防御需要全方面进行 IAE引擎 DFI和DPI技术--- 深度检测技术 DPI --- 深度包检测技术--- 主要针对完整的数据包(数据包分片,分段需要重组),之后对 数据包的内容进行识别。(应用…

力扣5. 最长回文子串(双指针、动态规划)

Problem: 5. 最长回文子串 文章目录 题目描述思路复杂度Code 题目描述 思路 思路1:双指针 1.我们利用双指针从中间向两边扩散来判断是否为回文串,则关键是找到以s[i]为中心的回文串; 2.我们编写一个函数string palindrome(string &s, in…

大数据可视化的设计规范,全面剖析,很实用。

大数据可视化的设计规范需要考虑到数据量大、复杂度高、数据类型多样等特点。以下是一份常见的大数据可视化设计规范,供您参考: 设计原则 简单易用:保证用户操作简单、直观,降低用户认知负担。数据准确:保证数据准确…

数据结构-关键路径

介绍 在AOV网的基础上,如果用对应边来表示活动持续时间,这种有向图被称为AOE网在AOE网中,入度为0的为源点,出度为0的为汇点,整张网看做是一件事情完成的过程,那么这两个点就是事情的开始和结束。每个活动持…

阿里云ECS服务器vCPU是什么意思?

阿里云ECS服务器vCPU和CPU是什么意思?CPU和vCPU有什么区别?一台云服务器ECS实例的CPU选项由CPU物理核心数和每核线程数决定,CPU是中央处理器,一个CPU可以包含若干个物理核,通过超线程HT(Hyper-Threading&am…

C#,弗洛伊德-瑞文斯特(Floyd-Rivest)算法与源代码

Robert W. Floyd 1 Floyd-Rivest 算法 Floyd-Rivest 算法是一种选择算法,用于在不同元素的数组中找到第k个最小元素。它类似于快速选择算法,但在实际运行中有更好的运行时间。 和 QuickSelect 一样,该算法基于分区的思想工作。对数组进行分…

洛谷C++简单题小练习day21—梦境数数小程序

day21--梦境数数--2.25 习题概述 题目背景 Bessie 处于半梦半醒的状态。过了一会儿,她意识到她在数数,不能入睡。 题目描述 Bessie 的大脑反应灵敏,仿佛真实地看到了她数过的一个又一个数。她开始注意每一个数码(0…9&#x…

openssl3.2 - crypto-mdebug被弃用后, 内存泄漏检查的替代方法

文章目录 openssl3.2 - crypto-mdebug被弃用后, 内存泄漏检查的替代方法概述笔记查看特性列表openssl3.2编译脚本 - 加入enable-crypto-mdebug看看有没有替代内存诊断的方法?main.cppmy_openSSL_lib.hmy_openSSL_lib.c备注备注这招不行啊显势调用默认上下文也不行找到一种还可…

【AIGC大模型】跑通wonder3D (windows)

这两天看了AI大神李某舟被封杀,课程被下架的新闻,TU商 认为:现在这种玩概念、徒具高大上外表却无实质内容的东西太多了,已经形成一种趋势和风潮,各行各业各圈层都在做大做强这种势,对了,这种行为…

apachectl: line 79: 20233 Segmentation fault (core dumped) $HTTPD “$@“

[TOC](apachectl: line 79: 20233 Segmentation fault (core dumped) $HTTPD “$”) 1、问题描述 apache 启动报错 apachectl: line 79: 20233 Segmentation fault (core dumped) $HTTPD “$” 2、问题分析 参考链接: https://stackoverflow.com/questions/43726930/apache…