Mybatis+ElementUi+前后端分离

1、mybatis的配置

1.1 多对一的配置

① 关联查询（用得多）：就是left join…

<!--
1、在查询的一张表中，出现关联关系，就需要映射规则。ps:数据库字段名和实体类字段对应不上也需要用映射规则
    association:关联对象使用这个
        property：在映射的这个类里面，字段的属性
        javaType：关联的这个字段，在java里面是什么类型的
        column：数据库查询出来的名称（这里取里别名，所以数据库里面就是别名的名称）
        property：在对应的java里面存在的类型

    注意：如果配置了关联映射，那么自己中的字段也需要重新进行映射
 -->
<resultMap id="findByJoin" type="Employee">
    <id column="id" property="id"/>
    <result column="name" property="name"/>
    <association property="detpId" javaType="Dept">
		<!--column：取的别名的列 -->
        <id column="did" property="id"/>
        <result column="dname" property="name"/>
    </association>
	<!--如何还有关联字段就继续配置-->
	<association property="..." javaType="...">
		...
	</association>
</resultMap>

<!--关联查询-->
<select id="findByDept" resultMap="findByJoin">
    SELECT e.id,e.name,e.dept_id,d.id did,d.name dname FROM employee e JOIN dept d ON e.dept_id=d.id
</select>

②子查询（了解）

①多方配置
<!--
    把数据库中dept_id列的值，封装到java里面这个detpId属性里面。并把值放到下面要查询的一方里面，到一方进行查询
    select：通过唯一表示+id找到一方查询出来的值,并封装到这个detpId属性里面
 -->
<resultMap id="finByAll" type="Employee">
    <id column="id" property="id"/>
    <result column="name" property="name"/>
    <association property="detpId" column="dept_id"
                 select="cn.itsource.man2one.mapper.DeptMapper.finAll"/>
</resultMap>

<!--子查询-->
<select id="findSonByDept" resultMap="finByAll">
    SELECT * FROM employee
</select>


②一方配置
<!--子查询使用（一方正常查询） 根据多方传来的id查询-->
<select id="finAll" resultType="Dept">
    SELECT * FROM dept WHERE id=#{id}
</select>

1.2 一对多的配置

①一对多的关联查询

**注意：一对多关联查询不能和分页结合来使用
原因：因为查询出来的前面数据都是一方的，一对多如果要进行分页只能使用子查询**


<!--
    1、在查询的一张表中，出现关联关系，就需要映射规则
    2、只要是关联映射，就需要把自己的字段也写出来

    映射集合要使用collection
        collection:一对多关联对象就用这个
        property：当前类中的属性
        ofType：一对多中，对应的类型
 -->
<resultMap id="deptMap" type="Dept">
    <id column="id" property="id"/>
    <result column="name" property="name"/>
    <collection property="employees" ofType="Employee">
        <id column="eid" property="id"/>
        <result column="ename" property="name"/>
    </collection>
</resultMap>

<!--关联查询（链表查询）   一对多关联查询需要使用 ORDER BY 进行排序,否则查询查理的数据会冲突-->
<select id="finAll" resultMap="deptMap">
    SELECT d.id,d.name,e.id eid,e.name ename FROM dept d JOIN employee e on d.id=e.dept_id ORDER BY d.id
</select>

② 一对多的子查询（了解）

①多方配置
<!--子查询：根据id 进行查询-->
<select id="selectByDeptId" parameterType="long" resultType="Employee">
    SELECT * FROM employee WHERE dept_id=#{deptId}
</select>


②一方配置
<!--子查询：将dept这个类里面的employees这个属性里的id传到方进行查询-->
<resultMap id="finByDeptAllMap" type="Dept">
    <id column="id" property="id"/>
    <result column="name" property="name"/>
    <collection property="employees" ofType="Employee" column="id" select="cn.itsource.one2many.mapper.EmployeeMapper.selectByDeptId"/>
</resultMap>

<!--子查询-->
<select id="finByDeptAll" resultMap="finByDeptAllMap">
    SELECT * FROM dept
</select>

1.3 保存时返回主键的问题

添加三个属性
<!--
    添加时得到主键：
        useGeneratedKeys：是否返回主键id
        keyColumn:需要映射的数据库中的字段
        keyProperty:映射到数据库中对应的属性里
