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': '' //选择忽略拦截器里面的单词
}
}
}
}
}
// 以上是解决跨域问题的代码
总体分析
