Express 搭建简易后端服务器

Express 使用教程

使用 node 搭建简易后端服务

• 安装 http 模块

npm install http

// 引入 http 模块
const http = require('http');

const server = http.createServer( (request, response) => {
  response.statusCode = 200
  response.setHeader("Content-Type", "Content-Type", "text/html")
  response.end("<h1>Hello World</h1>");
})
// 监听端口 启动服务
app.listen( 3000, () => {
  console.log("服务启动...")
})

// 浏览器中地址栏输入 localhost:3000 查看

使用 Express 搭建后端服务

• 安装 express

npm install express

• 安装 nodemon 工具, 检测工作区代码变化, 自动重启

npm install nodemon --save-dev

引入 express 模块并使用

const express = require('express');

const app = express();

在使用路由路径时的匿名函数

app.get("/", (request, response) => {
  // request: 请求对象, 前端请求传递的参数
  // response: 响应对象, 给客户端返回内容数据 状态等
})

* 特殊的请求方式

GET POST 等方式请求接口, 都会经过回调返回相应的数据

app.all("/about", (req, res) => {
 res.send({
    username: "admin",
    password: "111111",
    tel: "13335333333",
    email: "13335333333@emple.com",
 })
})

• 字符串路由路径

app.get("/index", (req, res) => {
 res.send({
   code: 200,
   msg: "成功",
   success: false
 })
})

• 字符模式路由路径

app.get("ab?cd", (req,res) => {
 // abcd / acd  字母 b 可有可无
 res.send("ab?cd")
})

app.get("ab+cd", (req, res) => {
 // ab...cd 中间可以有多个 b
 res.send("ab+cd")
})

app.get("ab*cd", (req, res) => {
  // ab...cd 中间可以是任何字符
 res.send("ab*cd")
})

• 正则路由路径

app.get(/a/, (req, res) => {
 // 存在字符 a 的所有接口
 res.send("/a/");
})

app.get(/.*fly$/, (req,res) => {
 // 以 fly 结尾的所有接口
 res.send("/.*fly$/")
})

• 路由拆分

  使用 express.Router() 进行路由拆分

   const user = express.Router();
   user.get("list", (req, res) => {
     res.send({
       code: 200,
       msg: "成功",
       success: true,
       data: "list"
     })
   })
   user.get("detail", (req, res) => {
     res.send({
       code: 200,
       msg: "成功",
       success: true,
       data: "detail"
     })
   })
  
   app.use("/user", user); // 注册 user 路由
  

• 中间件

  全局中间件

 function middleware( req, res, next) {
   console.log("this is a golbal middleware");
   next()
 }
 app.use(middleware); // 注册全局中间件

路由中间件

app.get( "user", (req, res, next) => {
  console.log("this is a router middleware")
  next()
}, (req, res) => {
  res.send({
    code: 200,
    msg: "成功",
    success: true,
    data: "user"
  })
})

eg: 输出日志中间件

function logger( req, res, next) {
  const time = new Date();
  console.log(`[${time.toLocalString()}] ${req.method} ${req.url}`)
}

app.use(logger);

app.get("/user", (req, res) => {
  res.send({
    code: 200,
    msg: "成功",
    success: true,
    data: "user"
  })
})

中间件不执行 next 回调函数 不会继续向下执行

模板引擎

渲染前端页面, HTML 文档,

 npm install hbs

• 创建 views 文件夹
• 在 views 文件夹中创建 index.hbs, 404.hbs..等文件
  index.hbs

<h1>Express 模板引擎</h1>
<p>使用 node.js 搭建后端服务器</p>
<a href="/about">关 于</a>

about.hbs

<h1>关于我们</h1>
<link rel="stylesheet" href="/css/global.css" />
<p>使用 node.js express 框架搭建后端服务</p>
<p>姓名: {{ name }}</p>

404.hbs

<h1>找不到你要的页面了</h1>
<p>你的访问路径{{ url }}不存在</p>

//  指定模板存放目录
app.set("views", "views");
// 指定模板引擎为 Handlebars
app.set("view engine", "hbs");

app.get("/", (req, res) => {
  res.render("index"); // 展示 index.hbs 中的页面内容
})

// 传值
app.get("/about", (req, res) => {
  res.render("about", {
    name: "张三" // about 文件中内容
  })
})

// 处理 404 错误
app.use("*", (req, res) => {
  res.status(404).render("404", {
    url: req.originalUrl
  })
})

app.use((err, req, res, next) => {
  res.status(500).render("500");
});

静态资源访问

客户端访问图片等静态资源文件
Express 自带静态服务中间件 express.static()

注册静态资源中间件

app.use(express.static("public"));