在上一章的request.js的里面添加更新用戶信息：
import {httpServe} from '@/http/index.js'
/* 登錄 */
export const loginPost = (path="",data={})=> httpServe({path:path,method:'post',data:data});
/* 必須以對象方式傳遞 */
/* 左側菜單列表 */
export const menusGet = (path="",params={})=> httpServe({path,params});
/* 用戶列表 */
export const usersGet = (path="",params={})=> httpServe({path,params});
/* 添加用戶 */
export const addusersPost = (path="",data={})=> httpServe({path,method:'post',data});
/* 刪除用戶 */
export const usersDelete = (path="")=> httpServe({path,method:'delete'});
/* 更新用戶信息 */
export const usersPut = (path="",data={})=> httpServe({path,method:'put',data});
在上一章UsersView.vue里添加修改刪除功能：
<template>
? <div class="users">
? ? <el-row>
? ? ? <el-input
? ? ? ? v-model="queryName"
? ? ? ? placeholder="搜索用戶名"
? ? ? ? @keyup.native.enter="search"
? ? ? ? style="width: 200px"
? ? ? ></el-input>
? ? ? <el-button
? ? ? ? icon="el-icon-search"
? ? ? ? circle
? ? ? ? @click="search"
? ? ? ? style="margin-left: 15px"
? ? ? ></el-button>
? ? ? <el-button type="primary" round @click="drawer = true"
? ? ? ? >添加用戶</el-button
? ? ? >
? ? </el-row>
? ? <!-- :wrapperClosable="false" 表示點擊遮罩區(qū)域不關閉抽屜 true則可以 -->
? ? <el-drawer
? ? ? title="添加用戶"
? ? ? :visible.sync="drawer"
? ? ? :direction="direction"
? ? ? :wrapperClosable="false"
? ? >
? ? ? <add-users @addok="addok" />
? ? </el-drawer>
? ? <!-- el-table組件 需要給data屬性動態(tài)傳遞一個數(shù)組對象tableData -->
? ? <el-table :data="tableData">
? ? ? <!-- el-table-column組件 表格中的數(shù)據(jù) 是數(shù)組對象tableData中的屬性date所對應的值
? ? ? 比如 date屬性的值對應的2016-05-02 -->
? ? ? <!-- 表頭標題 是由label屬性來傳遞的 width屬性是表示表頭字段的寬度 不給寬度就自適應表格 -->
? ? ? <el-table-column label="創(chuàng)建日期">
? ? ? ? <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>
? ? ? <!-- fixed="right" 固定操作在右側 -->
? ? ? <el-table-column fixed="right" label="操作" width="200">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <el-button type="text" size="small" @click="update(scope.row)"
? ? ? ? ? ? >修改</el-button
? ? ? ? ? >
? ? ? ? ? <!-- 氣泡確認框 -->
? ? ? ? ? <el-popconfirm
? ? ? ? ? ? confirm-button-text='好的'
? ? ? ? ? ? ?cancel-button-text='不用了'
? ? ? ? ? ? ? icon="el-icon-info"
? ? ? ? ? ? ? icon-color="red"
? ? ? ? ? ? ? title="確定刪除用戶嗎芬位？"
? ? ? ? ? ? ? @confirm="del(scope.row)"
? ? ? ? ? ? ? @cancel="popCancel"
>
? <el-button type="text" size="small" slot="reference"
? ? ? ? ? ? > 刪除</el-button
? ? ? ? ? >
</el-popconfirm>
? ? ? ? </template>
? ? ? </el-table-column>
? ? </el-table>
? ? <!-- 分頁 -->
? ? <!-- :page-sizes="[5, 10, 15, 20] 這個是用來選擇分頁的條數(shù)的 -->
? ? <!-- :page-size="5" 默認一頁顯示5條數(shù)據(jù) -->
? ? <!-- :total="400" 總條數(shù) -->
? ? <!-- layout="total, sizes, prev, pager, next, jumper" 管理分頁展示的樣式內容 -->
? ? <el-pagination
? ? ? @size-change="handleSizeChange"
? ? ? @current-change="handleCurrentChange"
? ? ? :current-page="currentPage"
? ? ? :page-sizes="[5, 10, 15, 20]"
? ? ? :page-size="pagesize"
? ? ? layout="total, sizes, prev, pager, next, jumper"
? ? ? :total="total"
? ? >
? ? </el-pagination>
? ? <!-- 對話框表單 -->
? ? <!-- title是對話框的標題 -->
? ? <el-dialog title="修改用戶信息" :visible.sync="dialogFormVisible">
? ? ? <el-form :model="form">
? ? ? ? <el-form-item label="電子郵箱" label-width="120px">
? ? ? ? ? <!-- autocomplete="off" 關閉自動提示之前輸入的內容 -->
? ? ? ? ? <el-input v-model="form.email" autocomplete="off"></el-input>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="手機號碼" label-width="120px">
? ? ? ? ? <el-input v-model="form.mobile" autocomplete="off"></el-input>
? ? ? ? </el-form-item>
? ? ? </el-form>
? ? ? <div slot="footer" class="dialog-footer">
? ? ? ? <el-button @click="dialogFormVisible = false">取 消</el-button>
? ? ? ? <el-button type="primary" @click="submit"
? ? ? ? ? >確 定</el-button
? ? ? ? >
? ? ? </div>
? ? </el-dialog>
? </div>
</template>
<script>
import { usersGet , usersDelete, usersPut } from "@/http/request.js";
import AddUsers from "@/components/AddUsers.vue";
export default {
? name: "UsersView",
? components: {
? ? AddUsers,
? },
? /* 當組件被激活的時候 , 可以為組件的菜單被點擊到的時候觸發(fā)*/
? activated:function(){
? console.log('我被點了');
? },
? /* 當離開組件的時候觸發(fā) */
? deactivated:function(){
? ?console.log('我離開了');
? },
? data() {
? ? return {
? ? ? /* 表格數(shù)據(jù) */
? ? ? tableData: [],
? ? ? /* 抽屜打開方向從右到左 */
? ? ? direction: "rtl",
? ? ? /* 默認抽屜是關閉的 */
? ? ? drawer: false,
? ? ? /* 默認打開的是第一頁的數(shù)據(jù) */
? ? ? currentPage: 1,
? ? ? /* 一頁默認展示5條 */
? ? ? pagesize: 5,
? ? ? /* 默認總條數(shù)是0 */
? ? ? total: 0,
? ? ? /* 搜索用戶名 */
? ? ? queryName:'',
? ? ? /* 判斷對話框是否打開 true 打開 false 關閉 */
? ? ? dialogFormVisible: false,
? ? ? /* 對話框表單中的內容 */
? ? ? form:{
? ? ? ? email:'',
? ? ? ? phone:''
? ? ? }
? ? };
? },
? /* 局部的過濾器 */
? // filters:{
? // ? getDate(v){
? // ? ? /* 生成當前時間戳的日期對象 */
? // ? ? let oDate = new Date(v);
? // ? ? return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate();
? // ? }
? // },
? created() {
? ? /* 一進入頁面調用獲取用戶數(shù)據(jù)接口 */
? ? this.getTableDate();
? ? console.log(this.$route.meta.keepAlive);
? },
? methods: {
? ? /* 氣泡彈出框點擊取消 */
? ? popCancel(){
? ? ? ?console.log('氣泡彈出框點擊取消');
? ? },
? ? /* 修改用戶信息 */
? ? update(row) {
? ? ? /* 把表格一行的內容給到form表單 */
? ? ? this.form = JSON.parse(JSON.stringify(row))/* 對象不能直接賦值需要深拷貝才能不互相影響 */
? ? ? console.log(this.row);
? ? ? /* 點擊打開對話框 */
? ? ? this.dialogFormVisible = true
? ? },
? ? /* 提交用戶信息 */
? ? async submit(){
? ? ? /* 防止請求失敗造成里面代碼錯誤所以使用 try catch 捕獲異常 */
? ? ? try{
? ? ? let res = await usersPut(`users/${this.form.id}`,{
? ? ? ?id:this.form.id,
? ? ? ?email:this.form.email,
? ? ? ?mobile:this.form.mobile
? ? ?})
? ? ?let {meta} = res.data;
? ? ?if(meta.status==200){
? ? ? ?this.$message.success(meta.msg);
? ? ? ?/* 修改信息成功后刷新表格數(shù)據(jù) */
? ? ? ?this.getTableDate()
? ? ? ?/* 修改成功關閉對話框 */
? ? ? ?this.dialogFormVisible = false
? ? ?}else{
? ? ? ?this.$message.error(meta.msg)
? ? ?}
? ? ? }catch(err){
? ? ? this.$message.error(err)
? ? ? }
? ? },
? ? /* 上面通過作用域插槽把點擊的一行的數(shù)據(jù)已經傳過來了 */
? ? async del(row){
? ? ? console.log(row.id);
? ? ? try{
? ? ? ? let {data:{meta:{msg,status}}} = ?await usersDelete('users/'+row.id)
? ? ? ? if(status==200){
? ? ? ? ? this.$message.success(msg)
? ? ? ? ? /* 刪除成功之后刷新列表 */
? ? ? ? ? this.getTableDate()
? ? ? ? }else{
? ? ? ? ? this.$message.error(msg)
? ? ? ? }
? ? ? }catch(err){
? ? ? ? this.$message.error(err)
? ? ? }
? ? },
? ? /* 通過用戶名搜索 */
? ? ?search(){
? ? ? ?console.log(this.queryName);
? ? ? ?/* 點擊搜索 因為queryName 的值通過v-model 已經被修改
? ? ? ? ? 所以直接調取接口獲取數(shù)據(jù) */
? ? ? ?this.getTableDate()
? ? ?},
? ? /* 選擇一頁顯示多少條數(shù)據(jù) */
? ? handleSizeChange(val) {
? ? ? console.log(`每頁 ${val} 條`);
? ? ? /* 改變一頁顯示多少條 */
? ? ? this.pagesize = val;
? ? ? /* 重新獲取數(shù)據(jù)渲染表格 */
? ? ? this.getTableDate();
? ? },
? ? /* 點擊具體頁數(shù)、上一頁和下一頁以及輸入頁數(shù) 都會觸發(fā)下面的函數(shù) */
? ? /* 選擇當前的是第幾頁 */
? ? handleCurrentChange(val) {
? ? ? console.log(`當前頁: ${val}`);
? ? ? /* 改變當前是第幾頁 */
? ? ? this.currentPage = val;
? ? ? /* 重新獲取數(shù)據(jù)渲染表格 */
? ? ? this.getTableDate();
? ? },
? ? /* 當子組件添加數(shù)據(jù)成功的時候觸發(fā)的方法 */
? ? addok() {
? ? ? /* 重新獲取用戶數(shù)據(jù) */
? ? ? this.getTableDate();
? ? ? /* 關閉抽屜 */
? ? ? setTimeout(() => {
? ? ? ? this.drawer = false;
? ? ? }, 600);
? ? },
? ? getTableDate() {
? ? ? usersGet("users", {
? ? ? ? /* 當前頁 */
? ? ? ? pagenum: this.currentPage,
? ? ? ? /* 一頁展示多少條 */
? ? ? ? pagesize: this.pagesize,
? ? ? ? /* 查詢參數(shù) 空字符串是查詢全部 通過用戶名查詢的*/
? ? ? ? query:this.queryName
? ? ? })
? ? ? ? .then((res) => {
? ? ? ? ? let { data, meta } = res.data;
? ? ? ? ? /* 當狀態(tài)為200表示數(shù)據(jù)獲取成功 */
? ? ? ? ? if (meta.status == 200) {
? ? ? ? ? ? /* 把數(shù)據(jù)給到tableData數(shù)組中 */
? ? ? ? ? ? this.tableData = data.users;
? ? ? ? ? ? /* 把數(shù)據(jù)中總條數(shù)給到total */
? ? ? ? ? ? this.total = data.total;
? ? ? ? ? } else {
? ? ? ? ? ? /* 如果獲取數(shù)據(jù)有誤带到，給出相應提示 */
? ? ? ? ? ? this.$message.error(meta.msg);
? ? ? ? ? }
? ? ? ? })
? ? ? ? .catch((err) => {
? ? ? ? ? this.$message.error(err);
? ? ? ? });
? ? },
? },
};
</script>
在上一章的IndexView.vue里面添加退出登錄：
<template>
? <el-container style="height: 100vh; border: 1px solid #eee">
? ? <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
? ? ? <!-- :default-openeds="['1', '3']" 表示默認打開第一個和第三個菜單 -->
? ? ? <!-- 1 對應了el-submenu index="1"
? ? ? ? ? ?2 對應了el-submenu index="2" -->
? ? ? <!-- el-submenu index="1-1 表示把el-submenu當作是第一個導航的第一個子項-->
? ? ? <!-- ?:router="true 使用 vue-router 的模式昧碉，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉 -->
? ? ? <!-- default-active="/index/users" -->
? ? ? <!-- ★ ?:default-openeds 不可以直接使用['1'] 需要使用一個變量openList代替 因為值隨時會變 如果寫的
? ? ? 是['1'] 那么就永遠不會改變 會出現(xiàn)點擊二級菜單 一級菜單會縮起來的情況-->
? ? ? <!-- default-active="/index/users" 表示一進入頁面就默認激活/index/user導航菜單
? ? ? default-active不能直接寫死值路徑要用變量代替 使用監(jiān)聽器 監(jiān)聽路由解決 -->
? ? ? <!-- unique-opened ?是否只保持一個子菜單的展開 boolean 默認是false-->
? ? ? <el-menu
? ? ? ? :default-openeds="openList"
? ? ? ? :router="true"
? ? ? ? :default-active="pagepath"
? ? ? ? :unique-opened="true"
? ? ? >
? ? ? ? <!-- index接收的字符串類型，(i+1)是數(shù)字類型揽惹，所以使用toString方法轉成字符串 傳給index -->
? ? ? ? <!-- 因為i是從0開始的 所以需要加1 -->
? ? ? ? <el-submenu
? ? ? ? ? :index="(i + 1).toString()"
? ? ? ? ? v-for="(v, i) in navList"
? ? ? ? ? :key="i"
? ? ? ? >
? ? ? ? ? <template slot="title"
? ? ? ? ? ? ><i class="el-icon-menu"></i>{{ v.authName }}</template
? ? ? ? ? >
? ? ? ? ? <!-- 子選項需要改成例如：1-1格式 以字符串的形式傳給index屬性 -->
? ? ? ? ? <!-- 因為子選項也是一個數(shù)組所以需要再次循環(huán) -->
? ? ? ? ? <!-- :index="'/index/'+item.path" 路徑最前面必須加上/ 否則會出現(xiàn)路徑覆蓋的問題 -->
? ? ? ? ? <el-menu-item
? ? ? ? ? ? :index="'/index/' + item.path"
? ? ? ? ? ? v-for="(item, index) in v.children"
? ? ? ? ? ? :key="index"
? ? ? ? ? ? >{{ item.authName }}</el-menu-item
? ? ? ? ? >
? ? ? ? </el-submenu>
? ? ? </el-menu>
? ? </el-aside>
? ? <el-container>
? ? ? <el-header style="text-align: right; font-size: 12px">
? ? ? ? <el-dropdown>
? ? ? ? ? <i class="el-icon-setting" style="margin-right: 15px"></i>
? ? ? ? ? <el-dropdown-menu slot="dropdown">
? ? ? ? ? ? <!-- 因為是組件所以不支持原生的點擊 需要加上.native修飾符來實現(xiàn) -->
? ? ? ? ? ? <el-dropdown-item @click.native="quit">退出登錄</el-dropdown-item>
? ? ? ? ? </el-dropdown-menu>
? ? ? ? </el-dropdown>
? ? ? ? <span>{{username}}</span>
? ? ? </el-header>
? ? ? <el-main>
? ? ? ? <!-- 我們使用el-card組件實現(xiàn)頁頭和主體的布局 -->
? ? ? ? <el-card class="box-card">
? ? ? ? ? <div slot="header" class="clearfix">
? ? ? ? ? ? <!-- fullPath: "/index/addusers?name=1" 會帶上傳遞的參數(shù) -->
? ? ? ? ? ? <!-- path: "/index/addusers" 不會帶上參數(shù) 是純路徑 -->
? ? ? ? ? ? <!-- 使用面包屑導航實現(xiàn)導航 -->
? ? ? ? ? ? <!-- separator="/" 表示用/來分隔 -->
? ? ? ? ? ? <el-breadcrumb separator="/">
? ? ? ? ? ? ? <el-breadcrumb-item :to="{ path: $route.path }">{{
? ? ? ? ? ? ? ? $route.meta.title
? ? ? ? ? ? ? }}</el-breadcrumb-item>
? ? ? ? ? ? ? <el-breadcrumb-item>{{
? ? ? ? ? ? ? ? $route.meta.subTitle
? ? ? ? ? ? ? }}</el-breadcrumb-item>
? ? ? ? ? ? </el-breadcrumb>
? ? ? ? ? </div>
? ? ? ? ? <keep-alive>
? ? ? ? ? <!-- 需要緩存的視圖組件 -->
? ? ? ? ? <router-view v-if="$route.meta.keepAlive"></router-view>
? ? ? ? ? </keep-alive>
? ? ? ? ? <!-- 不需要緩存的視圖組件 -->
? ? ? ? ? <router-view v-if="!$route.meta.keepAlive"></router-view>
? ? ? ? ? <!-- 在組件切換過程中將狀態(tài)保留在內存中,防止重復渲染DOM
? ? ? ? ? <keep-alive>
? ? ? ? ? router-view 顯示主頁面內容
? ? ? ? ? <router-view></router-view>
? ? ? ? ? </keep-alive> -->
? ? ? ? </el-card>
? ? ? </el-main>
? ? </el-container>
? </el-container>
</template>
<script>
import { menusGet } from "@/http/request.js";
import createRoute from "@/minixs/createRoute.js";
export default {
? mixins: [createRoute],
? data() {
? ? return {
? ? ? navList: [],
? ? ? openList: ["1"],
? ? ? pagepath: "/index/users",
? ? };
? },
? watch: {
? ? /* 當路由發(fā)生變化的時候被饿，就把最新的地址給到pagepath變量
? ? 作用是為了保持路由菜單欄的高亮顯示 以及解決點擊不跳轉的bug */
? ? $route: {
? ? ? handler: function (newV) {
? ? ? ? this.pagepath = newV.path;
? ? ? },
? ? ? immediate: true,
? ? },
? },
? /* 動態(tài)路由添加的菜單 刷新頁面的時候不走created 所以每次刷新
? 都不能添加動態(tài)路由，導致刷新白屏 */
? created: function () {
? ? this.getNavList();
? },
? computed:{
? ? /* 不能在模板中使用 localStorage.username */
? ? /* 因為不是VUE實例中的屬性,所以需要借助計算屬性來實現(xiàn) */
? ? username:function(){
? ? ? return localStorage.username
? ? }
? },
? methods: {
? ? /* 推出登錄 */
? ? quit(){
? ? ? /* 清除所有緩存 */
? ? ?localStorage.clear();
? ? ?/* 回到登錄頁 */
? ? ?setTimeout(()=>{
? ? ? ?this.$router.push({name:'login'})
? ? ?},500)
? ? },
? ? getNavList: function () {
? ? ? menusGet("menus")
? ? ? ? .then((res) => {
? ? ? ? ? let { data, meta } = res.data;
? ? ? ? ? /* 數(shù)據(jù)獲取成功 */
? ? ? ? ? if (meta.status == 200) {
? ? ? ? ? ? this.navList = data;
? ? ? ? ? ? /* 動態(tài)添加路由菜單 */
? ? ? ? ? ? /* 因為第一個路由是默認搪搏，所以我們從第二個路由開始動態(tài)添加 */
? ? ? ? ? ? /* slice不會改變原數(shù)據(jù) 而splice會 */
? ? ? ? ? ? localStorage.arrRoute = JSON.stringify(this.navList.slice(1));
? ? ? ? ? ? /* 使用minixs中的添加動態(tài)路由的公共方法 */
? ? ? ? ? ? this.createRouteFn();
? ? ? ? ? } else {
? ? ? ? ? ? /* 防止數(shù)據(jù)獲取失敗狭握，給出相應的后臺提示 */
? ? ? ? ? ? this.$message.error(meta.msg);
? ? ? ? ? }
? ? ? ? })
? ? ? ? .catch((err) => {
? ? ? ? ? console.log(err);
? ? ? ? });
? ? },
? },
};
</script>
<style scoped>
.el-header {
? background-color: #b3c0d1;
? color: #333;
? line-height: 60px;
}
.el-aside {
? color: #333;
}
</style>
效果圖：
