一、vue-element-admin
1、簡介
而vue-element-admin是基于element-ui 的一套背景管理系統
內建方案
。
功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能
GitHub位址：https://github.com/PanJiaChen/vue-element-admin
項目線上預覽：https://panjiachen.gitee.io/vue-element-admin
2、安裝
1、下載下傳模闆架構壓縮檔案
這裡我們使用171KB的 vue-admin-template-master.zip。
2、将檔案解壓到工作區裡面
3、通過vscode的終端打開解壓檔案夾，進行依賴安裝
# 安裝依賴
npm install
注意：使用npm下載下傳時，出現錯誤
Unexpected end of JSON input while parsing near···
解決方法：先清除緩存，再重新安裝
# 清除緩存
npm cache clean --force
4、啟動下載下傳好依賴項目
# 啟動。執行後，浏覽器自動彈出并通路http://localhost:9527/
npm run dev
二、前端頁面環境說明
1、前端架構入口
2、前端頁面使用架構模闆，主要基于兩種技術實作出來
vue-admin-template 模闆 = vue + element-ui
3、目錄結構介紹
- build目錄：放項目建構的腳本檔案
- config目錄：全局配置
- node_modules目錄：項目依賴子產品
- src：項目源代碼
- static：靜态資源
- package.jspon：項目資訊和依賴配置
config
├── index.js // 修改useEslint:true，值修改為false
└── dev.env.js // 修改通路後端接口位址
src
├── api // 各種接口，定義調用方法
├── assets // 圖檔等資源
├── components // 各種公共元件，非公共元件在各自view下維護
├── icons // 圖示
├── router // 路由表
├── store // 存儲
├── styles // 各種樣式
├── utils // 公共工具，非公共工具，在各自view下維護
├── views // 各種layout，具體頁面
├── App.vue //***項目頂層元件***
├── main.js //***項目入口檔案***
└── permission.js //認證入口
三、項目的建立和基本配置
1、建立項目
将vue-admin-template-master重命名為guli-admin
2、修改項目資訊
package.json
{
"name": "guli-admin",
......
"description": "谷粒學院背景管理系統",
"author": "Helen <[email protected]>",
......
}
3、如果需要修改端口号
config/index.js中修改
4、登入頁修改
src/views/login/index.vue（登入元件）
4行
28行
<el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
登入
</el-button>
5、頁面零星修改
1、标題
index.html（項目的html入口）
修改後熱部署功能，浏覽器自動重新整理
2、國際化設定
打開 src/main.js（項目的js入口），第7行，修改語言為 zh-CN，使用中文語言環境，例如：日期時間元件
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
3、icon
複制 favicon.ico 到根目錄
4、導航欄文字
src/views/layout/components（目前項目的布局元件）
src/views/layout/components/Navbar.vue
13行
<el-dropdown-item>
首頁
</el-dropdown-item>
17行
5、面包屑文字
src/components（可以在很多項目中複用的通用元件）
src/components/Breadcrumb/index.vue
38行
meta: { title: '首頁' }
四、把系統登入功能改造本地（模拟登入）
1、系統登入預設使用這個位址
2、把登入請求位址改造本地
修改配置檔案請求位址，在config檔案夾裡面有dev.env.js
//BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
BASE_API: '"http://localhost:8001"',
3、進行登入調用兩個方法，login登入操作方法，和info登入之後擷取使用者資訊的方法。是以，建立接口兩個方法實作登入
通過檢視
/src/store/modules/user.js
檔案發現：
（1）login 傳回token值
（2）info 傳回roles、name、avatar頭像。
4、開發接口
建立EduLoginController類
@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin //解決跨域
public class EduLoginController {
//login
@PostMapping("login")
public R login() {
return R.ok().data("token","admin");
}
//info
@GetMapping("info")
public R info() {
return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
}
}
5、修改api檔案夾login.js修改本地接口路徑
6、最終測試，出現問題
跨域問題：通過一個位址去通路另外一個位址，這個過程中如果有三個位址任何一個不一樣
通路協定 http https
ip位址 192.18.1.1 172.11.11.11
端口号 9528 8001
7、跨域解決方式
（1）在後端接口controller添加注解（常用）
@CrossOrigin //解決跨域
public class EduLoginController {
（2）使用網關解決（後面會說）
五、架構使用過程
1、添加路由
2、點選某個路由，顯示路由對應頁面内容
對應頁面是
3、在api檔案夾建立js檔案，定義接口位址和參數
4、在建立vue頁面引入js檔案，調用方法實作功能
引入 import user from '.....'
data:{
},
created(){
},
methods:{
}
5、使用element-ui顯示資料内容。
如果有收獲！！！ 希望老鐵們來個三連，點贊、收藏、轉發。
創作不易，别忘點個贊，可以讓更多的人看到這篇文章，順便鼓勵我寫出更好的部落格