在之前Element组件搭建的基础上添加抽屉组件添加用户
App.vue部分：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
import createRoute from '@/minixs/createRoute.js'
export default {
mixins:[createRoute],
created() {
console.log('app init')
/* 写下面代码的目的就是为了刷新页面的时候再次添加路由信息 */
/* 保证在已经把路由菜单存起来的情况下，再动态添加路由 */
if (localStorage.arrRoute) {
console.log('arrRoute')
/* 使用minixs中的添加动态路由的公共方法 */
this.createRouteFn();
}
},
};
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
</style>
public下创建minixs文件创建createRoute.js:
export default {
methods: {
createRouteFn: function () {
let arrRoute = JSON.parse(localStorage.arrRoute);
/* 循环路由数组 动态添加路由 */
arrRoute.forEach((v) => {
/* 我们尽量使用v.children[0].path 原因是我们的路径名用的是子路由的 */
/* 如果我们直接写死v.children[0].path 会导致只有一个子路由路径被动态添加了
如果有多个，就无法生效了，所以我们要二次循环v.children,从而实现多个二级子路由
能够被动态的添加 */
v.children.forEach((r) => {
this.$router.addRoute("index", {
path: r.path,
name: r.path,
meta: {
title: v.authName,
subTitle: r.authName,
},
/* 把名字改成我们页面的名称 例如CategoriesView.vue */
component: () =>
import(
`@/views/${r.path.substring(0, 1).toUpperCase() + r.path.substring(1)
}View.vue`
),
});
});
});
}
},
}
路由router下index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
/* 点击相同的路由出现报错，使用下面的代码抛出异常 */
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'login',
component: () => import('../views/LoginView.vue')
},
{
path: '/index',
name: 'index',
/* 一进入index页面就默认进入二级路由users页面 */
redirect: '/index/users',
component: () => import('../views/IndexView.vue'),
children: [{
path: "users",
name: "users",
component: () => import("@/views/UsersView.vue"),
meta:{
title:"用户管理",
subTitle:"用户列表"
},
}]
},
]
const router = new VueRouter({
routes
})
export default router
LoginView.vue登录页：
<template>
<!-- el-form 组件
:model="ruleForm" ruleForm是data中定义的存储的是用户名和密码值的对象 通过model传给el-form组件 -->
<!-- :rules="rules" rules是data中定义的对象目的是校验用户名和密码的规则 -->
<!-- ref="ruleForm" 咱们可以通过ref来获取el-form组件内部的方法 比如：validate校验方法 resetFields重置方法 -->
<!-- status-icon 是在表单校验错误的时候 输入框中出现的提示小图标-->
<!-- label-width="200px" 是用来控制用户名和密码文本的宽度 -->
<div class="myform">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
<!-- label 控制输入框的文本 prop="username" 是对应表单域model中的username字段
规则的名字需要和表单域model中的字段一模一样 -->
<el-form-item label="用户名" prop="username">
<!-- v-model 里面对应的是data中的数据 -->
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<!-- autocomplete="off" 作用是把输入框的自动提示功能关闭 -->
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<!-- 提交的时候把ref里面的名字传过去，目的是为了使用refs方法来调用el-form里面的validate校验方法 -->
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<!-- 重置的时候把ref里面的名字传过去，目的是为了使用refs方法来调用el-form里面的resetFields重置方法 -->
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:"LoginView",
data() {
var checkUser = (rule, value, callback) => {
console.log('用户名:',value)
if(value.trim()==''){
callback(new Error('请输入用户名'));
}
else if(!/^[0-9a-zA-Z_\u4e00-\u9fa5]{5,10}$/.test(value)){
callback(new Error('用户名为5-10位中英文数字或者下划线'));
}
else{
callback();
}
};
var validatePass = (rule, value, callback) => {
console.log('密码：',value)
if (value.trim()=='') {
callback(new Error('请输入密码'));
}else{
callback();
}
};
return {
ruleForm: {
password: '',
username: ''
},
rules: {
password: [
{ validator: validatePass, trigger: 'blur' }
],
username: [
{ validator: checkUser, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
/* el-form组件的validate方法 在回调函数中
如果valid为true 则表示表单校验通过
为false则表示不通过 */
if (valid) {
axios.post('https://lia**********',{
username:this.ruleForm.username,
password:this.ruleForm.password
})
.then(res=>{
let {data,meta} = res.data;
if(meta.status==200){
this.$message.success(meta.msg);
/* 当登录成功 把用户名和token存入本地缓存中方便后续使用 */
localStorage.username = data.username;
localStorage.token = data.token;
/* 登录成功后，过一秒跳转首页 */
setTimeout(()=>{
this.$router.push({name:'index'})
},1000)
}else{
/* 用户名密码不正确的时候出现警告 */
this.$message.warning(meta.msg);
}
})
.catch(err=>{
console.log(err)
})
} else {
this.$message.error('您输入的有误');
}
});
},
resetForm(formName) {
/* 通过vue中的$refs方法来调用组件el-form中的resetFields方法 实现重置 */
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="scss">
.myform{
width:600px;
margin:50px auto;
}
</style>
用户UsersView.vue：
<template>
<div class="users">
<el-row>
<el-button type="primary" round @click="drawer = true"
>添加用户</el-button
>
</el-row>
<!-- :wrapperClosable="false" 表示点击遮罩区域不关闭抽屉 true则可以 -->
<el-drawer
title="添加用户"
:visible.sync="drawer"
:direction="direction"
:wrapperClosable="false"
>
<add-users @addok="addok"/>
</el-drawer>
<!-- el-table组件 需要给data属性动态传递一个数组对象tableData -->
<el-table :data="tableData">
<!-- el-table-column组件 表格中的数据 是数组对象tableData中的属性date所对应的值
比如 date属性的值对应的2016-05-02 -->
<!-- 表头标题 是由label属性来传递的 width属性是表示表头字段的宽度 不给宽度就自适应表格 -->
<el-table-column label="创建日期">
<template slot-scope="scope">
<div>{{ scope.row.create_time | getDate }}</div>
</template>
</el-table-column>
<el-table-column prop="email" label="电子邮箱"></el-table-column>
<el-table-column prop="mobile" label="手机号"></el-table-column>
<el-table-column prop="role_name" label="角色名称"></el-table-column>
<el-table-column prop="username" label="用户名"></el-table-column>
</el-table>
</div>
</template>
<script>
import AddUsers from '@/components/AddUsers.vue'
import axios from "axios";
export default {
name:"UsersView",
components:{
AddUsers
},
data() {
return {
/* 表格数据 */
tableData: [],
/* 抽屉打开方向从右到左 */
direction: "rtl",
/* 默认抽屉是关闭的 */
drawer: false,
};
},
/* 局部的过滤器 */
// filters:{
// getDate(v){
// /* 生成当前时间戳的日期对象 */
// let oDate = new Date(v);
// return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate();
// }
// },
created() {
/* 一进入页面调用获取用户数据接口 */
this.getTableDate();
},
methods: {
/* 当子组件添加数据成功的时候触发的方法 */
addok(){
/* 重新获取用户数据 */
this.getTableDate();
/* 关闭抽屉 */
setTimeout(()=>{
this.drawer = false;
},600)
},
getTableDate() {
axios
.get("https://lia*******************", {
/* 请求头 */
headers: {
Authorization: localStorage.token,
},
/* 必传的请求参数 */
params: {
pagenum: 1,
pagesize: 20,
},
})
.then((res) => {
let { data, meta } = res.data;
/* 当状态为200表示数据获取成功 */
if (meta.status == 200) {
/* 把数据给到tableData数组中 */
this.tableData = data.users;
} else {
/* 如果获取数据有误，给出相应提示 */
this.$message.error(meta.msg);
}
})
.catch((err) => {
this.$message.error(err);
});
},
},
};
</script>
components创建AddUsers.vue:
<template>
<div class="add-users">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-form-item label="用户名称" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="用户密码" prop="password">
<el-input v-model="ruleForm.password" type="password"></el-input>
</el-form-item>
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="ruleForm.mobile"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>立即添加</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
ruleForm: {
username: "",
password: "",
email:"",
mobile:""
},
rules: {
username: [
{ required: true, message: "请输入用户名称", trigger: "blur" },
{ min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" },
],
password: [
{ required: true, message: "请输入用户密码", trigger: "blur" },
{ min: 3, max: 12, message: "长度在 3 到 12 个字符", trigger: "blur" },
],
},
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
axios({
method:'post',
url: ' https://lia********************** ',
data:{
username:this.ruleForm.username,
password:this.ruleForm.password,
email:this.ruleForm.email,
mobile:this.ruleForm.mobile,
},
headers: {
Authorization: localStorage.token,
},
})
.then(res=>{
let {meta} = res.data;
if(meta.status==201){
this.$message.success(meta.msg);
this.$emit('addok')
}else{
this.$message.error(meta.msg);
}
})
} else {
this.$message.error("校验失败，请重试");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},
};
</script>
<style lang="scss" scoped>
.add-users {
padding: 20px;
}
</style>
main.js部分：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
/* 全局的日期过滤器 */
function bu(v) {
return v < 10 ? '0' + v : v
}
Vue.filter('getDate',(v)=>{
/* 生成当前时间戳的日期对象 */
let oDate = new Date(v);
return bu(oDate.getFullYear())+'-'+bu(oDate.getMonth()+1)+'-'+bu(oDate.getDate());
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
效果图：
