2024年Web前端最新（内附源码）Node，想跳槽涨薪的必看

于 2024-05-06 13:28:23 发布
阅读量961 收藏 14
点赞数 22
分类专栏： 程序员 文章标签： 前端 跳槽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_dazhuzhu/article/details/138491866
版权

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

html5

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

  1. 在app.js中，导入并注册用户路由模块：

//导入用户路由

const authRouter = require(‘./router/auth’)

//注册用户路由

server.use(‘/api/auth’,authRouter)

6.启动并测试服务器

  1. 安装nodemon模块，用于启动服务器（nodemon模块可以在我们修改代码后自动重启服务器）：

npm i -g nodemon

  1. 使用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

  1. 使用postman测试接口是否配置正确，以POST方式分别访问localhost/api/auth/register和localhost/api/auth/login

image-20220524160923824

image-20220524161021302

7.抽离路由处理函数

为了保证路由模块的存粹性，将路由处理函数单独抽离出来放在router_handler文件夹中

  1. 在router_handler文件夹中创建并编辑auth.js文件如下：

//router_handler/auth.js

//注册处理函数

exports.authRegister = (req, res) => {

res.send(‘POST /register’)

}

//登录处理函数

exports.authLogin = (req, res) => {

res.send(‘POST /login’)

}

  1. 修改/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

  1. 使用nodemon启动并使用postman访问localhost/api/auth/register和localhost/api/auth/login，会得到和之前（6.3）相同的结果。

注册

================================================================

1.创建数据库

  1. 创建MySql数据库，此处以db_node为例:

CREATE SCHEMA db_node ;

如果还没有安装MySql，可以在这里下载MySql安装器

  1. 创建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;

2.安装并配置mysql模块

  1. 执行如下指令，安装mysql模块：

npm i mysql

  1. 创建/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

3.注册

  1. 注册步骤

  • 检测表单数据

  • 检测用户名是否占用

  • 密码加密处理

  • 插入新用户

  1. 检测表单数据

const userinfo = req.body

if(!userinfo.username || !userinfo.password){

return res.send({

status: 201,

message:‘用户名、密码不能为空！’

})

}

  1. 检测用户名是否占用
  • 从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:插入新用户

})

  1. 密码加密
  • 执行以下指令，安装bcryptjs模块

npm i bcryptjs

  • 在router_handler/auth.js中，导入bcryptjs

const bcrypt = require(‘bcryptjs’)

  • 插入用户之前，使用bcrypt.hashSync(password，len)进行加密

userinfo.password = bcrypt.hashSync(userinfo.password,10)

  1. 插入用户
  • 定义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: ‘注册失败，稍后再试’ })

})

4.注册测试

  1. 使用PostMan发送注册信息，操作如下：

image-20220524200637067

  1. 我们可以查看数据库：

image-20220524200805065

如此，注册方法变成功执行了。

优化res.send()

==========================================================================

我们在代码中多次使用到了res.send()方法，非常繁琐，需要封装简化代码。（不优化也没啥）

  1. 在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.安装包

1.安装joi包，为表单项定义验证规则

npm i joi

  1. 安装@escook/express-joi，实现自动验证表单数据

npm i @escook/express-joi

2.验证规则

  1. 新建schema/auth.js用户验证规则模块

mkdir schema

touch schema/auth.js

  1. 初始化如下：

//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

}

}

4.插入验证中间件

  1. 引入验证中间件

//引入验证中间件

const expressJoi = require(‘@escook/express-joi’) //(*)

  1. 引入验证规则

//引入验证规则

const { reg_login_schema } = require(‘…/schema/auth’)//(*)

  1. 注册验证中间件

//用户注册路由，添加验证中间件

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

注意以上代码中(*)处是修改的地方。

5.捕获验证错误

在app.js中创建并注册全局错误处理中间件，用于处理验证错误（也可以处理其他错误）。

  1. 引入验证规则

//引入验证规则模块

const joi = require(‘joi’)

  1. 创建并注册全局异常中间件

