koa2+vue
- 用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)
}
}
前端先告一段落,我们来配置后台接口
搭建koa2
学习koa
- 安装koa2 koa-bodyparser koa-router koa2-cors
npm install --save koa koa-bodyparser koa-router koa2-cors
-
koa-bodyparser:用于接收并解析前台发送过来的post数据
-
koa-router:路由
-
koa2-cors:用来解决前端的跨域
-
搭建koa 在浏览器运行localhost:3000 页面输出 hello 表示成功了 ?
下面的代码是验证koa是否