nodejs express模块

最新推荐文章于 2024-05-15 18:26:11 发布

奥D

最新推荐文章于 2024-05-15 18:26:11 发布

阅读量757

点赞数 3

分类专栏： Nodejs从基础到精通笔记文章标签： node.js

本文链接：https://blog.csdn.net/iloadj/article/details/109478328

版权

笔记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

Nodejs从基础到精通

9 篇文章 0 订阅

订阅专栏

nodejs express

Web 应用程序 Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架

express 如何启动一个服务器
//创建一个程序
const app = require(“express”)

express 原生路由
  
  app.get(path,callback)

  app.get("/home",(req,res)=>{
    //返回给前端数据
    res.send({
      code:xx,
      msg:xx,
      data:xx
    }) //可以是字符串、也可以是json或者数据
  })

  app.post("/home",(req,res)=>{
    //返回给前端数据
    res.send({
      code:xx,
      msg:xx,
      data:xx
    }) //可以是字符串、也可以是json或者数据
  })

实际操作

例:
npm init 

npm install  express -S

index.js
const express = require('express');
const app = express()
// 处理get请求，res.send给前端返回值
app.get("/home",(req,res)=>{
    res.send("hello node")
})
// 处理post请求，res.send给前端返回值
app.post('/home', (req,res)=>{
    res.send('内容')
  })
//监听端口
app.listen("3210",()=>{
    console.log("服务器启动成功,地址是"+"http://localhost:3210");
})

nodemon 解决服务器热加载问题

npm i nodemon -g

运行 nodemon  文件

建议：
  package.json
    script:{
      "start": nodemon index.js
    }
  npm run start

postman 用于做接口测试

设置路由请求路由携带参数（参数解析）

1,get请求 获取 商品列表数据
  cateId  指定  你要 获取 哪个分类下的商品
  current 哪一页数据
  pageSize 一页多少条
  order 事件 销量  价格

后端路由解析参数

解析get请求传参

app.get('/home', (req,res)=>{
  // req.query 就是get请求的参数  解析成对象
  res.send('get请求')
})

//http://localhost:3000/home?current=1&pageSize=10

/*req.query
  {
    current: '1',
    pageSize: '10'
  }*/

解析post请求传参

post 请求 body 请求参数 express库默认没有这个功能

post
请求是在请求体 body 携带
需要设置 请求格式
"content-type":"x-www-form-urlencoded"	//解析对象
"content-type":"multipart-formdata"  //上传文件
"content-type":"application/json" //解析JSON字符串

解决办法:body-parser

安装
npm i body-parser -S

const bodyParser = require('body-parser')
// 解析post 传递的 x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: false}))

// 解析post 传的 json格式参数
app.use(bodyParser.json())

例:

// 给post请求设置解析

app.use(bodyParser.urlencoded({extend:false}))

app.use(bodyParser.json())

app.post("/home",(req,res)=>{

   console.log(req.body);//提交的内容

   res.send("请求到了，不过你请求错了")

})

中间件渐进式框架（核心包只有基础功能核心包体积特别小）

中间件可以往核心包增加其他的功能（第三方插件）

如何使用中间件

app.use([url,]中间件)
中间件其实就是一个函数
const middleware1 = (req,res,next)=>{

}
分类：
  全局中间件（所有请求都拦截）
  app.use(中间件)
  app.use('/',中间件)
  局部中间件（只拦截特定地址的请求）
  app.use("/a",中间件)

例子:

//定义中间件

const middleware = (req,res,next)=>{
	//给请求过来的数据添加内容
    req.body={
        a:"哈哈，你请求了"
    }
	// 命令行输出获取后的信息
    console.log("我拦截了");

    next()
	// 代码在这里写是send后才会执行
}

//使用中间件:局部中间件

app.use("/home",middleware)

后端返回给前端格式规范 restfulApi

规定后端
{
  code: 0, // 自定义错误编码
  msg: "登录成功",
  data: []
}

规定前端：

获取数据  get
提交数据  post
更新数据  put
删除数据  delete

MVC

m model 数据
v view 视图（html）
c controller 控制器 ⭐核心业务代码

路由中间件

const router = require('express').Router();
// router 相当于小型的 app const app = express()
// router.get() .post() .use()

router.get('/home', (req,res)=>{
  res.send('我是home')
})

app.use(router)

路由中间件的分离

//引入express
const express = require('express');
const bodyParser = require('body-parser');
//引入routes文件夹下的home.js和list.js
const homeRouter = require('./routes/home');

//home.js(需要放在同级目录下routes文件下)
const router = require('express').Router();
router.get("/home",(req,res)=>{
    console.log("home请求了");
    res.send("这是home页面")
})
module.exports=router

//引入list.js文件 引入外部路由(需要放在同级目录下routes文件下)
const listRouter = require('./routes/list');

//list.js
const express = require('express');
const router = require('express').Router();
router.post("/list",(req,res)=>{
    console.log(req.body);
    res.send("加密的列表页")
})
module.exports = router

//引入get请求下的home.js
app.use(homeRouter)
//post请求时需要设置post请求声明
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))
//引入post请求的list.js
app.use(listRouter)

app.listen(4123,()=>{
    console.log("端口启动成功");
})

