简单CRUD

样式不能用，less-loader 版本高导致的，卸载之前的版本，下载 npm install less-loader@5.0.0

1.登录

登录
获取前台提交的用户名和密码，封装到user对象中，前后台逻辑就通了，之后就是调用dao层，完成数据库的操作，根据数据库的结果反馈给前台页面。

 //1.验证校验规则
            this.$refs.loginFormRef.validate(async valid => {
              if (!valid) return;//验证失败
              // 
               const {data :res} = await this.$http.post("login",this.loginForm);//访问后台
              if (res.flag== "ok") {
                

根据数据库查出来的信息，接下来就是把数据传送到前台，前台进行解析。

验证不成功，就退出

 login() {
            //1.验证校验规则，通过form表单对象来完成   表单对象 （this.$refs.loginFormRef）
            this.$refs.loginFormRef.validate(valid=>{
             console.log(valid);
              if(!valid)  return;
              
            })

2.分页查询

1.后端

编写用户查询的DAO层

public interface EmpDao {
    //查询所有信息
    public List<Emp>  getAllEmp(@Param("username")String username,@Param("pageStart") int pageStart, @Param("pageSize") int pageSize);

    public int getEmpCounts(@Param("username") String username);

}

配置映射文件

 <!--分页查询-->
    <select id="getAllEmp" resultType="com.ma.bean.Emp">
        SELECT * FROM emp
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
        LIMIT #{pageStart},#{pageSize}
    </select>

    <select id="getEmpCounts" resultType="java.lang.Integer">
        SELECT count(*) FROM emp
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
    </select>

查询和分页的参数封装一个实体，根据用户名模糊查询。

package com.ma.bean;

public class QueryInfo {
    private String query;//查询信息 username
    private int pageNum=1;//当前页面
    private int pageSize=1;//每页最大数

    public QueryInfo() {
    }

    public QueryInfo(String query, int pageNum, int pageSize) {
        this.query = query;
        this.pageNum = pageNum;
        this.pageSize = pageSize;
    }

    public String getQuery() {
        return query;
    }

    public int getPageNum() {
        return pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setQuery(String query) {
        this.query = query;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    @Override
    public String toString() {
        return "QueryInfo{" +
                "query='" + query + '\'' +
                ", pageNum=" + pageNum +
                ", pageSize=" + pageSize +
                '}';
    }
}

编写controller层

public class EmpController {
    @Autowired
    private EmpDao empDao;

    @CrossOrigin
    @RequestMapping("/allEmp")

    public String getEmpList(QueryInfo queryInfo){//查询和分页的参数封装一个实体
        System.out.println(queryInfo);
        //获取最大列表数和当前编号
        int numbers = empDao.getEmpCounts("%"+queryInfo.getQuery()+"%");// 获取数据总数
        int pageStart = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();
        List<Emp> emps = empDao.getAllEmp("%"+queryInfo.getQuery()+"%",pageStart,queryInfo.getPageSize());
        System.out.println(emps);
        HashMap<String, Object> res = new HashMap<>();
        res.put("numbers",numbers);
        res.put("data",emps);
        // System.out.println("总条数："+numbers);
        System.out.println(res);
        String users_json = JSON.toJSONString(res);
        return users_json;
    }
}

2.前端（vue element -ui）

查询信息实体，把查询数据封装到实体中

data( ) {
        return{
            //查询信息实体
            queryInfo:{
                query:"",//查询信息
                pageNum: 1,//当前页
                pageSize: 5,
        
            },
            empList:[],
            total:0,

        }
    },
    methods:{
        //获取所有用户
        async getEmpList() {
            console.log(111);
         const  {data:res}  = await this.$http.get("allEmp",{params:this.queryInfo});//这里用了get请求
            this.empList=res.data;
            this.total=res.numbers;
            console.log(res.numbers);
        },
            // 监听pageSize改变的事件
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getEmpList(); // 数据发生改变重新申请数据
        },
        // 监听pageNum改变的事件
        handleCurrentChange(newPage) {
          this.queryInfo.pageNum = newPage;
          this.getEmpList(); // 数据发生改变重新申请数据
        },

    },

3.添加用户

1.后端

//dao层
    public int addEmp(Emp emp);
    //mapping 映射文件
 <insert id="addEmp">
        INSERT INTO emp
        (username,job_id,salary,dept_id,state, role)
        VALUE
        (#{username},#{job_id},#{salary},#{dept_id} ,#{state},#{role})
    </insert>
    //添加的controller,用户状态和角色，直接在这里面添加。
  @RequestMapping("/addEmp")
    public String addUser(@RequestBody Emp emp){
         System.out.println(emp);

       emp.setState(false);
        emp.setRole("普通用户");
        int i = empDao.addEmp(emp);
        String str = i >0?"success":"error";
        return str;
    }

2.前端

先设置用户对话框不显示

 addDialogVisible: false, // 对话框显示

新增用户按钮

<!-- 添加用户 -->
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>

新增用户对话框

 <!-- 新增用户对话框 -->
           <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%"
          @close="addDialogClosed">
            <!-- 内容主体区域 -->
            <el-form :model="addForm" :rules="addFormRules"
              ref="addFormRef" label-width="70px">
              <!-- 用户名 -->
              <el-form-item label="用户名" prop="username">
                <el-input v-model="addForm.username"></el-input>
              </el-form-item>
              <!-- 工作编号 -->
              <el-form-item label="工作编号" prop="job_id">
                <el-input v-model="addForm.job_id"></el-input>
              </el-form-item>
              <!-- 薪水 -->
              <el-form-item label="薪水" prop="salary">
                <el-input v-model="addForm.salary"></el-input>
              </el-form-item>

              <el-form-item label="部门编号" prop="job_id">
                <el-input v-model="addForm.dept_id"></el-input>
              </el-form-item>
            </el-form>
            <!-- 内容底部区域 -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="addDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
          </el-dialog>

    </div>

用于数据封装，前台添加的用户封装到addForm中,

export default {
    created(){
        this.getEmpList();//更新列表
    },
    data( ) {
        return{
            empList:[],
            total:0,
             addDialogVisible: false, // 对话框显示

             // 验证规则
      addFormRules:{
        username:[
           { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
        ],
        },
          // 添加用户表单项
                addForm: {
                  username: "",
                  job_id: "",
                  salary: "",
                  dept_id:"",
                },
        }

监听添加用户，前台请求后台，把数据插入，插入之后，隐藏插入对话框，更新emplist

 // 监听添加用户
          addDialogClosed(){
            this.$refs.addFormRef.resetFields();// 重置表单项
          },
        // 添加用户
      addUser(){
        this.$refs.addFormRef.validate(async valid =>{
        console.log(valid);
        if( !valid ) return;
        // 发起请求
        const {data:res} = await this.$http.post("addEmp",this.addForm);
        if (res != "success") {
        userinfo.state = !userinfo.state;
        return this.$message.error("操作失败！！！");
        }
        this.$message.success("操作成功！！！");
        //隐藏
        this.addDialogVisible = false;
        this.getEmpList();
      })

4.查询每个部门的员工

1.后端

由于部门和员工是一对多关系，首先写关系映射

public class Dept {
    private  int id;
    private  String dname;
    private String location;
    //一对多关系映射，主表实体应该包含从表实体的集合引用
    private List<Emp> emps;

    public Dept() {
    }

    public Dept(String dname, String location, List<Emp> emps) {
        this.dname = dname;
        this.location = location;
        this.emps = emps;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getDname() {
        return dname;
    }

    public void setDname(String dname) {
        this.dname = dname;
    }

    public String getLocation() {
        return location;
    }

    public void setLocation(String location) {
        this.location = location;
    }

    public List<Emp> getEmps() {
        return emps;
    }

    public void setEmps(List<Emp> emps) {
        this.emps = emps;
    }

    @Override
    public String toString() {
        return "Dept{" +
                "id=" + id +
                ", dname='" + dname + '\'' +
                ", location='" + location + '\'' +
                ", emps=" + emps +
                '}';
    }
}

编写查询方法

 /**
     * 查询所有部门,同时获取到所有员工信息
     * @return
     */
    List<Dept> findAll(@Param("id")  Integer id);
编写mapping 映射查询方法
 <!--查询一个部门里面的人-->
    <!--定义emp的resultMap-->
    <resultMap id="deptEmpMap" type="com.ma.bean.Dept">
        <id property="id" column="id"></id>
        <result property="dname" column="dname"></result>
        <result property="location" column="location"></result>
        <!--配置dept对象中emps集合的映射-->
        <collection property="emps" ofType="com.ma.bean.Emp" >
            <id property="id" column="sid"></id>
            <result property="username" column="username"></result>
            <result property="job_id" column="job_id"></result>
            <result property="salary" column="salary"></result>
            <result property="state" column="state"></result>
            <result property="role" column="role"></result>
        </collection>
    </resultMap>

    <!-- 查询部门里的人 -->
    <select id="findAll" resultMap="deptEmpMap">
      select d.*, e.id as sid ,e.username,  e.job_id,e.salary ,e.state ,e.role from dept d,emp e WHERE d.id=e.dept_id and  d.id=#{id} ;
    </select>

编写controller 方法

 @RequestMapping("/alldeptuser/{id}")
    public  String  getAlldept(@PathVariable("id") Integer id){
        List<Dept> all = deptDao.findAll(id);
        System.out.println(all);
        HashMap<String, Object> res = new HashMap<>();

        res.put("data",all);
        System.out.println(res);
        String users_json = JSON.toJSONString(res);
        return users_json;
    }

2.前端

 <!-- 查询部门员工按钮 -->
            <el-button  type="primary"   size="mini" @click="showAllUser(scope.row.id)">查询部门员工</el-button>


//将部门id传到deptuser页面
         showAllUser(id){
        this.$router.push( {
           path: "/deptuser",
          query:{
             deptid:id,
           }
        });//页面路由跳转

取到路由带过来的参数

sync getParams() {
        // 取到路由带过来的参数
        const id = this.$route.query.deptid
        console.log(id);
//访问后台，后台携带数据返回
        const  {data:res}  = await this.$http.post(`alldeptuser/${id}`);
            this.empList=res.data;
            console.log(res.data[0].emps[0].username);



    },

5.注册功能，在后端实现查询出用户，就不能注册

注册后端逻辑，和添加非常相似，主要就是添加一个查询用户名的功能，如果用户名存在就返回页面用户名已存在。

验证完成前端验证，两次密码输入不一致，就报错。

  密码
                     <el-input v-model="registerForm.password" prefix-icon="iconfont  iconmima" type="password" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item  prop="checkPass">
                   确认密码
                     <el-input v-model="registerForm.checkPass" prefix-icon="iconfont  iconmima" type="password" autocomplete="off"></el-input>
                  </el-form-item>
 //表单数据对象
            registerForm:{
                username:'马老师',
                password:'12345',
                checkPass: '12345',
                
            },
            
      加入验证函数 
       var validatePass = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                if (this.registerForm.checkPass !== '') {
                  this.$refs.registerFormRef.validateField('checkPass');
                }
                callback();
              }
            };
            var validatePass2 = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            };
          

后端

   //注册功能的查询
    public User  getUsername(@Param("username") String username);
    
       <!--注册  查询用户的名字-->
    <select id="getUsername" resultType="com.ma.bean.User">
        SELECT *FROM user
       	WHERE username=#{username}
    </select>
     //根据用户名查询
    @RequestMapping("/selectUser")
    public String selectUser(@RequestBody User user){
        String flag="error";
        User us = userDao.getUsername(user.getUsername());
        System.out.println(us);
        HashMap<String, Object> res = new HashMap<>();
        if(us!=null){
            flag="ok";
        }
        res.put("flag",flag);
        String res_json = JSON.toJSONString(res);
        return res_json;

    }

前端

 submit() {
              this.$refs.registerFormRef.validate(async valid =>{
           // console.log(valid);
            if( !valid ) return; 
          const {data:res} = await  this.$http.post("selectUser",this.registerForm);
           
          if (res.flag =="ok") {
             console.log(res.flag);
          return this.$message.error("用户已存在！！！");
           }

          const {data:res1} = await this.$http.post("registerUser",this.registerForm);
          if (res1 != "success") {
          return this.$message.error("注册失败！！！");
           }
          this.$message.success("注册成功！！！");
         }); 
      },

6.登录功能，加入验证码验证。

总结问题,比如这里有个空格，就查询不出来，一定不能有空格，已经犯了两次错误。

挂在路由导航守卫，相当于过滤器的作用。
登陆页面，和注册页面都会放行

//挂载路由导航守卫 拦截器的作用
router.beforeEach((to,from,next)=>{
  //to 将要访问
  //from 从哪访问
  //next 接着干的事情 next(url) 重定向到url上next（）继续访问到to路径
  if(to.path=='/register' ) return next();//如果是注册页面也会放行

  if(to.path=='/login' ) return next();//如果是登录页面也会放行
  //获取user
  const userFlag= window.sessionStorage.getItem("user");//取出当前用户
  if(!userFlag) return next("/login"  );//无值，返回登录页面
  next();//符合要求 放行

})