015.實現Header顯示與登出功能
阿新 • • 發佈：2022-12-10
1.建立EmployeeService.java（com.imooc.oa.service）
package com.imooc.oa.service; import com.imooc.oa.entity.Employee; import com.imooc.oa.mapper.EmployeeMapper; import com.imooc.oa.utils.MybatisUtils; public class EmployeeService { public Employee selectById(Long employeeId){ Employee employee= (Employee)MybatisUtils.executeQuery(sqlSession -> { EmployeeMapper mapper = sqlSession.getMapper(EmployeeMapper.class); return mapper.selectById(employeeId); }); return employee; } }
2.修改 com/imooc/oa/controller/UserInfoServlet.java
package com.imooc.oa.controller;import com.imooc.oa.entity.Employee; import com.imooc.oa.entity.Node; import com.imooc.oa.service.EmployeeService; import com.imooc.oa.service.RbacService; import com.imooc.oa.utils.ResponseUtils; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.LinkedHashMap; import java.util.List; import java.util.Map; @WebServlet("/api/user_info") public class UserInfoServlet extends HttpServlet { private RbacService rbacService = new RbacService(); private EmployeeService employeeService = new EmployeeService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String uid = request.getParameter("uid"); String eid = request.getParameter("eid"); List<Node> nodes = rbacService.selectNodeByUserId(Long.parseLong(uid)); List<Map> treeList = new ArrayList<>(); Map module = null; for(Node node : nodes){ if(node.getNodeType() == 1){ module = new LinkedHashMap(); module.put("node", node); module.put("children", new ArrayList()); treeList.add(module); }else if(node.getNodeType() == 2){ List children = (List)module.get("children"); children.add(node); } } Employee employee = employeeService.selectById(Long.parseLong(eid)); String json = new ResponseUtils().put("nodeList", treeList).put("employee",employee).toJsonString(); response.setContentType("application/json;charset=utf-8"); response.getWriter().println(json); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
3.修改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">{{employee.name}}[{{employee.title}}]</span> </i> <template #dropdown> <el-dropdown-menu> <el-dropdown-item v-on:click="logout">登出</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:[], employee:{} } } ,methods:{ showPage(url){ document.getElementById("main").src = url; } ,logout(){ sessionStorage.clear(); window.location.href = "/login.html"; } } ,mounted(){ const objApp = this; const eid = sessionStorage.eid; const uid = sessionStorage.uid; axios.get("/api/user_info?uid=" + uid + "&eid=" + eid) .then(function(response){ const json = response.data; json.data.nodeList.forEach(function (item){ objApp.nodeList.push(item); }) console.info(objApp.nodeList); objApp.employee = json.data.employee; }) } }; const app = Vue.createApp(Main); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>