碼上快樂

相關內容    簡體    繁體

Vue后台管理系統—用戶列表

本文轉載自   查看原文   2020-10-24 09:33   485    Vue練習項目

用戶列表

  • 建立自己的文件夾

  • 導入路由，放在home下（子路由）

  • ⭐解決高亮顯示的BUG

    • 再點擊每個二級菜單的時候不能顯示激活狀態

      • 把對應的地址保存到相對應的SessionStorage中 刷新頁面的時候 從SessionStroage中取值 處在激活狀態
      // 一級菜單
<el-menu  :default-active="activePath">

// 二級菜單
<el-menu-item :index="'/'+subItem.path"
			 @click="saveNavState('/'+subItem.path)">
</el-menu-item>


<script>
export default {
  created () {
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  data () {
    return {
      // 當前激活狀態
      activePath: ''
    }
  },
  methods: {
    // 保存當前激活狀態
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
  this.activePath = activePath
    }
  }
}
</script>
2.1 搜索框&添加用戶按鈕
  • 用Element-UI模板
  • 面包屑導航
    <!-- 面包屑導航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首頁</el-breadcrumb-item>
      <el-breadcrumb-item>用戶管理</el-breadcrumb-item>
      <el-breadcrumb-item>用戶列表</el-breadcrumb-item>
    </el-breadcrumb>
  • 用:span 進行划分柵格
<el-row :gutter="20">
	<el-col :span="8">
		XXX
	</el-col>
	<el-col :span="4">
		XXX
	</el-col>
</el-row>
  • 為表格渲染數據
	<!-- 表格 -->
<el-table :data="userList"
		   stripe
		   border
		   style="width: 100%">
		   
	// index索引列
	<el-table-column type="index">
	</el-table-column>
	// 姓名列
	<el-table-column prop="username"
	label="姓名"></el-table-column>
      
</el-table>
      
      
<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 20
      },
      userList: [],
      total: 0

    }
  },
  created () {
    // 頁面加載的時候調用函數
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.get('users', { params: this.queryInfo })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.userList = res.data.users
      this.total = res.data.total
    }
  }
}
</script>

  • 渲染true和false為按鈕

    • 采用作用域插槽

      <!-- 狀態列 -->
	<el-table-column prop="mg_state"
					 label="狀態">
					 
		<!-- 作用域插槽 -->
		<template slot-scope="scope">
			<el-switch v-model="scope.row.mg_state" @change="switchChange(scope.row)">
            </el-switch>
		</template>
		
</el-table-column>

    • 把switch改變值的傳入到數據庫內的方法：

       methods: {
// Switch改變的時候
    async switchChange (newScope) {
      console.log(newScope)
      const { data: res } = await this.$http.put(`users/${newScope.id}}/state/${newScope.mg_state}`)
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
    }
  }
}
</script>

  • 搜索框進行數據的篩選

<el-input placeholder="請輸入內容"
			v-model="queryInfo.query"	//雙向數據綁定v-model
			clearable					//清空屬性
			@clear="getUserList">		//點擊清空時，調用的事件就是獲取用戶列表事件
<el-button slot="append"
			icon="el-icon-search"
			@click="getUserList"></el-button>	//點擊事件后獲取數據
  • 添加用戶按鈕
<el-form :model="addForm"						//數據綁定到addForm{添加用戶的表單數據}
                 :rules="addFormRules"			//驗證規則{username:[{驗證1},{驗證2}]}
                 ref="addFormRef"				//引用名稱
                 label-width="70px">
                 
<!-- 【彈出對話框--用戶名】prop="name"是驗證規則內的屬性 -->
<el-form-item label="用戶名"
	prop="username">								//驗證規則的屬性【prop】一定在rules內部
	<el-input v-model="addForm.username"></el-input>
</el-form-item>

</el-form>

  • ⭐自定義校驗規則（郵箱、手機號）

    • 第一步：定義一個箭頭函數 在data內的return之前
    • 第二步：在具體規則rules中[{validator:指向箭頭函數名，trigger:'blur'(觸發時機)} ]
    • 驗證是否符合校驗規則（正則表達式.test(value)）
    <script>
