前言:在经过了第8天的element基础学习,今天通过一个具体的实例去展示一下怎么用element快速的去开发一个系统。今天只做前端的学习,后端改天再聊。
一.项目展示
按照element的框架部分进行开发避免了css过多的繁琐,如有忘记看第八天的ps导航菜单详解部分
因为el-aside和el-haeder部分比较简单就不做详细的介绍,重点讲解四.el-main部分!!!
二.el-aside和el-haeder部分html部分编写
<template> //模板语法
<el-container style="height: 100%" class="manage"> //大盒子
<el-aside width="180"> //左边横栏盒子
<!-- 部门效果嵌套 -->
<el-menu
background-color="rgb(0,21,41)"
text-color="#fff"
active-text-color="#ffd04b"
style="height: 100%"
default-active="1_1"
default-openeds="['1_1','1_2','2_1','2_2']"
:router="true"
@select="handleSelect"
>
<div class="user_box">
<div class="username">社区管理后台</div>
</div>
<el-submenu :index="item.id" v-for="item in menuList" :key="item.index">
<template slot="title">
<i :class="item.icon"></i>{{ item.title }}</template>
<el-menu-item
:index="ele.index"
v-for="ele in item.childrenlist"
:key="ele.index"
:route="ele.route"
>
<i :class="ele.inner_icon"></i>{{ ele.text }}
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>{{ manage_name }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ list_name }}</el-breadcrumb-item>
</el-breadcrumb>
<i
class="el-icon-setting"
style="font-size: 17px; position: absolute; right: 74px; top: 22px"
></i>
<span
style="font-size: 17px"
class="usertext"
@click="$router.push('/apartmentArea')"
>{{ username }}</span
>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
三.el-aside和el-haeder部分js部分代码
<script>
export default {
data() {
return { //闭包(方式其他页面出现下面相同的定义赋值会冲突)
username: localStorage.getItem("username"),
manage_name: "用户管理",
list_name: "用户列表",
menuList: [
{
id: "1",
title: "用户管理",
icon: "el-icon-s-custom",
childrenlist: [
{
index: "1_1",
route: "/backstageManage/Userlist",
text: "用户列表",
inner_icon: "el-icon-menu",
},
{
index: "1_2",
route: "/backstageManage/usercar",
text: "用户车辆",
inner_icon: "el-icon-menu",
},
],
},
{
id: "2",
title: "用户数据",
icon: "el-icon-s-custom",
childrenlist: [
{
index: "2_1",
route: "/backstageManage/Userlist",
text: "用户账号",
inner_icon: "el-icon-menu",
},
{
index: "2_2",
route: "/backstageManage/usercar",
text: "用户密码",
inner_icon: "el-icon-menu",
},
],
},
],
};
},
mounted() {},
methods: {
handleSelect(index) {
this.menu_idx = index.substring(0, 1);
this.menuList.forEach((res) => {
if (res.id == this.menu_idx) {
this.manage_name = res.title;
res.childrenlist.forEach((ele) => {
if (index == ele.index) {
this.list_name = ele.text;
}
});
}
});
},
},
};
</script>
四.el-main的编写
相信大家由二部分可以看得出来,el-main是为了给子路由部分占坑,当我们点击用户的列表时,我们就会看见我们跳转到了一个子路由,而el-main部分也相应的改变了。现在我们来看看el-main部分是怎么编写的。
4.1el-main部分用户信息展示页面html部分(含解析)
<template>
<div class="Userlist">
<el-input
placeholder="请输入内容" //输入框默认内容
v-model="input2" //数据双向绑定
style="width: 350px" //内嵌式css
@change="searchUserInfoMed" //v-on元素绑定事件
>
<template slot="append">
<el-button slot="append" icon="el-icon-search"></el-button> //slot为插槽运用子组件可以换取父组件定义的数据,但el-button的slot="append" 为按钮组件紧贴在依赖组件,如紧贴在输入框的后面(prepend)为紧贴在前面。
</template>
</el-input>
<el-button type="text" @click="dialogVisible = true" class="dialog_btn"
>添加用户</el-button> //元素事件绑定外置写法,当点击时dislogvisible的值变为ture
<el-dialog //新增和编辑操作想要以弹框的方式显示,title为标题设置
title="新增用户"
:visible.sync="dialogVisible"
width="50%"
:show-close="false"
:close-on-click-modal="false" //点击el-dialog外不会让el-dialog关闭(网上还有很多属性可以去了解)
@close="closeDialog" //当关闭el-dialog时触发closedialog方法
>
<el-input v-model="iptUsername" placeholder="请输入用户名"></el-input>
<el-input
v-model="password"
placeholder="请输入密码"
type="password"
style="margin: 20px 0 20px 0"
></el-input>
<el-input
v-model="again_password"
placeholder="请确认密码"
type="password"
></el-input>
<span slot="footer" class="dialog-footer"> //意思为按键跟在输入框底部,是element自定义的布局
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="registerUserMed">确 定</el-button> //type为定义按钮的样式在element中有很多不同的按钮样式可以直接使用很方便
</span>
</el-dialog>
<el-table :data="tableData" style="padding-top: 30px" v-show="!notFound">
//:date为绑定数据源
<el-table-column prop="id" label="Id"> </el-table-column> //设置表格中的一列,label指定该列对应的数据,prop指定该列对应的数据
<el-table-column prop="username" label="姓名"> </el-table-column>
<el-table-column prop="password" label="密码"> </el-table-column>
<el-table-column prop="type" label="角色"></el-table-column>
<el-table-column align="left" prop="operate" label="操作">
<template slot-scope="scope"> //简单来说就是在el-table中先占个位置
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)" //传递实参用scope.$index获取当前行的数据在数组中的索引,用scope.row获取当前行的数据
>Delete</el-button
>
</template>
</el-table-column>
</el-table>
<el-table :data="[]" style="padding-top: 30px" v-show="notFound">
<el-table-column prop="id" label="Id"> </el-table-column>
<el-table-column prop="username" label="姓名"> </el-table-column>
<el-table-column prop="password" label="密码"> </el-table-column>
<el-table-column prop="type" label="角色"></el-table-column>
<el-table-column align="left" prop="operate" label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
4.2el-main部分用户信息展示页面js部分(含解析)
<script>
import {
getUserInfo,
registerUser,
deleteUser,
searchUserInfo,
} from "@/requestApi/mainPage";
export default {
data() {
return { //return为闭包,为了避免在其他页面对一下的值进行定义会影响到以下的值
input2: "",
iptUsername: "",
password: "",
again_password: "",
dialogVisible: false,
tableData: [],
notFound: false,
};
},
mounted() {
this.getUserInfoMed();
},
methods: {
closeDialog() {
this.iptUsername = "";
this.password = "";
this.again_password = "";
},
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row); //这里的传参完全就是users表里面的数据
this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteUser(row.id).then((res) => {
// console.log(res); //每个局部里面的res都不是一个res这个res里面包含着data(errorno)
if (res.data.errorno == 0) {
this.$message("删除成功");
this.getUserInfoMed();
}
});
})
.catch(() => {});
},
getUserInfoMed() {
getUserInfo().then((res) => {
console.log(res); //打印出来发现res里面有数据库的所有数据
let option = [];
option = res.data.userinfo;
option.forEach((res) => {
if (res.type == 1) {
res.type = "超级管理员";
} else {
res.type = "普通用户";
}
res.password = res.password.substring(0, 1) + "********"; //substring(0,1)0表示从字符串第一个字符开始,1为获取1个字符
});
this.tableData = option;
});
},
registerUserMed() {
if (
this.iptUsername &&
this.password === this.again_password &&
this.password &&
this.again_password
) {
let options = {
username: this.iptUsername,
password: this.again_password,
};
registerUser(options).then((res) => {
// console.log(res);
if (res.data.errorno === 0) {
this.$message("添加用户成功");
this.dialogVisible = false;
this.getUserInfoMed();
}
});
} else {
this.$message({
message: "输入用户名密码不能为空且确保两次输入的密码一致",
type: "warning",
});
}
},
deleteUserMed() {},
searchUserInfoMed() {
let option = {
username: this.input2,
};
searchUserInfo(option).then((res) => {
if (res.data.userinfo.length > 0) {
let option = [];
option = res.data.userinfo;
option.forEach((res) => {
if (res.type == 1) {
res.type = "超级管理员";
} else {
res.type = "普通用户";
}
res.password = res.password.substring(0, 1) + "********";
});
this.tableData = option;
this.notFound = false;
} else {
this.notFound = true;
}
});
},
},
};
</script>