Node.js学习历程【五】之 Express模块

一、Express是什么

基于Node.js Web的开发框架

安装

初始化项目生成版本库

npm init -y

安装项目依赖模块

npm install express --save

搭建后端服务

1. 引入express模块
2. 调用express方法生成express实例对象
3. 设置路由
4. 监听端口号

const express = require('require')
const app = express()
app.get('/',(req,res)=>{
    res.send('首页')
})

app.listen(3000,()=>{
    console.log('http://127.0.0.1:3000')
})

路由

语法：app.method(path,callback)

• app express的实例对象
• method 请求方法get|post|put|delete
• path 是路径，必须以'/'开头
• callback 回调函数，路由的处理函数
  • req 请求
  • res 响应

req.query:获取get请求传递过来的参数

//http://127.0.0.1:3030/api/blog/login?id=1
app.get('/api/blog/login', (req, res) => {
    let id = req.query
    console.log(id)
    res.send('登录 - ' + id.id)

req.body:获取post请求传递的参数（后面有详细介绍）

• 需要设置 express.json 和 express.urlencoded 这两个中间件

  //设置中间件
  app.use(express.json());
  app.use(express.urlencoded({extended:true}));
  
  app.post('/',(req,res) => {
      console.log(req.body); //{ name: 'JOJO', year: '3' }
      res.send('JOJO');
  });
  

req.params获取动态参数

app.get('/api/blog/:id', (req, res) => {
    let id = req.params['id']
    res.send('动态路由' + id)
})

req.path获取请求路径

app.get('/a',(req,res) => {
    console.log(req.path);  // /a
    res.send('req.path 获取请求路径');
});

**res.send()**传送HTTP响应

二、EJS是什么

EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。

安装

npm install ejs --save

使用

在Express中是可以不引入ejs模块的

创建默认文件目录views后，再创建index.ejs文件

配置模板引擎

app.set('view engine','ejs')

后端

arr.get('/',(req,res)=>{
    let title ='hello world'
    let content ="<h2>我是ejs</h2>"
    res.render('index',{
        //返回数据
        title:title
        content:content
    })
})

前端

• 使用<%= %>的方式来引入文本

• 使用<%- %>的方式来解析html代码

<%= title%>
<%- content%>

流程控制

• 使用<%if %>的方式进行条件判断

app.get('/',(req,res)=>{
    let score = 60
    let api = [
        {name:'张三',age:'18'},
        {name:'张二',age:'7'},
        {name:'张四',age:'15'},
        {name:'张五',age:'14'},
        {name:'张六',age:'13'}
    ]
    res.render('index',{
        score,
        api
    })
})

<%if(score>60){%>
	<p>及格</p>
<%}else{%>
	<p>不及格</p>
<%}%>

• 使用<%for %>的方式循环数组

<ul>
	<%for(let i = 0; i<api.length;i++){%>
    <li><span>姓名:<%= api[i].name%></span><sapn>年龄：<%= api[i].age%></sapn></li>
    <%}%>
</ul>

引入文件

引入文件为footer.ejs，默认文件位置是veiws，只要在需要引入的页面中加入<%- include('footer.ejs')%>即可

footer.ejs

<footer>
    <div>我是公共的文件</div>
</footer>

index.ejs

<%- include('footer') %>

修改后缀

也许有人觉得后缀是ejs看着很不习惯，那我就需要通过引入ejs模块的方式来进行修改

1. 引入模块

   const ejs = require('ejs')
   

2. 注册html模板引擎

   app.engine('html',ejs_express)
   

3. 将模板引擎转换成html

   app.set('view engine','html')
   

4. 最后我们就可以把后缀名改为.html了

三、利用Express.static托管静态文件

我们可以利用express中的static方法来存放我们需要的css、js、imges等静态文件

1. 创建static文件夹来存放我们需要的文件

2. 配置静态文件的web目录

   //内置中间件
   app.use(express.static('static'))
   

3. 最后就用我们最熟悉的link标签在其需要的页面来引入就好了

   <link rel="stylesheet" href="css/index.css">
   

四、中间件是什么

中间件：就是匹配路由之前和匹配之后做的一系列的操作

中间件可以用来做权限判断：没有登录 跳转到登陆页面，登陆以后就显示显示登录以后的页面

Express 应用可使用如下几种中间件：应用级中间件、路由级中间件、处理错误中间件、内置中间件、第三方中间件

应用级中间件

app.use((req,res,next)=>{
    console.log(new Date())
    next()//表示匹配完成这个给中间件后程序继续向下执行
})

路由级中间件（使用较少）

app.get('/',(req,res,next)=>{
    console.log('1')
    next();
})

app.get('/',(req,res)=>{
    console.log('2')
})

错误处理中间件

app.get('/index',(req,res)=>{
    res.send('首页')
})
/*中间件处理404*/
app.use((req,res)=>{
    res.staus(404).render('404',{})
})

内置中间件

比如我们上面所讲的处理静态文件的方法

app.use('/static',express.static('./static'))

第三方中间件

body-parser中间件，获取post提交的数据

安装

npm install body-parser --save

引入

var bodyParser = require('body-parser')

设置中间件

//创建application/json解析
app.use( bodyParser.json())
//创建application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: false}));

获取POST提交的数据

app.post('/login',(req,res)=>{
    console.log(req.body)
    res.send('提交')
})

app.js

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

//配置模板引擎
app.set('view engine', 'ejs')
//静态托管文件
app.use(express.static('static'))
//配置post中间件

//创建application/json解析
app.use(bodyParser.json())
//创建application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({
    extended: false
}))
app.get('/login', (req, res) => {
    res.render('login', {})
})
app.post('/doLogin', (req, res) => {
    let body = req.body
    res.send('提交成功' + body.username)
})

app.listen(3030, () => {
    console.log('http://127.0.0.1:3030')
})

login.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="/DoLogin" method="post">
        用户名：<input type="text" name='username'><br>
        密码：<input type="password" name='password'><br>
        <input type="submit" value="提交">
    </form>
</body>

</html>