请选择 进入手机版 | 继续访问电脑版

[相关技巧] Node后端Express框架安装及应用

[复制链接]
查看211 | 回复43 | 2021-9-13 10:01:42 | 显示全部楼层 |阅读模式
目次

Express 框架核心特性:

  • 可以设置中心 件来相应 HTTP 哀求 。
  • 定义了路由表用于实行 不同的 HTTP 哀求 动作。
  • 可以通过向模板传递参数来动态渲染 HTML 页面。

Express安装

express的使用 过程有两种方式:

  •  方式一:通过express提供的脚手架,直接创建一个应用的骨架;
  • 方式二:从零搭建本身 的express应用布局 ;

方式一:安装express-generator

  1. npm install -g express-generator
复制代码

创建项目

  1. express express-app
复制代码

项目目次 如下

  1. ├── app.js
  2. ├── bin
  3. │   └── www
  4. ├── package-lock.json
  5. ├── package.json
  6. ├── public
  7. │   ├── images
  8. │   ├── javascripts
  9. │   └── stylesheets
  10. │       └── style.css
  11. ├── routes
  12. │   ├── index.js
  13. │   └── users.js
  14. └── views
  15.     ├── error.jade
  16.     ├── index.jade
  17.     └── layout.jade
复制代码

之后 cd 进入到对应的目次 下,然后将项目跑起来:

  1. npm install
  2. node bin/www
  3. node app.js
复制代码

方式二: 本身 搭建环境

上面通过express提供的脚手架,直接创建一个应用的骨架;现在 我们本身 从零搭建项目:

初始化一个新的项目:

  1. npm init -y
复制代码

安装express:

  1. npm install express
复制代码

新建app.js

在这里插入图片形貌

express 初体验

现在 搭建本身 的第一个express程序:在app.js中加入如下代码

  1. const express = require('express');
  2. // 创建服务器
  3. const app = express();
  4. app.get('/',(req,res) => {
  5. res.end("Hello World");
  6. });
  7. app.listen(8000,() => {
  8. console.log("服务器启动成功~");
  9. })
复制代码

进入项目根目次 下,在终端中将服务器跑起来:

  1. node app.js
复制代码

到欣赏 器:访问

  1. localhost:8000
复制代码
即可

请添加图片形貌

哀求 和相应

哀求 的路径中假如 有一些参数,可以如许 表达:

  1. /users/:userId
复制代码

  1. request
复制代码
对象中要获取可以通过
  1. req.params.userId
复制代码
;

返回数据

返回数据,我们可以方便的使用

  1. json
复制代码

  1. res.json
复制代码
(数据)方式;

  1. const express = require('express');
  2. const app = express();
  3. app.get('/users/:userId', (req, res, next) => {
  4. console.log(req.params.userId);
  5. res.json({username: "liyingxia", password: "8i8i8i8i" });
  6. });
  7. app.listen(8000, () => {
  8. console.log("静态服务器启动成功~");
  9. })
复制代码

Express 中心 件

认识 中心 件

Express是一个路由和中心 件的Web框架,它本身的功能非常少:

Express应用程序本质上是一系列中心 件函数的调用;

中心 是什么?

中心 件的本质就是一个回调函数;

这个回调函数担当 三个参数:

哀求 对象(request对象);

相应 对象(response对象);

next函数(在express中定义的用于实行 下一个中心 件的函数);

中心 件中可以实行 哪些使命 ?

实行 任何代码;

更改哀求 (request)和相应 (response)对象;

竣事 哀求 -相应 周期(返回数据);

调用栈中的下一个中心 件;

假如 当前中心 件功能没有竣事 哀求 -相应 周期,则必须调用

  1. next()
复制代码
将控制权传递给下一个中心 件功能,否则,哀求 将被挂起。

使用 中心 件

express紧张 提供了两种方式:

  1. app/router.use
复制代码
  1. app/router.methods
复制代码
这两种方式把中心 件应用到我们的应用程序中;

methods指的是常用的哀求 方式,比如:

  1. app.get
复制代码
  1. app.post
复制代码

  1. // express 中间件的使用
  2. const express = require('express');
  3. const res = require('express/lib/response');
  4. const app = express();
  5. app.use((req,res,next) => {
  6. console.log("middleware");
  7. next();
  8. });
  9. app.use((req,res,next) => {
  10. console.log("middleware");
  11. res.end("Hello Common Middleware");
  12. })
  13. app.listen(9000,()=>{
  14. console.log("中间件服务器启动成功~")
  15. })
