Vue+elementUi《後臺管理系統》前端實現02
阿新 • • 發佈：2021-07-31
一、定義一個http.js，儲存連結埠和定義請求攔截方法
import axios from 'axios'
import Vue from "vue"
import router from './router'
//定義連結介面
const http = axios.create({
baseURL:'http://localhost:3037/admin/api'
})
http.interceptors.request.use(function(config){
if(localStorage.token){
config.headers.Authorization = "Bearer "+localStorage.token
}
return config
},function(err){
return Promise.reject(err)
})
//請求攔截響應
http.interceptors.response.use(res =>{
return res
},err=>{
if(err.response.data.message){
//輸出錯誤資訊
Vue.prototype.$message({
type:'error',
message:err.response.data.message
})
//如果請求狀態碼為401證明沒有登陸，則轉回登陸介面
if(err.response.status === 401){
router.push("/login")
}
}
return Promise.reject(err)
})
export default http
二、在main.js中將http繫結到Vue例項物件中，使它可以在前端介面中被應用
import http from './http' Vue.prototype.$http = http
三、 在views中定義一個Main.vue,作為起始介面，將所有路由顯示都寫在這裡，並在router裡面寫入路由路徑，使用的是el-container元件進行資訊顯示，左邊是導航右邊是內容，一個寫了三個大板塊，六個小內容。
//...
<el-submenu index="1"> <template slot="title" ><i class="el-icon-message"></i>內容管理</template > <el-menu-item-group> <template slot="title">物品</template> <el-menu-item index="/items/create">新建物品</el-menu-item> <el-menu-item index="/items/list">物品列表</el-menu-item> </el-menu-item-group> <el-menu-item-group> <template slot="title">英雄</template> <el-menu-item index="/heros/create">新建英雄</el-menu-item> <el-menu-item index="/heros/list">英雄列表</el-menu-item> </el-menu-item-group> <el-menu-item-group> <template slot="title">文章</template> <el-menu-item index="/articles/create">新建文章</el-menu-item> <el-menu-item index="/articles/list">文章列表</el-menu-item> </el-menu-item-group> </el-submenu>
//...
四、新建物品和物品列表實現等其他介面
- 新建物品介面使用了el-form-item和el-upload元件
<h1>{{ id ? "編輯" : "新建" }}物品</h1>
<el-form label-width="120px" @submit.native.prevent="save">
<el-form-item label="名稱">
<el-input v-model="model.name"></el-input>
</el-form-item> <el-form-item label="圖示">
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:headers=" getAuthHeaders()"
:show-file-list="false"
:on-success="afterUpload"
>
<img v-if="model.icon" :src="model.icon" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">儲存</el-button>
</el-form-item>
</el-form>
- 新建物品介面呼叫介面，儲存資料
methods: {
//資料上傳成功後
afterUpload(res){
this.$set(this.model,'icon',res.url)
// this.model.icon = res.url
},
async save() {
let res;
//將資料上傳
if (this.id) {
res = await this.$http.put(`rest/items/${this.id}`, this.model);
} else {
res = await this.$http.post("rest/items", this.model);
}
console.log(res);
this.$router.push("/items/list");
//上傳成功則彈出儲存成功
this.$message({
type: "success",
message: "儲存成功",
});
},
//當建立時便獲取資料
async fetch() {
const res = await this.$http.get(`rest/items/${this.id}`);
this.model = res.data;
},
},
- 物品列表介面用el-table渲染資料，用介面獲取資料
<div>
<h1>物品列表</h1>
<!-- _id、name、icon是在資料庫中預先定義的資料列表，使用介面獲取資料items，然後用prop可以直接訪問 -->
<el-table :data="items">
<el-table-column prop="_id" label="ID" width="180"> </el-table-column>
<el-table-column prop="name" label="物品名稱"> </el-table-column>
<el-table-column prop="icon" label="圖示">
<template slot-scope="scope">
<img :src = "scope.row.icon" style="height:3em">
</template>
</el-table-column>
<!-- 編輯，繫結單擊事件，將頁面跳轉到編輯頁面，編輯頁面和新建頁面一樣 -->
<el-table-column fixed="right" label="操作" width="180">
<template slot-scope="scope">
<el-button type="text" size="small"
@click="$router.push(`/items/edit/${scope.row._id}`)">編輯</el-button>
<el-button type="text" size="small"
@click="remove(scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</div>
methods: {
//獲取資料
async fetch() {
const res = await this.$http.get("rest/items");
this.items = res.data;
},
//設定刪除方法
async remove(row){
this.$confirm(`是否刪除,"${row.name}"`, '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
//呼叫刪除介面
const res = await this.$http.delete(`rest/items/${row._id}`)
console.log(res)
//刪除
this.$message({
type: 'success',
message: '刪除成功!'
});
//重新獲取資料
this.fetch()
})
}
},
五、其他介面的新建介面和資料列表介面大同小異，值得一提的是新建英雄介面和新建文章介面
- 新建英雄介面使用el-tabs元件中的el-tab-pane,
- 頭像上傳使用el-upload元件，
- 型別選擇是使用的el-select列表中的el-options設定可以多選
- 難度評分使用的el-rate元件
<el-form-item label="頭像">
<el-upload
class="avatar-uploader"
:action="$http.defaults.baseURL + '/upload'"
:show-file-list="false"
:on-success="afterUpload"
>
<img v-if="model.avatar" :src="model.avatar" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="型別">
<el-select v-model="model.categories" multiple>
<el-option
v-for="item of categories"
:key="item._id"
:label="item.name"
:value="item._id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="難度">
<el-rate
style="margin-top: 0.6rem"
:max="9"
show-score
v-model="model.scores.difficult"
></el-rate>
</el-form-item>
- 新建文章介面，使用的是vue2-editor庫中的VueEditor元件，類word編輯器，使得編輯時所見到的介面，是顯示時所得到介面
-
<h1>{{ id ? "編輯" : "新建" }}文章</h1> <el-form label-width="120px" @submit.native.prevent="save"> <el-form-item label="所屬分類"> <el-select v-model="model.categories" multiple> <el-option v-for="item in categories" :key="item._id" :label="item.name" :value="item._id" > </el-option> </el-select> </el-form-item> <el-form-item label="標題"> <el-input v-model="model.title"></el-input> </el-form-item> <el-form-item label="詳情"> <vue-editor v-model="model.body" useCustomImageHandler @image-added = "handleImageAdded" > </vue-editor> </el-form-item> <el-form-item> <el-button type="primary" native-type="submit">儲存</el-button> </el-form-item> </el-form> </div>