014.回顾Mapper接口开发过程
1.index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>慕课网办公OA系统</title> <!-- 引入样式 --> <link rel="stylesheet" type="text/css" href="assets/element-plus/index.css"> <!-- 引入组件库 --> <script src="/assets/vue/vue.global.js"></script> <script src="/assets/element-plus/index.full.js"></script> <script src="/assets/axios/axios.js"></script> <style> .el-header { background-color: rgb(238, 241, 246); color: #333; line-height: 60px; } html,body,#app,.el-container { padding: 0px; margin: 0px; height: 100%; max-height: 100%; } </style> </head> <body> <div id="app"> <el-container style="height:100%;border:1px solid #eee"> <el-header> <el-row> <el-col :span="12"> <span style="font-size: 18px;color:darkcyan">慕课网办公OA系统</span> </el-col> <el-col :span="12" style="text-align:right"> <el-dropdown> <i class="el-icon-s-check" style="font-size:18px;margin-right: 15px"> <span style="margin-right: 15px">张三[研发工程师]</span> </i> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>注销</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </el-col> </el-row> </el-header> <el-container> <el-aside width="200px" style="max-height:100%;background-color: rgb(238, 241, 246)"> <!--默认展开第一个模块功能--> <el-menu :default-openeds="['0']"> <template v-for="(n,idx) in nodeList"> <el-submenu :index="idx.toString()"> <template #title><i class="el-icon-s-tools"></i>{{n.node.nodeName}}</template> <template v-for="func in n.children"> <el-menu-item :index="func.nodeId.toString()" v-on:click="showPage(func.url)">{{func.nodeName}}</el-menu-item> </template> </el-submenu> </template> </el-menu> </el-aside> <el-main> <iframe id="main" name="main" src="http://www.baidu.com" style="width:100%;height:95%;border: 0px"></iframe> </el-main> </el-container> </el-container> </div> <script> const Main = { data(){ return { nodeList:[] } } ,methods:{ showPage(url){ document.getElementById("main").src = url; } } ,mounted(){ const objApp = this; axios.get("/api/user_info?uid=" + sessionStorage.uid) .then(function(response){ const json = response.data; json.data.nodeList.forEach(function (item){ objApp.nodeList.push(item); }) console.info(objApp.nodeList); }) } }; const app = Vue.createApp(Main); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
2.增加数据表
-- ---------------------------- -- Table structure for adm_department -- ---------------------------- DROP TABLE IF EXISTS `adm_department`; CREATE TABLE `adm_department` ( `department_id` bigint(20) NOT NULL AUTO_INCREMENT, `department_name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL, PRIMARY KEY (`department_id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Records of adm_department -- ---------------------------- INSERT INTO `adm_department` VALUES (1, '总裁办'); INSERT INTO `adm_department` VALUES (2, '研发部'); INSERT INTO `adm_department` VALUES (3, '市场部'); -- ---------------------------- -- Table structure for adm_employee -- ---------------------------- DROP TABLE IF EXISTS `adm_employee`; CREATE TABLE `adm_employee` ( `employee_id` bigint(20) NOT NULL AUTO_INCREMENT, `name` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL, `department_id` bigint(20) NOT NULL, `title` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL, `level` int(255) NOT NULL, PRIMARY KEY (`employee_id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 11 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic; -- ---------------------------- -- Records of adm_employee -- ---------------------------- INSERT INTO `adm_employee` VALUES (1, '张晓涛', 1, '总经理', 8); INSERT INTO `adm_employee` VALUES (2, '齐紫陌', 2, '部门经理', 7); INSERT INTO `adm_employee` VALUES (3, '王美美', 2, '高级研发工程师', 6); INSERT INTO `adm_employee` VALUES (4, '宋彩妮', 2, '研发工程师', 5); INSERT INTO `adm_employee` VALUES (5, '欧阳峰', 2, '初级研发工程师', 4); INSERT INTO `adm_employee` VALUES (6, '张世豪', 3, '部门经理', 7); INSERT INTO `adm_employee` VALUES (7, '王子豪', 3, '大客户经理', 6); INSERT INTO `adm_employee` VALUES (8, '段峰', 3, '客户经理', 5); INSERT INTO `adm_employee` VALUES (9, '章雪峰', 3, '客户经理', 4); INSERT INTO `adm_employee` VALUES (10, '李莉', 3, '见习客户经理', 3);
3.增加员工实体类(com.imooc.oa.entity)Employee.java
package com.imooc.oa.entity; public class Employee { private Long employeeId; //员工编号 private String name; //姓名 private Long departmentId; //部门编号 private String title; //头衔/职务 private Integer level; //岗位级别 @Override public String toString() { return "Employee{" + "employeeId=" + employeeId + ", name='" + name + '\'' + ", departmentId=" + departmentId + ", title='" + title + '\'' + ", level=" + level + '}'; } public Long getEmployeeId() { return employeeId; } public void setEmployeeId(Long employeeId) { this.employeeId = employeeId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Long getDepartmentId() { return departmentId; } public void setDepartmentId(Long departmentId) { this.departmentId = departmentId; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public Integer getLevel() { return level; } public void setLevel(Integer level) { this.level = level; } }
4.增加employee.xml(src/main/resources/mappers)
<?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.imooc.oa.mapper.EmployeeMapper"> <select id="selectById" parameterType="Long" resultType="com.imooc.oa.entity.Employee"> select * from adm_employee where employee_id = #{value} </select> </mapper>
5.创建EmployeeMapper.Java(com.imooc.oa.mapper)
package com.imooc.oa.mapper; import com.imooc.oa.entity.Employee; public interface EmployeeMapper { public Employee selectById(Long employeeId); }
6.在mybatis-config.xml中进行注册
<mapper resource="mappers/employee.xml"/>
7.测试用例
package com.imooc.oa.mapper; import com.imooc.oa.entity.Employee; import com.imooc.oa.utils.MybatisUtils; import org.junit.Test; public class EmployeeMapperTest { @Test public void selectById() { Employee emp = (Employee) MybatisUtils.executeQuery(sqlSession -> { EmployeeMapper employeeMapper = sqlSession.getMapper(EmployeeMapper.class); Employee employee = employeeMapper.selectById(4l); System.out.println(employee); return employee; }); } }