## 【手摸手，帶你搭建前後端分離商城系統】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` ，可以命令列測試如下： ```sh D:\Project>node -v v12.16.1 ``` 安裝 `vue-cli` ```sh npm install -g vue-cli ``` #### 生成 webpack 專案 使用命令初始化一個空專案，當然，這就要求你填寫一些基本資訊來初始化。 `vue init ` - 預設打包方式，一般就是`webpack` ```sh 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 ``` #### 試試讓你的專案跑起來 ```sh cd mall-pro-admin # 安裝依賴 npm install # 通過開發熱部署方式打包執行 npm run dev ``` 訪問： [http://localhost:8080](http://localhost:8080)  ### 整合Element UI `Element UI` 其實用起來簡單，並且文件完善。有很多後臺化的元件，很適合後臺的開發。對於新手也很友好，所以我們就選擇這個框架 > 請參考：https://element.eleme.io/#/zh-CN/component/installation 在專案根路徑執行》安裝依賴 ```sh npm i element-ui -S ``` #### 使用部分引入的方式 > 部分引用，可以減少我們專案的體積。並且這種方式對於熟悉元件有一定的幫助。不建議無腦全部引用。 安裝 `babel-plugin-component` ```sh npm install babel-plugin-component -D ``` 修改根目錄 ` .babelrc ` 檔案 ```js "plugins": [ "transform-vue-jsx", "transform-runtime", [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] ``` 當然你嫌麻煩的話。完全可以全部引用，這裡只要參考官網就行。 #### 嚐鮮一個元件 做完以上步驟、肯定要檢查自己的整合是否有問題。不要急，這裡就需要找一個元件進行測試。 > 檢視我們 `components` 目錄下的 `HelloWorld.vue` 檔案，適當的修改一下。我們就選擇一個按鈕來進行測試。 ```vue 預設按鈕

``` **記得在script標籤下引入需要的元件，不然不生效** ```javascript import Vue from 'vue' import {Button} from 'element-ui' Vue.use(Button) ``` 至此，基本的專案也構建完成，並且也整合了我們的 `UI` 框架。算是前端的骨架已搭建完成。 ### 前端請求工具類 我們知道，前後端分離的專案，所有的請求都是需要一個統一的`請求工具類` 來替我們完成的。以及路由的動態掛載，這些全部由前端請求 安裝 axios ```sh npm install axios ``` #### 建立一個工具類 按照官網的指示，我們配置一個類。將 >

請參考：http://axios-js.com/zh-cn/docs/ 建立一個 `axios` 的例項，配置基礎的請求路徑，也就是我們後端服務的地址。 再加入一個攔截器，第一時間處理所有請求的 `code` , 引入`element ui message` 進行訊息的提示。 我們使用的是 `ES6` 模組化的寫法。不會的小夥伴可以參考： > https://es6.ruanyifeng.com/#docs/module ```js 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` 等錯誤碼，遇到再說 ```json { code: 200, data: true, message: "操作成功" } ``` #### api 引用 那麼，我們前端肯定會儲存所有的後臺介面資訊，在 ` src` 建立一個 `api` 目錄，所有的**介面資訊務必歸類儲存**在每一個 `api.js` 下 因為我們在上一節中，已經通過工具生成了一個模組 `ums_admin` 的增刪改查介面。我們挑選一個最簡單的 `GET /` ```javascript import request from '@/utils/request' /** * 獲取全部使用者資訊 * @author mrc * @since 2020-10-14 */ export function allUmsAdmin () { return request({ url: '/umsAdmin/', method: 'GET' }) } ``` 前端介面也寫好了。當然就剩下：`請求` 了。還是 使用原有的 `HelloWorld.vue` 頁面。 ```javascript import {allUmsAdmin} from '@/api/umsAdmin' created () { allUmsAdmin().then(response => { console.log(response) }) } ``` 這樣寫是完全沒有問題的。在頁面建立好後，就執行`allUmsAdmin` 方法。將得到的內容進行列印 #### @符號 ```javascript 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` 對於跨域有著很好的解決方式，新增一個配置類即可。 ```java @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` 工具類來處理所有傳送到後端的請求。 通過註解的方式解決跨域問題！ #### 原始碼 https://gitee.com/mrc1999/mall-pro-learning ### 持續更新中，歡迎關注 ![](https://file.chaobei.xyz/blogs/banner_15911926172