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

简介: 实际工作其实是都需要使用框架 / 工具的,可以让我们更加关注业务逻辑(封装了一些基本的 API 什么的),且有一定的流程和标准(中间件机制)来开发插件/ 工具(拆开,低耦合) 什么的来形成一个解决方案.

1.项目开始

实际工作其实是都需要使用框架/工具的,可以让我们更加关注业务逻辑(封装了一些基本的 API 什么的),且有一定的流程和标准(中间件机制)来开发插件/工具(拆开,低耦合) 什么的来形成一个解决方案.

使用express:

  1. express是Nodejs最为常用的web server框架;
  2. 什么是框架?
  3. 不要以为express过时了
  4. 目录:
  5. express下载、安装和使用,express中间件机制
  6. 开发接口,连接数据库,实现登录,日志记录
  7. 分析express中间件原理

2.express安装

框架基本上都是使用脚手架来生成简单的代码;

介绍express:

  1. 安装过程(使用脚手架express-generator)
  2. 初始化代码介绍,处理路由;
  1. 使用中间件;

安装express:

  1. npm install express-generator -g
  2. express express-test
  3. npm install & npm start

在最外面安装 express-generator-g(全局安装),然后 express blog-express 生成 blog-express 项目,进入目录下 npm install 运行 npm start 就可以访问了,打开 bin 文件夹里面有一个 www.js 有说明默认端口是多少! 为了方便重启和环境区分,依然需要按照 nodemon 和 cross-env。

