本文介绍了一个员工管理系统的实现过程，包括员工信息添加页面的设计与功能实现、员工信息展示页面的分页展示逻辑，以及员工控制器类中对数据的操作方法。通过前端技术和后端逻辑相结合，实现了完整的员工管理功能。
一、add 页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> <!--js--> <script type="text/javascript" src="/js/jquery-2.1.0.js"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入）--> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!--最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!--js框架--> <script type="text/javascript" src="/js/angularjs.js"></script> <!--时间插件--> <script type="text/javascript" src="/layDate-v5.0.5/laydate/laydate.js"></script> <!--三级联动插件--> <script type="text/javascript" src="/shengshiliandong/area.js"></script> <link href="/css/normalize.css" rel="stylesheet" /> <link href="/css/jquery-ui.css" rel="stylesheet" /> <link href="/css/jquery.idealforms.min.css" rel="stylesheet" media="screen" /> <style type="text/css"> body { font: normal 15px/1.5 Arial, Helvetica, Free Sans, sans-serif; color: #222; background: url(pattern.png); overflow-y: scroll; padding: 60px 0 0 0; } #my-form { width: 755px; margin: 0 auto; border: 1px solid #ccc; padding: 3em; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, .2); } #comments { width: 350px; height: 100px; } </style> <meta charset="UTF-8"> <title></title> <script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3-utf8-jsp/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3-utf8-jsp/ueditor.all.min.js"></script> <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败--> <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文--> <script type="text/javascript" charset="utf-8" src="/ueditor1_4_3_3-utf8-jsp/lang/zh-cn/zh-cn.js"></script> </head> <body> <div class="container"> <form class="form-horizontal" action="/emp/addEmployee" id="my-form" enctype="multipart/form-data" method="post"> <div class="form-group"> <label for="username" class="col-sm-2 control-label">用户名</label> <div class="col-sm-3"> <input class="form-control" id="username" placeholder="username" name="username"> </div> <div class="col-sm-7"></div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">密码</label> <div class="col-sm-3"> <input class="form-control" id="password" placeholder="password" name="password"> </div> <div class="col-sm-7"></div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-3"> <input class="form-control" id="email" placeholder="email" name="email"> </div> <div class="col-sm-7"></div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">性别</label> <div class="col-sm-3 radio"> <input type="radio" name="age" id="age" value="男" checked="checked">男 <input type="radio" name="age" id="age" value="女">女 </div> <div class="col-sm-7"></div> </div> <div class="form-group"> <label for="hobby" class="col-sm-2 control-label">爱好</label> <div class="col-sm-3 checkbox"> <input type="checkbox" id="hobby" name="hobbys" value="吸烟">吸烟 <input type="checkbox" id="hobby" name="hobbys" value="喝酒">喝酒 <input type="checkbox" id="hobby" name="hobbys" value="打牌">打牌 </div> <div class="col-sm-7"></div> </div> <div class="form-group"> <label for="birthtay" class="col-sm-2 control-label">出生日期</label> <div class="col-sm-3"> <input type="text" class="form-control demo-input" id="test1" placeholder="年/月/日" name="birthtay"> </div> <div class="col-sm-7"></div> </div> <div class="form-group"> <label for="address" class="col-sm-2 control-label">家庭住址</label> <div class="info"> <div class="col-sm-2"> <select id="s_province" class="form-control" name="address"></select> </div> <div class="col-sm-2"> <select id="s_city" class="form-control" name="address"></select> </div> <div class="col-sm-2"> <select id="s_county" class="form-control" name="address"></select> <script type="text/javascript"> _init_area(); </script> </div> <div id="show"></div> </div> </div> <div class="form-group"> <label for="file" class="col-sm-2 control-label">上传头像</label> <div class="col-sm-3"> <input name="multipartFile" id="file" class="file-loading" type="file" /> </div> <div class="col-sm-7"></div> </div> <div class="form-group"> <label for="file" class="col-sm-2 control-label">个人描述</label> <div class="col-sm-10"> <script id="editor" type="text/plain" style="width:350px;height:80px;"></script> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-info">注册</button> </div> </div> </form> </div> </body> <script> lay('#version').html('-v' + laydate.v); laydate.render({ elem: '#test1' }); var Gid = document.getElementById; var showArea = function() { Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" + Gid('s_city').value + " - 县/区" + Gid('s_county').value + "</h3>" } Gid('s_county').setAttribute('onchange', 'showArea()'); </script> <script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor'); function isFocus(e) { alert(UE.getEditor('editor').isFocus()); UE.dom.domUtils.preventDefault(e) } function setblur(e) { UE.getEditor('editor').blur(); UE.dom.domUtils.preventDefault(e) } function insertHtml() { var value = prompt('插入html代码', ''); UE.getEditor('editor').execCommand('insertHtml', value) } function createEditor() { enableBtn(); UE.getEditor('editor'); } function getAllHtml() { alert(UE.getEditor('editor').getAllHtml()) } function getContent() { var arr = []; arr.push("使用editor.getContent()方法可以获得编辑器的内容"); arr.push("内容为："); arr.push(UE.getEditor('editor').getContent()); alert(arr.join("\n")); } function getPlainTxt() { var arr = []; arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容"); arr.push("内容为："); arr.push(UE.getEditor('editor').getPlainTxt()); alert(arr.join('\n')) } function setContent(isAppendTo) { var arr = []; arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容"); UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo); alert(arr.join("\n")); } function setDisabled() { UE.getEditor('editor').setDisabled('fullscreen'); disableBtn("enable"); } function setEnabled() { UE.getEditor('editor').setEnabled(); enableBtn(); } function getText() { //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容 var range = UE.getEditor('editor').selection.getRange(); range.select(); var txt = UE.getEditor('editor').selection.getText(); alert(txt) } function getContentTxt() { var arr = []; arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容"); arr.push("编辑器的纯文本内容为："); arr.push(UE.getEditor('editor').getContentTxt()); alert(arr.join("\n")); } function hasContent() { var arr = []; arr.push("使用editor.hasContents()方法判断编辑器里是否有内容"); arr.push("判断结果为："); arr.push(UE.getEditor('editor').hasContents()); alert(arr.join("\n")); } function setFocus() { UE.getEditor('editor').focus(); } function deleteEditor() { disableBtn(); UE.getEditor('editor').destroy(); } function disableBtn(str) { var div = document.getElementById('btns'); var btns = UE.dom.domUtils.getElementsByTagName(div, "button"); for(var i = 0, btn; btn = btns[i++];) { if(btn.id == str) { UE.dom.domUtils.removeAttributes(btn, ["disabled"]); } else { btn.setAttribute("disabled", "true"); } } } function enableBtn() { var div = document.getElementById('btns'); var btns = UE.dom.domUtils.getElementsByTagName(div, "button"); for(var i = 0, btn; btn = btns[i++];) { UE.dom.domUtils.removeAttributes(btn, ["disabled"]); } } function getLocalData() { alert(UE.getEditor('editor').execCommand("getlocaldata")); } function clearLocalData() { UE.getEditor('editor').execCommand("clearlocaldata"); alert("已清空草稿箱") } </script> </html>二、展示员工页面
<div style="margin-left: 500px"> <nav aria-label="Page navigation" "> <ul class="pagination"> <#if list.isFirstPage==true> <li class="disabled"> <a href="selectAll?pageNo=${list.firstPage}&pageSize=${list.pageSize}" aria-label="Previous"> <span aria-hidden="true">«</span><#--class="active"--></a> </li> <#else > <li ><a href="selectAll?pageNo=${list.prePage}&pageSize=${list.pageSize}" aria-label="Previous"> <span aria-hidden="true">«</span><#--class="active"--></a></li> </#if> <#list 1..list.pages as s> <li><a href="selectAll?pageNo=${s}&pageSize=${list.pageSize}">${s}</a></li> </#list> <#if list.isLastPage==true> <li class="disabled"><a href="selectAll?pageNo=${list.lastPage}&pageSize=${list.pageSize}" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> <#else > <li ><a href="selectAll?pageNo=${list.nextPage}&pageSize=${list.pageSize}" aria-label="Next"> <span aria-hidden="true">»</span> </a></li> </#if> </ul> </nav> </div> <nav aria-label="..."> <ul class="pager"> <#if list.isFirstPage==true> <li class="disabled"> <a href="selectAll?pageNo=${list.firstPage}&pageSize=${list.pageSize}" aria-label="Previous"> <span aria-hidden="true">Previous</span><#--class="active"--></a> </li> <#else > <li ><a href="selectAll?pageNo=${list.firstPage}&pageSize=${list.pageSize}" aria-label="Previous"> <span aria-hidden="true">Previous</span><#--class="active"--></a></li> </#if> <#if list.isLastPage==true> <li class="disabled"><a href="selectAll?pageNo=${list.lastPage}&pageSize=${list.pageSize}" aria-label="Next"> <span aria-hidden="true">Next</span> </a></li> <#else > <li ><a href="selectAll?pageNo=${list.lastPage}&pageSize=${list.pageSize}" aria-label="Next"> <span aria-hidden="true">Next</span> </a></li> </#if> </ul> </nav> </div>三、员工控制类
package com.bw.controller; import com.bw.Service.EmployeeService; import com.bw.pojo.Employee; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import org.springframework.http.HttpRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.servlet.ModelAndView; import javax.annotation.Resource; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.List; import java.util.UUID; @Controller @RequestMapping("emp") public class EmployeeController { @Resource private EmployeeService employeeService; @RequestMapping(value = "/addEmployee") public String addEmployee(Employee employee, MultipartFile multipartFile, HttpServletRequest request) throws IOException { /* 方法一 String filename = file.getOriginalFilename(); String suffixName = filename.substring(filename.lastIndexOf(".")); File realPath = new File("E:\\Java\\projects\\JavaWorkspace\\employee\\src\\main\\resources\\static\\images"); filename = UUID.randomUUID() + suffixName; String pathRoot = session.getServletContext().getRealPath("/");//自动寻找target根目录 String lsPath = pathRoot+"\\images\\"+filename; String path = realPath + File.separator + filename; file.transferTo(new File(lsPath)); file.transferTo(new File(path)); employee.setFilename(filename); System.out.println(employee); employeeService.addEmployee(employee); */ //文件名 String newName = multipartFile.getOriginalFilename(); String suffixName = newName.substring(newName.lastIndexOf(".")); newName = UUID.randomUUID() + suffixName; //获取文件流 InputStream inputStream1 = multipartFile.getInputStream(); //获取物理路径 String wlPath = "E:\\Java\\projects\\JavaWorkspace\\employee\\src\\main\\resources\\static\\images/"+newName; //逻辑路径 String ljPath = "../images/"+newName; //临时路径 String pathRoot = request.getSession().getServletContext().getRealPath("/");//自动寻找target根目录 String lsPath = pathRoot+"\\images\\"+newName; //判断是否需要创建文件夹 //物理路径文件夹 File wlFile = new File("E:\\Java\\projects\\JavaWorkspace\\employee\\src\\main\\resources\\static\\images"); //临时路径文件夹 File lsFile = new File(pathRoot+"\\images\\"); if(!wlFile.exists()) { wlFile.mkdir(); } if(!lsFile.exists()) { lsFile.mkdir(); } //执行读写操作 if(!multipartFile.isEmpty()) { //将文件放入物理路径 FileOutputStream wlFileOutputStream = new FileOutputStream(wlPath); //将文件放入临时路径 FileOutputStream lsFileOutputStream1 =new FileOutputStream(lsPath); int line = 0; while ((line = inputStream1.read()) != -1) { //写入物理路径 wlFileOutputStream.write(line); //写入临时路径 lsFileOutputStream1.write(line); } wlFileOutputStream.flush(); lsFileOutputStream1.flush(); lsFileOutputStream1.close(); wlFileOutputStream.close(); inputStream1.close(); } employee.setFilename(newName); System.out.print(employee); employeeService.addEmployee(employee); return "redirect:/emp/selectAll"; } @RequestMapping("selectAll") public ModelAndView selectAll(ModelAndView mav,String pageNo,String pageSize) { int num =1; int size=3; if (pageNo!=null && !"".equals(pageNo)){ num = Integer.parseInt(pageNo); } if (pageSize!=null && !"".equals(pageSize)){ size = Integer.parseInt(pageSize); } //开始分页 PageHelper.startPage(num,size); //查询数据库信息 List<Employee> employees = employeeService.selectEmployee(); PageInfo<Employee> pageInfo = new PageInfo<Employee>(employees); mav.addObject("list", pageInfo); mav.setViewName("employee"); return mav; } }
扫一扫
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
