今天學習的是前後端的通訊和後端跨域的處理

首先安裝koa-bodyparser中介軟體到我們專案中來，以便我們後端接收前端傳送過來的請求

npm install --save koa-bodyparser

安裝完成後在service/index.js中引入

const bodyParser = require('koa-bodyparser')  // 用於接收post請求的

安裝完成後我們就開始在我們前端axios的引入

import axios from 'axios'

引入之後我們修改 serviceAPI.config.js 介面檔案，設定下介面檔案，新增我們的註冊介面地址

const LOCALURL = "http://localhost:3000/"
const URL = {
    getShoppingMaillInfo:BASEURL,// 商城首頁資訊
    getGoodsInfo:BASEURL+'getGoodsInfo',
    registerUser : LOCALURL+'user/register',  //使用者註冊介面
}

module.exports = URL

然後再register.vue檔案裡面引入

 import url from '@/serviceAPI.config.js'

現在我們就開始寫使用者註冊的方法了 src/components/pages/Register.vue 檔案下，在methods屬性裡面寫入

    methods: {
      goBack() {
        this.$router.go(-1); //點選返回上一級
      },
      axiosRegisterUser() {
        axios({
            url: url.registerUser, //這裡的url便是我們上面引入的
            method: 'post',  //請求方式使用post  因為是表單輸入
            data: {
              username: this.username, 
              password: 
 
this.password
            }
          })
          .then(response => { // 完成後我們給他一個反饋資訊  後面我們再進行完善
            console.log(response)
          })
          .catch((error) => {
            console.log(error)
          })
      }

把我們的   axiosRegisterUser（）方法繫結到按鈕上

 <van-button type="primary" size="large" @click="axiosRegisterUser()">馬上註冊</van-button>

完成我們的請後發現並不能順利的完成註冊，那是因為我們還沒有進行跨域的處理

我們需要安裝下koa2給我們的跨域處理的中介軟體  koa2-cors

npm install --save koa2-cors   

安裝完成後我們需要再index.js裡面進行引入和使用中介軟體

const cors = require('koa2-cors') //跨域使用

萬事俱備，現在我們寫一個後臺的資料介面方法，就可以完成我們的資料接收並傳回資料了

進入service/appApi/user.js

router.post('/register',async(ctx)=>{  //請求操作需要使用post
    
    ctx.body= ctx.request.body  //  ctx.request.body  把前端傳過來的資料封裝成為一個物件

console.log(ctx.request.body)
 })

到這一步我們的前後端資料通訊就算完成了,下面是我們完成後的截圖