export default {
  data () {
    // 驗證郵箱的規則(規則，待校驗的值，回調函數)
    var checkEmail = (rule, value, callback) => {
      // 通過正則表達式
      const regEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
      if (regEmail.test(value)) {
        return callback()// 校驗成功
      }
      callback(new Error('請輸入合法的郵箱'))
    }

    // 校驗手機號的規則
    var checkPhone = (rule, value, callback) => {
      // 通過正則表達式
      const regPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      if (regPhone.test(value)) {
        return callback()// 校驗成功
      }
      callback(new Error('請輸入合法的手機號'))
    }
    
    return {
      // 添加用戶表單
      addForm: {
        email: '',
        phone: ''
      },
      // 驗證規則
      addFormRules: {
        email: [{ required: true, message: '請輸入郵箱', triggle: 'blur' }, 
        { validator: checkEmail, triggle: 'blur' }],
        phone: [{ required: true, message: '請輸入郵箱', triggle: 'blur' }, 
        { validator: checkPhone, triggle: 'blur' }]

      }
    }
  },

  • 重置提交用戶操作

    • 在添加用戶輸入框內，總是初始狀態
    • 方法：在關閉窗口（Dialog關閉事件）的時候，重置表單（添加到methods方法內）
      • 第一步：為el-dialog添加事件@close="closeDialogEvent"
      • 第二步：在el-form中添加引用ref="addFormRef"
      • 第二步：重置 需要ref的引用，調用resetFields()重置表單方法
     <el-dialog title="添加用戶"
 			@close="closeDialogEvent">
 			
 	<el-form ref="addFormRef">	//表單需要引用
 </el-dialog>
 
 <script>
export default {
	methods:{
		// 監聽關閉dialog事件 就觸發
		closeDialogEvent(){
			this.$refs.addFormRef.resetFields()	//引用的表單調用resetFields()重置表單方法
		}
	}
}

  • 在提交表單的時候進行預驗證

    • 為提交按鈕，綁定事件處理函數@click='addUser'
    • 寫在methods內，同樣也需要引用表單.validate方法【valid是判斷是否正確，符合規則】
     <el-button type="primary"
                   @click="addUser">確 定</el-button>

<script>
export default {
 methods: {
    addUser () {
      this.$refs.addFormRef.validate(valid => {
        console.log(valid)
        if (!valid) return this.$message.error('預驗證失敗！')
        this.$message.success('預驗證成功')
      })
    }
 }

  • 修改用戶數據

    • 點擊彈出dialog
    • 綁定事件
      • 在模板template中 slot-scope="scope" 傳遞給方法一個ID值
      • 根據 ID查詢用戶信息 有API 根據API獲取信息
    • 添加事件、規則
    <template>
  <div>
	<!-- 編輯用戶dialog -->
    <el-dialog title="編輯用戶"
               :visible.sync="editUserDialog">
      <el-form :model="editForm"			
               :rules="editFormRules"		//★★el-form中有rules規則對象
               ref="editFormRef"			//★★el-form中有ref引用對象
               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-form-item中有prop傳入對象
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <!-- 【彈出對話框--手機號】 -->
        <el-form-item label="手機號"
                      prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按鈕區域 -->
      <span slot="footer">
        <el-button @click="editUserDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="editUser">確 定</el-button>		//修改數據，點擊后修改
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
data () {
// 驗證郵箱的規則
	var checkEmail = (rule, value, callback) => {
// 通過正則表達式
const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
	if (regEmail.test(value)) {
		return callback() // 校驗成功
	}
	callback(new Error('請輸入合法的郵箱'))
}

// 校驗手機號的規則
var checkMobile = (rule, value, callback) => {
// 通過正則表達式
const regMobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
	if (regMobile.test(value)) {
		return callback() // 校驗成功
	}
	callback(new Error('請輸入合法的手機號'))
}

     return {
// 編輯用戶表單
editForm: {},
// 編輯用戶驗證規則
editFormRules: {
email: [{ required: true, message: '請輸入郵箱', triggle: 'blur' }, 
		{ validator: checkEmail, triggle: 'blur' }],
mobile: [{ required: true, message: '請輸入手機號', triggle: 'blur' }, 
		{ validator: checkMobile, triggle: 'blur' }]
      }
    }
},
  
methods: {
// 展示編輯用戶的對話框
async showEditUserDialog (id) {
	this.editUserDialog = true
},
// 監聽關閉編輯dialog事件 重置 就觸發
closeEditDialogEvent () {
	this.$refs.editFormRef.resetFields()
},
editUser (editInfo) {
	this.$refs.editFormRef.validate(async valid => {
	if (!valid) return
	const { data: res } = await this.$http.put('users/' + this.editForm.id, { email: this.editForm.email, mobile: this.editForm.mobile })		//axios請求地址，id為this.editForm對應的id 后面傳入的是參數
	if (res.meta.status !== 200) return this.$message.error('更新用戶數據失敗！')
// 關閉dialog對話框
	this.editUserDialog = false
// 獲取列表
	this.getUserList()
// 提示信息成功
	this.$message.success('更新用戶數據成功！')
	})
},
// 調用接口獲取信息
const { data: res } = await this.$http.get(`users/${id}`)
if (res.meta.status !== 200) return this.$message.error('查詢用戶信息失敗！')
this.$message.success('獲取用戶信息成功！')
	this.editForm = res.data
    }
  }
}

  • 刪除用戶

    • 彈出MessageBox 彈框

    • Vue項目刷新彈出空白框

      其中 Message組件與MessageBox組件全局使用比較頻繁，掛在到Vue的原型上比較方便，不要使用use。

    • 取消按鈕，取消刪除操作 確認按鈕，進行刪除操作(對刪除按鈕添加事件 並且注冊方法)

    //掛載$confirm
