vue2版本《后台管理模式》（下）

---

前言

这章主写内容 该要的配置都有

上章链接：《后台管理（中）》点击跳转

一、home 页

路由在《后台管理（上）》，划分组件 每个组件某个功能

<template><div class="home"><!-- 头部 --><Header></Header><!-- 主体部分 --><el-container class="content"><!-- 左侧 --><Menu></Menu><!-- 右侧 --><el-container><el-main><!-- 面包屑 --><Bread></Bread><!-- 路由视图出口 --><div class="count"><router-view></router-view></div></el-main><!-- 尾部 --><el-footer><Footer></Footer></el-footer></el-container></el-container></div>
</template><script>
import Header from "@/components/common/Header";
import Bread from "@/components/common/Breadcrumb";
import Menu from "@/components/common/Menu";
import Footer from "@/components/common/Footer";
export default {name: "Home",components: {Header,Bread,Menu,Footer,},
};
</script><style lang="scss" scoped>
.home {width: 100%;height: 100%;.content {position: absolute;width: 100%;top: 60px;bottom: 0;.count {margin: 20px 0;}}
}
</style>

以下都属于home子组件

学生列表 StudentList

<template><div class="student"><!-- 查询 --><el-form:inline="true":model="formInline"class="demo-form-inline"size="small"><el-form-item label="姓名"><el-input v-model="formInline.name" placeholder="请输入姓名"></el-input></el-form-item><el-form-item><el-button type="primary" @click="find">查询</el-button></el-form-item><el-form-item><el-button type="primary" @click="reset">重置</el-button></el-form-item></el-form><!-- 表格 --><!-- 1: 0-9 2: 10-19 3: 20-29 slice((当前页数-1)*每页的条数，当前页数*当前的条数) --><el-table :data="compDate" border style="width: 100%"><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="age" label="年龄" align="center"></el-table-column><el-table-column prop="sex_text" label="性别" align="center"></el-table-column><el-table-column prop="number" label="学号" align="center"></el-table-column><el-table-column prop="class" label="班级号" align="center"></el-table-column><el-table-column prop="state_text" label="状态" align="center"></el-table-column><el-table-column prop="phone" label="联系方式" align="center" width="110"></el-table-column><el-table-column prop="address" label="地址" align="center"></el-table-column><el-table-column align="center" label="操作" width="100"><template slot-scope="scope"><el-buttontype="danger"size="mini"icon="el-icon-delete"@click="del(scope.row)"></el-button></template></el-table-column></el-table><!-- 分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 20, 30, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>
</template><script>
import { student, studentDel } from "@/api/api";export default {data() {return {// 表格内的总数据tableData: [],// 查询formInline: {name: "",},// 总条数total: 0,// 每页显示的数量pageSize: 10,// 当前页currentPage: 1,};},mounted() {this.getData();},computed: {compDate() {return (// 起点this.tableData.slice((this.currentPage - 1) * this.pageSize,// 终点（数据截取在终点的前一个结束）this.currentPage * this.pageSize));},},methods: {// 修改每页显示的数量handleSizeChange(val) {this.pageSize = val;// 每次修改完成后，回到当前第一页this.currentPage = 1;},// 修改当前页handleCurrentChange(val) {this.currentPage = val;},// 获取数据getData(params) {student(params).then((res) => {if (res.data.status === 200) {// 表格内的总数据this.tableData = res.data.data;// 总条数this.total = res.data.total;// 循环遍历this.tableData.forEach((item) => {// 因有些后台是数组，前端显示时需要改变为汉字// 尽量不要去修改原数据，因为后续的使用会造成影响item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");item.state === "1"? (item.state_text = "已入学"): item.state === "2"? (item.state_text = "未入学"): (item.state_text = "休学中");});}});},// 删除del(row) {studentDel(row.id).then((res) => {if (res.data.status === 200) {this.$message({ message: "数据删除成功", type: "success" });// 重新获取数据this.getData();}});console.log(row);},// 查询find() {this.getData(this.formInline);},// 重置reset() {this.formInline = {};this.getData(this.formInline);},},
};
</script><style lang="scss">
.student {.demo-form-inline,.el-form-inline,.el-pagination {text-align: left;}.el-pagination {margin-top: 40px;}
}
</style>

信息列表 InfoList

<template><div class="infolist"><!-- 新增按钮 --><el-form :inline="true" class="demo-form-inline" size="small"><el-form-item><el-button type="primary" @click="addStudent">新增</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="compDate" style="width: 100%" border><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="sex_text" label="性别" align="center"></el-table-column><el-table-column prop="age" label="年龄" align="center"></el-table-column><el-table-column prop="father" label="父亲" align="center"></el-table-column><el-table-column prop="mather" label="母亲" align="center"></el-table-column><el-table-column prop="time" label="入校时间" align="center"></el-table-column><el-table-column prop="phone" label="联系方式" align="center" width="120"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column><el-table-column align="center" label="操作" width="120"><template slot-scope="scope"><el-buttontype="danger"size="small"icon="el-icon-edit"@click="edit(scope.row)"></el-button><el-buttontype="danger"size="small"icon="el-icon-delete"@click="del(scope.row)"></el-button></template></el-table-column></el-table><!-- 复用的提示框 --><el-dialog:title="state ? '添加学生信息' : '修改学生信息'":visible.sync="dialogFormVisible"width="500px"><el-form :model="form" ref="form"><el-form-item label="姓名" prop="name" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" prop="sex" :label-width="formLabelWidth"><el-radio v-model="form.sex" label="1">男</el-radio><el-radio v-model="form.sex" label="2">女</el-radio></el-form-item><el-form-item label="年龄" prop="age" :label-width="formLabelWidth"><el-input v-model="form.age" autocomplete="off"></el-input></el-form-item><el-form-item label="父亲" prop="father" :label-width="formLabelWidth"><el-input v-model="form.father" autocomplete="off"></el-input></el-form-item><el-form-item label="母亲" prop="mather" :label-width="formLabelWidth"><el-input v-model="form.mather" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="入校时间"prop="time":label-width="formLabelWidth"><el-date-pickerv-model="form.time"type="date"format="yyyy 年 MM 月 dd 日"placeholder="选择日期"value-format="yyyy-MM-dd"></el-date-picker></el-form-item><el-form-itemlabel="家庭地址"prop="address":label-width="formLabelWidth"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="联系方式"prop="phone":label-width="formLabelWidth"><el-input v-model="form.phone" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="closeInfo('form')">取 消</el-button><el-button type="primary" @click="sure('form')">确 定</el-button></div></el-dialog><!-- 分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":hide-on-single-page="true":page-sizes="[5, 10, 15, 30, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>
</template><script>
import { getData, changInfo, delData } from "../../utils/table";
export default {data() {return {// 表格内的总数据tableData: [],// 提示框显示隐藏dialogFormVisible: false,// 区分是新增还是修改state: true,// 提示框里input的宽formLabelWidth: "70px",// 对象的setter 如果没有属性，可以创建属性，再去赋值// getter 会直接去找该属性，如果没有该属性，报错// 提示框里的值form: {name: "",age: "",sex: "",father: "",mather: "",time: "",address: "",phone: "",},// 分页：// 总条数total: 0,// 一页显示几条pageSize: 5,// 当前页currentPage: 1,};},mounted() {getData(this, "/info");},computed: {compDate() {// slice(0,5)获取从0到5的值return this.tableData.slice(// 起点(this.currentPage - 1) * this.pageSize,// 终点this.currentPage * this.pageSize);},},methods: {// 每页的条数改变时触发handleSizeChange(val) {this.pageSize = val;this.currentPage = 1;},// 当前页数改变时触发handleCurrentChange(val) {this.currentPage = val;},// 新增数据addStudent() {// 对数据进行重置this.form = {name: "",age: "",sex: "1",father: "",mather: "",time: "",address: "",phone: "",};// 1. 弹出 提示框this.dialogFormVisible = true;this.state = true;},// 修改数据edit(row) {// 把当前修改的数据内容添加进提示框中this.form = { ...row };this.dialogFormVisible = true;// 切换对话框的标题this.state = false;},// 取消closeInfo(form) {// 重置数据this.$refs[form].resetFields();this.dialogFormVisible = false;},// 确定sure(form) {this.dialogFormVisible = false;// 判断正则验证是否通过this.$refs[form].validate((valid) => {if (valid) {// root, method, url, form, callbacklet method = "";this.state ? (method = "post") : (method = "put");changInfo(this, method, "/info", this.form, getData);}});},// 删除del(row) {delData(this, "/info", row.id, getData);},},
};
</script><style lang="scss">
.infolist {.demo-form-inline,.el-form-item,.el-pagination {text-align: left;}.el-pagination {margin-top: 40px;}
}
</style>

信息管理 InfoLists

在这里插入代码片<template><div class="infolist"><!-- 新增按钮 --><el-form :inline="true" class="demo-form-inline" size="small"><el-form-item><el-button type="primary" @click="addStudent">新增</el-button></el-form-item></el-form><!-- 表格 --><el-table :data="compDate" style="width: 100%" border><el-table-column prop="name" label="姓名" align="center"></el-table-column><el-table-column prop="sex_text" label="性别" align="center"></el-table-column><el-table-column prop="age" label="年龄" align="center"></el-table-column><el-table-column prop="father" label="父亲" align="center"></el-table-column><el-table-column prop="mather" label="母亲" align="center"></el-table-column><el-table-column prop="time" label="入校时间" align="center"></el-table-column><el-table-column prop="phone" label="联系方式" align="center" width="120"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column><el-table-column align="center" label="操作" width="120"><template slot-scope="scope"><el-buttontype="danger"size="small"icon="el-icon-edit"@click="edit(scope.row)"></el-button><el-buttontype="danger"size="small"icon="el-icon-delete"@click="del(scope.row)"></el-button></template></el-table-column></el-table><!-- 复用的提示框 --><el-dialog:title="state ? '添加学生信息' : '修改学生信息'":visible.sync="dialogFormVisible"width="500px"><el-form :model="form" ref="form"><el-form-item label="姓名" prop="name" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" prop="sex" :label-width="formLabelWidth"><el-radio v-model="form.sex" label="1">男</el-radio><el-radio v-model="form.sex" label="2">女</el-radio></el-form-item><el-form-item label="年龄" prop="age" :label-width="formLabelWidth"><el-input v-model="form.age" autocomplete="off"></el-input></el-form-item><el-form-item label="父亲" prop="father" :label-width="formLabelWidth"><el-input v-model="form.father" autocomplete="off"></el-input></el-form-item><el-form-item label="母亲" prop="mather" :label-width="formLabelWidth"><el-input v-model="form.mather" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="入校时间"prop="time":label-width="formLabelWidth"><el-date-pickerv-model="form.time"type="date"format="yyyy 年 MM 月 dd 日"placeholder="选择日期"value-format="yyyy-MM-dd"></el-date-picker></el-form-item><el-form-itemlabel="家庭地址"prop="address":label-width="formLabelWidth"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item><el-form-itemlabel="联系方式"prop="phone":label-width="formLabelWidth"><el-input v-model="form.phone" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="closeInfo('form')">取 消</el-button><el-button type="primary" @click="sure('form')">确 定</el-button></div></el-dialog><!-- 分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":hide-on-single-page="true":page-sizes="[5, 10, 15, 30, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>
</template><script>
// import { infoDel } from "@/api/api";
import { getData, changInfo, delData } from "../../utils/table";export default {data() {return {// 表格内的总数据tableData: [],// 提示框显示隐藏dialogFormVisible: false,// 区分是新增还是修改state: true,// 提示框里input的宽formLabelWidth: "70px",// 对象的setter 如果没有属性，可以创建属性，再去赋值// getter 会直接去找该属性，如果没有该属性，报错// 提示框里的值form: {name: "",age: "",sex: "",father: "",mather: "",time: "",address: "",phone: "",},// 分页：// 总条数total: 0,// 一页显示几条pageSize: 5,// 当前页currentPage: 1,};},mounted() {// 获取数据getData(this, "/info");},computed: {compDate() {// slice(0,5)获取从0到5的值return this.tableData.slice(// 起点(this.currentPage - 1) * this.pageSize,// 终点this.currentPage * this.pageSize);},},methods: {// 每页的条数改变时触发handleSizeChange(val) {this.pageSize = val;this.currentPage = 1;},// 当前页数改变时触发handleCurrentChange(val) {this.currentPage = val;},// 新增数据addStudent() {// 对数据进行重置this.form = {name: "",age: "",sex: "1",father: "",mather: "",time: "",address: "",phone: "",};// 1. 弹出 提示框this.dialogFormVisible = true;this.state = true;},// 修改数据edit(row) {// 把当前修改的数据内容添加进提示框中this.form = { ...row };this.dialogFormVisible = true;// 切换对话框的标题this.state = false;},// 取消closeInfo(form) {// 重置数据this.$refs[form].resetFields();this.dialogFormVisible = false;},// 确定sure(form) {// 判断正则验证是否通过this.$refs[form].validate((valid) => {if (valid) {// root, method, url, form, callbacklet method = "";this.state ? (method = "post") : (method = "put");changInfo(this, method, "/info", this.form, getData);}});},// 删除del(row) {delData(this, "/info", row.id, getData);},},
};
</script><style lang="scss">
.infolist {.demo-form-inline,.el-form-item,.el-pagination {text-align: left;}.el-pagination {margin-top: 40px;}
}
</style>

作业列表 WorkList

<template><div class="worklist"><el-table :data="tableData" v-loading="loading" border style="width: 100%"><el-table-columnprop="id"label="用户ID"align="center"></el-table-column><el-table-columnprop="userId_text"label="所属班级"align="center"></el-table-column><el-table-columnprop="title"label="作业名称"align="center"></el-table-column><el-table-columnprop="completed_text"label="完成情况"align="center"></el-table-column></el-table><!-- 分页 --><Page :total="total" :url="url"></Page></div>
</template><script>
import Page from "@/components/common/Pageing";
export default {components: { Page },data() {return {// 表格内的总数据tableData: [],// 总条数total: 0,// 加载loading: true,// 地址url: "/works",};},
};
</script><style></style>

作业管理 WorkMenu

<template><div class="worklist"><el-table :data="tableData" v-loading="loading" border style="width: 100%"><el-table-columnprop="id"label="用户ID"align="center"></el-table-column><el-table-columnprop="userId_text"label="所属班级"align="center"></el-table-column><el-table-columnprop="title"label="作业名称"align="center"></el-table-column><el-table-columnprop="completed_text"label="完成情况"align="center"></el-table-column></el-table><!-- 分页 --><Page :total="total" :url="url"></Page></div>
</template><script>
import Page from "@/components/common/Pageing";
export default {components: { Page },data() {return {// 表格内的总数据tableData: [],// 总条数total: 0,// 加载loading: true,// 地址url: "/works",};},
};
</script><style></style>

地图系列

都是home的子组件

数据概览 DataView

<template><div class="data-view"><el-card><div id="main1"></div></el-card><el-card><div id="main2"></div></el-card></div>
</template><script>
import { dataView } from "@/api/api";
export default {// echars是一棵树// 这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少// 树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来// 枝干可以在示例中，具体代码里有配置，在文档中查看具体效果data() {return {};},created() {dataView().then((res) => {if (res.data.status === 200) {let { legend, xAxis, series } = res.data.data;this.draw(legend, xAxis, series);}});},mounted() {// 1. 初始化echatrs实例，并挂载到dom容器中let myChart = this.$echarts.init(document.getElementById("main1"));// 2. 对照着需求，来逐个编写配置项(参考文档)和接收数据let option = {// 标题title: {text: "会话量",},tooltip: {// 鼠标移入trigger: "axis",},legend: {data: ["销量"],},// X轴上数据xAxis: {// 类目轴type: "category",data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},// Y轴上数据yAxis: {type: "value",},// 显示数据series: [{name: "销量",// 类型type: "bar",// 是否显示柱条的背景色showBackground: true,itemStyle: {},data: [5, 20, 36, 10, 10, 20],},],};// 3. 将配置和数据添加到实例中myChart.setOption(option);},methods: {draw(leg, x_data, series_data) {let myCharts2 = this.$echarts.init(document.getElementById("main2"));myCharts2.setOption({title: { text: "会话量" },tooltip: {// 鼠标移入trigger: "axis",},legend: {data: leg,},xAxis: {type: "category",data: x_data,},yAxis: {type: "value",},series: series_data,});},},
};
</script><style lang="scss" scoped>
.data-view {width: 100%;display: flex;justify-content: space-between;.el-card {width: 50%;#main1,#main2 {height: 500px;}}
}
</style>

二、header 头部 组件

<template><div class="header"><el-header><div class="title">通用管理系统</div><div>{{ name }}</div></el-header></div>
</template><script>
import { getToken } from "@/utils/setToken.js";
export default {data() {return {name: "",};},mounted() {this.name = getToken("username");},
};
</script><style lang="scss" scoped>
.header {.el-header {background-color: #2578b5;line-height: 60px;color: #fff;display: flex;justify-content: space-between;.title {width: 200px;font-size: 24px;}}
}
</style>

二、Menu 页面

<template><div class="menu"><el-aside width="200px"><!-- router：可以使用路由，以 index 作为 path 进行路由跳转 --><!-- default-active：当前激活菜单的 index --><!-- background-color：背景色，text-color：字体色，active-text-color：当前激活菜单的文字颜色 --><el-menurouterdefault-active="2"class="el-menu-vertical-demo"background-color="#2578b5"text-color="#fff"active-text-color="#ffd04b"><template v-for="(item, index) in menus"><!-- 判断是否需要显示 --><el-submenu :index="index + ''" :key="index" v-if="!item.hidden"><template slot="title"><i :class="item.iconClass"></i><span>{{ item.name }}</span></template><el-menu-item-groupv-for="(child, index) in item.children":key="index"><el-menu-item :index="child.path"><i :class="child.iconClass"></i>{{ child.name }}</el-menu-item></el-menu-item-group></el-submenu></template></el-menu></el-aside></div>
</template><script>
export default {data() {return {menus: [],};},mounted() {// 获取所有路由信息并添加到 menus 数组中this.menus = [...this.$router.options.routes];},
};
</script><style lang="scss" scoped>
.menu {::-webkit-scrollbar {display: none;}.el-aside {height: 100%;.el-menu {height: 100%;.fa {margin-right: 10px;}}.el-submenu .el-menu-item {min-width: 0;}}
}
</style>

地图概览 MapView

<template><div class="map-view"><div id="main"></div></div>
</template><script>
import geoJson from "echarts/map/json/china";
export default {data() {return {};},mounted() {let myChart = this.$echarts.init(document.getElementById("main"));// 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用// 地图：世界地图，中国地图，省份地图，市区地图this.$echarts.registerMap("china", geoJson);myChart.setOption({// 背景色backgroundColor: "rgb(121,145,200)",// 配置项(组件)geo: {map: "china",// 地图的长宽比例aspectScale: 0.75,// 图层zoom: 1.1,// 样式itemStyle: {// 标准normal: {// 地图区域的颜色areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.8,// 颜色的步骤colorStops: [{offset: 0,color: "#09132c",},{offset: 1,color: "#274d68",},],// 延长作用域globalCoord: true,},// 盒子的阴影shadowColor: "rgb(58,115,192)",// 偏移shadowOffsetX: 10,shadowOffsetY: 11,},},region: [{name: "南海诸岛",itemStyle: {opacity: 0,},},],},series: [// 配置地图相关的数据参数{type: "map",label: {normal: {// 显示文字show: true,textStyle: {color: "#1DE9B6",},},emphasis: {textStyle: {color: "rgb(183,185,14)",},},},// 图层zoom: 1.1,map: "china",itemStyle: {normal: {// 背景色backgroundColor: "rgb(147,235,248)",// 边框borderWidth: 1,// 区域颜色areaColor: {type: "radial",x: 0.5,y: 0.5,// 文档r: 0.8,colorStops: [{ offset: 0, color: "rgb(34,54,150)" },{ offset: 1, color: "rgb(89,128,142)" },],// 全局生效globalCoord: true,},},// 高亮效果emphasis: {areaColor: "rgb(46,229,206)",borderWidth: 0.1,},},},],});},methods: {},
};
</script><style lang="scss" scoped>
.map-view {width: 100%;#main {width: 100%;height: 600px;}
}
</style>

分数地图 ScoreMap

<template><div class="score-map"><div id="main"></div></div>
</template><script>
import chinaJson from "echarts/map/json/china";
export default {data() {return {};},mounted() {let myChart = this.$echarts.init(document.getElementById("main"));this.$echarts.registerMap("china", chinaJson);var name_title = "中国人民大学2017年各省市计划录取人数";var subname = "数据爬取自千栀网\n，\n上海、浙江无文理科录取人数";var nameColor = " rgb(55, 75, 113)";var name_fontFamily = "等线";var subname_fontSize = 15;var name_fontSize = 18;var mapName = "china";var data = [{ name: "北京", value: 177 },{ name: "天津", value: 42 },{ name: "河北", value: 102 },{ name: "山西", value: 81 },{ name: "内蒙古", value: 47 },{ name: "辽宁", value: 67 },{ name: "吉林", value: 82 },{ name: "黑龙江", value: 66 },{ name: "上海", value: 24 },{ name: "江苏", value: 92 },{ name: "浙江", value: 114 },{ name: "安徽", value: 109 },{ name: "福建", value: 116 },{ name: "江西", value: 91 },{ name: "山东", value: 119 },{ name: "河南", value: 137 },{ name: "湖北", value: 116 },{ name: "湖南", value: 114 },{ name: "重庆", value: 91 },{ name: "四川", value: 125 },{ name: "贵州", value: 62 },{ name: "云南", value: 83 },{ name: "西藏", value: 9 },{ name: "陕西", value: 80 },{ name: "甘肃", value: 56 },{ name: "青海", value: 10 },{ name: "宁夏", value: 18 },{ name: "新疆", value: 67 },{ name: "广东", value: 123 },{ name: "广西", value: 59 },{ name: "海南", value: 14 },];var geoCoordMap = {};var toolTipData = [{name: "北京",value: [{ name: "文科", value: 95 },{ name: "理科", value: 82 },],},{name: "天津",value: [{ name: "文科", value: 22 },{ name: "理科", value: 20 },],},{name: "河北",value: [{ name: "文科", value: 60 },{ name: "理科", value: 42 },],},{name: "山西",value: [{ name: "文科", value: 40 },{ name: "理科", value: 41 },],},{name: "内蒙古",value: [{ name: "文科", value: 23 },{ name: "理科", value: 24 },],},{name: "辽宁",value: [{ name: "文科", value: 39 },{ name: "理科", value: 28 },],},{name: "吉林",value: [{ name: "文科", value: 41 },{ name: "理科", value: 41 },],},{name: "黑龙江",value: [{ name: "文科", value: 35 },{ name: "理科", value: 31 },],},{name: "上海",value: [{ name: "文科", value: 12 },{ name: "理科", value: 12 },],},{name: "江苏",value: [{ name: "文科", value: 47 },{ name: "理科", value: 45 },],},{name: "浙江",value: [{ name: "文科", value: 57 },{ name: "理科", value: 57 },],},{name: "安徽",value: [{ name: "文科", value: 57 },{ name: "理科", value: 52 },],},{name: "福建",value: [{ name: "文科", value: 59 },{ name: "理科", value: 57 },],},{name: "江西",value: [{ name: "文科", value: 49 },{ name: "理科", value: 42 },],},{name: "山东",value: [{ name: "文科", value: 67 },{ name: "理科", value: 52 },],},{name: "河南",value: [{ name: "文科", value: 69 },{ name: "理科", value: 68 },],},{name: "湖北",value: [{ name: "文科", value: 60 },{ name: "理科", value: 56 },],},{name: "湖南",value: [{ name: "文科", value: 62 },{ name: "理科", value: 52 },],},{name: "重庆",value: [{ name: "文科", value: 47 },{ name: "理科", value: 44 },],},{name: "四川",value: [{ name: "文科", value: 65 },{ name: "理科", value: 60 },],},{name: "贵州",value: [{ name: "文科", value: 32 },{ name: "理科", value: 30 },],},{name: "云南",value: [{ name: "文科", value: 42 },{ name: "理科", value: 41 },],},{name: "西藏",value: [{ name: "文科", value: 5 },{ name: "理科", value: 4 },],},{name: "陕西",value: [{ name: "文科", value: 38 },{ name: "理科", value: 42 },],},{name: "甘肃",value: [{ name: "文科", value: 28 },{ name: "理科", value: 28 },],},{name: "青海",value: [{ name: "文科", value: 5 },{ name: "理科", value: 5 },],},{name: "宁夏",value: [{ name: "文科", value: 10 },{ name: "理科", value: 8 },],},{name: "新疆",value: [{ name: "文科", value: 36 },{ name: "理科", value: 31 },],},{name: "广东",value: [{ name: "文科", value: 63 },{ name: "理科", value: 60 },],},{name: "广西",value: [{ name: "文科", value: 29 },{ name: "理科", value: 30 },],},{name: "海南",value: [{ name: "文科", value: 8 },{ name: "理科", value: 6 },],},];/*获取地图数据*/myChart.showLoading();var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;myChart.hideLoading();mapFeatures.forEach(function (v) {// 地区名称var name = v.properties.name;// 地区经纬度geoCoordMap[name] = v.properties.cp;});// console.log("============geoCoordMap===================")// console.log(geoCoordMap)// console.log("================data======================")// console.log(data);// console.log(toolTipData);var max = 480,min = 9; // todovar maxSize4Pin = 100,minSize4Pin = 20;var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;};let option = {title: {text: name_title,subtext: subname,x: "center",textStyle: {color: nameColor,fontFamily: name_fontFamily,fontSize: name_fontSize,},subtextStyle: {fontSize: subname_fontSize,fontFamily: name_fontFamily,},},tooltip: {trigger: "item",formatter: function (params) {if (typeof params.value[2] == "undefined") {var toolTiphtml = "";for (let i = 0; i < toolTipData.length; i++) {if (params.name == toolTipData[i].name) {toolTiphtml += toolTipData[i].name + ":<br>";for (let j = 0; j < toolTipData[i].value.length; j++) {toolTiphtml +=toolTipData[i].value[j].name +":" +toolTipData[i].value[j].value +"<br>";}}}// console.log(toolTiphtml);// console.log(convertData(data))return toolTiphtml;} else {let toolTiphtml = "";for (let i = 0; i < toolTipData.length; i++) {if (params.name == toolTipData[i].name) {toolTiphtml += toolTipData[i].name + ":<br>";for (let j = 0; j < toolTipData[i].value.length; j++) {toolTiphtml +=toolTipData[i].value[j].name +":" +toolTipData[i].value[j].value +"<br>";}}}// console.log(toolTiphtml);// console.log(convertData(data))return toolTiphtml;}},},// legend: {//     orient: 'vertical',//     y: 'bottom',//     x: 'right',//     data: ['credit_pm2.5'],//     textStyle: {//         color: '#fff'//     }// },visualMap: {show: true,min: 0,max: 200,left: "left",top: "bottom",text: ["高", "低"], // 文本，默认为数值文本calculable: true,seriesIndex: [1],inRange: {// color: ['#3B5077', '#031525'] // 蓝黑// color: ['#ffc0cb', '#800080'] // 红紫// color: ['#3C3B3F', '#605C3C'] // 黑绿// color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑// color: ['#23074d', '#cc5333'] // 紫红color: ["#00467F", "#A5CC82"], // 蓝绿// color: ['#1488CC', '#2B32B2'] // 浅蓝// color: ['#00467F', '#A5CC82'] // 蓝绿// color: ['#00467F', '#A5CC82'] // 蓝绿// color: ['#00467F', '#A5CC82'] // 蓝绿// color: ['#00467F', '#A5CC82'] // 蓝绿},},/*工具按钮组*/// toolbox: {//     show: true,//     orient: 'vertical',//     left: 'right',//     top: 'center',//     feature: {//         dataView: {//             readOnly: false//         },//         restore: {},//         saveAsImage: {}//     }// },geo: {show: true,map: mapName,label: {normal: {show: false,},emphasis: {show: false,},},roam: true,itemStyle: {normal: {areaColor: "#031525",borderColor: "#3B5077",},emphasis: {areaColor: "#2B91B7",},},},series: [{name: "散点",type: "scatter",coordinateSystem: "geo",data: convertData(data),symbolSize: function (val) {return val[2] / 10;},label: {normal: {formatter: "{b}",position: "right",show: true,},emphasis: {show: true,},},itemStyle: {normal: {color: "#05C3F9",},},},{type: "map",map: mapName,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true,},emphasis: {show: false,textStyle: {color: "#fff",},},},roam: true,itemStyle: {normal: {areaColor: "#031525",borderColor: "#3B5077",},emphasis: {areaColor: "#2B91B7",},},animation: false,data: data,},{name: "点",type: "scatter",coordinateSystem: "geo",symbol: "pin", //气泡symbolSize: function (val) {var a = (maxSize4Pin - minSize4Pin) / (max - min);var b = minSize4Pin - a * min;b = maxSize4Pin - a * max;return a * val[2] + b;},label: {normal: {show: true,textStyle: {color: "#fff",fontSize: 9,},},},itemStyle: {normal: {color: "#F62157", //标志颜色},},zlevel: 6,data: convertData(data),},{name: "Top 5",type: "effectScatter",coordinateSystem: "geo",data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 5)),symbolSize: function (val) {return val[2] / 10;},showEffectOn: "render",rippleEffect: {brushType: "stroke",},hoverAnimation: true,label: {normal: {formatter: "{b}",position: "right",show: true,},},itemStyle: {normal: {color: "yellow",shadowBlur: 10,shadowColor: "yellow",},},zlevel: 1,},],};myChart.setOption(option);},methods: {},
};
</script><style lang="scss" scoped>
.score-map {width: 100%;#main {width: 100%;height: 650px;}
}
</style>

旅游地图 TravelMap

<template><div class="map-view"><div id="main"></div></div>
</template>
<!--设置一个标签，标签设置宽高，否则不显示引入中国地图的数据初始化echarts实例，并挂载到dom中注册中国地图，必须在geo或map中this.$echarts.registerMap("china", geoJson);编写配置项，把配置项添加到实例中（简写）配置项：背景色geo：图层（zoom），长宽比例，样式（itemStyle)：地图区域的颜色，阴影，阴影偏移量，特点区域的样式(region)：南海诸岛series：相关数据的各项参数，可以分为好几层，层次显示用图层（zoom）划分，1. 基础地图相关的数据参数：显示文字，文字颜色，图层，样式（itemStyle)：地图区域的颜色，背景色，边框，高亮效果（鼠标移入时显示样式）请求数据（把请求到的值：points, linesData）给2，3的data2. 配置散点图的各项参数：类型（type）：散点图（气泡图），使用地理坐标系，配置何时显示特效(绘制完成后显示特效)，标记的大小(默认为10)图层：1，data（数据），涟漪特效相关配置：动画周期，缩放比例，波纹的绘制3. 配置线性图的各项参数：类型（type）：线性图，图层：2，线特效的配置（effect）：是否显示特效（show），特效动画的时间，显示方式，特效的大小，拖尾的效果，取值范围 0-1，值越大效果越明显，线的样式（透明度，颜色，宽，弯曲度），data（数据）-->
<script>
import geoJson from "@/assets/data.json";
import { travel } from "@/api/api";
export default {data() {return {};},mounted() {travel().then((res) => {if (res.data.status === 200) {let { points, linesData } = res.data.data;this.draw(points, linesData);}});},methods: {draw(points, linesData) {let myChart = this.$echarts.init(document.getElementById("main"));// 注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用// 地图：世界地图，中国地图，省份地图，市区地图this.$echarts.registerMap("china", geoJson);myChart.setOption({// 背景色backgroundColor: "rgb(121,145,200)",// 配置项(组件)geo: {map: "china",// 地图的长宽比例aspectScale: 0.75,// 图层zoom: 1.1,// 样式itemStyle: {// 标准normal: {// 地图区域的颜色areaColor: {type: "radial",x: 0.5,y: 0.5,r: 0.8,// 颜色的步骤colorStops: [{offset: 0,color: "#09132c",},{offset: 1,color: "#274d68",},],// 延长作用域globalCoord: true,},// 盒子的阴影shadowColor: "rgb(58,115,192)",// 偏移shadowOffsetX: 10,shadowOffsetY: 11,},},region: [{name: "南海诸岛",itemStyle: {opacity: 0,},},],},series: [// 1. 配置基础地图相关的数据参数{type: "map",label: {normal: {// 显示文字show: true,textStyle: {color: "#1DE9B6",},},emphasis: {textStyle: {color: "rgb(183,185,14)",},},},// 图层zoom: 1.1,map: "china",itemStyle: {normal: {// 背景色backgroundColor: "rgb(147,235,248)",// 边框borderWidth: 1,// 区域颜色areaColor: {type: "radial",x: 0.5,y: 0.5,// 文档r: 0.8,colorStops: [{ offset: 0, color: "rgb(34,54,150)" },{ offset: 1, color: "rgb(89,128,142)" },],// 全局生效globalCoord: true,},},// 高亮效果emphasis: {areaColor: "rgb(46,229,206)",borderWidth: 0.1,},},},// 2. 配置散点图的各项参数{// 散点图（气泡图）type: "effectScatter",// 使用地理坐标系coordinateSystem: "geo",// 配置何时显示特效(绘制完成后显示特效)showEffectOn: "render",// 标记的大小(默认为10)symbolSize: 10,// 图层zlevel: 1,// 数据data: points,// 涟漪特效相关配置rippleEffect: {// 动画周期period: 5,// 缩放比例scale: 4,// 波纹的绘制brushType: "fill",},},// 3. 配置线性图的各项参数{// 线性图type: "lines",// 图层zlevel: 2,// 线特效的配置effect: {// 是否显示特效show: true,// 特效动画的时间period: 4,// 显示方式symbol: "arrow",// 特效的大小symbolSize: 7,// 拖尾的效果，取值范围 0-1，值越大效果越明显trailLength: 0.6,},lineStyle: {normal: {color: "#1DE986",width: 1,opacity: 0.4,curveness: 0.7,},},data: linesData,},],});},},
};
</script><style lang="scss" scoped>
.map-view {width: 100%;height: 100%;#main {width: 100%;height: 650px;}
}
</style>

三、Bread 面包屑

<template><div class="bread"><el-card><!-- Breadcrumb 面包屑 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item><!-- $route.matched：获取当前页面的路由信息 --><el-breadcrumb-itemv-for="(item, index) in $route.matched":key="index"><router-link :to="{ path: item.redirect }" class="redirects">{{ item.name }}</router-link></el-breadcrumb-item></el-breadcrumb></el-card></div>
</template><script>
export default {};
</script><style lang="scss" scoped>
.bread {.redirects {font-weight: 400;}
}
</style>

四、Footer

<template><div><el-card> Frontend 2022 Csaey </el-card></div>
</template><script>
export default {};
</script><style></style>

五 、分页器： Pageing

<!-- 这里整个组件是，组件化封装，面试的时候不要忘了-->
<!-- html，css，js 都用上是组件化封装，大部分都是内部，小部分外部 -->
<template><div class="workMent"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="page":page-sizes="[10, 20, 50, 100]":page-size="size"layout="total, sizes, prev, pager, next, jumper":total="total":url="url"></el-pagination></div>
</template><script>
// 引入模块化封装
import { getTableData } from "@/utils/table";
export default {// 接收父组件传递过来的值props: {url: String,total: Number,},data() {return {// 当前页数page: 1,// 每页显示多少条size: 10,};},// 课堂任务：getTableData() 调用了三次，能不能封装起来（已完成）mounted() {// 通过接口请求数据(封装后的接口)this.getTableData();},methods: {// 每页的条数改变时触发handleSizeChange(val) {// 每页显示多少条this.size = val;// 当前页数回到第一页this.page = 1;// 通过接口请求数据(封装后的接口)this.getTableData();},// 当前页数改变时触发handleCurrentChange(val) {// 当前页数this.page = val;// 通过接口请求数据(封装后的接口)this.getTableData();},// 通过接口请求数据(封装后的接口)getTableData() {// 模块化封装getTableData(// 传递的值this.$parent,this.url,{ page: this.page, size: this.size },["userId", "completed"],// 课堂练习：120分// { userId: ["实训", "小实训", "就业"], completed: ["已完成", "未完成"] }// 课堂练习：150分["实训", "小实训", "就业", "已完成", "未完成"]);},},
};
</script><style lang="scss">
.workMent {.el-pagination {text-align: left;margin-top: 20px;}
}
</style>

六、权限管理

user

<template><div class="user"><el-tree :data="menus" show-checkbox :props="props" ref="tree"> </el-tree><el-button @click="getCheckenNode">通过node获取</el-button></div>
</template><script>
export default {data() {return {menus: [],props: {label: "name",children: "children",},};},mounted() {// 获取路由的值，渲染标签// 权限管理和动态路由的思路// 根据不同的用户登录上来，返回对应的路由权限菜单// 一般情况下可以通过树形控件达成权限的精准控制，根据不同的菜单权限// 前端将收集到的菜单数据，发送给后端，后端保存后// 用户在进行登录时，就会查询到该用户所拥有的菜单数据，返回前端，在显示对应的数据// 动态添加路由使用 router.addRoutes(vue-router3.x版本方法，已废弃)// 后续使用：router.addRoute(进行动态路由添加)this.menus = [...this.$router.options.routes];},methods: {getCheckenNode() {console.log(this.$refs.tree.getCheckedNodes());},},
};
</script><style lang="scss" scoped></style>

users

<template><div class="box"><el-input v-model="input" placeholder="请输入内容"></el-input><div class="top" ref="top"><divclass="boxlist"v-for="(item, index) in lists":key="index"v-bind:style="{backgroundColor: item,}"@click="addcolor(item)"><p>{{ item }}</p></div></div><el-button type="primary" @click="add">刷新</el-button></div>
</template><script>
export default {data() {return {Number: "",lists: [],input: "",};},mounted() {// 进入时调用this.randoms();},methods: {randoms() {// 循环for (var i = 0; i < 24; i++) {// 把获取到的值赋值给 Numberthis.Number ="#" +// 下舍入（0-1随机数 乘以 255）转换为16进制Math.floor(Math.random() * 255).toString(16) +Math.floor(Math.random() * 255).toString(16) +Math.floor(Math.random() * 255).toString(16);// 追加到 lists 中this.lists.push(this.Number);}},add() {// 点击清空 liststhis.lists = [];// 调用封装函数this.randoms();},addcolor(item) {// 颜色在 input 框中显示this.input = item;// 背景色改变this.$refs.top.style.backgroundColor = item;},},
};
</script><style lang="scss" scoped>
.box {background-color: rgb(196, 191, 191);.top {display: flex;flex-wrap: wrap;.boxlist {width: 150px;height: 150px;margin: 25px;p {width: 100%;height: 30px;background-color: #fff;line-height: 30px;}}}
}
</style>

---

总结

上章链接：《后台管理（上）》点击跳转
整个项目分为3篇文章 ，希望对大家写有帮助