复制代码

path匹配中心 件:

  1. //path 路径匹配中间件
  2. app.use('/home',(req,res,next) => {
  3. console.log("home middleware 中间件");
  4. next();
  5. });
  6. app.use('/home',(req,res,next) => {
  7. console.log("home middleware02");
  8. next();
  9. res.end("middleware");
  10. });
  11. app.use((req,res,next) =>{
  12. console.log("middleware");
  13. })
复制代码

path 和 method 匹配中心 件

  1. // path 和 method 匹配中间件
  2. app.get('/home',(req,res,next) => {
  3. console.log("home get middleware");
  4. next();
  5. })
  6. app.post('/login',(req,res,next) => {
  7. console.log("login post middleware");
  8. next();
  9. });
  10. app.use((req,res,next) => {
  11. console.log("common middleware");
  12. })
  13. app.use(express.json());
  14. app.use(express.urlencoded({extended:true}));
  15. app.post('/login',(req,res,next) => {
  16. console.log(req.body);
  17. res.end("登陆成功~");
  18. });
复制代码

日志 记录中心 件

假如 我们盼望 将哀求 日志 记录下来,那么可以使用 express官网开辟 的第三方库:morgan
morgan安装:

  1. npm install morgan
复制代码

怎样 用?直接作为中心 件使用 即可:

  1. const loggerWriter = fs.createWriteStream('./log/access.log', {
  2. flags: 'a+'
  3. })
  4. app.use(morgan('combined', {stream: loggerWriter}));
复制代码

上传文件中心 件

图片上传我们可以使用 express官方开辟 的第三方库:multer

multer安装:

  1. npm install multer
复制代码

上传文件:

  1. const upload = multer({
  2. dest: "uploads/"
  3. })
  4. app.post('/upload', upload.single('file'), (req, res, next) => {
  5. console.log(req.file.buffer);
  6. res.end("文件上传成功~");
  7. })
复制代码

添加上传文件后缀名:

  1. const storage = multer.diskStorage({
  2. destination: (req, file, cb) => {
  3. cb(null, "uploads/")
  4. },
  5. filename: (req, file, cb) => {
  6. cb(null, Date.now() + path.extname(file.originalname));
  7. }
  8. })
  9. const upload = multer({
  10. storage
  11. })
  12. app.post('/upload', upload.single('file'), (req, res, next) => {
  13. console.log(req.file.buffer);
  14. res.end("文件上传成功~");
  15. })
复制代码

上传多张图片:

  1. app.use('/upload', upload.array('files'), (req, res, next) => {
  2. console.log(req.files);
  3. });
复制代码

哀求 和相应

客户端传递到服务器参数的方法常见的是5种:

方式一:通过get哀求 中的URL的params;

方式二:通过get哀求 中的URL的query;

方式三:通过post哀求 中的body的json格式;

方式四:通过post哀求 中的body的x-www-form-urlencoded格式;

方式五:通过post哀求 中的form-data格式;

哀求 剖析

方式一:params

哀求 地址: http://locahost:8000/login/asd/ass

获取参数:

  1. app.use('/login/:id/:name', (req, res, next) => {
  2. console.log(req.params);
  3. res.json("请求成功~");
  4. })
复制代码

方式二:query

哀求 地址:http://localhost:8000/login?username=liyingxia&password=123456
获取参数:

  1. app.use('/login', (req, res, next) => {
  2. console.log(req.query);
  3. res.json("请求成功~");
  4. })
复制代码

方式三:通过post哀求 中的body的json格式;

在客户端发送post哀求 时,会将数据放到body中:客户端可以通过json的方式传递,也可以通过form表单的方式传递;

本身 编写中心 件来剖析 JSON:

  1. app.use((req, res, next) => {
  2. if (req.headers['content-type'] === 'application/json') {
  3. req.on('data', (data) => {
  4. const userInfo = JSON.parse(data.toString());
  5. req.body = userInfo;
  6. })
  7. req.on('end', () => {
  8. next();
  9. })
  10. } else {
  11. next();
  12. }
  13. })
  14. app.post('/login', (req, res, next) => {
  15. console.log(req.body);
  16. res.end("登录成功~");
  17. });
复制代码

实用 express内置的中心 件或者使用

  1. body-parser