//導入Element-UI
import { MessageBox } from 'element-ui'
Vue.prototype.$confirm = MessageBox.confirm

<!-- 刪除 -->
<el-tooltip effect="dark"
			content="刪除"
			placement="top-start"
			:enterable="false">
<el-button type="danger"
		@click="removeUserById(scope.row.id)"			//獲取這個需要刪除的ID值
		icon="el-icon-delete"
		size="mini"></el-button>
</el-tooltip>

方法內
// 刪除數據 提示框
async removeUserById (id) {
	const confirmResult = await this.$confirm('此操作將永久刪除該文件, 是否繼續?', '提示', {
	confirmButtonText: '確定',
	cancelButtonText: '取消',
	type: 'warning'
}).catch(err => err) // .catch用來捕獲之前的所有錯誤
// 用戶確認刪除 返回值為confirm
// 用戶取消刪除 返回值為報錯信息.catch(err=>err) 這個捕獲到錯誤信息后，並且return回去，留下的只有cancel
if (confirmResult !== 'confirm') return this.$message.info('用戶取消了刪除操作')
const { data: res } = await this.$http.delete('users/' + id)
if (res.meta.status !== 200) return this.$message.error('刪除信息失敗！')
this.$message.success('成功刪除！')
this.getUserList()
}
2.2 用戶列表數據
  • 首先進行梳理整體的data()，created()，methods()
  • 在created()完后就應該調用相應的方法getUserList()
  • 寫方法，通過get請求 攜帶參數params這個參數的內容需要寫到data數據內
  • get方法得到的是Promise函數 需要async await 並且解構賦值
  • 解構賦值出來的res可以看到所有get請求到的數據
  • 在data數據內添加 用戶列表userList和總數total 並且通過res賦值
<script>
export default {
  data () {
    return {
      // 獲取用戶列表的參數對象
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      userList: [],
      total: 0
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      // get參數用params傳遞
      const { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) { return this.$message.error('請求出錯') }
      this.userList = res.data.users
      this.total = res.data.total
      console.log(res)
    }
  }
}
</script>
2.3 數據改造 true 改為開關

★slot-scope作用域插槽是用來傳遞這個作用域內的數據
<el-table-column prop="mg_state" label="狀態">
	<template slot-scope="scope">
	          <el-switch v-model="scope.row.mg_state"	//獲取這個數據
                       active-color="#13ce66"
                       inactive-color="#ff4949">
            </el-switch>
		{{scope.row}}	//當前這行的數據
	</template>
</el-table-column>

  • switch在頁面刷新的時候不會進行改變

    • 第一步：監聽switch狀態的改變[change]
    <el-switch v-model="scope.row.mg_state"
				active-color="#13ce66"
				inactive-color="#ff4949"
				@change="userStateChanged(scope.row)">	//把數據也傳入進來
</el-switch>
    
    // 監聽到
    userStateChanged (userinfo) {
      console.log(userinfo)		//可以監聽到數據的改變
    }
    • 第二步：調用對應的API接口 保存到數據庫內
    // 當switch改變的時候進行同步到數據庫
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_state
		return this.$message.error('更改狀態失敗!')
	}
	this.$message.success('更改狀態成功！')
}
2.4 操作框

  • 操作很多按鈕的時候，要在template中實現
  • slot-scope作用域插槽
<template slot-scope="scope">
<!-- 修改 -->
              <el-button type="primary"
                         icon="el-icon-edit"></el-button>
<!-- 刪除 -->
              <el-button type="danger"
                         icon="el-icon-delete"></el-button>
<!-- 設置 -->
              <el-button type="warning"
                         icon="el-icon-setting"></el-button>
