前端使用nodejs写一个post请求接口(二)

1.过程简介

(1)创建一个前端项目
(2)配置跨域
(3)创建一个接口项目(方法同上一篇)

2.实现

2.1 前端页面代码

结构

 <div class="main">
        <div class="passwordUpload">
            <div class="input">
                <el-input v-model="password" size="mini"></el-input>
            </div>
            <el-button type="primary" size="mini" @click="passwordSend">发送</el-button>
        </div>
    </div>

样式

//这里用的sass
.main {
    width: 100%;
    height: 100%;
}

.passwordUpload {
    display: flex;
    align-items: center;
    height: 100px;
    border-bottom: 1px solid black;

    .input {
        width: 150px;
        padding: 0 20px;
    }
}

methods

 passwordSend () {
 //这里将表单里的密码使用MD5js加密后传输,前面博客说过
      const password = { body: md5(this.password) }
      interfaces.sendPassword(password).then(res => {
        //处理逻辑...
      }).catch(err => {
        //处理逻辑...
      })
    }

js文件
在src下找一个风水宝地创建一个文件夹放js文件

axios.js文件

//axios.js文件--start
// 引入
import axios from 'axios'
// 创建实例
const http = axios.create({
  baseURL: 'http://localhost:8080/api'
})
// 设置请求超时时间
http.defaults.timeout = 2500
// 为已知需要花费很长时间的请求覆写超时设置
http.get('/.....', {
  timeout: 5000
})
export default http
//axios.js文件--end

interface.js文件

//interface.js --start
import http from './axios'
export const sendPassword = (param) => http.post('/savePassword', param)
//interface.js --end

vue.config.js文件

//vue.config.js --statr
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 代理
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:9000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
})
//vue.config.js --end

2.2 nodejs接口代码

const express = require('express');//引入express
const app = express();//创建应用对象
app.use(express.json());//获取请求体的中间件,用于获取请求体里的数据
app.use(express.urlencoded({ extended: true })); // 解析表单数据

// 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.post('/savePassword', (request,response)=>{
    const data = request.body//获取到请求体中的数据
    const visitorIP = request.headers['x-forwarded-for'] || request.connection.remoteAddress;
    console.log(data,'获取的请求参数');
    console.log(visitorIP,'请求者的地址');
    //这里不对数据进行处理,直接返回给页面
    response.status(200).send(data)
})

//监听端口启动服务
app.listen(9000, () => {
    console.log("服务已经启动, 9000 端口监听中....");
});

app.all('*', (req, res) => {
    res.status(400).send('访问的路径错误')
})

3.前端获取返回数据和接口打印日志