• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

seven0717/koa2-vue: koa2+vue实现简单的登陆

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

seven0717/koa2-vue

开源软件地址:

https://github.com/seven0717/koa2-vue

开源编程语言:

JavaScript 48.6%

开源软件介绍:

koa2+vue

  • 用vue-cli搭建前端项目
  • 用koa2搭建后台,给前端提供数据访问接口

项目结构

pro

  • 用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 表示成功了


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
rubizza-camp/ruby_koans发布时间:2022-06-24
下一篇:
dj940212/last-blog: 仿GitHub风格个人博客, vue+vuex+koa+mongodb发布时间:2022-06-24
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap