Vue与SpringBoot（一）实现用户信息增改查，Excel导出

1、前端代码：

<template>
<div>
  <el-row :gutter="20">
  <el-col :span="3"><el-button type="success" icon="el-icon-edit" size="small" @click="dialogFormVisible = true">添加</el-button></el-col>
  <el-col :span="16" :offset="5"> <el-input v-model="keywords" autocomplete="off" size="small" style="width: 300px;margin-right: 10px" placeholder="通过用户名、真实姓名或者职位搜索..."></el-input>
  <el-button size="small" type="primary" icon="el-icon-search" @click="searchUsersByKeyWord()">搜索</el-button>
    <el-button type="warning" size="small" @click="export2Excel(tableData)">导出Excel</el-button></el-col>
</el-row>
    <el-table
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width: 990px">
      <el-table-column
        prop="id"
        label="序号"
        width="80"
        type="index"
        align="center">
        <template scope="scope">
           {{ scope.$index + (currentPage - 1) * pagesize + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="insertDate"
        label="注册时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="realName"
        label="真实姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="150">
      </el-table-column>
      <el-table-column
        prop="position"
        label="职位"
        width="100">
      </el-table-column>
       <el-table-column
        prop="idd"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <i class="el-icon-edit" @click="usersDetails(scope.row)"></i>     
          <i class="el-icon-delete" @click="deleteUsers(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      :total="tableData.length">
   </el-pagination>
   <el-dialog
      title="添加/修改用户信息"
      :visible.sync="dialogFormVisible"
      @close="clear">
      <el-form :model="usersForm" :rules="rules" style="text-align: left" ref="usersForm">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="usersForm.username" autocomplete="off"></el-input>
        </el-form-item>        
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model="usersForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
          <el-input v-model="usersForm.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="usersForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth" prop="position">
          <el-input v-model="usersForm.position" autocomplete="off"></el-input>
        </el-form-item>       
        <el-form-item prop="id" style="height: 0">
          <el-input type="hidden" v-model="usersForm.id" 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="onSubmit('usersForm')">确 定</el-button>
      </div>
    </el-dialog>
</div>
  </template>

<script>
export default {
  name: 'UserListIndex',
  data () {
    const validateAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error('必须输入年龄'))
      }
      value = Number(value)
      if (typeof value === 'number' && !isNaN(value)) {
        if (value < 0 || value > 100) {
          callback(new Error('年龄在 0 至 100 之间'))
        } else {
          callback()
        }
      } else {
        callback(new Error('年龄必须为数字'))
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('必须输入密码'))
      }
      if (!value.match('[a-zA-Z0-9]')) {
        callback(new Error('密码由6-12个字母或者数字组成'))
      } else {
        callback()
      }
    };
    return {
      tableData: [],
      keywords: '',
      currentPage: 1,
      pagesize: 10,
      dialogFormVisible: false,
      usersForm: {
        id: '',
        username: '',
        password: '',
        realName: '',
        age: '',
        position: ''
      },
      rules: {
        username: [{
          required: true,
          message: '用户名不能为空',
          trigger: blur
        },
        {min:5,max:15,message:'长度在5到15个字符之间'}
        ],
        password: [
          {required: true,
          message: '密码不能为空',
          trigger: blur},
          {validator: validatePassword,
          trigger: 'blur'}
        ],
        realName: [
          {
          required: true,
          message:'真实姓名不能为空',
          trigger: 'blur'
          },
          {min:1,max:10,message:'真实姓名在1到10个字符之间'}
        ],
        age: [
          {required: true,
          message: '年龄不能为空',
          trigger: 'blur'
          },
          {validator: validateAge,
          trigger: 'blur'
          }
        ],
        position: [
          {
          required: true,
          message:'职位不能为空',
          trigger: 'blur'
          },
          {min:1,max:10,message:'长度在1到10个字符之间'}
        ]
      },
      formLabelWidth: '120px'
    }
  },
  mounted: function () {
    this.loadUsers()
  },
  methods: {
    loadUsers () {
      var _this = this
      this.$axios.get('/userList').then(resp => {
        if (resp && resp.status === 200) {
          _this.tableData = resp.data
        }
      })
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage)
    },
    usersDetails (resp) {
      this.dialogFormVisible = true
      this.usersForm = {
        id: resp.id,
        insertDate: resp.insertDate,
        username: resp.username,
        password: resp.password,
        realName: resp.realName,
        age: resp.age,
        position: resp.position
      }
    },
    deleteUsers (resp) {
      this.$confirm('此操作将永久用户信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios
          .post('/userinfo/deleteUserById', {id: resp.id}).then(resp => {
            if (resp && resp.status === 200) {
              this.loadUsers()
            }
          })
      }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    export2Excel(tableData) {
　　　require.ensure([], () => {
　　　  const { export_json_to_excel } = require('../../Export2Excel');
　　　　const tHeader = ['序号', '用户名', '注册时间', '真实姓名', '年龄', '职位'];
　　　　const filterVal = ['id', 'username', 'insertDate', 'realName', 'age', 'position'];
　　　　const list = tableData;
　　　　const data = this.formatJson(filterVal, list);
　　　　　　export_json_to_excel(tHeader, data, '员工信息列表');
　　　　　})
　　　　},
　　　　formatJson(filterVal, jsonData) {
　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　　},
     searchUsersByKeyWord() {
      var _this = this
      this.$axios
        .post('/searchUsersByKeyWord', {
          keywords: this.keywords
        }).then(resp => {
          if (resp && resp.status === 200) {
            _this.tableData = resp.data
          }
        })
    },
    clear () {
      this.usersForm = {
        id: '',
        username: '',
        password: '',
        realName: '',
        age: '',
        postion: ''
      }
    },
    onSubmit (usersForm) {
      alert("00000")
      this.$refs.usersForm.validate(valid => {
         alert("1111")
        if(valid) {
          this.$axios.post('/userinfo/addUpdateUser',{
            id: this.usersForm.id,
            username: this.usersForm.username,
            password: this.usersForm.password,
            realName: this.usersForm.realName,
            age: this.usersForm.age,
            position: this.usersForm.position
          }).then(resp => {
           this.dialogFormVisible = false
           this.loadUsers()
          })
        } else {
          console.log('Error Submit!!')
          return false
        }
      })
    }
  }
}
</script>

 

 

