【老板要我啥都会】|前端升全栈之项目使用express重构项目(下篇)

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
日志服务 SLS,月写入数据量 50GB 1个月
简介: 这个时候我们就可以去把一些自己带有的不用的注释,安装一下我们的mysql和xss.新建一个db文件夹,新建一个mysql.js,将其中的内容拷贝过去,在新建一个conf文件夹,下面建一个db.js,也可以拷贝。

前言

承接上一篇文章,《前端升全栈之项目使用express重构项目(上篇)》,我们继续讲解下一篇的项目使用express重构项目完整的下一篇,好了,我们马上进入我们今天的正题!!!

1.express开发项目

express开发接口:

  1. 初始化接口,之前的部分代码可以复用;
  2. 开发路由,并可以实现登录功能;
  3. 记录日志;
  4. 初始化环境:
  5. 安装插件mysql xss;
  6. mysql control resModel 相关代码可以复用;
  7. 初始化路由;

这个时候我们就可以去把一些自己带有的不用的注释,安装一下我们的mysql和xss.新建一个db文件夹,新建一个mysql.js,将其中的内容拷贝过去,在新建一个conf文件夹,下面建一个db.js,也可以拷贝。这就是数据库先关的。在接下来拷贝controller、model文件夹过去,新建一个utils文件夹,下面建一个cry文件,也可以拷贝过去;至于具体的路由,这个也可以知己拷贝,当然list的登录模块可以展示注释,还没有实现登录,而且返回的话现在是使用res.json。这样基本就可以调用数据库了。  

router.get('/list',function(req,res,next) {
   let author = req.query.author || ''
const keyword = req.query.keyword || ''
const result = getlist(author,keyword)
return result.then(listdata) => 
{
  res.json(
new SuccessModel(listdata))
}
}

2.express处理session

登录:

  • 使用express-session和connect-Redis,简单方便;
  • req.session保存登录信息,登录校验做成express中间件

先安装 express-session ,让我们轻松实现 session 的功能,原理与之前相同,在 app.js 引入该插件。 使用的话也是和一般的中间件一样,直接 app.use ,只不过里 面需要写成函数,然后会返回一个中间件。该函数需要几个 参数:secret (即密匙)、 cookie (配置 path ,这里设置为 / 根目录,这样子到处都可以用,还有 httpOnly 设置为 true , 当然这两个都是默认配置,写不写一样的而 maxAge 直接传入一个时间段即可,相比之前的 expire 要简洁,这里写 24 小时)。

如此我们随意访问一个路由就可以自动设置 session ,我们还可以设置一个路由来测试,在这里可以通过 req.session 拿到session(主要是因为写注册 session 在注册路由之前!)

router.get(''/session-test),function(req,res,next) {
  const session = req.session
  if(session.viewNum == null) {
     session.viewNum = 0;
} 
session.viewNum++
res.json({
viewNum:session.viewNum
})
});

处理session

