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

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

文章目录


前言

需求:主要学习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请求进行解析

c 复制代码
 npm install bcryptjs --save
c 复制代码
npm install md5 --save
c 复制代码
npm install body-parser --save

三、修改config/db.js

c 复制代码
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

c 复制代码
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

c 复制代码
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

c 复制代码
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

c 复制代码
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;

七、启动项目

c 复制代码
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


总结

踩坑路漫漫长@~@

相关推荐
Re.不晚38 分钟前
MySQL进阶之战——索引、事务与锁、高可用架构的三重奏
数据库·mysql·架构
大橙子额2 小时前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
chian-ocean3 小时前
CANN 生态进阶:利用 `profiling-tools` 优化模型性能
数据库·mysql
LYFlied3 小时前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js
B站_计算机毕业设计之家3 小时前
豆瓣电影数据采集分析推荐系统 | Python Vue Flask框架 LSTM Echarts多技术融合开发 毕业设计源码 计算机
vue.js·python·机器学习·flask·echarts·lstm·推荐算法
那个村的李富贵4 小时前
解锁CANN仓库核心能力:50行代码搭建国产化AIGC图片风格迁移神器
mysql·信息可视化·aigc·cann
xjt_09015 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农5 小时前
Vue 2.3
前端·javascript·vue.js
跳动的梦想家h6 小时前
环境配置 + AI 提效双管齐下
java·vue.js·spring
Mr Xu_7 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js