</template>
  • 點擊修改按鈕 進行信息【用戶名（禁止改變）、郵箱、手機】的修改
 <!-- 修改 -->
            <el-tooltip class="item"
                        effect="dark"
                        content="修改"
                        placement="top-start"
                        :enterable="false">
              <el-button type="primary"
                         icon="el-icon-edit"
                         size="small"
                         @click="editUserInfo(scope.row.id)"></el-button>
            </el-tooltip>


 <!-- 修改用戶信息的對話框 -->
    <el-dialog title="修改信息"
               :visible.sync="editUserInofVisiable"
               width="50%">
      <!-- 修改用戶信息的表單 -->
      <el-form ref="editUserInfoRef"
               :rules="editUserInfoRules"
               :model="editUserInfoForm"
               label-width="80px">
        <!-- 用戶名 禁止修改 -->
        <el-form-item label="用戶名:"
                      prop="username">
          <el-input v-model="editUserInfoForm.username"
                    disabled></el-input>
        </el-form-item>
        <!-- 郵箱 可以修改 -->
        <el-form-item label="郵箱:"
                      prop="email">
          <el-input v-model="editUserInfoForm.email"></el-input>
        </el-form-item>
        <!-- 手機 可以修改 -->
        <el-form-item label="手機:"
                      prop="mobile">
          <el-input v-model="editUserInfoForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="resetEditUserInfo">取 消</el-button>
        <el-button type="primary"
                   @click="submitEditUserInfo">確 定</el-button>
      </span>
    </el-dialog>


// methods方法
// 修改用戶信息
    async editUserInfo (id) {
      console.log(id)
      const { data: res } = await this.$http.get(`users/${id}`)
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.editUserInfoForm = res.data
      this.editUserInofVisiable = true
    },
    // 提交修改用戶信息
    submitEditUserInfo () {
      this.$refs.editUserInfoRef.validate(async valid => {
        console.log(valid)
        if (!valid) return this.$message.error('預校驗失敗！')
        // this.$message.success('預校驗成功！')
        const { data: res } = await this.$http.put('users/' + this.editUserInfoForm.id, { email: this.editUserInfoForm.email, mobile: this.editUserInfoForm.mobile })
        console.log(res)
        if (res.meta.status !== 200) return this.$http.error(res.meta.msg)
        this.$http.success(res.meta.msg)
      })
      this.editUserInofVisiable = false
      this.getUserList()
      this.$message.success('更新用戶信息成功！')
    },
    // 重置修改用戶信息的表單
    resetEditUserInfo () {
      this.$refs.editUserInfoRef.resetFields()
      this.editUserInofVisiable = false
    },
  • 刪除此行用戶信息
   <!-- 刪除 -->
            <el-tooltip class="item"
                        effect="dark"
                        content="刪除"
                        placement="top-start"
                        :enterable="false">
              <el-button type="danger"
                         icon="el-icon-delete"
                         size="small"
                         @click="deleteUserInfo(scope.row.id)"></el-button>
            </el-tooltip>
            
            
            
// 刪除用戶信息
    async deleteUserInfo (id) {
      console.log(id)
      const confirmResult = await this.$confirm('此操作將永久該用戶信息, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消刪除！')
      }
      const { data: res } = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.getUserList()
    }
2.5 分頁
  • Element-UI套入
<!-- 分頁 -->
//@size-change 代表的是當每頁顯示的個數（分頁內的下拉框選擇的每頁顯示個數）發生改變時候觸發的事件
<el-pagination @size-change="pageSizeChange"
//@current-change 代表的是當前是第幾頁
			   @current-change="pageCurrentChange"
//在data數據庫內定義的每頁顯示的數目
			   :current-page="queryInfo.pagenum"
//下拉框內可以選擇的每頁顯示個數
			   :page-sizes="[ 1, 2, 5, 10]"
//當前每頁顯示的數據
			   :page-size="queryInfo.pagesize"
			   layout="total, sizes, prev, pager, next, jumper"
//數據總數 在調用API數據庫內可以看到
			   :total="total">
</el-pagination>

<script>
  methods: {
    // 頁面數據發生變化時
    pageSizeChange (newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    // 當前頁面發生變化時
    pageCurrentChange (newNum) {
      console.log(newNum)
      this.queryInfo.pagenum = newNum
      this.getUserList()
    },
    }
</script>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Vue電商后台管理系統項目第3篇-首頁用戶列表增刪改查功能 React后台管理系統-用戶列表頁面 vue后台管理系統——用戶管理模塊 vue后台管理系統 vue后台管理系統 Vue項目練習--電商后台管理系統的功能---用戶管理模塊 vue后台管理系統項目 基於VUE實現的新聞后台管理系統-一 vue后台管理系統權限處理 vue + element搭建后台管理系統
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM