【手摸手，帶你搭建前後端分離商城系統】02 VUE-CLI 腳手架生成基本項目，axios配置請求、解決跨域問題

• 2020 年 10 月 15 日
• 筆記
• 前後端分離商城

【手摸手，帶你搭建前後端分離商城系統】02 VUE-CLI 腳手架生成基本項目，axios配置請求、解決跨域問題。

回顧一下上一節我們學習到的內容。已經將一個 usm_admin 後台用戶 表的基本增刪改查全部都完成了。並且通過swagger 測試了我們的接口信息，並且順利通過測試。本節將通過VUE 腳手架生成一個vue-element ui 的基本項目。並且完成登錄頁面的開發和登錄邏輯的整合等等。

知識儲備

• 使用 vue-cli 生成一個基本的 VUE 項目
• vue-router vue 官方路由組件
• 整合 element ui
• 使用 asiox 封裝一個發起請求的 http.js
• 解決開發時期的 跨域問題

vue cli://cli.vuejs.org/zh/

vue router: //router.vuejs.org/zh/

asiox://axios-js.com/

element ui://element.eleme.io/

前端項目生成

當然，首先要保證你的計算機安裝了 node js ,如果順利安裝了 node js ，可以命令行測試如下：

D:\Project>node -v
v12.16.1

安裝 vue-cli

npm install -g vue-cli

生成 webpack 項目

使用命令初始化一個空項目，當然，這就要求你填寫一些基本信息來初始化。

vue init <template-name> <project-name>

• 默認打包方式，一般就是webpack

D:\Project>vue init webpack mall-pro-admin
? Project name mall-pro-admin
? Project description mall-pro-admin
? Author MRC <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "mall-pro-admin".


# Installing project dependencies ...

• Vue build: standalone 獨立構建，直接回車就行了。
• vue-router vue 路由是必須要安裝的。
• ESLint 一種規範代碼的方式，不嫌麻煩就yes。
• unit tests 單元測試，我們一般不會用到。no
• 選擇 npm 作為我們基本的包管理。

目錄結構如下：我們只關注的幾個點有：

• src 目錄 打包源碼路徑
• config 目錄 配置路徑

其他的等到具體的問題，我會再提起的。

mall-pro-admin
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── router
│       └── index.js
└── static

試試讓你的項目跑起來

cd mall-pro-admin

# 安裝依賴
npm install

# 通過開發熱部署方式打包運行
npm run dev

訪問： //localhost:8080

整合Element UI

Element UI 其實用起來簡單，並且文檔完善。有很多後台化的組件，很適合後台的開發。對於新手也很友好，所以我們就選擇這個框架

請參考：//element.eleme.io/#/zh-CN/component/installation

在項目根路徑執行》安裝依賴

npm i element-ui -S

使用部分引入的方式

部分引用，可以減少我們項目的體積。並且這種方式對於熟悉組件有一定的幫助。不建議無腦全部引用。

安裝 babel-plugin-component

npm install babel-plugin-component -D

修改根目錄 .babelrc 文件

  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

當然你嫌麻煩的話。完全可以全部引用，這裡只要參考官網就行。

嘗鮮一個組件

做完以上步驟、肯定要檢查自己的整合是否有問題。不要急，這裡就需要找一個組件進行測試。

查看我們 components 目錄下的 HelloWorld.vue 文件，適當的修改一下。我們就選擇一個按鈕來進行測試。

<el-button>默認按鈕</el-button>

記得在script標籤下引入需要的組件，不然不生效

import Vue from 'vue'
import {Button} from 'element-ui'

Vue.use(Button)

至此，基本的項目也構建完成，並且也整合了我們的 UI 框架。算是前端的骨架已搭建完成。

前端請求工具類

我們知道，前後端分離的項目，所有的請求都是需要一個統一的請求工具類 來替我們完成的。以及路由的動態掛載，這些全部由前端請求

安裝 axios

npm install axios

創建一個工具類

按照官網的指示，我們配置一個類。將

請參考：//axios-js.com/zh-cn/docs/

創建一個 axios 的實例，配置基礎的請求路徑，也就是我們後端服務的地址。

