014.回顧Mapper介面開發過程
阿新 • • 發佈:2022-12-10
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; }); } }