复制代码
来完成:

  1. app.use(express.json());
  2. app.post('/login', (req, res, next) => {
  3. console.log(req.body);
  4. res.end("登录成功~");
  5. });
复制代码

方式四:通过post哀求 中

body的x-www-form-urlencoded格式;

在这里插入图片形貌

剖析 application/x-www-form-urlencoded:

可以使用 express自带的

  1. urlencoded
复制代码
函数来作为中心 件:

传入的

  1. extended
复制代码
用于表示使用 哪一种剖析 方式:

  • true:使用
    1. qs
    复制代码
    第三方模块;
  • false:使用
    1. querystring
    复制代码
    内置模块;
  1. app.use(express.json());
  2. app.use(express.urlencoded({extended: true}));
  3. app.post('/login', (req, res, next) => {
  4. console.log(req.body);
  5. res.end("登录成功~");
  6. });
复制代码

方式五:通过post哀求 中的form-data格式;

通过

  1. any
复制代码
借助multer去剖析 一些form-data中的平常 数据:

在这里插入图片形貌

  1. app.use(upload.any());
  2. app.use('/login', (req, res, next) => {
  3. console.log(req.body);
  4. });
复制代码

相应 方式

  1. end()
复制代码
雷同 于http中的response.end方法;

  1. res.end("获取成功~")
复制代码

  1. json()
复制代码
json方法中可以传入很多的范例 :

object、array、string、boolean、number、null等,都会被转换成json格式返回

  1. res.json({name:"liyignxia",password:"123456"});
复制代码

  1. status()
复制代码
设置状态码

  1. res.status(200);
复制代码

路由的使用

使用

  1. express.Router
复制代码
来创建一个路由处理程序:一个Router实例拥有完备 的中心 件和路由体系 ;

  1. // 用户相关的处理
  2. const userRouter = express.Router();
  3. userRouter.get('/', (req, res, next) => {
  4. res.end("用户列表");
  5. });
  6. userRouter.post('/', (req, res, next) => {
  7. res.end("创建用户");
  8. });
  9. userRouter.delete('/', (req, res, next) => {
  10. res.end("删除用户");
  11. });
  12. app.use('/users', userRouter);
复制代码

静态资源服务器

Node也可以作为静态资源服务器,并且express给我们提供了方便部署静态资源的方法;

  1. const express = require('express');
  2. const app = express();
  3. app.use(express.static('./build'));
  4. app.listen(8000, () => {
  5. console.log("静态服务器启动成功~");
  6. })
复制代码

错误处理方式

  1. app.use((req, res, next) => {
  2. next(new Error("USER DOES NOT EXISTS"));
  3. });
  4. app.use((err, req, res, next) => {
  5. const message = err.message;
  6. switch (message) {
  7. case "USER DOES NOT EXISTS":
  8. res.status(400).json({message})
  9. }
  10. res.status(500)
  11. })
复制代码

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

avatar 里干整团 | 2021-9-13 20:49:19 | 显示全部楼层
admin楼主好聪明啊!
回复

使用道具 举报

avatar 123457549 | 2021-9-16 22:29:16 | 显示全部楼层
有钱、有房、有车,人人都想!
回复

使用道具 举报

avatar 未注册的粽子邑 | 2021-9-19 01:19:46 | 显示全部楼层
感谢admin楼主的推荐!
回复

使用道具 举报

avatar 巴拿巴 | 2021-9-20 02:43:19 | 显示全部楼层
admin楼主,我告诉你一个你不知道的的秘密,有一个牛逼的网站,他卖的服务器是永久的,我们的网站用 服务器都是在这家买的,你可以去试试。访问地址:http://fwq.mxswl.com
回复

使用道具 举报

avatar 杨俊语语il | 2021-9-21 13:56:45 | 显示全部楼层
支持一下!
回复

使用道具 举报

avatar 0Zombies0 | 2021-10-4 09:52:35 | 显示全部楼层
admin楼主你想太多了!
回复

使用道具 举报

avatar Gordon520 | 2021-10-4 15:41:40 | 显示全部楼层
十分赞同admin楼主!
回复

使用道具 举报

avatar 123457757 | 2021-10-4 16:52:37 | 显示全部楼层
灌水不是我的目的!
回复

使用道具 举报

avatar 两个小胖猪遗 | 2021-10-4 17:32:28 | 显示全部楼层
经典!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则