-->
<insert id="save" parameterType="Employee" useGeneratedKeys="true" keyColumn="id" keyProperty="id">
    INSERT INTO emplyee(name, dept_id) VALUES (#{name},#{deptId})
</insert>

1.4 标签的使用

①条件查询使用where标签

<!--
       where标签：会将里面第一个and转换成where条件
       if标签：判断非空性
       <![CDATA[数据]]>：相当于转意符的意思
 -->

<select id="finByQuery" resultMap="columnMap" parameterType="EmployeeQuery">
    	  SELECT * FROM emplyee
      <where>
    		<if test="name!=null and name!=''">
        		AND name LIKE "%"#{name}"%"
    		</if>
    		<if test="minAge!=null">
        		AND age>=#{minAge}
    		</if>
    		<if test="maxAge!=null">
        		<![CDATA[AND age<=#{maxAge}]]>
    		</if>
	  </where>
</select>
-------------------------------------------------------------
注意：抽取where添加语句
4.1 使用sql标签
<sql id="employeeSql">
    <where>
        <if test="name!=null and name!=''">
            AND name LIKE "%"#{name}"%"
        </if>
        ..........
    </where>
</sql>

4.2 要使用抽取的标签，使用include标签
<!--
      include：引用sql标签
-->
<select id="finByQuery" resultMap="columnMap" parameterType="EmployeeQuery">
    SELECT * FROM emplyee
    <include refid="employeeSql"/>
</select>

②批量删除使用foreach 标签

<!--
   一： 批量删除  数组
	
    传入的是一个Long类型的数组
	使用foreach 标签
    使用关键字：in(1,5,3...)   括号里面匹配上的就进行删除
    collection：表示需要操做的是数组还是集合
    open：刚开始是什么。括号 (
    item：循环出来的数据
    separator：以什么分割
    close：结尾是什么。括号 )

    foreach里面取循环出来的数据
-->
<delete id="batchDel" parameterType="long[]">
    DELETE FROM emplyee WHERE id in
    <foreach collection="array" open="(" item="i" separator="," close=")">
        #{i}
    </foreach>
</delete>


---------------------------------------------------------

<!--
    二：批量删除  集合
       遍历出来的是一个个的对象，要使用里面的id属性
-->
<delete id="batchDelList" parameterType="list">
    DELETE FROM emplyee WHERE id in
    <foreach collection="list" open="(" item="e" separator="," close=")">
        #{e.id}
    </foreach>
</delete>

③ 批量添加

<!--批量添加-->
<insert id="batchSave" parameterType="list">
    INSERT INTO emplyee(name, dept_id, age) VALUES
    <foreach collection="list" item="e" separator=",">
        (#{e.name},#{e.deptId},#{e.age})
    </foreach>
</insert>

④动态修改（解决修改时数据丢失问题）使用set标签

使用set标签
<!--
    动态修改
     使用set标签，会在第一个参数前面加上set  会把最后一个逗号去掉
-->
<update id="update" parameterType="Employee">
    UPDATE employee
    <set>
        <if test="name!=null and name!=''">
            name=#{name},
        </if>
        <if test="detpId!=null and detpId.id!=null">
            dept_id=#{detpId.id},
        </if>
    </set>
    WHERE id=#{id}
</update>

2、ElementUi的使用

2.1 axios提交语法

this.$http.post("/user/list",参数).then(res => { 
  //返回结果

})

2.2 elementUi进行对象保存（类似于员工和部门）

let param={
    "id":thisid,
    "name":this.name,
    "payId":{ //员工里面对象的部门属性
id:this.payId  //传入需要保存的id值
} //保存对象
};
this.$http.put("/setted/save",param).then((res) => {

}

2.3 4、下拉框选择框回显

<el-form :model="form" label-width="80px" :rules="addFormRules" ref="addForm">  
    <el-form-item label="维修人员" prop="user">
/*
//传到后台内容
form:{
    				user:{id:""},
			},
*/
//传到后台的内容（对象id）（回显就把编辑的一行的下拉框数据id回显这里面的id）
        <el-select v-model="form.user.id" clearable> 
            <el-option v-for="user in userArray"    //进行遍历需要展示的内容（里面包含id和name）
                       :label="user.name"  //展示类容
                       :value="user.id"  //下拉框展示内容的id
            />
        </el-select>
    </el-form-item>
</el-form>

2、 上面的form双向绑定对象
form:{
    id:””,
	name:””,
    user:{  //双向绑定对象，到时候提交的时候提交的就是对象，sql语句里面只需要去id来保存即可
		id:"",
		name:””
	},
},

3、前后端分离接收数据使用的注解

3.1 封装对象或者集合 @RequestBody

如果前台封装的是一个对象或者集合，那么就需要在被访问的controller方法的参数前面加上@RequestBody注解，他能把前台json格式的数据 {“xx”:”aa”} 转换成java格式的：属性=值。

例：
@RequestMapping(value = "/save",method = RequestMethod.PUT)
@ResponseBody
public AjaxResult save(@RequestBody Department department){

}

3.2 封装单个字段或者属性 @PathVariable

如果前台传入的是属性，如：id 等等， 那么就需要使用这个注解@PathVariable

例：
他能把路径里restful风格里id的值，赋值给后面Long属性的id里面
@RequestMapping(value = "/delete/{id}",method = RequestMethod.DELETE)
@ResponseBody
public AjaxResult delete(@PathVariable("id") Long id){

}