所以 www.js 就是提供和执行一个 APP 的服务,具体服务(回调函数)在 app.js 书写。加一个 dev 命令。 简单看一下目录,bin 里面有一个提供执行 app.js 服务的 www.js, public 是存放静态目录(同样的是 web server 不必关心的),route 存放的是路由, view 存放的是 html 模板(由

于做 web server 故不必关心)。 至于为什么会有这两个用不到的文件夹,主要是框架提供的 是一个全栈项目,而我们只是关注后端(忽略 views 和 public 就行。

3.介绍express的入口代码

介绍app.js

  1. 各个插件的作用
  2. 思考各个插件的实现原理(结合之前学过的知识)
  3. 处理get请求和post请求

首先是 createError 这个就是针对一些路由错误,传入一个指定错误的数字如 404 返回一个比较友好的提示(并不重要)。 express 和 path 没什么好说的,当然是需要引入。 cookieParser 就是用来解析 cookie 的,就不用自己写,注册就行了。处理后我们在路由那里就可以使用 req.cookies 访问 cookie 了,类似于我们之前做的,只不过考虑到更多的意外情况什么的,这个已经被封装成插件我们直接使用就行。

  logger/morgan 就是处理日志的,我们之前要自己实现 access函数还需要定义日志内容,这里直接使用就行,当然,需要一些配置。 原理上这些插件和我们自己写的是差不多的,主要是更完善

一些。

  接下来就是引入路由,初始化 express 为 app ,也就是本次系统运行后就可以监听客户端访问,每次客户端访问/http 请求都会形成一个实例.至于 set 可以不关心,主要是注册视图引擎(前端页面, views 部分),由于主要后端可以不管。 接下来就是 use ,就是使用各个插件,什么是 express.json ? 类似我们的 postData 用来获取 post 数据且放在 req.body ,而 一旦使用这个插件我们就可以直接在路由中使用req.body 直接访问 post 数据(当然这个只是局限 content-type 是 json 的情况)。 什么是 express.urlencoded ?这个也是和上面差不多,只不过 是监听 content-type 为 x-www-form-urlencoded ,一般是上传的 key vlaue 那种表单提交的数据,也就是说兼容处理不是json 的格式。目的都是往 req.body 塞 post 的数据。 然后是处理 cookie 的,而什么 static 也可以忽略,主要是处理静态文件的,注释就行。

  接下来是注册路由,这里直接 router.get ,括号内加一个路径远比我们直接 if 判断简洁,且其是回调函数而不是直接一群if。那么为什么注册的时候还需要加路径?其实应该看注册时的路径才对(示例都是/ ,直到注册的时候才有区分,之前注释的应该取消,不然页面有用到,出不来)也就是说注册的时候是父路径,写的时候是子路径(父路径如/user ,子路径是/abc 则访问 /user/abc 才能到这个页面!)! error handler 主要是处理程序出现的问题,抛出问题,不过 这里 env 要与我们环境变量那里设置的一致才行(里面不是 dev 即不是开发环境就不把 bug 抛来而是返回一个空,说明上线的话有 bug 不应该把自己的错误抛给外网的用户)。

4.演示express怎么处理路由

  我们直接新建 blog.js 和 user.js 作为我们自己的路由。 blog 这里直接写一个 /list 的路由,返回一个 json 就行,回到 app.js 引用 blog ,注册路由。再写个 detail ,好处是我们只需 要关注最底层的路由,顶层的父路由已经写完了,这个分离 就比较合适修改,只需要修改父路由即可,拆分更加明确。 至于返回 json 格式,我们之前需要 req.end 返回一个 json 化 的字符串,不能直接返回 json ,不过由于 express 帮我们封 装了一些,所以可以很轻松的使用 res.json 返回一个 json 格 式的数据,自动帮我们转换,甚至帮我们加了个返回格式的 头(content-type)。至于每次定义一个路由有一个 next !这个中间件会提到。

  接下来是 user.js ,这个的 post 数据可以直接从 req.body 拿到。下节的中间件就可以解释什么是 use 和 next 了。

const blogRouter = require('./routes/blog');
comst userPouter = require('./routes/user'0;
app.use('/api/blog',blogRouter);
app.use('/api/user',userRouter);

2345_image_file_copy_506.jpg

2345_image_file_copy_507.jpg

5.express中间件

中间件机制:

  1. 有很多app.use
  2. 代码中的next参数是什么?
  3. 带着这一些一问,我们先看一段代码;

首先建一个 express-test 文件夹,npm 初始化一些,入口文件改成 app.js,建一个 app.js,安装 express。 注意 use 可以传入一个路由然后处理函数,也可以直接就传 入一个函数。

引入 express ,建一个 express 示例(称为 app )。第一个 use打印一段话然后 next (),第二个 use 设置一个 cookie 然后 next(),第三个 use 设置一个定时器随便出来东西然后 next (),第四个 use 传入一个路由,随便打印一个内容然后 next ()。最后一模一样的改 use 为 get ,再加一个一模一样的改为 post 。

 先解释三个路由, use 是不管什么请求(get/post 乱七八糟的请求都可以走这个),get 是 get 请求, post 是 post 请求。 (注意如此使用与前面用 router 也是一样的) 再加一个 get 请求其它路由随便打印东西,返回点内容,这 次不要 next (),再加个 post 请求其它路由随便打印东西也

返回点东西,不要 next ()。最后 use 统一处理 404 ,返回一个 404 的信息。最后 app.listen 监听一下才能跑起来。 Ok,再注意一下,不过走哪个路由其实都会触发那些直接写函数的 use (没写路由就是会命中,都会走这个 use ,要是写明路由,不一样自然不会命中不会走)。走完这一个发现有 nex ( t )就会去找同样的 get/post 请求(取决于有路由的函数是什么请求)和普通的 use (不带 get 和 post,当然有路由的话只要是包含就行,如请求的是 /api/a ,那么有个/api 的路由也是可以)。从上到下执行app.use 直接注册的函数和 app.use 直接注册而且前面有路由(该路由符合父路由)的函数。分为 get 请求和 post 请求和随便瞎编的 get 请求(前面无 api 和前面有 api )四种情况。

  那么什么是中间件,就是上面这么多函数,里面的内容就是中间件(当然参数需要有那三个 req 、 res 、 next )即 app.use 里面的内容,可以通过 next ()向下一步步合理的串联。 还有另外的写法,就是 app.use/get/post 可以插入多个中间 件/ 函数(当然前面的中间件记得 next )!当然了多函数的话,其实最好是最后一个函数是专门处理的主函数,前面的函数作为验证函数,也不要太多(3 以内)就足够了。

2345_image_file_copy_508.jpg

2345_image_file_copy_509.jpg

2345_image_file_copy_510.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请求接口-优雅草卓伊凡
|
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
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
431 6

热门文章

最新文章

  • 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