码迷,mamicode.com
首页 > 其他好文 > 详细

Vue+Koa2 入门教程 解决前端后端跨域访问的问题

时间:2020-04-24 11:34:26      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:http请求   名称   入口   inf   初始   应用开发   lint   个性   ports   

这段时间研究了 Vue 和 Koa2,想把二者结合起来,Vue作为前端框架,Koa2作为后端框架,如何打通前后端的数据通过,需要解决跨域问题,现将其中的一些关键配置记录下来,供大家参考:

 

本篇文章主要内容:

· 新建 Vue 前端项目

· 新建 Koa2 后端项目

· 解决跨域问题,实现前端接收后端发来的数据

 

教程所用的项目目录名称(名称可以任意):

|-- vue-mall-mobile
   |-- mall               //Vue 前端目录 
|-- mall-server //Koa2 后端目录



1、新建Vue项目

 

1.1 首先,我们通过命令行,将目录切断到vue-mall-mobile下,用官方的 Vue-Cli生成项目目录:

npm install -g @vue/cli    //安装Vue CLI

 

vue create mall    //创建项目

 

1.2 选择这几个常用的组件:

技术图片

 接下来选择 "Use the history mode for the router",选择 "ESLint + Airbnb config" 和 "Lint on save",最后,选择“In package.json”选项,以便将配置放置在package.json文件中,而不是单独的配置文件中。

 

1.3 项目生成完毕后,我们运行:

cd mall
npm run serve 

 

我们打开浏览器,输入localhost:8080,出现如下界面,说明我们的Vue项目已经新建完成。

技术图片

 1.4 我们来看一下新生成的项目目录:

技术图片

 目录简析:

App.vue          --根组件,类似于index.html,用于整合其他组件,将它们一起呈现出来

main.js            --应用程序入口点,用于加载和初始化Vue以及其他的插件等

store               --Vuex目录

components    --自定义组件存放地点

router             --Vue-Router目录

 

 

 2、新建Koa2项目

koa是一个基于Node.js平台的新一代Web应用开发框架,由Express 幕后的原班人马打造,目前最新版本是koa2。

2.1 在命令行下运行如下命令,用npm安装koa-generator

npm install koa-generator -g      //用koa-generator生成项目目录

 

2.2 然后切换到 vue-mall-mobile 目录下,执行:

koa2 mall-server                 

 

此时,我们打开mall-server目录,可以看到已经自动生成了项目目录:

技术图片

 

2.3 安装项目依赖:

cd mall-server
npm install

安装完毕后,我们再次查看项目目录,会发现多了一个 node_modules 文件夹:

技术图片

此时运行项目:

npm run dev

运行成功之后,打开浏览器,访问: localhost:3000,出现如下页面,证明 koa2 已经部署成功。

技术图片

 

3、配置二者结合

 

3.1 mall-server 项目配置:

3.1.1 因为前端Koa2用的是3000端口,后端Vue用的是8080端口,两者端口不一样,前端就无法直接获取后端的数据,也就是跨域访问。 为了解决解决跨域的问题,需要安装koa2-cors:

npm install koa2-cors

 

3.1.2 修改mall-server\app.js:

const cors = require(koa2-cors);       //添加
app.use(cors({
  origin: function(ctx) {
    return ctx.header.origin
  }, // 允许发来请求的域名
  allowMethods: [ GET, POST, PUT, DELETE, OPTIONS ], // 设置所允许的 HTTP请求方法
  credentials: true, // 标示该响应是合法的
}));

将上面两端代码添加到 app.js中。

 

3.1.3 修改 mall-server/routes/users.js:

router.get(/sendText, function (ctx) {         // /sendText为前端请求api
  ctx.body = this is a Text
})

将上面代码添加到users.js里,‘this is a Text’ 为 /sendText 路由的响应。

 

3.2 mall 项目配置:

3.2.1 在 mall 目录下 新建文件 vue.config.js ,粘贴下列代码:

module.exports = {
  publicPath: ‘./‘,
  lintOnSave: false,
  devServer: {
    host: ‘0.0.0.0‘,
    port: 8080,
    proxy: ‘http://localhost:3000‘               //设置代理
  }
}

proxy 属性尤为关键,它完成了一件事情,将默认的请求地址中的 localhost:8080 转换成了 localhost:3000,也就是Koa2后端的默认地址,从而可以实现接收来自后端发送过来的数据。

 注:Vue-CLi默认是不存在 vue.config.js 文件的,需要添加个性化配置时,是需要我们新建的,详细的配置参考,在Vue-CLi的主页,配置参考页面下。

 

3.2.2 安装 axios,用于处理跨域请求:

npm install axios

 

3.2.3 在 mall\src 目录下 新建文件夹 api ,并新建 index.js,输入代码:

class Ajax{
  sendText() {
    axios.get(‘/users/sendText‘).then((res) => {
      console.log(JSON.stringify(res))
    })
  }
}

 

此时,我们查看浏览器控制台信息:

技术图片

 

打印出来的消息,就是我们后端发送过来的。

 

OK,到这里就实现了Vue+Koa的入门操作,有问题的小伙伴欢迎留言交流。

 

Vue+Koa2 入门教程 解决前端后端跨域访问的问题

标签:http请求   名称   入口   inf   初始   应用开发   lint   个性   ports   

原文地址:https://www.cnblogs.com/Fcode-/p/12745127.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!