目錄結(jié)構(gòu)

router.js

import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' import Welcome from './components/Welcome.vue' Vue.use(Router)const router = new Router({routes: [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect:'/welcome',children: [{path: '/welcome',component: Welcome}]}] }); //掛載路由導(dǎo)航守衛(wèi) router.beforeEach((to, from, next) => {if (to.path === '/login') return next();//獲取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next(); })export default router

login.vue

<template><div class="login_container"><div class="login_box"><div class="avatar_box"><img src="../assets/logo.png"></div><!-- 表單區(qū)域--><el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"><!-- 登錄區(qū)域--><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input></el-form-item><el-form-item class="btns"><el-button type="primary" @click="login">登錄</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div> </div></template><script> export default{data(){return{//這是登錄表單的數(shù)據(jù)loginForm:{username:'geyao',password:'12345678'},// 表單驗(yàn)證loginFormRules: {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 2, max: 10, message: '長度在 2 到 10 個字符', trigger: 'blur' }],password: [{ required: true, message: '請輸入用戶密碼', trigger: 'blur' },{ min: 6, max: 18, message: '長度在 6 到 18 個字符', trigger: 'blur' }]}}},methods:{resetLoginForm(){// console.log(this)this.$refs.loginFormRef.resetFields();},login(){this.$refs.loginFormRef.validate(async valid =>{if(!valid) return;const {data:res}=await this.$http.post('login',this.loginForm);if(res.meta.status!==200) return this.$message.error('登錄失敗');this.$message.success('登錄成功');// 1、將登陸成功之后的token, 保存到客戶端的sessionStorage中; // 1.1 項(xiàng)目中出現(xiàn)了登錄之外的其他API接口，必須在登陸之后才能訪問// 1.2 token 只應(yīng)在當(dāng)前網(wǎng)站打開期間生效，所以將token保存在window.sessionStorage.setItem('token', res.data.token)// 2、通過編程式導(dǎo)航跳轉(zhuǎn)到后臺主頁, 路由地址為：/homethis.$router.push('/home')});}} } </script><style lang="less" scoped> .login_container {background-color: #2b4b6b;height: 100%; } .login_box {width: 450px;height: 360px;background-color: #fff;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);background-color: #fff; }.avatar_box {width: 130px;height: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;box-shadow: 0 0 10px #ddd;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}.login_form {position: absolute;bottom: 60px;width: 100%;padding: 0 20px;box-sizing: border-box; }.btns {display: flex;justify-content: center; } </style>

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' import './plugins/element.js' //導(dǎo)入字體圖標(biāo) import './assets/fonts/iconfont.css' Vue.config.productionTip = false //導(dǎo)入全局樣式 import './assets/css/global.css'import axios from 'axios' Vue.prototype.$http=axios axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/" // 請求在到達(dá)服務(wù)器之前，先會調(diào)用use中的這個回調(diào)函數(shù)來添加請求頭信息 axios.interceptors.request.use(config => {// console.log(config)// 為請求頭對象，添加token驗(yàn)證的Authorization字段config.headers.Authorization = window.sessionStorage.getItem('token')// 在最后必須 return configreturn config }) Vue.config.productionTip=false; new Vue({router,render: h => h(App) }).$mount('#app')

global.css

/* 全局樣式 */ html, body, #app {height: 100%;margin: 0;padding: 0;}.el-breadcrumb {margin-bottom: 15px;font-size: 12px; }.el-card {box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important; }.el-table {margin-top: 15px;font-size: 12px; }.el-pagination {margin-top: 15px; }

element.js

import Vue from 'vue'//彈框提示 import {Message,Button,Form,FormItem,Input,Container,Header,Aside,Main,Menu,Submenu,MenuItemGroup,MenuItem,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip,Pagination } from 'element-ui' Vue.use(Button) Vue.use(Form) Vue.use(FormItem) Vue.use(Input) Vue.use(Container) Vue.use(Header) Vue.use(Aside) Vue.use(Main) Vue.use(Menu) Vue.use(Submenu) Vue.use(MenuItemGroup) Vue.use(MenuItem) Vue.use(Breadcrumb) Vue.use(BreadcrumbItem) Vue.use(Card) Vue.use(Row) Vue.use(Col) Vue.use(Table) Vue.use(TableColumn) Vue.use(Switch) Vue.use(Tooltip) Vue.use(Pagination) Vue.prototype.$message = Message

Home.vue

import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' import Welcome from './components/Welcome.vue' import Users from './components/user/Users.vue' Vue.use(Router)const router = new Router({routes: [{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',component: Home,redirect: '/welcome',children: [{path: '/welcome',component: Welcome}, {path: '/users',component: Users}]}] }); //掛載路由導(dǎo)航守衛(wèi) router.beforeEach((to, from, next) => {if (to.path === '/login') return next();//獲取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login')next(); })export default router

.prettierrc

{"semi":false,"singleQuote":true }

eslintrc.js

module.exports = {root: true,env: {node: true},extends: ['plugin:vue/essential','@vue/standard'],parserOptions: {parser: 'babel-eslint'},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren':0} }

welcome.vue

<template><div><h3>歡迎</h3></div> </template>

Users.vue

<template><div><!-- 面包屑導(dǎo)航區(qū) --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item><el-breadcrumb-item>用戶管理</el-breadcrumb-item><el-breadcrumb-item>用戶列表</el-breadcrumb-item></el-breadcrumb><el-card><el-row :gutter="20"><el-col :span="7"><el-input placeholder="請輸入內(nèi)容" v-model="queryInfo.query" clearable @clear="getUserList"><el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button></el-input></el-col><el-col :span="4"><el-button type="primary" @click="addDialogVisible=true">添加用戶</el-button></el-col></el-row><el-table border stripe :data="userlist"><el-table-column type="index" label="#"></el-table-column><el-table-column prop="username" label="姓名"></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 label="狀態(tài)"><template slot-scope="scope"><el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch></template></el-table-column><el-table-column label="操作" width="180px"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"size="mini"circle@click="showEditDialog(scope.row.id)"></el-button><el-button type="danger" icon="el-icon-delete" size="mini" circle></el-button><el-tooltipclass="item"effect="dark"content="角色分配":enterable="false"placement="top"><el-button type="warning" icon="el-icon-setting" size="mini" circle></el-button></el-tooltip></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pagenum":page-sizes="[2, 5, 10, 15]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-card><!-- 添加用戶的對話框 --><el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed"><!-- 內(nèi)容主體 --><el-form :model="addForm" ref="addFormRef" :rules="addFormRules" label-width="70px"><el-form-item label="用戶名" prop="username"><el-input v-model="addForm.username"></el-input></el-form-item><el-form-item label="密碼" prop="password"><el-input v-model="addForm.password"></el-input></el-form-item><el-form-item label="郵箱" prop="email"><el-input v-model="addForm.email"></el-input></el-form-item><el-form-item label="手機(jī)" prop="mobile"><el-input v-model="addForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="addUser">確 定</el-button></span></el-dialog><!-- 修改用戶的對話框 --><el-dialog title="修改用戶信息" :visible.sync="editDialogVisible" width="50%"@close="editDialogClosed"><el-form:model="editForm"ref="editUserFormRef":rules="editFormRules"label-width="70px"><el-form-item label="用戶名"><el-input v-model="editForm.username" disabled></el-input></el-form-item><el-form-item label="郵箱" prop="email"><el-input v-model="editForm.email"></el-input></el-form-item><el-form-item label="手機(jī)" prop="mobile"><el-input v-model="editForm.mobile"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="editDialogVisible=false">確 定</el-button></span></el-dialog></div> </template><style scoped="less" scoped> </style><script> export default {data() {// 自定義郵箱規(guī)則var checkEmail = (rule, value, callback) => {const regEmail = /^\w+@\w+(\.\w+)+$/if (regEmail.test(value)) {// 合法郵箱return callback()}callback(new Error('請輸入合法郵箱'))}// 自定義手機(jī)號規(guī)則var checkMobile = (rule, value, callback) => {const regMobile = /^1[34578]\d{9}$/if (regMobile.test(value)) {return callback()}// 返回一個錯誤提示callback(new Error('請輸入合法的手機(jī)號碼'))}return {queryInfo: {query: '',pagenum: 1,pagesize: 2,},userlist: [],total: 0,addDialogVisible: false,addForm: {username: '',password: '',email: '',mobile: '',},addFormRules: {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{min: 2,max: 10,message: '用戶名的長度在2～10個字',trigger: 'blur',},],password: [{ required: true, message: '請輸入用戶密碼', trigger: 'blur' },{min: 6,max: 18,message: '用戶密碼的長度在6～18個字',trigger: 'blur',},],email: [{ required: true, message: '請輸入郵箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' },],mobile: [{ required: true, message: '請輸入手機(jī)號碼', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' },],},editFormRules: {email: [{ required: true, message: '請輸入郵箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' }],mobile: [{ required: true, message: '請輸入手機(jī)號碼', trigger: 'blur' },{ validator: checkMobile, trigger: 'blur' }]},editDialogVisible: false,editForm: {},}},created() {this.getUserList()},methods: {async getUserList() {const { data: res } = await this.$http.get('users', {params: this.queryInfo,})if (res.meta.status !== 200) {return this.$message.error('獲取用戶列表失敗！')}this.userlist = res.data.usersthis.total = res.data.totalconsole.log(res)},// 監(jiān)聽修改用戶對話框的關(guān)閉事件editDialogClosed () {this.$refs.editUserFormRef.resetFields()},// 監(jiān)聽 pagesize改變的事件handleSizeChange(newSize) {// console.log(newSize)this.queryInfo.pagesize = newSizethis.getUserList()},// 監(jiān)聽 頁碼值 改變事件handleCurrentChange(newSize) {// console.log(newSize)this.queryInfo.pagenum = newSizethis.getUserList()},async userStateChanged(userInfo) {// console.log(userInfo)const { data: res } = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)if (res.meta.status !== 200) {userInfo.mg_state = !userInfo.mg_statereturn this.$message.error('更新用戶狀態(tài)失敗')}this.$message.success('更新用戶狀態(tài)成功！')},// 監(jiān)聽 添加用戶對話框的關(guān)閉事件addDialogClosed() {this.$refs.addFormRef.resetFields()},// 編輯用戶信息async showEditDialog (id) {const { data: res } = await this.$http.get('users/' + id)if (res.meta.status !== 200) {return this.$message.error('查詢用戶信息失敗！')}this.editForm = res.datathis.editDialogVisible = true},// 添加用戶addUser() {// 提交請求前，表單預(yù)驗(yàn)證this.$refs.addFormRef.validate(async (valid) => {// console.log(valid)// 表單預(yù)校驗(yàn)失敗if (!valid) returnconst { data: res } = await this.$http.post('users', this.addForm)if (res.meta.status !== 201) {this.$message.error('添加用戶失敗！')}this.$message.success('添加用戶成功！')// 隱藏添加用戶對話框this.addDialogVisible = falsethis.getUserList()})},}, } </script>

?

運(yùn)行結(jié)果

?

總結(jié)

以上是生活随笔為你收集整理的前端学习（1907）vue之电商管理系统电商系统之渲染修改用户的表单的重置操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。