vue+koa2+token登陆验证

摘要：用搭建前端项目用搭建后台，给前端提供数据访问接口项目结构用搭建的项目，红色框中是新建的文件夹用于存放剩下的文件在写项目中慢慢增加，最初就是这样的之后将项目跑起来，看一下有没有问题这里就当作没有问题前端这里选用和搭配这里采用的是的完整

用vue-cli搭建前端项目

用koa2搭建后台，给前端提供数据访问接口

用vue-cli 搭建的项目，红色框中是新建的文件夹用于存放koa

剩下的文件在写项目中慢慢增加，最初就是这样的

之后将项目跑起来，看一下有没有问题（这里就当作没有问题）

这里选用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用于前后台的数据传输 npm install --save axios

在main.js中配置全局的axios

在src下新建一个axios文件夹，配置拦截器 和 全局地址 token

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

// axios.defaults.baseURL = "http://localhost:3000"; // 全局的地址，因为我的koa监听端口是3000， 这里可以按照大家自己的来配置
// axios.defaults.headers.common["Authorization"] = AUTH_TOKEN;  //这是配置token
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  if(config.method === "post"){
    config.data = qs.stringify(config.data)
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default axios;

在src下新建一个api文件夹，存放访问后台的地址

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

前端先告一段落，我们来配置后台接口

学习koa

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

[x] koa-bodyparser：用于接收并解析前台发送过来的post数据

[x] koa-router：路由

[x] koa2-cors：用来解决前端的跨域

搭建koa 在浏览器运行localhost:3000 页面输出 hello 表示成功了