//引入验证规则模块

const joi = require(‘joi’)

//注册异常捕获中间件

server.use((err, req, res, next) => {

if (err instanceof joi.ValidationError) return res.cc(err)

res.cc(err)

})

6.验证测试

image-20220524205441247

登录

================================================================

1.登录步骤

  1. 表单验证；

  2. 数据查询；

  3. 密码比较；

  4. 生成JWT的Token字符串

2.表单验证

  1. 修改router/auth.js的路由如下：

//用户登录路由

router.post(‘/login’, expressJoi(reg_login_schema), authHandler.authLogin)

3.数据查询

在router_handler/auth.js中的登录处理方法中：

  1. 表单数据接收

const userinfo = req.body

  1. 定义SQL语句

const sqlStr = ‘select * from t_users where username=?’

  1. 执行查询SQL

//执行查询

db.query(sqlStr, userinfo.username, (err, results) => {

//查询失败

if (err) return res.cc(err)

//查询结果不合理

if (results.length !== 1) return res.cc(“登录失败”)

//TODO:判断密码

})

4.密码比较

调用bcrypt.compreSync(表单密码，数据库密码)判断密码是否一致，true一致，false不一致

//判断密码

const cmpRes = bcrypt.compare(userinfo.password, results[0].password)

if (!cmpRes) return res.cc(‘Login Failed’)

//TODO:登录成功，生成token

5.生成token

  1. 从查询结果中剔除password和avatar两个值

const usr = { …results[0], password: ‘’, avatar: ‘’ }

  1. 安装jwt

npm i jsonwebtoken

  1. 在router_handler/auth.js中导入jwt

const jwt = require(‘jsonwebtoken’)

  1. 根目录创建配置文件config.js，并共享jwtSecretKey字符串（用于加密）

//config.js

module.exports = {

//一个复杂字符串

jwtSecretKey: “alkjflasngaoieakgbnasdfzxfgasdf”,

expiresIn: ‘24h’,//token有效期24h

}

  1. 加密用户信息，生成token

//导入config

const config = require(‘…/config’)

//生成token

const tokenStr = jwt.sign(usr, config.jwtSecretKey, {

expiresIn: config.expiresIn,//token有效期为24小时

})

  1. 返回客户端

res.send({

status: 200,

message: ‘login success’,

token: 'Bearer ’ + tokenStr

})

  1. 测试登录

image-20220524214849181

6.Token解析

  1. 安装express-jwt模块（注意版本，较新版本不适合本教程）

npm i express-jwt@5.3.3

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

‘jsonwebtoken’)

  1. 根目录创建配置文件config.js，并共享jwtSecretKey字符串（用于加密）

//config.js

module.exports = {

//一个复杂字符串

jwtSecretKey: “alkjflasngaoieakgbnasdfzxfgasdf”,

expiresIn: ‘24h’,//token有效期24h

}

  1. 加密用户信息，生成token

//导入config

const config = require(‘…/config’)

//生成token

const tokenStr = jwt.sign(usr, config.jwtSecretKey, {

expiresIn: config.expiresIn,//token有效期为24小时

})

  1. 返回客户端

res.send({

status: 200,

message: ‘login success’,

token: 'Bearer ’ + tokenStr

})

  1. 测试登录

image-20220524214849181

6.Token解析

  1. 安装express-jwt模块（注意版本，较新版本不适合本教程）

npm i express-jwt@5.3.3

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-jfPiwbVV-1714973291406)]

[外链图片转存中…(img-4dzQqekK-1714973291407)]

  1. \S ↩︎

参考信息
关注
  • 22
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大学生静态HTML鲜花网页设计作品 DIV布局网上鲜花介绍网页模板代码 DW花店网站制作成品 web网页制作与实现
HTML网页设计
08-08 4177
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CS......
Web前端开发案例-源代码
08-04
html 和css 学习源码容翔实、结构清晰、循序渐进，基例实战紧密结合，既可作为HTML5+CSS3初学者的入门，也适合作为中高级用户对新技术作进一步学习的参考
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
电商网站前端源码
09-24
电商网站源码 功能挺全的 适合当作模板进行修改开发。
网站前端网页源码模板 (1080).zip
09-24
网站前端网页源码模板 (1080).zip
网站源码、模板分享（前端）
m0_52114506的博客
05-02 3004
链接：https://pan.baidu.com/s/17VyjUAULoGXY9vLupR93fQ 提取码：j8eu 网站源码查询下载
十八个超级酷HTML5响应式网站前端源码，6年以上开发经验前端开发人员整理
11-07
整站程序，精品集合，响应式源码，包含多种前端开发框架，bootstrap，jquery等前端开发技术！
Web前端开发实训项目源代码
01-24
用bootstrap做的一个校园前端实训项目，有很强的参考价值。
前端代码
02-14
前端代码
js前端完整项目源码开放
08-09
前端代码，适合学习前端技术初学者，也希望各位前辈能指点江山。
兰途科技官网——前端网站源代码
10-26
此网站属于前台网站，页面内容丰富，特效炫酷，使用css3媒体查询，js特效，响应式网站。
企业网站前端代码
10-15
企业官网前端代码，包括详情也，列表页，首页页面，有需要的伙伴点击下载哦
14款炫酷好玩的前端特效代码分享（附在线演示效果）
最新发布
qq_50594742的博客
12-15 4950
分享14款非常不错炫酷的前端特效源码 其中包含css动画特效、js原生特效、svg特效等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源。
res.cc的使用
weixin_45932157的博客
07-16 720
res.cc
nodejs--开发自己的项目——3.1--优化-封装响应给客户端的内容- res.send（状态和错误消息）
weixin_47295886的博客
09-15 779
在路由之前定义中间件——封装函数——全局定义中间件，中间件中拿到res对象，挂载函数，有默认状态的设置，instanceof是否是Error实例，判断错误对象和实例。在之后的路由处理函数中调用此函数--
给大家推荐一个系统源码，html前端源码，jquery插件免费下载的网站 - ONE源码
qq_33263255的博客
03-08 6238
最近在网上无意看到一个源码网站，感觉还不错在这边推荐个大家，网址：http://www.oneyuanma.com 首页： 这个网站里有好几个模块，我一一介绍一下。 一，毕业设计模块 个人觉得这个模块就是毕业生的福地，这个模块了有许多不同语言的系统源码，毕业生可下载参考一下，都是很实用的模板。 二，jQuery插件模块 在开发中，特别是前端，应该经常用到一些js插件，自己写...
10款经典的web前端特效的预览及源码
weixin_33682719的博客
06-18 2709
1.CSS3响应式导航菜单 今天我给大家介绍一下如何使用纯CSS来实现的一个响应式导航菜单，我们使用的是HTML5+CSS3技术，当浏览器窗口变小或者使用手机浏览器访问的时候，原本横条菜单会收缩成一个下拉菜单，当鼠标滑向菜单时下拉展示全部菜单。此方法可以应用到有特别多的链接菜单项目中，特别在移动项目中，它可以将所有菜单转换成一个按钮式的下拉菜单。 在线演示 源码下载 2.使用raphael...
分享28个前端优秀项目源码（React+Vue+Node）
weixin_42662753的博客
06-07 2644
分享28个前端优秀项目源码（React+Vue+Node）
【程序源代码】低代码前端框架
程序源代码
08-25 1884
关键字: 前端框架正文|内容01—【正文】一个低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。目前在百度广泛用于内部平台的前端...
HTML构建奥迪RS汽车主题网站 - Web前端期末作业源码
此外，还提供了其他相关资源链接，如Echarts大屏可视化源码和前端学习教程。" 在这个HTML设计的奥迪RS汽车主题网站中，主要知识点包括： 1. **HTML5**: HTML5是现代网页开发的基础，它引入了许多新的元素和API，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值