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的入門操做，有問題的小夥伴歡迎留言交流。