基于node书写一个接口 || express(一)

2022-04-17 本文已影响0人许___

本篇利用node.js来写基于本地服务的接口，并使其调用成功

1 . 首先需要安装node.js

如果希望通过 Node.js 来运行 Javascript 代码，则必须在计算机上安装 Node.js 环境才行。

安装包可以从 Node.js 的官网首页直接下载，进入到 Node.js 的官网首页（https://nodejs.org/en/），点击绿色的按钮，下载所需的版本后，双击直接安装即可。

① LTS 为长期稳定版，对于追求稳定性的企业级项目来说，推荐安装 LTS 版本的 Node.js。

② Current 为新特性尝鲜版，对热衷于尝试新特性的用户来说，推荐安装 Current 版本的 Node.js。但是，Current 版本中可能存在隐藏的 Bug 或安全性漏洞，因此不推荐在企业级项目中使用 Current 版本的 Node.js。

2 . 启动本地服务

1 . 创建一个文件夹，在里面创建一个入口文件app.js
2 . 初始化包管理配置 npm init根据提示输入对象内容即可，也可以直接按回车选择默认配置
3 . 此时就可以下我们启动本地服务器所依赖的包npm i express
4 . 创建最基本的本地服务器，例如服务器文件名为app.js那么启动服务器命令就为node .\app.js

const express = require('express');
const app = express();

// 启动服务器
app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

3 . 写一个基于node.js的接口

const express = require('express');
const app = express();

// 解析表单中间件
app.use(express.urlencoded({ extended: false }))

// req.query  req.body为请求接口时用户端传递的参数  
app.get('/user', (req, res)=>{
const body = req.query
  res.send({
    status: 200,
    data: body,
    message: '请求成功'
  })
})

app.post('/my', (req, res)=>{
  const body = req.body
  res.send({
    status: 200,
    data: body,
    message: '请求成功'
  })
})

// 启动服务器
app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

4 . 如果有条件可以安装postman来进行接口的测试

-- 下载传送门 --

5 . 用axios进行请求测试

如果不会没关系 -- axios中文文档传送门 --
首先建立最基本的样式与请求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <button class="bon">GET点击请求</button>
  <button class="btn">POST点击请求</button>
</body>
<script>
  let bon = document.querySelector('.bon')
  let btn = document.querySelector('.btn')

  bon.addEventListener('click',()=>{
    axios({
      method: 'GET',
      url: 'http://127.0.0.1/user',
      params: {
        name: '我是GET请求'
      }
    }).then(function(res){
      console.log(res);
    })
  })
  // ------------  分割线   --------------------------------
  btn.addEventListener('click',()=>{
    let body =[{name: '我是POST请求'}]
    axios({
      method: 'POST',
      url: 'http://127.0.0.1/my',
      data: body
    }).then(function(res){
      console.log(res);
    })
  })
</script>
</html>

6 . 处理axios的POST请求跨域被拦截与无返回值问题

6.1 . 当请求时会出现这样一个报错：

处理跨域被拦截
1 . 回到app.js服务器文件中，打开终端下输入npm i cors这个包
2 . 导入cors这个包并注册全局中间件，注意此中间件要在请求与路由之前

const cors = require('cors');
app.use(cors())

6.2 . 服务端参数未获取到客户端传递参数问题

根据现在的代码服务端是把客户端的请求参数原封不动返回回去，既然没有返回值，证明服务端没有接收到请求参数

1 . 解决JSON表单格式的传输

app.use(express.json());

2 . 解决 application/x-www-form-urlencoded 格式的表单数据

app.use(express.urlencoded({ extended: false }))

此时就可以随心所欲的写一些接口了

7 . 最后是完整代码

服务端app.js文件

const express = require('express');
const app = express();
const cors = require('cors');

// 处理跨域中间件
app.use(cors())
// 处理JSON表单格式中间件
app.use(express.json());
// 处理application/x-www-form-urlencoded表单格式的中间件
app.use(express.urlencoded({ extended: false }))

app.get('/user', (req, res)=>{
  const body = req.query;
  res.send({
    status: 200,
    data: body,
    message: '请求成功'
  })
})

app.post('/my', (req, res)=>{
  const body = req.body
  res.send({
    status: 200,
    data: body,
    message: '请求成功'
  })
})

// 启动服务器
app.listen(80, () => {
  console.log('express server running at http://127.0.0.1')
})

完整代码客户端

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <button class="bon">GET点击请求</button>
  <button class="btn">POST点击请求</button>
</body>
<script>
  let bon = document.querySelector('.bon')
  let btn = document.querySelector('.btn')

  bon.addEventListener('click',()=>{
    axios({
      method: 'GET',
      url: 'http://127.0.0.1/user',
      params: {
        name: '我是GET请求'
      }
    }).then(function(res){
      console.log(res);
    })
  })
  // ------------  分割线   --------------------------------
  btn.addEventListener('click',()=>{
    let body =[{name: '我是POST请求'}]
    axios({
      method: 'POST',
      url: 'http://127.0.0.1/my',
      data: body
    }).then(function(res){
      console.log(res);
    })
  })
</script>
</html>