结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
const express = require(‘express’)
//创建路由对象
const router = express.Router()
//用户注册路由
router.post(‘/register’, (req, res) => {
res.send(‘POST /register’)
})
//用户登录路由
router.post(‘/login’, (req, res) => {
res.send(‘POST /login’)
})
//共享router对象
module.exports = router
- 在
app.js
中,导入并注册用户路由模块:
//导入用户路由
const authRouter = require(‘./router/auth’)
//注册用户路由
server.use(‘/api/auth’,authRouter)
- 安装
nodemon
模块,用于启动服务器(nodemon
模块可以在我们修改代码后自动重启服务器):
npm i -g nodemon
- 使用
nodemon
模块启动服务器:
nodemon app.js
如果操作正确,服务器正常启动,将输出如下内容:
PS E:\ExpressServer> nodemon .\app.js
[nodemon] 2.0.16
[nodemon] to restart at any time, enter rs
[nodemon] watching path(s): .
[nodemon] watching extensions: js,mjs,json
[nodemon] starting node .\app.js
Express server running on http://127.0.0.1:80
- 使用
postman
测试接口是否配置正确,以POST
方式分别访问localhost/api/auth/register
和localhost/api/auth/login
为了保证路由模块的存粹性,将路由处理函数单独抽离出来放在
router_handler
文件夹中
- 在
router_handler
文件夹中创建并编辑auth.js
文件如下:
//router_handler/auth.js
//注册处理函数
exports.authRegister = (req, res) => {
res.send(‘POST /register’)
}
//登录处理函数
exports.authLogin = (req, res) => {
res.send(‘POST /login’)
}
- 修改
/router/auth.js
文件代码如下:
//router/auth.js
const express = require(‘express’)
//创建路由对象
const router = express.Router()
//引入auth处理模块
const authHandler = require(‘…/router_handler/auth’)
//用户注册路由
router.post(‘/register’, authHandler.authRegister)
//用户登录路由
router.post(‘/login’, authHandler.authLogin)
//共享router对象
module.exports = router
- 使用
nodemon
启动并使用postman
访问localhost/api/auth/register
和localhost/api/auth/login
,会得到和之前(6.3
)相同的结果。
================================================================
- 创建
MySql
数据库,此处以db_node
为例:
CREATE SCHEMA db_node
;
如果还没有安装MySql,可以在这里下载MySql安装器
- 创建
t_users
数据表,创建表sql
指令如下:
CREATE TABLE db_node
.t_users
(
id
INT NOT NULL AUTO_INCREMENT,
username
VARCHAR(255) NOT NULL,
password
VARCHAR(255) NOT NULL,
nickname
VARCHAR(255) NULL,
email
VARCHAR(255) NULL,
avatar
TEXT NULL,
PRIMARY KEY (id
),
UNIQUE INDEX id_UNIQUE
(id
ASC) VISIBLE,
UNIQUE INDEX username_UNIQUE
(username
ASC) VISIBLE)
ENGINE = InnoDB
DEFAULT CHARACTER SET = utf8mb4
COLLATE = utf8mb4_0900_ai_ci;
- 执行如下指令,安装
mysql
模块:
npm i mysql
- 创建
/db/index.js
文件,此文件用于存储数据库连接对象:
// db/index.js
//导入mysql模块
const mysql = require(‘mysql’)
//创建数据库连接对象
const db = mysql.createPool({
host: ‘127.0.0.1’, //数据库服务器地址,我们使用本机
user: ‘root’, //mysql用户名,替换为你的用户名
password: ‘000000’, //mysql密码,替换为你的密码
database: ‘db_node’,//数据库名称,此处为db_node
})
//导出数据库连接对象
module.exports = db
- 注册步骤
-
检测表单数据
-
检测用户名是否占用
-
密码加密处理
-
插入新用户
- 检测表单数据
const userinfo = req.body
if(!userinfo.username || !userinfo.password){
return res.send({
status: 201,
message:‘用户名、密码不能为空!’
})
}
- 检测用户名是否占用
- 从
db/index.js
导入db
const db = require(‘…/db/index’)
- 定义
SQL
sqlStr = ‘select * from t_users where username = ?’
- 执行
SQL
语句,判断是否占用:
db.query(sql, userinfo.username, (err, results) => {
if (err) return res.send({ status: 201, message: err.message })
if(results.length > 0){
return res.send({status:201,message:‘用户名已存在’})
}
//TODO:插入新用户
})
- 密码加密
- 执行以下指令,安装
bcryptjs
模块
npm i bcryptjs
- 在
router_handler/auth.js
中,导入bcryptjs
const bcrypt = require(‘bcryptjs’)
- 插入用户之前,使用
bcrypt.hashSync(password,len)
进行加密
userinfo.password = bcrypt.hashSync(userinfo.password,10)
- 插入用户
- 定义
SQL
sqlStr = ‘insert into t_users set ?’
- 执行
SQL
,插入用户
db.query(sql, { username: userinfo.username, password: userinfo.password }, (err, results) => {
if (err) return res.send({ status: 201, message: err.message })
if (results.affectedRows === 1)
return res.send({ status: 200, message: ‘success’ })
return res.send({ status: 201, message: ‘注册失败,稍后再试’ })
})
- 使用
PostMan
发送注册信息,操作如下:
- 我们可以查看数据库:
如此,注册方法变成功执行了。
==========================================================================
我们在代码中多次使用到了
res.send()
方法,非常繁琐,需要封装简化代码。(不优化也没啥)
- 在
app.js
中所有的路由之前定义并注册全局中间件
server.use((req, res, next) => {
//status = 200 success
//status = 201 failure
res.cc = function (err, status = 1) {
res.send({
status: status,
message: err instanceof Error ? err.message : err,
})
}
next()
})
这样在所有的路由中,res
都具有一个cc
方法,可以方便的向客户端输出结果。
====================================================================
表单验证,前端为辅,后端为主,永远不相信前端提交的数据
1.安装joi
包,为表单项定义验证规则
npm i joi
- 安装
@escook/express-joi
,实现自动验证表单数据
npm i @escook/express-joi
- 新建
schema/auth.js
用户验证规则模块
mkdir schema
touch schema/auth.js
- 初始化如下:
//schema/auth.js
//导入包
const joi = require(‘joi’)
/**
-
string() 字符串
-
alphanum() 字符数字串
-
min(len) 最短
-
max(len) 最长
-
required() 不为空
-
pattern(reg) 符合正则
*/
//用户名密码验证规则
const username = joi.string().alphanum().min(1).max(10).required()
const password = joi.string().pattern(/1{6,12}$/).required()
//登录注册验证对象
exports.reg_login_schema = {
body: {
username,
password
}
}
- 引入验证中间件
//引入验证中间件
const expressJoi = require(‘@escook/express-joi’) //(*)
- 引入验证规则
//引入验证规则
const { reg_login_schema } = require(‘…/schema/auth’)//(*)
- 注册验证中间件
//用户注册路由,添加验证中间件
router.post(‘/register’, expressJoi(reg_login_schema), authHandler.authRegister) //(*)
修改后的route/auth.js
,如下:
//router/auth.js
const express = require(‘express’)
//创建路由对象
const router = express.Router()
//引入验证中间件
const expressJoi = require(‘@escook/express-joi’) //(*)
//引入验证规则
const { reg_login_schema } = require(‘…/schema/auth’)//(*)
//引入auth处理模块
const authHandler = require(‘…/router_handler/auth’)
//用户注册路由,添加验证中间件
router.post(‘/register’, expressJoi(reg_login_schema), authHandler.authRegister) //(*)
//用户登录路由
router.post(‘/login’, authHandler.authLogin)
//共享router对象
module.exports = router
注意以上代码中(*)
处是修改的地方。
在app.js
中创建并注册全局错误处理中间件,用于处理验证错误(也可以处理其他错误)。
- 引入验证规则
//引入验证规则模块
const joi = require(‘joi’)
- 创建并注册全局异常中间件
//引入验证规则模块
const joi = require(‘joi’)
//注册异常捕获中间件
server.use((err, req, res, next) => {
if (err instanceof joi.ValidationError) return res.cc(err)
res.cc(err)
})
================================================================
-
表单验证;
-
数据查询;
-
密码比较;
-
生成
JWT
的Token
字符串
- 修改
router/auth.js
的路由如下:
//用户登录路由
router.post(‘/login’, expressJoi(reg_login_schema), authHandler.authLogin)
在router_handler/auth.js
中的登录处理方法中:
- 表单数据接收
const userinfo = req.body
- 定义
SQL
语句
const sqlStr = ‘select * from t_users where username=?’
- 执行查询
SQL
//执行查询
db.query(sqlStr, userinfo.username, (err, results) => {
//查询失败
if (err) return res.cc(err)
//查询结果不合理
if (results.length !== 1) return res.cc(“登录失败”)
//TODO:判断密码
})
调用
bcrypt.compreSync(表单密码,数据库密码)
判断密码是否一致,true
一致,false
不一致
//判断密码
const cmpRes = bcrypt.compare(userinfo.password, results[0].password)
if (!cmpRes) return res.cc(‘Login Failed’)
//TODO:登录成功,生成token
- 从查询结果中剔除
password
和avatar
两个值
const usr = { …results[0], password: ‘’, avatar: ‘’ }
- 安装
jwt
npm i jsonwebtoken
- 在
router_handler/auth.js
中导入jwt
const jwt = require(‘jsonwebtoken’)
- 根目录创建配置文件
config.js
,并共享jwtSecretKey
字符串(用于加密)
//config.js
module.exports = {
//一个复杂字符串
jwtSecretKey: “alkjflasngaoieakgbnasdfzxfgasdf”,
expiresIn: ‘24h’,//token有效期24h
}
- 加密用户信息,生成
token
//导入config
const config = require(‘…/config’)
//生成token
const tokenStr = jwt.sign(usr, config.jwtSecretKey, {
expiresIn: config.expiresIn,//token有效期为24小时
})
- 返回客户端
res.send({
status: 200,
message: ‘login success’,
token: 'Bearer ’ + tokenStr
})
- 测试登录
- 安装
express-jwt
模块(注意版本,较新版本不适合本教程)
npm i express-jwt@5.3.3
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
‘jsonwebtoken’)
- 根目录创建配置文件
config.js
,并共享jwtSecretKey
字符串(用于加密)
//config.js
module.exports = {
//一个复杂字符串
jwtSecretKey: “alkjflasngaoieakgbnasdfzxfgasdf”,
expiresIn: ‘24h’,//token有效期24h
}
- 加密用户信息,生成
token
//导入config
const config = require(‘…/config’)
//生成token
const tokenStr = jwt.sign(usr, config.jwtSecretKey, {
expiresIn: config.expiresIn,//token有效期为24小时
})
- 返回客户端
res.send({
status: 200,
message: ‘login success’,
token: 'Bearer ’ + tokenStr
})
- 测试登录
- 安装
express-jwt
模块(注意版本,较新版本不适合本教程)
npm i express-jwt@5.3.3
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-jfPiwbVV-1714973291406)]
[外链图片转存中…(img-4dzQqekK-1714973291407)]
\S ↩︎