静态资源中间件

功能：以服务器的地址来访问服务器中的资源

static中间件


app.use(express.static('./public'))
public
  imgs
    a.jpg

locahost:3000/imgs/a.jpg //找到这张图片,这个时候已经进入public文件夹了，在路径中就不需要加/public了,下面同理。

app.use('/static',express.static('./public'))
//加了path,在url中就需要加前缀
public
  imgs
    a.jpg
localhost:3000/static/imgs/a.jpg

例:


//获取public文件夹下的静态资源
const express = require('express');
const app = express();
app.use('/static',express.static('./public'))
app.listen(4123,()=>{
    console.log("端口启动成功");
})

打开浏览器中输入http://localhost:4123/static/imgs/a.jpg===>会输出图片

express 模板引擎

我们使用 get请求访问 /home home html页面在页面加载
/news news html页面浏览器上加载

返回html同时， html中的数据（从数据库取数据）
拿到数据还需要渲染

模板引擎主要功能在于渲染页面（取代了传统了拼接字符串）

常见的nodejs 模板引擎有哪些
ejs 温和的非破坏式（内部写法跟html是一样的只是赋予了html 一些渲染的功能，如循环，条件判断，引入公共模板…）
pug 侵入式（破坏式）破坏了html 原有的写法

jade

模板引擎渲染页面的（html写循环，判断…）

使用步骤：

下载:npm i ejs

2.设置:在app.js中
  app.set("views","./views")
    //告诉服务 视图 文件 放在 views目录中
  app.set("view engine","ejs")

  views文件夹中
    home.ejs  里面代码 就是html代码
    如何使用
   routes文件夹中home.js(home路由)中
    router.get("/home",(req,res)=>{
      res.render("index")
      //这里使用render发送数据，不使用send，第一个参数必须是地址。 
    })

使用模板引擎携带数据的玩法

home路由中:

res.render(模板,{
    //携带数据
    arr:[1,2,3,4],
    title:"写着玩"
  })

home.ejs中

<%console.log(arr,title)%>
//用户请求后，会在命令行输出   [1,2,3,4] 写着玩
//当然还有更加实用的例子

模板引擎综合实例

目录:public>imgs>lufei.jpg &css>home.css
	routes>home.js&news.js
	views>home.ejs&news.ejs
	app.js

//app.js(npm i express body-parser ejs -S)
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();
const homerouter = require('./routes/home');
const newsrouter = require('./routes/news');
// 监听public目录下的静态资源,监听的目录在之后引入的时候就不需要写这个目录
app.use('/static',express.static('public'))
//设置视图路径
app.set("views",path.join(__dirname,"views"))
//给post请求做解析
app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())
// 设置模板引擎
app.set('view engine','ejs')
app.use(homerouter)
app.use(newsrouter)
app.listen(3210,()=>{
    console.log("连接成功,端口号:"+3210);
})

//home.js
const router = require('express').Router();
router.get("/home",(req,res)=>{
    res.render("home",{
        title:"写着玩",
        arr:[
            {id:1,user:'小明',age:18,gender:0},
            {id:2,user:'小好',age:17,gender:1},
        ]
    })
    //在此处携带了数据，在客户端请求后会将数据传给ejs页面
    //在ejs页面中可以使用js代码进行操作，只需要将代码放在 <% 代码 %>
})
module.exports = router

//home.ejs(html页面)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="static/css/home.css">
    <!-- 这是因为监听时设置了path:'static',如果没有设置path前缀，那么直接/css/home -->
</head>
<body>
    <h1>这里是home页面</h1>
    <img src="static/imgs/lufei.jpg" alt="">
    <ul><!--注意ejs的语法-->
        <% for(var i=0;i<arr.length;i++){ %>
            <li>
                <h5><%= arr[i].user %></h5>
                <p><%= arr[i].age %></p>
                <p><%= arr[i].gender===0?"男":"女" %></p>
                <p><%= title %></p>
            </li>
        <% } %>
    </ul>
</body>
<script type="text/javascript" src="" ></script>
<script type="text/javascript">
    
</script>
<%console.log(arr,title)%>//会在命令行输出
</html>

ejs语法

router.get('/home',(req,res)=>{
    res.render('home')
})

render 方法 有两个参数
第二个参数 是 object 
携带 数据
render('home',{
    arr:[
        1,2,3,4
    ]
})

渲染语法
    <% 这里可以写任意的js语法但是不是输出 %>
    <%= 赋值输出 （一定保证是一个值或者表达式） %>
    <%- 富文本数据 %>  可以解析 html标签
    引入 公共 模板
    <%- include('head') -%>
    引入公共模板，比如head.ejs只存放头部模板使用<%- include('head') -%>放在页面顶部即可以引入.

奥D

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
nodejs express模块

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录nodejs express实际操作nodemon 解决服务器热加载问题postman 用于做接口测试设置路由请求路由携带参数（参数解析）后端路由解析参数解析get请求传参解析post请求传参post 请求 body 请求参数 express库默认没有这个功能解决办法:body-parser例:中间件渐进式框架（核心包只有基础功能核心包体积特别小）后端返回给前端格式规范 restfulApiMVC路由中
复制链接

扫一扫