[JavaScript知识库]【vue】elementui和axios的简介及安装，表格的增删改查，附带后端java代码

【vue】elementui和axios的简介及安装，表格的增删改查，附带后端java代码

1 elementui简介和安装

1.1 简介

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
参考layui，layui基于jquery的桌面组件库。

1.2 安装使用及配置

安装使用及配置：
参考官方文档
1 安装命令

1. 安装命令

npm i element-ui -S

2. main.js配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//让Vue引入使用ElementUI
Vue.use(ElementUI);

2 axios简介和安装

2.1 简介

 易用、简洁且高效的http库。   支持原始JS中的Promise，做异步请求数据工具。 

2.2 安装及配置

1. 安装命令（执行其中一个）

npm install --save axios
npm  i  --save axios

2. 配置 main.js

import axios from 'axios'
//设置路径的默认前缀
axios.defaults.baseURL="http://localhost:9090"
//把axios挂载到vue对象
Vue.prototype.$http=axios;

3. 常用请求

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

4. 前置操作：渲染用户列表页面为首页

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import  xxxx from  './views/userinfo.vue'
import axios from 'axios'
设置所有请求路径的默认前缀
axios.defaults.baseURL="http://localhost:9090"
//把axios挂载到vue对象
Vue.prototype.$http=axios;

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(xxxx)
}).$mount('#app')

userinfo.vue

<template>
    <table>
        <tr v-for="userinfo in userinfoList">
                <td>{{userinfo.id}}</td>
                <td>{{userinfo.username}}</td>
                <td>{{userinfo.password}}</td>
                <td>{{userinfo.phone}}</td>
                <td>{{userinfo.createtime}}</td>
                <td>{{userinfo.deptid}}</td>
        </tr>
    </table>
</template>

<script>
export default {
    name:"userinfo",
    props: {//注册属性 父传子 数据传递
    },
    data() {
        return {
            userinfoList:[]
        };//定义数据
    },
    created(){
        this.queryAll();
    },
    methods: {//方法事件处理
        queryAll(){
        console.log(1111111111111)
        var mythis=this;
        //created在模板渲染成html前调用，通常在这里初始化某些属性，然后再渲染视图
        this.$http.get('/userinfo/queryAll')
        .then(function (response) {
            console.log(response);
            mythis.userinfoList=response.data;
        })
        }

    },
    components: {//组件注册
    },
}
</script>

<style>
    table{
        border: 1px solid;
    }
</style>

5. 初始画一个表格
   参考elementui官网，初始化一个表格demo
   链接: https://element.eleme.cn/#/zh-CN/component/table

3 增删改查加分页

前端代码