2、后端代码：

/**
	 * 获取用户信息列表
	 * @return
	 * @throws Exception
	 */
	@GetMapping("/api/userList")
    public List<UserInfo> getUserList() throws Exception {
		UserInfo userInfo = new UserInfo();
		List<UserInfo> userList = userService.getUserList(userInfo);
        return userList;
    }
	
	/**
	 * 根据关键词查询用户信息
	 * @return
	 * @throws Exception
	 */
	@PostMapping("/api/searchUsersByKeyWord")
	@ResponseBody
    public List<UserInfo> searchUsersByKeyWord(@RequestBody UserInfo userInfo) throws Exception {
		List<UserInfo> userList = userService.getUserList(userInfo);
        return userList;
    }
	/**
	 * 获取用户信息
	 * @param userInfo
	 * @return
	 * @throws Exception
	 */
	@GetMapping("api/getUserById")
	public UserInfo getUserById(UserInfo userInfo) throws Exception{
		return userService.getUserById(userInfo);
	}
	/**
	 * 删除用户信息
	 * @param userInfo
	 * @throws Exception
	 */
	@PostMapping("/api/userinfo/deleteUserById")
	public void deleteUserById(@RequestBody UserInfo userInfo) throws Exception{
		userService.deleteUserById(userInfo);
	}
	/**
	 * 用户信息的添加与编辑
	 * @param userInfo
	 * @return
	 * @throws Exception
	 */
	@PostMapping("/api/userinfo/addUpdateUser")
	@ResponseBody
	public UserInfo addUpdateUser(@RequestBody UserInfo userInfo) throws Exception{
		if(userInfo.getId()!=null) {
			userService.updateUsersById(userInfo);
		}else {
			userService.addUserInfo(userInfo);
		}
		return userInfo;
		
	}