【老板要我啥都会】|前端升全栈之项目使用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

相关文章
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
875 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
前端开发 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
1211 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
1026 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
1184 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
750 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
人工智能 JavaScript 前端开发
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
Vue在处理少量数据和有限dom的情况下技术已经非常成熟了,但现在随着AI时代的到来,海量数据场景会越来越多,Vue优化技巧也是必备技能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
JavaScript 中间件 关系型数据库
构建高效的后端服务:Node.js 与 Express 的实践指南
在后端开发领域,Node.js 与 Express 的组合因其轻量级和高效性而广受欢迎。本文将深入探讨如何利用这一组合构建高性能的后端服务。我们将从 Node.js 的事件驱动和非阻塞 I/O 模型出发,解释其如何优化网络请求处理。接着,通过 Express 框架的简洁 API,展示如何快速搭建 RESTful API。文章还将涉及中间件的使用,以及如何结合 MySQL 数据库进行数据操作。最后,我们将讨论性能优化技巧,包括异步编程模式和缓存策略,以确保服务的稳定性和扩展性。