Aside.vue檔案(側邊欄)
<!--放菜單欄-->
<template>
<!-- 側邊欄必須有的兩個函數handleOpen，handleClose-->
<div>
<el-menu
style="width: 200px;min-height: calc(100vh - 50px)"
default-active="2"
default-openeds="1"
class="el-menu-vertical-demo">
<!-- @open="handleOpen"-->
<!-- @close="handleClose">-->
<el-submenu index="1">
<template #title>系統管理</template>
<el-menu-item index="user">使用者管理</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
name: "Aside"
}
</script>
<style scoped>
</style>
Header.vue檔案(導航欄)
<template>
<!-- 寫的-》頭部 左中右三個布局-->
<div style="height: 50px;line-height: 50px; border-bottom: 1px solid #ccc;display: flex">
<!-- 左-->
<div style="width: 200px;padding-left: 30px;font-weight: bold; color: dodgerblue">背景管理系統</div>
<!-- 中-->
<div style="flex: 1"></div>
<!-- 右 下拉菜單-->
<div style="width: 100px">
<el-dropdown>
<span class="el-dropdown-link">
小周周<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<!-- 選項-->
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>個人資訊</el-dropdown-item>
<el-dropdown-item>退出系統</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script>
</script>
Home.vue檔案(内容檔案)
<template>
<!--寫的表格-->
<div style="padding: 10px">
<div style="margin: 10px 0">
<!-- 功能區域-->
<!-- 按鈕标簽-->
<el-button type="primary" @click="add">新增</el-button>
<el-button type="primary">導入</el-button>
<el-button type="primary">導出</el-button>
</div>
<!-- 搜尋區域-->
<div style="margin: 10px 0">
<el-input v-model="search" placeholder="請輸入内容" style="width: 20%" clearable></el-input>
<el-button style="margin-left: 10px" type="primary" @click="load">查詢</el-button>
</div>
<el-table
:data="tableData"
border
style="width: 100%"
:default-sort="{prop: 'date', order: 'descending'}">
<el-table-column
prop="id"
label="ID"
sortable>
</el-table-column>
<el-table-column
prop="userId"
label="使用者Id">
</el-table-column>
<el-table-column
prop="userPwd"
label="使用者密碼">
</el-table-column>
<el-table-column
prop="nickName"
label="昵稱">
</el-table-column>
<el-table-column
prop="age"
label="年齡">
</el-table-column>
<el-table-column
prop="sex"
label="性别">
</el-table-column>
<el-table-column
prop="address"
label="位址">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="300">
<template #default="scope">
<el-row>
<el-button @click="handleEdit(scope.row)" type="primary" size="1px">編輯</el-button>
<el-popconfirm title="這是一段内容确定删除嗎？" @confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button type="danger">删除</el-button>
</template>
</el-popconfirm>
</el-row>
</template>
</el-table-column>
</el-table>
<!-- 表格下放個分頁元件-->
<div style="margin: 10px 0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"> <!--total寫成一個變量背景去擷取-->
</el-pagination>
<el-dialog title="提示" v-model="dialogVisible" width="30%">
<!-- 新增按鈕的視窗-->
<!-- form變量-->
<el-form :model="form" label-width="80px">
<el-form-item label="使用者名">
<!-- 彈窗裡面的文本框-->
<el-input v-model="form.userId"></el-input>
</el-form-item>
<el-form-item label="密碼">
<!-- 彈窗裡面的文本框-->
<el-input v-model="form.userPwd"></el-input>
</el-form-item>
<el-form-item label="昵稱">
<!-- 彈窗裡面的文本框-->
<el-input v-model="form.nickName"></el-input>
</el-form-item>
<el-form-item label="年齡">
<!-- 彈窗裡面的文本框-->
<el-input v-model="form.age"></el-input>
</el-form-item>
<el-form-item label="性别">
<!-- 單選框按鈕-->
<el-radio v-model="form.sex" label="男">男</el-radio>
<el-radio v-model="form.sex" label="女">女</el-radio>
<el-radio v-model="form.sex" label="未知">未知</el-radio>
</el-form-item>
<el-form-item label="位址">
<!-- 彈窗裡面的文本框-->
<el-input v-model="form.address"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template>
<script>
import request from "@/utils/request";
export default {
name: 'Home',
components: {},
data() {
return {
//彈窗一直的都是打開的先設定false
dialogVisible:false,
form: {
},
//關鍵字 傳給背景
search:'',
//變量目前頁 預設1 傳後
currentPage: 1,
pageSize:10,
total: 0,
//對應表格的data
tableData: []
}
},
//頁面加載的方法
created() {
this.load()
},
methods: {
load() {
request.get("/api/user",{
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search
}
}).then(res => {
console.log(res);
//指派後就可以顯示
this.tableData = res.data.records;
this.total = res.data.total;
})
},
add() {
//打開彈窗 設定它的顯示和隐藏
this.dialogVisible = true
//情況form裡面的值，不然點選取消裡面的值還在
this.form = {
}
},
//新增事件
save() {
// // 請求位址 參數form跟其它屬性進行綁定了的,form存了值 .then是es6的文法前面執行之後會将傳回結果放到.then裡面
// request.post("/api/user",this.form).then(res => {
// console.log(res);
//
// })
//如果有id就更新沒有就新增
if (this.form.id){ //更新
request.put("/api/user",this.form).then(res => {
console.log(res);
if (res.code === '0'){
this.$message({
type: "success",
message: "更新成功"
})
}else {
this.$message({
type: "error",
message: res.msg
})
}
this.load() //重新整理表格的資料
this.dialogVisible = false //關閉彈窗
})
}else {//新增
request.post("/api/user",this.form).then(res => {
console.log(res);
if (res.code === '0'){
this.$message({
type: "success",
//彈提示
message: "新增成功"
})
}else {
this.$message({
type: "error",
message: res.msg
})
}
this.load() //重新整理表格的資料
this.dialogVisible = false //關閉彈窗
})
}
},
//編輯按鈕 row是一個對象
handleEdit(row) {
//資料回顯 因為彈窗跟form是進行綁定的直接給form指派就ok
this.form = JSON.parse(JSON.stringify(row))
this.dialogVisible = true; //打開彈窗
},
//當你改變每頁個數的時候
handleSizeChange(pageSize) { //改變目前每的個數觸發頁
//後端定義的是pageSize 傳給前端定義的pageSize
this.pageSize = pageSize;
this.load();
},
//改變目前頁
handleCurrentChange(pageNum) { //改變目前頁碼觸發
//後端定義的是pageNum 傳給前端定義的currentPage
this.currentPage = pageNum;
this.load();
},
//删除
handleDelete(id){
console.log(id);
request.delete("/api/user/" + id).then(res => {
if (res.code === '0'){
this.$message({
type:"success",
message: "删除成功"
})
} else {
this.$message({
type: "error",
message: res.msg
})
}
this.load();
})
}
}
}
</script>
request.js檔案(axios封裝請求檔案)
// 本地安裝axios 使用axios實作前後端分離
//npm i axios -S
import axios from 'axios'
//第一步通過axios建立請求對象
const request = axios.create({
timeout: 5000
})
// request 攔截器
// 可以自請求發送前對請求做一些處理
// 比如統一加token，對請求參數統一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 設定請求頭
return config
}, error => {
return Promise.reject(error)
});
// response 攔截器
// 可以在接口響應後統一處理結果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是傳回的檔案
if (response.config.responseType === 'blob') {
return res
}
// 相容服務端傳回的字元串資料
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request
App.vue檔案(就用來布局)
<template>
<div>
<!-- 需要導入自己的标簽才能顯示-->
<!-- 頭部-->
<Header/>
<!-- 主體-->
<div style="display: flex">
<!-- 側邊欄-->
<Aside/>
<!-- 内容區域 在router包下的index.js布局了Home.vue檔案-->
<router-view style="flex: 1"/>
</div>
</div>
</template>
<style>
</style>
<!--引入components的頭部-->
<script>
import Header from "./components/Header";
import Aside from "./components/Aside";
export default {
name: "Layout",
components: {
Header, //導航欄
Aside //側邊欄
}
}
</script>
main.js檔案(配置需要的css樣式架構國際化樣式架構等等) element vue都在裡面
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入css
import '@/assets/css/global.css'
// 引入Element +use(ElementPlus)
import ElementPlus from 'element-plus';
// 引入Element的css
import 'element-plus/lib/theme-chalk/index.css';
// 國際化 + use(ElementPlus,{ locale })
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
//添加use(ElementPlus)
createApp(App).use(store).use(router).use(ElementPlus,{ locale, size:'small' }).mount('#app') //size:'small'設定尺寸
vue.config.js檔案(跨域)
跨域就是指前後端的端口号不一緻，同時運作兩個端口，前端需要跨域傳資料給後端。
// 跨域配置
module.exports = {
devServer: { //記住，别寫錯了devServer//設定本地預設端口 選填
port: 9876,
proxy: { //設定代理，必須填
'/api': { //設定攔截器 攔截器格式 斜杠+攔截器名字，名字可以自己定
target: 'http://localhost:9090', //代理的目标位址
changeOrigin: true, //是否設定同源，輸入是的
pathRewrite: { //路徑重寫
'/api': '' //選擇忽略攔截器裡面的單詞
}
}
}
}
}
// 以上是解決跨域問題的代碼
總體分析
