在之前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')
效果圖：
