nodejs express模块

---

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写循环，判断…）

使用步骤：

1. 下载: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') -%>放在页面顶部即可以引入.