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

程式猿小碼發表於2020-10-15
後端VueiOS跨域

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

回顧一下上一節我們學習到的內容。已經將一個 usm_admin 後臺使用者 表的基本增刪改查全部都完成了。並且通過swagger 測試了我們的介面資訊，並且順利通過測試。本節將通過VUE 腳手架生成一個vue-element ui 的基本專案。並且完成登入頁面的開發和登入邏輯的整合等等。

知識儲備

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

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

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

asiox:http://axios-js.com/

element ui:https://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 <1763907575@qq.com>
? 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

訪問： http://localhost:8080

image-20201014112701015

整合Element UI

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

請參考：https://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

建立一個工具類

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

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

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

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

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

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

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

// 建立axios例項
const service = axios.create({
  baseURL: 'http://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 這種相對路徑就好用很多了。

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

請求後端介面

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

什麼是跨域 CORS

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

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

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

跨域問題

我們發起的請求，居然報錯了，開啟 F12 後發現。出現的錯誤資訊如下：

Access to XMLHttpRequest at 'http://localhost/umsAdmin/' from origin 'http://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);
    }
}

重啟專案，重新訪問試試~

image-20201014173741696

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

小結

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

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

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

原始碼

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

持續更新中，歡迎關注

相關文章