前后端交互

一：post请求测试软件

1·1：postman

我们一般是get的接口可以通过浏览器去测试 ，那呢post请求怎么办

所以postman一般就是测试post接口的测试工具

二:接口文档

三：前后端联调

3·1：get方式

【前端通过params来发送数据，后端通过req.query.xxx接受数据】

3·2：post方式

【前端通过data来发送数据，后端通过中间件 body-parser接受数据】

【发送】

var param=new URLSearchParams()//修改传参方法
param.append("uname","xixi")//添加数据

四：案例：登录注册

跨域问题的解决

module.exports={
     
    devServer:{
     
        proxy: {
     
            '/api': {
     
              target: 'http://localhost:3000/', //对应后端的端口
              changeOrigin: true,
              ws: true,
              pathRewrite: {
     
                '^/api': ''
              }}
             }
    }
}

4·1：注册【get请求方式】

第一步：先写前端的闭环操作

• 注册路由页面

  【get传参】

  <template>
    <div>
      <h1>注册页面</h1>
      用户名：<input type="text" placeholder="请输入用户名" v-model="name" />
      密码：<input type="text" placeholder="请输入密码" v-model="pwd" />
      <button v-if="bool" @click="fun()">点击注册</button>
      <p v-else>{
         {
          num }}秒以后，跳转到登录</p>
    </div>
  </template>
  
  <script>
  import {
          getlink } from "@/api/getapi.js";
  export default {
         
    data() {
         
      return {
         
        bool: true,
        num: 3,
        name: "",
        pwd: "",
      };
    },
    //点击注册发送请求
    //因为不是同源策略，需要解决跨域问题
    //发送数据：通过params传数据
    //创建后端服务器
    methods: {
         
      fun() {
         
        getlink("/api/zhuce/zhuce",
                {
          name: this.name, pwd: this.pwd }).then(
          (ok) => {
         
            console.log(ok.data.data.slogn);
            if (ok.data.data.slogn == 1) {
         
              (this.bool = false),
                setInterval(() => {
         
                  this.num--;
                  if (this.num == 0) {
         
                    this.$router.push("/denglu");
                  }
                }, 1000);
            }
          }
        );
      },
    },
  };
  </script>
  
  <style>
  </style>
  

• api文件夹下的getapi数据请求封装[拦截器自行添加]

  import service from "@/util/service.js"
  export function getlink(url,params){
         
      return new Promise((resolve,reject)=>{
         
          service.request({
         
              url,
              method:"get",
              params
          }).then((ok)=>{
         
              resolve(ok)
          }).catch((err)=>{
         
              reject(err)
          })
      })
  }
  

第二步：服务器端的操作

• 封装数据库

  //请求下载来得mongoose
  let mongoose=require("mongoose")
  //数据库连接【lip是创建的表的名字】
  mongoose.connect("mongodb://localhost:27017/lip",{
         useNewUrlParser: true,useUnifiedTopology: true})
  let db=mongoose.connection;
  
  db.on("error",console.error.bind(console,"数据库连接失败"))
  db.on("open",()=>{
         
      console.log("数据库连接ok")
  })
  //定义集合的字段
  let userSchema=new mongoose.Schema({
         
      name:String,
      pwd:String
  })
  //将其添加到集合中
  let demouser=mongoose.model("lips",userSchema)
  
  module.exports=demouser
  

• 写服务器端的路由

  【get参数的接收后端】

  let express=require("express")
  let router=express.Router()
  //加密
  let crypto=require("crypto")
  let demouser=require("../db")
  router.get("/zhuce",(req,res)=>{
         
      //对密码进行加密
      let newpwd=crypto.createHash("md5").update(req.query.pwd).digest("hex")
      //接受前端传来的数据
      let dbuser= new demouser({
         
          name:req.query.name,
          pwd:newpwd
      })
      //将数据存放到数据库中
      dbuser.save().then((ok)=>{
         
          console.log(ok)
      })
      res.send({
         msg:"注册",data:{
         slogn:1}})
  })
  module.exports=router
  

• 服务器端的路由配置

  let express=require("express")
  let app=express()
  
  let zc=require("./routers/zhuce.js")
  let dl=require("./routers/denglu.js")
  
  app.use("/zhuce",zc)
  app.use("/denglu",dl)
  
  app.listen(3000)
  

4·2：登录【post请求方式】

第一步：先写前端的闭环操作

• 路由页面的配置

  <template>
    <div class="home">
      <h1>登录页面</h1>
      用户名：<input type="text" placeholder="请输入用户名" v-model="name" />
      密码：<input type="text" placeholder="请输入密码" v-model="pwd" />
      <button @click="fun()">点击登录</button>
    </div>
  </template>
  
  <script>
  import {
          postlink } from "@/api/postapi.js";
  export default {
         
    data() {
         
      return {
         
        name: "",
        pwd: "",
      };
    },
    methods: {
         
      fun() {
         
        //post请求解析参数
        let usp = new URLSearchParams();
        usp.append("name", this.name);
        usp.append("pwd", this.pwd);
  
        postlink("/api/denglu/denglu", usp).then((ok) => {
         
          console.log(ok);
          if(ok.data.data.slogn==0){
         
            this.name="",
            this.pwd=""
            alert("请重新输入您的相关信息")
          }else{
         
            //将其添加到本地存储里进行路由守卫的判断
            window.localStorage.setItem("slogn",1)
            this.$router.push("/home")
          }
        });
      },
    },
  };
  </script>
  
  

• api文件夹下的postapi数据请求封装[拦截器自行添加]

  import service from "@/util/service"
  //post的数据通过data进行发送的
  export function postlink(url, usp) {
         
      return new Promise((resolve, reject) => {
         
          service.request({
         
              url,
              method: "post",
              data: usp
          }).then((ok) => {
         
              resolve(ok)
          }).catch((err) => {
         
              reject(err)
          })
  
      })
  }
  
  

第二步：服务器端的操作

• 数据库的封装和注册是相同的

• 写服务器端的路由

  let express = require("express")
  let router = express.Router()
  
  //post的解析需要引用中间件
  let bodyParser = require("body-parser")
  // 使用中间件
  let zhong = bodyParser.urlencoded({
          extended: false })
  let demouser = require("../db")
  
  //加密解析
  let crypto = require("crypto")
  
  router.post("/denglu", zhong, (req, res) => {
         
  
      console.log("名字" + req.body.name + "密码" + req.body.pwd)
      //加密
      let newpwd = crypto.createHash("md5").update(req.body.pwd).digest("hex")
      demouser.find({
         
          name: req.body.name,
          pwd: newpwd
      }).then((ok) => {
         
          if(ok.length==0){
         
              res.send({
          "msg": "登录", data: {
          slogn: 0} })
          }else{
         
              res.send({
          "msg": "登录", data: {
          slogn: 1} })
          }
      })
     
  })
  module.exports=router
  

({
name: req.body.name,
pwd: newpwd
}).then((ok) => {
if(ok.length==0){
res.send({ “msg”: “登录”, data: { slogn: 0} })
}else{
res.send({ “msg”: “登录”, data: { slogn: 1} })
}
})

})
module.exports=router

- 配置路由和注册一样的