再加入一個攔截器，第一時間處理所有請求的 code , 引入element ui message 進行消息的提示。

我們使用的是 ES6 模塊化的寫法。不會的小夥伴可以參考：

//es6.ruanyifeng.com/#docs/module

import axios from 'axios'
import {Message} from 'element-ui'

// 創建axios實例
const service = axios.create({
  baseURL: '//localhost/', // 基礎baseurl
  timeout: 15000 // 超時時間
})

// 實現攔截器，處理code 非200的請求
service.interceptors.response.use(response => {
  const rest = response.data
  // code 非200 進行處理
  if (rest.code !== 200) {
    Message({
      message: rest.message,
      type: 'error',
      duration: 3 * 1000
    })
  } else {
    return response.data
  }
}, error => {
  // 處理異常信息
  console.log('error' + error)
  Message({
    message: error.message,
    type: 'error',
    duration: 3 * 1000
  })
  return Promise.reject(error)
})

export default service

因為我們後端返回的數據格式是這種最簡單的方式返回的。所以我們當然要判斷 code ，後面還會有登錄失效401 等錯誤碼，遇到再說

{
    code: 200,
    data: true,
    message: "操作成功"
}

api 引用

那麼，我們前端肯定會保存所有的後台接口信息，在 src 建立一個 api 目錄，所有的接口信息務必歸類保存在每一個 api.js 下

因為我們在上一節中，已經通過工具生成了一個模塊 ums_admin 的增刪改查接口。我們挑選一個最簡單的 GET /

import request from '@/utils/request'

/**
* 獲取全部用戶信息
* @author mrc
* @since 2020-10-14
*/
export function allUmsAdmin () {
 return request({
   url: '/umsAdmin/',
   method: 'GET'
 })
}

前端接口也寫好了。當然就剩下：請求 了。還是 使用原有的 HelloWorld.vue 頁面。

  import {allUmsAdmin} from '@/api/umsAdmin'

  created () {
    allUmsAdmin().then(response => {
      console.log(response)
    })
  }

這樣寫是完全沒有問題的。在頁面創建好後，就執行allUmsAdmin 方法。將得到的內容進行打印

@符號

import {allUmsAdmin} from '@/api/umsAdmin'

可能有的朋友對這一行代碼裏面的 @ 有所疑惑，為什麼會這樣寫。當然，用 ../../ 這種絕對路徑也是可以的。但是目錄一多，很容易弄得你眼花。隨之一種簡便的方式就是：@

@直接將路徑等價為：/src 這種相對路徑就好用很多了。

//www.cnblogs.com/boshow/p/8758927.html

請求後端接口

當我們刷新頁面訪問的時候，會發現如下錯誤。

什麼是跨域 CORS

跨域是由於瀏覽器的 同源策略 的限制出現的問題；原因 在於瀏覽器限制：

瀏覽器發起的請求只能是：同一個域名、同一個端口下的。若端口不同，比如我們現在是從8080端口 發送請求到80端口

自然違反瀏覽器的 同源策略

跨域問題

我們發起的請求，居然報錯了，打開 F12 後發現。出現的錯誤信息如下：

Access to XMLHttpRequest at '//localhost/umsAdmin/' from origin '//localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

後端配置解決跨域問題

Springboot 對於跨域有着很好的解決方式，添加一個配置類即可。

@Configuration
public class GlobalCorsConfig {

    /**
     * 允許跨域調用的過濾器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允許所有域名進行跨域調用
        config.addAllowedOrigin("*");
        //允許跨越發送cookie
        config.setAllowCredentials(true);
        //放行全部原始頭信息
        config.addAllowedHeader("*");
        //允許所有請求方法跨域調用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

重啟項目，重新訪問試試~

已經可以正常請求數據了。至此，我們的前後端的通信已經成功測試通過了。

小結

通過本節，你已經學會如何用 vue-cli 來生成一個基本的項目、並且整合 常用的 element ui 等前端框架。

並且編寫一個 axios 工具類來處理所有發送到後端的請求。

通過註解的方式解決跨域問題！

源碼

//gitee.com/mrc1999/mall-pro-learning

持續更新中，歡迎關注