1. 程式人生 > 其它 >014.回顧Mapper介面開發過程

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;
        });
    }
}