VUE-列表增删改查、分页模版

 

一、碎碎念

前一段时间，在一个博客的评论里看到一个小姐姐的回复，想要一个页面的模版，包含列表、搜索、增删改查、分页啥的，就是基本的后台项目页面。拖延症了几天，今天整理了下，0.0

 

二、效果展示

 

主要功能有列表展示、分页、查询、添加、删除、【修改没有写，忘记了】

 

三、接口格式

接口：http://172.26.130.4:9898/alice/sys/user/getUserList?email=test001&pageNum=1&pageSize=10
格式：post
入参：pageNum必填、pageSize必填、email非必填
返回：
{"status":1,"message":"OK","data":{"userInfos":[{"id":145,"userName":"test001","realName":"test001","email":"test001@xdf.cn","mobile":"11111111111","loginTime":null,"creator":"zhangxue","updator":"zhangxue","createTime":"2021-08-13 13:54:23","updateTime":"2021-08-13 13:54:23"}],"totalCount":1}}

 

四、前端渲染

4.1、html部分

<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="filter-container sousuo">
      <el-input v-model="listQuery.email" placeholder="根据邮箱查询" style="width: 200px;"/>
      <el-button type="primary" icon="el-icon-search" @click="searchData">
        查询
      </el-button>
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addUserFormVisible = true">
        添加
      </el-button>
    </div>

    <!-- 用户列表 -->
    <el-table v-loading="listLoading" :data="userList" :default-sort = "{prop: 'id', order: 'descending'}"
              element-loading-text="Loading" border stripe fit highlight-current-row>
      <el-table-column label="序号" prop="" >
        <template slot-scope="scope">
            {{ scope.$index +1 }}
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="scope">
          {{ scope.row.userName }}
        </template>
      </el-table-column>
      <el-table-column label="真实姓名">
        <template slot-scope="scope">
          {{ scope.row.realName }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteUser(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        :current-page="pagination.currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>


    <!-- 添加用户的对话框 -->
    <el-dialog :visible.sync="addUserFormVisible" width="30%" title="添加用户">
      <el-form :model="userForm" :rules="userFormRules" ref="userForm" label-width="80px">
        <el-form-item label="用户名" prop="userName">
          <el-input placeholder="请输入用户名" v-model="userForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passWord">
          <el-input placeholder="请输入密码" v-model="userForm.passWord"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input placeholder="请输入邮箱" v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input placeholder="请输入用户真实姓名" v-model="userForm.realName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input placeholder="请输入用户手机号" v-model="userForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" prop="mobile">
         <el-select v-model="userForm.type" filterable  placeholder="请选择用户类型">
             
               <el-option value="1" label="产品"> </el-option>
               <el-option value="2" label="测试"> </el-option>
               <el-option value="3" label="前端开发"> </el-option>
               <el-option value="4" label="后端开发"> </el-option>
               <el-option value="5" label="运营"> </el-option>
               <el-option value="6" label="运维"> </el-option>
               <el-option value="7" label="ui"> </el-option>
               <el-option value="99" label="管理员"> </el-option>
         </el-select>
         </el-form-item>
      </el-form> 
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUser('userForm')">确 定</el-button>
        <el-button @click="callOf('userForm')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

4.2、js部分

<script>
import {
  getUserList,
  addUser,
  delUser
} from '@/api/userList'

export default {

  data() {
    return {
      pagination: {
        currentPage: 1, //初始页
        pageSize: 10, //每页的数据
        totalCount: 0 //总数据
      },

      addUserFormVisible: false, //添加弹窗的标记
      userList: [],

      listLoading: true,
      // 搜索条件
      listQuery: {
        email: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 用户表单
      userForm: {
        userName: '',
        realName: '',
        passWord: '',
        email: '',
        mobile: '',
        creator: '',
        type: '',
      },
      // 用户表单验证规则
      userFormRules: {
        userName: {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        realName: {
          required: true,
          message: '请输入真实姓名',
          trigger: 'blur'
        },
        passWord: {
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        email: [{
          required: true,
          message: '请输入用户邮箱',
          trigger: 'blur'
        },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        mobile: [{
          required: true,
          message: '请输入用户手机号',
          trigger: 'blur'
        },
          {
            min: 1,
            max: 12,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    //改变分页的每页的页数
    handleSizeChange(size) {
      this.pagination.pageSize = size
      this.listQuery.pageSize = size
      this.getUserList()
      console.log(this.pagination.pageSize) //每页下拉显示数据
    },
    // 改变分页的当前页面
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.listQuery.pageNum = currentPage
      this.getUserList()
      console.log(this.pagination.currentPage) //点击第几页
    },
// 查询
    searchData() {
      this.listQuery.pageNum = 1
      this.pagination.currentPage = 1
      this.getUserList()
    },
    // 获取用户列表
    getUserList() {
      this.listLoading = true
      getUserList(this.listQuery).then(response => {
        this.listLoading = false
        if (response.status === 1) {
          this.userList = response.data.userInfos
          this.pagination.totalCount = response.data.totalCount
        } else {
          this.$confirm(response.message)
        }
      }).catch(error => {
        this.listLoading = false
      })
    },
// 删除用户
    deleteUser(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser(id).then(response => {
          console.log(response.status)
          if (response.status === 1) {
            console.log('success!!')
            this.$message.success('删除成功！')
            this.getUserList()
          } else {
            console.log('failed')
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
      })
    },
// 添加用户
    addUser(userForm) {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          this.userForm.creator = sessionStorage.getItem('username')
          addUser(this.userForm).then(response => {
            console.log(response.status)
            if (response.status === 1) {
              console.log('success!!')
              this.$message.success('添加成功！')
              this.callOf(userForm)
              this.getUserList()
            } else {
              console.log('failed')
              this.$message.error(response.message)
            }
          })
        } else {
          console.log('有非必填项!!')
          return false
        }
      })
    },
// 关闭添加用户弹窗
    callOf(formName) {
      this.addUserFormVisible = false
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.sousuo {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  float: right;
  margin-bottom: 100px;
}
</style>

五、结语

到此结束啦，最近心情有点不那么美丽😔，但是，emmmmm....希望越来越好，希望选择的路不会后悔，希望......加油！！