app.use(session({
  secret:'ODST123!#',
cookie:{
path:'/',
httpOnly:true,
maxAge:24*60*60*1000
}
)

3.session链接redis

通过不同浏览器访问 session-test 确实可以看到不同的访问 数量说明有在区分用户了。 接下来实现登录,这个直接去拷贝就行。注意这里不需要再手动加到 redis ,在设置 session 的时候就已经自己加了。而且返回也记得改成 res.json 。 再定义一个测试是否已经登录的路由 login-test 。 在实现了登录功能后,我们需要连接 redis 了,很简单,先安装 redis 和 connect-redis 包。在 db 下面建一个 redis.js ,直接拷贝之前的 redis (到客户端那一部分就行)。 然后回到 app.js 引入这个库(是函数所以让它立即执行且传入 session )为 RedisStore 。 然后在 session 之前,引入 redisClient , new 一个 RedisStore 把其传进去就行作为配置。现在 session 就可以多一个配置

store ,传入 sessionStore 就行(之前没有写就是存在内存里,现在 redis 了)。

2345_image_file_copy_511.jpg

router.get('/login-test',function(req,res,next){
  if(req.session.username) {
   res.json({
     errno:0
msg:'已经登录'
})
return
}
   res.json({
errno:1,
msg:'没有登录'
})
})

到此呢,可以实现登录验证同时还可以通过 test 查看登录状态(即登录 or 未登录)。


4.登录中间件

我们查看 redis 可以看到已经储存了 session ,同时登录的话也会把一些公开的个人信息传进去。那么我们就能回到 blog 去处理登录权限(当然 check 还不能实现)接下来做一个登录校验,新建一个 middleware 文件夹,下面 建一个 loginCheck.js 文件,引入 ErrorModel ,输出一个中间 件,判断是否登录(其实就是刚才写的 test !)如果登录则调用 next ()然后 return ,如果没有登录返回错误 model 。 自此我们的登录就全部完成了。

  问题:使用插件时提示某某插件的函数不存在,很简单,肯定是传入这个插件的参数出错了,这里是发现 redis 向外暴露函数的时候不是默认暴露,引用的话也是奇葩直接引入文 件,反正规范一下引入导出就可以了。

const redis = reqiure('redis')
const { REDIS_CONF } = require('../conf/db')
//创建一个客户端
const redisClient = redis.createClient(REDIS_CONF.portm,REDIS_CONF.host)
redisClient.on('error',err=>{
console.log(err)
})
module.exports = redisClient

到这里我们进入任意页面都会在 redis 触发缓存 session(只 不过没有登录的话里面没有个人信息),登录后会在 session添加个人信息,下一步有了 redis ,就可以解法 blog (一部分)

2345_image_file_copy_512.jpg

 定义登录校验的中间件;

2345_image_file_copy_513.jpg

5.开发路由

修改 blogs ,虽然没有写 check 校验,但是我们可以直接通过 是否有 username 来校验,如果等于 null 直接就返回错误 model。(如此未登录访问管理员界面就会报错) 接下来写 detail 路由,直接拷贝, id 的话通过 req.query.id 拿 到,且记得 res.json 返回。 接下来写 new ,中间件写箭头函数还是普通的 function 都行 (但是要统一),这个需要引入之前写的登录中间件,直接就能在参数中用。 更新也要登录中间件也是直接用就行。删除操作也是如此。 像现在这种一个一个函数就很好拆分,不会说都是一个个 if 什么的,另外登录也写成了中间件放在外面,比较规范标准(其它地方也可以使用)。 总结一下就是换成 res.json 、需要登录校验的引入登录中间件 为参数、拿不到的参数(未全局定义)换成 req.query. 参数。

2345_image_file_copy_514.jpg

2345_image_file_copy_515.jpg

2345_image_file_copy_516.jpg


2345_image_file_copy_517.jpg

6.Morgan

关于自定义日志直接打印自然是不会记到文件,但是后面PM2 有办法记到文件;

  1. access log记录,直接使用脚手架推荐的Morgan;
  2. 指定以日志使用console.log和console.log就可以了;
  3. 日志文件拆分、日志内容分析,之前说过,就不说了

使用Morgan写日记

目前已经有日志了,只不过是直接打印在控制台且内容有点 少。这个还可以再加一个参数(对象),其中配置 stream: process.stdout(则会打印在控制台,默认参数,不加也一样, 也是用流来输出!)。 那么第一个参数是什么意思,我们可以访问 github 找到 predefined Formats 找到有关第一个参数的信息,有多种情况,简单来说就是规定了输出的内容/格式(不同情况输出不 同内容,有 dev、shot、tiny 等等),输出内容比较丰富完整的是 combined(线上用)。

2345_image_file_copy_518.jpg

既然有多种情况,那么是时候来设置另一个环境 prd 了(暂 时用 nodemon 代替,正式是用pm2)。 回到 app.js 添加一个 ENV 变量来判断当前环境,如果不是线上环境直接用之前的日志,打印到控制台就行。如果是线上环境就改成 combined,stream 也要改。我们建多一个 logs,里面建多一个 access.log,引入 fs 和 path,生成文件名、写入流,stream 就可以指向这个写入流就行。那么日志就会写 入到文件中。 所以这样子直接用就比较规范标准,也不需要考虑怎么写入 文件的。(懂原理且会用工具) 接下来就是自定义日志,直接在需要的任意地方打印任意信 息即可

2345_image_file_copy_519.jpg

7.中间件原理

express中间件原理:

  1. 回顾中间件使用;
  2. 分析如何实现;
  3. 代码演示

这个我们只是实现大体的中间件,就不一定源码就是这么实现。回顾中间件的话我们看之前写的 express-test 就行,那么怎么 实现,至少 use、listen、get、post、next 接口怎么去实现。 而且 use、get、post 要兼容只传入一个中间件的情况和传入一个中间件加路由和传入多个中间件加路由的情况。

分析

  1. app.use使用注册中间件,先收集起来;
  2. 遇到http请求,根据path和mothod判断触发哪一个;
  3. 实现next机制,机制,即上一个通过next触发下一个;

8.中间件原理-代码实现

 新建一个 lib (库),建一个 express 文件夹,下面建一个 like-express.js,就在这里写中间件。

引入 http ,然后把数组的 slice 方法单独定义成一个常量。建一个 LikeExpress 类,然后返回这个类的实例(以函数的形式在里面返回类的实例,即工厂函数)。 类里面定义一个构造函数,定义一个存放中间件的列表(all、 get、 post ,这些都以数组形式),然后就可以定义 use 、 get 、

post 、 listen 四个函数。

  由于其中三个函数都有类似的部分如注册中间件故抽离出来,只需要传入一个参数 path 。定义一个 info 空对象保存注册信息,判断参数是字符串否是就是路由放到 info ,不是就默认为/ 根路由,因为如果第一个参数不是路由也就是说没有写路由,其实也应该认为有路由且是根路由,只不过是被忽略了。

  如果带路由的话我们切掉第一个参数并且利用 slice 把剩下参数变为数组,如果不带的话就直接从第一个参数开始转化为数组。最后返回 info 对象即可,也就是说 register 函数只是对传入的参进行处理,带路由的保存路由且剩下参数变为数组存入 stack ,如果不带路由保存根路由且全部参数变为数组存入 stack 。

  接下来看 use ,利用 apply 把参数丢到 register 函数,再将得 到的传入列表, get 和 post 也是如此,只不过放到不同的数 组。

 接下来写 listen ,它可以传多个参数,我们解构一下,调用createServer 方法,需传入回调函数(在外面定义),然后简化解构的参数放到 listen 里面就行了,也就是说我们用了 node.js 本身的 listen 方法而不是自己去写,这就很好。 写回调函数返回一个 res.json 函数,设置表头和返回数据, 接下来获取 url 和 method ,因为要区分哪些需要访问哪些不 需要访问,通过 match 函数(外面定义)分析(需要传入 url 和 method ),传给一个变量。 match 函数呢,定义一个 stack 数组来存储需要返回需要访问的路由什么的,如果是发送图标的,我们大可不管直接返回。 再定义一个获取具体请求类型的数组,其实我们只需要拿到全部的路由,再传入 method 让它们自己看明白谁是要获取就行了(就限制了 method 已经),之后就可以遍历该数组,

  通过 path 来限制,将符合路径要求的丢到 stack 。回到回调函数,还需要再调用一个 handle 函数,传入 req 、 res 和 stack ,主要是控制 next 如何往下。首先里面调用一个 next函数然后立即执行,通过数组的 shift 拿到第一个中间件,如果存在则立刻执行中间件的函数,而且还要把 next 传进去实现套娃。

2345_image_file_copy_521.jpg

2345_image_file_copy_522.jpg

2345_image_file_copy_523.jpg

2345_image_file_copy_524.jpg

相关文章
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
407 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
7月前
|
前端开发 JavaScript 安全
|
9月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
584 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
456 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
9月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
459 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
10月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
327 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
8月前
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
259 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
982 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
302 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    344
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    105
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    135
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    110
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    208
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    230
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    121
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    61
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    116
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    154