摘要：用搭建前端項(xiàng)目用搭建后臺(tái)，給前端提供數(shù)據(jù)訪問接口項(xiàng)目結(jié)構(gòu)用搭建的項(xiàng)目，紅色框中是新建的文件夾用于存放剩下的文件在寫項(xiàng)目中慢慢增加，最初就是這樣的之后將項(xiàng)目跑起來，看一下有沒有問題這里就當(dāng)作沒有問題前端這里選用和搭配這里采用的是的完整

用vue-cli搭建前端項(xiàng)目

用koa2搭建后臺(tái)，給前端提供數(shù)據(jù)訪問接口

用vue-cli 搭建的項(xiàng)目，紅色框中是新建的文件夾用于存放koa

剩下的文件在寫項(xiàng)目中慢慢增加，最初就是這樣的

之后將項(xiàng)目跑起來，看一下有沒有問題（這里就當(dāng)作沒有問題）

這里選用Element-ui和vue搭配

這里采用的是element-UI的完整引入，如果小伙伴想用按需加載的話 參考按需引入

登陸頁面就不介紹了 大家可以直接用（components/login.vue）

安裝element-ui
    npm i element-ui -S
    
在src/main.js中引入
    import ElementUI from "element-ui";
    import "element-ui/lib/theme-chalk/index.css";
    Vue.use(ElementUI);

安裝axios用于前后臺(tái)的數(shù)據(jù)傳輸 npm install --save axios

在main.js中配置全局的axios

在src下新建一個(gè)axios文件夾，配置攔截器 和 全局地址 token

import axios from "axios" // axios引用
import qs from "qs"

// axios.defaults.baseURL = "http://localhost:3000"; // 全局的地址，因?yàn)槲业膋oa監(jiān)聽端口是3000， 這里可以按照大家自己的來配置
// axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;  //這是配置token
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
  // 在發(fā)送請(qǐng)求之前做些什么
  if(config.method === "post"){
    config.data = qs.stringify(config.data)
  }
  return config;
}, function (error) {
  // 對(duì)請(qǐng)求錯(cuò)誤做些什么
  return Promise.reject(error);
});

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
  // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
  return response;
}, function (error) {
  // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
  return Promise.reject(error);
});

export default axios;

在src下新建一個(gè)api文件夾，存放訪問后臺(tái)的地址

import axios from "axios";
export default{
  denglu: (data) => {
    return axios.post("/login", data)
  }
}

前端先告一段落，我們來配置后臺(tái)接口

學(xué)習(xí)koa

安裝koa2 koa-bodyparser koa-router koa2-cors npm install --save koa koa-bodyparser koa-router koa2-cors

[x] koa-bodyparser：用于接收并解析前臺(tái)發(fā)送過來的post數(shù)據(jù)

[x] koa-router：路由

[x] koa2-cors：用來解決前端的跨域

搭建koa 在瀏覽器運(yùn)行l(wèi)ocalhost:3000 頁面輸出 hello 表示成功了