<template>
    <div>
        <el-row>
            <el-button type="success" @click="dialogAddUserFormVisible = true">添加</el-button>
            <el-button type="danger" @click="handledeleteBatch">删除</el-button>
            <!-- 添加 -->
            <el-dialog title="添加用户" :visible.sync="dialogAddUserFormVisible">
                <el-form :model="form">

                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input v-model="form.phonenumber" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogAddUserFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addUser">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改 -->
            <el-dialog title="修改用户" :visible.sync="dialogUpdataUserFormVisible">
                <el-form :model="form">
                    <el-form-item label="id" :label-width="formLabelWidth">
                        <el-input v-model="form.userid" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input v-model="form.phonenumber" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" :label-width="formLabelWidth">
                        <el-input v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogUpdataUserFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="update">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
        <!-- 表格 -->
        <el-table :data="userinfoList.slice((currentPage-1)*PageSize,currentPage*PageSize)" border style="width: 100%"
            ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="userid" label="用户编号" width="180">
            </el-table-column>
            <el-table-column prop="username" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="phonenumber" label="手机号">
            </el-table-column>
            <el-table-column prop="password" label="密码">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="text" size="small">删除 </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: {//注册属性 父传子 数据传递
    },
    data() {
        return {
            userinfoList: [],
            dialogAddUserFormVisible: false,
            dialogUpdataUserFormVisible: false,
            form: {
                userid: '',
                username: '',
                password: '',
                phonenumber: '',
            },
            formLabelWidth: '120px',
            //初始化分页数据，将数据跟分页组件中的属性进行绑定v——bind

            // 默认显示第几页
            currentPage: 1,
            // 总条数，根据接口获取数据长度(注意：这里不能为空)
            totalCount: 10,
            // 个数选择器（可修改）
            pageSizes: [5, 10, 15, 20, 25, 30, 50, 100],
            // 默认每页显示的条数（可修改）
            PageSize: 5,
        };//定义数据
    },
    created() {
        //created在模板渲染成html前调用，通常在这里初始化某些属性，然后再渲染视图
        this.queryAll();
    },
    methods: {//方法事件处理
        // 分页
        // 每页显示的条数
        handleSizeChange(val) {
            // 改变每页显示的条数 
            this.PageSize = val
            // 注意：在改变每页显示的条数时，要将页码显示到第一页
            this.currentPage = 1
        },
        // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage = val
        },
        // 批量删除
        handledeleteBatch() {
            let _this = this;
            console.log(this)
            if (this.multipleSelection.length < 1) {
                this.$message({
                    message: "请选择数据",
                    type: "warning",
                });
            } else {
                console.log(this)
                this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.$http
                            .post("/userinfo/deleteByIds", this.multipleSelection)
                            .then(function (response) {
                                if (response) {
                                    //刷新数据
                                    _this.queryAll();
                                }
                            });

                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(val);
        },
        // 修改 
        handleUpdateClick(row) {
            // 弹出框
            this.dialogUpdataUserFormVisible = true;
            // 回填数据
            this.form = row;
        },
        // 修改提交数据
        update() {
            // 发送ajax请求
            var myThis = this;
            var myForm = this.form;
            this.$http.post('/userinfo/updateById', myForm)
                .then(function (response) {
                    console.log(response);
                    // 关闭弹框
                    myThis.dialogUpdataUserFormVisible = false;
                    // 重新查询表
                    myThis.queryAll();
                }); b
        },
        handleClick(row) {
            console.log(row.userid);
        },
        // 删除
        handleDeleteClick(row) {
            this.$confirm('此操作将永久删除该条用户信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 发送ajax请求
                var myThis = this;
                this.$http.post('/userinfo/deleteById?id=' + row.userid)
                    .then(function (response) {
                        console.log(response);
                        // 重新查询表
                        myThis.queryAll();
                    });
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                // 改变默认的页数
            this.currentPage = 1;
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 添加
        addUser() {
            // alert("添加操作")
            console.log(222)
            // 发送ajax请求
            var myThis = this;
            var myForm = this.form;
            this.$http.post('/userinfo/add', myForm)
                .then(function (response) {
                    console.log(response);
                    myThis.form = {},
                        // 关闭添加对话框
                        myThis.dialogAddUserFormVisible = false;
                    // 重新查询表
                    myThis.queryAll();
                })
        },
        //  查询所有
        queryAll() {
            console.log(222)
            var myThis = this;
            this.$http.get('/userinfo/queryAll?page=' + this.currentPage + '&limit=' + this.PageSize)
                .then(function (response) {
                    myThis.userinfoList = response.data;
                    console.log(response.data)
                    // 将数据的长度赋值给totalCount
                    myThis.totalCount = response.data.length;
                    console.log(myThis.totalCount);
                })
        }
    },
    components: {//组件注册
    },
}

</script>

<style>

</style>

后端代码

controller

package com.aaa.qy156.controller;

import cn.hutool.core.util.ObjectUtil;
import com.aaa.qy156.entity.Userinfo;
import com.aaa.qy156.service.UserinfoService;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import javax.annotation.Resource;
import java.util.List;

/**
 * (Userinfo)表控制层
 *
 * @author makejava
 * @since 2022-10-08 08:43:43
 */
@RestController
@RequestMapping("userinfo")
public class UserinfoController {
    /**
     * 服务对象
     */
    @Resource
    private UserinfoService userinfoService;
    private Userinfo userinfo;

    /**
     * 页面跳转
     */
    @RequestMapping("toShowUser")
    public ModelAndView toShowUserinfo(ModelAndView modelAndView){
        modelAndView.setViewName("showUserinfo");
        return modelAndView;
    }

    /**
     * 跳砖到Thymeleaf
     * @param modelAndView
     * @return
     */
    @RequestMapping(value = "toShowUserThymeleaf")
    public ModelAndView toShowUserThymeleaf(ModelAndView modelAndView){
        //查询所有数据
        List<Userinfo> userinfoList = userinfoService.queryAll();
        //携带数据到request域
        modelAndView.addObject("userinfoList",userinfoList);
        //modelAndView.addObject("username","renbei");
        //页面跳砖
        modelAndView.setViewName("showUserThymeleaf");
        return modelAndView;
    }

    /**
     * 登录
     * @param userinfo
     * @param modelAndView
     * @return
     */
    @RequestMapping("login")
    public ModelAndView login(Userinfo userinfo,ModelAndView modelAndView){
        List<Userinfo> userinfoList = userinfoService.queryByCondition(userinfo);
        //登录成功
        if(ObjectUtil.isNotEmpty(userinfoList)){
            //System.out.println("===============");
            modelAndView.addObject("username",userinfoList.get(0).getUsername());
            this.toShowUserThymeleaf(modelAndView);
        }else {
            //登录失败
            modelAndView.setViewName("index");
        }
        return modelAndView;
    }
    /**
     * 去修改页面
     * @param modelAndView
     * @return
     */
    @RequestMapping(value = "toUpdateUserinfo")
    public ModelAndView toUpdateUserinfo(Integer userid,ModelAndView modelAndView){
        //根据id查询消息
        Userinfo userinfoById = userinfoService.queryById(userid);
        System.out.println(userinfo);

        modelAndView.addObject("userinfoById",userinfoById);
        //页面跳砖
        modelAndView.setViewName("updateUserinfo");
        return modelAndView;
    }
    /**
     * 提交修改
     * @param userinfo
     * @param modelAndView
     * @return
     */
    @RequestMapping("update")
    public ModelAndView updateUserinfo(Userinfo userinfo, ModelAndView modelAndView){
        System.out.println(userinfo+"-----------------------------------");
        Userinfo update = userinfoService.update(userinfo);
        System.out.println(update);
        modelAndView.setViewName("index");
        return modelAndView;
    }
    /**
     * 分页查询
     *
     * @param userinfo 筛选条件
     * @return 查询结果
     */
    @GetMapping("queryByPage")
    public ResponseEntity<Page<Userinfo>> queryByPage(Userinfo userinfo, Integer page,Integer limit) {
        PageRequest pageRequest = PageRequest.of(page - 1, limit);
        return ResponseEntity.ok(this.userinfoService.queryByPage(userinfo, pageRequest));
    }

    @GetMapping("queryAll")
    public ResponseEntity<List<Userinfo>> queryAll() {
        return ResponseEntity.ok(this.userinfoService.queryAll());
    }

    /**
     * 通过主键查询单条数据
     *
     * @param id 主键
     * @return 单条数据
     */
    @GetMapping("{id}")
    public ResponseEntity<Userinfo> queryById(@PathVariable("id") Integer id) {
        return ResponseEntity.ok(this.userinfoService.queryById(id));
    }

    /**
     * 新增数据
     *
     * @param userinfo 实体
     * @return 新增结果
     */
    @RequestMapping("add")
    public ResponseEntity<Userinfo> add(@RequestBody Userinfo userinfo) {
        return ResponseEntity.ok(this.userinfoService.insert(userinfo));
    }

    /**
     * 编辑数据
     *
     * @param userinfo 实体
     * @return 编辑结果
     */
    @RequestMapping("updateById")
    public ResponseEntity<Userinfo> edit(@RequestBody Userinfo userinfo) {
        return ResponseEntity.ok(this.userinfoService.update(userinfo));
    }

    /**
     * 删除数据
     *
     * @param id 主键
     * @return 删除是否成功
     */
    @RequestMapping("deleteById")
    public ResponseEntity<Boolean> deleteById(Integer id) {
        return ResponseEntity.ok(this.userinfoService.deleteById(id));
    }
    @RequestMapping("deleteByIds")
    public ResponseEntity<Boolean> deleteByIds(@RequestBody List<Userinfo> userinfo) {
        return ResponseEntity.ok(this.userinfoService.deleteByIds(userinfo));
    }

}

service

package com.aaa.qy156.service;

import com.aaa.qy156.entity.Userinfo;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;

import java.util.List;

/**
 * (Userinfo)表服务接口
 *
 * @author makejava
 * @since 2022-10-08 08:43:44
 */
public interface UserinfoService {

    /**
     * 通过ID查询单条数据
     *
     * @param userid 主键
     * @return 实例对象
     */
    Userinfo queryById(Integer userid);

    List<Userinfo> queryAll();
    List<Userinfo> queryByCondition(Userinfo userinfo);

    /**
     * 分页查询
     *
     * @param userinfo 筛选条件
     * @param pageRequest      分页对象
     * @return 查询结果
     */
    Page<Userinfo> queryByPage(Userinfo userinfo, PageRequest pageRequest);

    /**
     * 新增数据
     *
     * @param userinfo 实例对象
     * @return 实例对象
     */
    Userinfo insert(Userinfo userinfo);

    /**
     * 修改数据
     *
     * @param userinfo 实例对象
     * @return 实例对象
     */
    Userinfo update(Userinfo userinfo);

    /**
     * 通过主键删除数据
     *
     * @param userid 主键
     * @return 是否成功
     */
    boolean deleteById(Integer userid);
    /**
     * 批量删除
     *
     * @return
     */
    boolean deleteByIds(List<Userinfo> userinfoList);

}

serviceimpl

package com.aaa.qy156.service.impl;

import com.aaa.qy156.dao.UserinfoDao;
import com.aaa.qy156.entity.Userinfo;
import com.aaa.qy156.service.UserinfoService;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageImpl;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

/**
 * (Userinfo)表服务实现类
 *
 * @author makejava
 * @since 2022-10-08 08:43:44
 */
@Service("userinfoService")
public class UserinfoServiceImpl implements UserinfoService {
    @Resource
    private UserinfoDao userinfoDao;

    /**
     * 通过ID查询单条数据
     *
     * @param userid 主键
     * @return 实例对象
     */
    @Override
    public Userinfo queryById(Integer userid) {
        return this.userinfoDao.queryById(userid);
    }

    @Override
    public List<Userinfo> queryAll() {
        return this.userinfoDao.queryAll();
    }

    @Override
    public List<Userinfo> queryByCondition(Userinfo userinfo) {
        return this.userinfoDao.queryByCondition(userinfo);
    }

    /**
     * 分页查询
     *
     * @param userinfo 筛选条件
     * @param pageRequest      分页对象
     * @return 查询结果
     */
    @Override
    public Page<Userinfo> queryByPage(Userinfo userinfo, PageRequest pageRequest) {
        long total = this.userinfoDao.count(userinfo);
        return new PageImpl<>(this.userinfoDao.queryAllByLimit(userinfo, pageRequest), pageRequest, total);
    }

    /**
     * 新增数据
     *
     * @param userinfo 实例对象
     * @return 实例对象
     */
    @Override
    public Userinfo insert(Userinfo userinfo) {
        this.userinfoDao.insert(userinfo);
        return userinfo;
    }

    /**
     * 修改数据
     *
     * @param userinfo 实例对象
     * @return 实例对象
     */
    @Override
    public Userinfo update(Userinfo userinfo) {
        this.userinfoDao.update(userinfo);
        return this.queryById(userinfo.getUserid());
    }

    /**
     * 通过主键删除数据
     *
     * @param userid 主键
     * @return 是否成功
     */
    @Override
    public boolean deleteById(Integer userid) {
        return this.userinfoDao.deleteById(userid) > 0;
    }

    @Override
    public boolean deleteByIds(List<Userinfo> userinfoList) {
        if(userinfoList.size()>0){
            for (Userinfo userinfo : userinfoList) {
                Integer userid = userinfo.getUserid();
                boolean deleteById = deleteById(userid);
                if(!deleteById){
                    return false;
                }
            }
            return true;
        }
        return false;
    }
}

dao

package com.aaa.qy156.dao;

import com.aaa.qy156.entity.Userinfo;
import org.apache.ibatis.annotations.Param;
import org.springframework.data.domain.Pageable;

import java.util.List;

/**
 * (Userinfo)表数据库访问层
 *
 * @author makejava
 * @since 2022-10-08 08:43:43
 */

public interface UserinfoDao {

    /**
     * 通过ID查询单条数据
     *
     * @param userid 主键
     * @return 实例对象
     */
    Userinfo queryById(Integer userid);

    List<Userinfo> queryAll();
    List<Userinfo> queryByCondition(Userinfo userinfo);

    /**
     * 查询指定行数据
     *
     * @param userinfo 查询条件
     * @param pageable         分页对象
     * @return 对象列表
     */
    List<Userinfo> queryAllByLimit(@Param("userinfo") Userinfo userinfo, @Param("pageable") Pageable pageable);

    /**
     * 统计总行数
     *
     * @param userinfo 查询条件
     * @return 总行数
     */
    long count(Userinfo userinfo);

    /**
     * 新增数据
     *
     * @param userinfo 实例对象
     * @return 影响行数
     */
    int insert(Userinfo userinfo);

    /**
     * 批量新增数据（MyBatis原生foreach方法）
     *
     * @param entities List<Userinfo> 实例对象列表
     * @return 影响行数
     */
    int insertBatch(@Param("entities") List<Userinfo> entities);

    /**
     * 批量新增或按主键更新数据（MyBatis原生foreach方法）
     *
     * @param entities List<Userinfo> 实例对象列表
     * @return 影响行数
     * @throws org.springframework.jdbc.BadSqlGrammarException 入参是空List的时候会抛SQL语句错误的异常，请自行校验入参
     */
    int insertOrUpdateBatch(@Param("entities") List<Userinfo> entities);

    /**
     * 修改数据
     *
     * @param userinfo 实例对象
     * @return 影响行数
     */
    int update(Userinfo userinfo);

    /**
     * 通过主键删除数据
     *
     * @param userid 主键
     * @return 影响行数
     */
    int deleteById(Integer userid);
}

entity

package com.aaa.qy156.entity;

import lombok.Data;

import java.util.Date;
import java.io.Serializable;

/**
 * (Userinfo)实体类
 *
 * @author makejava
 * @since 2022-10-08 08:43:43
 */
@Data
public class Userinfo implements Serializable {
    private static final long serialVersionUID = 817541965266845457L;
    /**
     * ID
     */
    private Integer userid;
    /**
     * 部门
     */
    private Integer deptid;
    /**
     * 真实姓名
     */
    private String username;
    /**
     * 邮箱
     */
    private String email;
    /**
     * 电话
     */
    private String phonenumber;
    /**
     * 性别(1男 0女)
     */
    private String sex;
    /**
     * 头像
     */
    private String avatar;
    /**
     * 密码
     */
    private String password;
    /**
     * 盐值
     */
    private String salt;
    /**
     * 状态（1正常 2停用）
     */
    private String status;
    /**
     * 删除标记（1正常 2删除）
     */
    private String delFlag;
    /**
     * 创建人
     */
    private String createBy;
    /**
     * 创建时间
     */
    private Date createTime;
    /**
     * 修改人
     */
    private String updateBy;
    /**
     * 修改时间
     */
    private Date updateTime;
    /**
     * 备注
     */
    private String remark;
    /**
     * 角色id
     */
    private Integer roleId;
}

xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.aaa.qy156.dao.UserinfoDao">

    <resultMap type="com.aaa.qy156.entity.Userinfo" id="UserinfoMap">
        <result property="userid" column="userid" jdbcType="INTEGER"/>
        <result property="deptid" column="deptid" jdbcType="INTEGER"/>
        <result property="username" column="username" jdbcType="VARCHAR"/>
        <result property="email" column="email" jdbcType="VARCHAR"/>
        <result property="phonenumber" column="phonenumber" jdbcType="VARCHAR"/>
        <result property="sex" column="sex" jdbcType="VARCHAR"/>
        <result property="avatar" column="avatar" jdbcType="VARCHAR"/>
        <result property="password" column="password" jdbcType="VARCHAR"/>
        <result property="salt" column="salt" jdbcType="VARCHAR"/>
        <result property="status" column="status" jdbcType="VARCHAR"/>
        <result property="delFlag" column="del_flag" jdbcType="VARCHAR"/>
        <result property="createBy" column="create_by" jdbcType="VARCHAR"/>
        <result property="createTime" column="create_time" jdbcType="TIMESTAMP"/>
        <result property="updateBy" column="update_by" jdbcType="VARCHAR"/>
        <result property="updateTime" column="update_time" jdbcType="TIMESTAMP"/>
        <result property="remark" column="remark" jdbcType="VARCHAR"/>
        <result property="roleId" column="role_id" jdbcType="INTEGER"/>
    </resultMap>

    <!--查询单个-->
    <select id="queryById" resultMap="UserinfoMap">
        select
          userid, deptid, username, email, phonenumber, sex, avatar, password, salt, status, del_flag, create_by, create_time, update_by, update_time, remark, role_id
        from userinfo
        where userid = #{userid}
    </select>

    <!--查询指定行数据-->
    <select id="queryAllByLimit" resultMap="UserinfoMap">
        select
          userid, deptid, username, email, phonenumber, sex, avatar, password, salt, status, del_flag, create_by, create_time, update_by, update_time, remark, role_id
        from userinfo
        <where>
            <if test="userinfo.userid != null">
                and userid = #{userinfo.userid}
            </if>
            <if test="userinfo.deptid != null">
                and deptid = #{userinfo.deptid}
            </if>
            <if test="userinfo.username != null and userinfo.username != ''">
                and username = #{userinfo.username}
            </if>
            <if test="userinfo.email != null and userinfo.email != ''">
                and email = #{userinfo.email}
            </if>
            <if test="userinfo.phonenumber != null and userinfo.phonenumber != ''">
                and phonenumber = #{userinfo.phonenumber}
            </if>
            <if test="userinfo.sex != null and userinfo.sex != ''">
                and sex = #{userinfo.sex}
            </if>
            <if test="userinfo.avatar != null and userinfo.avatar != ''">
                and avatar = #{userinfo.avatar}
            </if>
            <if test="userinfo.password != null and userinfo.password != ''">
                and password = #{userinfo.password}
            </if>
            <if test="userinfo.salt != null and userinfo.salt != ''">
                and salt = #{userinfo.salt}
            </if>
            <if test="userinfo.status != null and userinfo.status != ''">
                and status = #{userinfo.status}
            </if>
            <if test="userinfo.delFlag != null and userinfo.delFlag != ''">
                and del_flag = #{userinfo.delFlag}
            </if>
            <if test="userinfo.createBy != null and userinfo.createBy != ''">
                and create_by = #{userinfo.createBy}
            </if>
            <if test="userinfo.createTime != null">
                and create_time = #{userinfo.createTime}
            </if>
            <if test="userinfo.updateBy != null and userinfo.updateBy != ''">
                and update_by = #{userinfo.updateBy}
            </if>
            <if test="userinfo.updateTime != null">
                and update_time = #{userinfo.updateTime}
            </if>
            <if test="userinfo.remark != null and userinfo.remark != ''">
                and remark = #{userinfo.remark}
            </if>
            <if test="userinfo.roleId != null">
                and role_id = #{userinfo.roleId}
            </if>
        </where>
        limit #{pageable.offset}, #{pageable.pageSize}
    </select>

    <!--统计总行数-->
    <select id="count" resultType="java.lang.Long">
        select count(1)
        from userinfo
        <where>
            <if test="userid != null">
                and userid = #{userid}
            </if>
            <if test="deptid != null">
                and deptid = #{deptid}
            </if>
            <if test="username != null and username != ''">
                and username = #{username}
            </if>
            <if test="email != null and email != ''">
                and email = #{email}
            </if>
            <if test="phonenumber != null and phonenumber != ''">
                and phonenumber = #{phonenumber}
            </if>
            <if test="sex != null and sex != ''">
                and sex = #{sex}
            </if>
            <if test="avatar != null and avatar != ''">
                and avatar = #{avatar}
            </if>
            <if test="password != null and password != ''">
                and password = #{password}
            </if>
            <if test="salt != null and salt != ''">
                and salt = #{salt}
            </if>
            <if test="status != null and status != ''">
                and status = #{status}
            </if>
            <if test="delFlag != null and delFlag != ''">
                and del_flag = #{delFlag}
            </if>
            <if test="createBy != null and createBy != ''">
                and create_by = #{createBy}
            </if>
            <if test="createTime != null">
                and create_time = #{createTime}
            </if>
            <if test="updateBy != null and updateBy != ''">
                and update_by = #{updateBy}
            </if>
            <if test="updateTime != null">
                and update_time = #{updateTime}
            </if>
            <if test="remark != null and remark != ''">
                and remark = #{remark}
            </if>
            <if test="roleId != null">
                and role_id = #{roleId}
            </if>
        </where>
    </select>
    <select id="queryAll" resultType="com.aaa.qy156.entity.Userinfo">
        select
          userid, deptid, username, email, phonenumber, sex, avatar, password, salt, status, del_flag, create_by, create_time, update_by, update_time, remark, role_id
        from userinfo
    </select>
    <select id="queryByCondition" resultType="com.aaa.qy156.entity.Userinfo">
        select * from userinfo
        <where>
            <if test="userid != null">
                and userid = #{userid}
            </if>
            <if test="deptid != null">
                and deptid = #{deptid}
            </if>
            <if test="username != null and username != ''">
                and username = #{username}
            </if>
            <if test="email != null and email != ''">
                and email = #{email}
            </if>
            <if test="phonenumber != null and phonenumber != ''">
                and phonenumber = #{phonenumber}
            </if>
            <if test="sex != null and sex != ''">
                and sex = #{sex}
            </if>
            <if test="avatar != null and avatar != ''">
                and avatar = #{avatar}
            </if>
            <if test="password != null and password != ''">
                and password = #{password}
            </if>
            <if test="salt != null and salt != ''">
                and salt = #{salt}
            </if>
            <if test="status != null and status != ''">
                and status = #{status}
            </if>
            <if test="delFlag != null and delFlag != ''">
                and del_flag = #{delFlag}
            </if>
            <if test="createBy != null and createBy != ''">
                and create_by = #{createBy}
            </if>
            <if test="createTime != null">
                and create_time = #{createTime}
            </if>
            <if test="updateBy != null and updateBy != ''">
                and update_by = #{updateBy}
            </if>
            <if test="updateTime != null">
                and update_time = #{updateTime}
            </if>
            <if test="remark != null and remark != ''">
                and remark = #{remark}
            </if>
            <if test="roleId != null">
                and role_id = #{roleId}
            </if>
        </where>
    </select>

    <!--新增所有列-->
    <insert id="insert" keyProperty="userid" useGeneratedKeys="true">
        insert into userinfo(deptid, username, email, phonenumber, sex, avatar, password, salt, status, del_flag, create_by, create_time, update_by, update_time, remark, role_id)
        values (#{deptid}, #{username}, #{email}, #{phonenumber}, #{sex}, #{avatar}, #{password}, #{salt}, #{status}, #{delFlag}, #{createBy}, #{createTime}, #{updateBy}, #{updateTime}, #{remark}, #{roleId})
    </insert>

    <insert id="insertBatch" keyProperty="userid" useGeneratedKeys="true">
        insert into userinfo(deptid, username, email, phonenumber, sex, avatar, password, salt, status, del_flag, create_by, create_time, update_by, update_time, remark, role_id)
        values
        <foreach collection="entities" item="entity" separator=",">
        (#{entity.deptid}, #{entity.username}, #{entity.email}, #{entity.phonenumber}, #{entity.sex}, #{entity.avatar}, #{entity.password}, #{entity.salt}, #{entity.status}, #{entity.delFlag}, #{entity.createBy}, #{entity.createTime}, #{entity.updateBy}, #{entity.updateTime}, #{entity.remark}, #{entity.roleId})
        </foreach>
    </insert>

    <insert id="insertOrUpdateBatch" keyProperty="userid" useGeneratedKeys="true">
        insert into userinfo(deptid, username, email, phonenumber, sex, avatar, password, salt, status, del_flag, create_by, create_time, update_by, update_time, remark, role_id)
        values
        <foreach collection="entities" item="entity" separator=",">
            (#{entity.deptid}, #{entity.username}, #{entity.email}, #{entity.phonenumber}, #{entity.sex}, #{entity.avatar}, #{entity.password}, #{entity.salt}, #{entity.status}, #{entity.delFlag}, #{entity.createBy}, #{entity.createTime}, #{entity.updateBy}, #{entity.updateTime}, #{entity.remark}, #{entity.roleId})
        </foreach>
        on duplicate key update
        deptid = values(deptid),
        username = values(username),
        email = values(email),
        phonenumber = values(phonenumber),
        sex = values(sex),
        avatar = values(avatar),
        password = values(password),
        salt = values(salt),
        status = values(status),
        del_flag = values(del_flag),
        create_by = values(create_by),
        create_time = values(create_time),
        update_by = values(update_by),
        update_time = values(update_time),
        remark = values(remark),
        role_id = values(role_id)
    </insert>

    <!--通过主键修改数据-->
    <update id="update">
        update userinfo
        <set>
            <if test="deptid != null">
                deptid = #{deptid},
            </if>
            <if test="username != null and username != ''">
                username = #{username},
            </if>
            <if test="email != null and email != ''">
                email = #{email},
            </if>
            <if test="phonenumber != null and phonenumber != ''">
                phonenumber = #{phonenumber},
            </if>
            <if test="sex != null and sex != ''">
                sex = #{sex},
            </if>
            <if test="avatar != null and avatar != ''">
                avatar = #{avatar},
            </if>
            <if test="password != null and password != ''">
                password = #{password},
            </if>
            <if test="salt != null and salt != ''">
                salt = #{salt},
            </if>
            <if test="status != null and status != ''">
                status = #{status},
            </if>
            <if test="delFlag != null and delFlag != ''">
                del_flag = #{delFlag},
            </if>
            <if test="createBy != null and createBy != ''">
                create_by = #{createBy},
            </if>
            <if test="createTime != null">
                create_time = #{createTime},
            </if>
            <if test="updateBy != null and updateBy != ''">
                update_by = #{updateBy},
            </if>
            <if test="updateTime != null">
                update_time = #{updateTime},
            </if>
            <if test="remark != null and remark != ''">
                remark = #{remark},
            </if>
            <if test="roleId != null">
                role_id = #{roleId},
            </if>
        </set>
        where userid = #{userid}
    </update>

    <!--通过主键删除-->
    <delete id="deleteById">
        delete from userinfo where userid = #{userid}
    </delete>
</mapper>