Vue+Koa2 入门教程 构建前端后端最简单的应用

这段时间研究了 Vue 和 Koa2，想把两者结合起来，Vue做为前端框架，Koa2做为后端框架，如何打通先后端的数据经过，须要解决跨域问题，现将其中的一些关键配置记录下来，供你们参考：

 

本篇文章主要内容：

· 新建 Vue 前端项目

· 新建 Koa2 后端项目

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

 

教程所用的项目目录名称（名称能够任意）：

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

一、新建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目录

 

 

 二、新建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.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的入门操做，有问题的小伙伴欢迎留言交流。