SSM-CRUD
這個系統用的是spring、springMVC和mybatis做基本框架，前臺用BootStrap進行設計。在創建時由于手動找jar包態麻煩了，影響開發效率，所以我就用Maven 來管理項目結構。
主要的功能就是對員工信息進行添加，修改，分頁查詢和單個及批量刪除

由于查詢的時候帶上了分頁功能，這里就主要說一下查詢。

第一：查詢

? 1、項目在運行時，index頁面直接發送帶分頁的查詢員工列表的ajax請求
主回調函數如下：

$(function(){//去首頁to_page(1);});function to_page(pn){$.ajax({url:"${APP_PATH}/emps",data:"pn="+pn,type:"GET",success:function(result){//console.log(result);//1、解析json,并顯示員工數據build_emps_table(result);//2、解析并顯示分頁信息build_page_info(result);//3、解析顯示分頁條數據build_page_nav(result);}});}

? 2、前端控制器收到該請求時，先根據url調用映射器，生成處理器對象和攔截器

<!-- springMvc前端控制器，攔截所有請求 --><!-- 創建dispatcherServlet-servlet.xml --><listener><listener-class>org.springframework.web.context.ContextLoaderListener</listener-class></listener><!-- springMvc前端控制器，攔截所有請求 --><!-- 創建dispatcherServlet-servlet.xml --><servlet><servlet-name>dispatcherServlet</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>dispatcherServlet</servlet-name><url-pattern>/</url-pattern></servlet-mapping>

? 3、然后持久層Mapper通過寫靈活的sql片段以及resultMap來與底層對接

<!-- 關聯查詢結果集 --><!-- 查詢員工關聯相應部門信息 --><resultMap id="WithDeptResultMap" type="com.mybag.bean.Employee" ><id column="emp_id" jdbcType="INTEGER" property="empId" /><result column="emp_name" jdbcType="VARCHAR" property="empName" /><result column="gender" jdbcType="CHAR" property="gender" /><result column="email" jdbcType="VARCHAR" property="email" /><result column="d_id" jdbcType="INTEGER" property="dId" /><!-- 關聯department信息 指定聯合查詢出的字段信息封裝 --><association property="department" javaType="com.mybag.bean.Department"><id column="dept_id" property="deptId" /><result column="dept_name" property="deptName" /></association></resultMap><!-- sql片段 --><sql id="WithDept_Column_List">e.emp_id, e.emp_name, e.gender, e.email, e.d_id,d.dept_id,d.dept_name</sql><!-- 希望根據條件查詢員工的同時，相對應的部門信息也能夠被查詢出來 --><select id="selectByExampleWithDept" resultMap="WithDeptResultMap">select<if test="distinct">distinct</if><include refid="WithDept_Column_List" />FROM tbl_emp eleft join tbl_dept d on e.`d_id`=d.`dept_id`<if test="_parameter != null"><include refid="Example_Where_Clause" /></if><if test="orderByClause != null">order by ${orderByClause}</if></select><!-- 按主鍵查詢,相應的外鍵信息也能夠查詢出來 --><select id="selectByPrimaryKeyWithDept" resultMap="WithDeptResultMap">select<include refid="WithDept_Column_List" />FROM tbl_emp eleft join tbl_dept d on e.`d_id`=d.`dept_id`where emp_id = #{empId,jdbcType=INTEGER}</select> //按條件查詢員工信息//(能關聯查詢出外鍵 部門表的信息)List<Employee> selectByExampleWithDept(EmployeeExample example);//按主鍵查詢員工信息(同上)Employee selectByPrimaryKeyWithDept(Integer empId);

也可以通過使用mybatis的逆向工程，并使用一些注解配置，半自動化的生成查詢的sql.
逆向工程用過的朋友們也都知道，主要就是一個方法和一個配置文件，在mybatis官網上很容易就能找到，這里我就不多說了哈，詳細的介紹可以看一下我的另一篇文章###

? 4、而后，業務邏輯層用Controller對數據進行處理和解析，這里的工作就要交給sprinMvc去做了
簡單的配置文件：

<!-- SpringMvc的配置文件，包含網站跳轉文件的配置 --><!-- 所有業務邏輯組件掃描 --><context:component-scan base-package="com.mybag" use-default-filters="false"><!-- 其他都不掃描，只掃描控制器controller --><context:include-filter type="annotation" expression="org.springframework.stereotype.Controller" /></context:component-scan><!-- 配置視圖解析器 --><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/views/"></property><property name="suffix" value=".jsp"></property></bean><!-- 兩個標準配置 --><!-- 將springmvc不能處理的請求交給tomcat --><mvc:default-servlet-handler /><!-- 能支持springmvc更高級的一些功能,JRS303校驗，ajax請求,映射動態請求 --><mvc:annotation-driven />

controller里面還不是太麻煩：

/*** 為了降低客戶端的限制性，將分頁數據以json串的形式返回* 導入jackson包。* 創建Msg輔助類* @ResponseBody 自動將返回的對象轉換為json字符串*/@RequestMapping("/emps")@ResponseBodypublic Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn) {//pom.xml引入PageHelper分頁插件//mybatis.xml中進行配置//傳入頁碼以及每頁的大小 即 (從第幾頁開始查，每頁顯示多少條數據)PageHelper.startPage(pn, 5);//調用方法，拿到員工表的數據List<Employee> emps = employeeService.getAll();//PageInfo封裝了詳細的分頁信息,使用它來包裝查詢出的數據PageInfo page = new PageInfo(emps, 6);return Msg.success().add("pageInfo", page);}

? 5、服務器會將查出的數據，以json字符串的形式返回給瀏覽器

//解析并顯示員工數據function build_emps_table(result){$("#emps_table tbody").empty();var emps = result.extend.pageInfo.list;$.each(emps,function(index,item){var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");var empIdTd = $("<td></td>").append(item.empId);var empNameTd = $("<td></td>").append(item.empName);var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");var emailTd = $("<td></td>").append(item.email);var deptNameTd = $("<td></td>").append(item.department.deptName);var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("編輯");//為編輯按鈕添加一個自定義的屬性，來表示當前員工ideditBtn.attr("edit-id",item.empId);var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除");//為刪除按鈕添加一個自定義的屬性來表示當前刪除的員工iddelBtn.attr("del-id",item.empId);var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);//var delBtn = //append方法執行完成以后還是返回原來的元素$("<tr></tr>").append(checkBoxTd).append(empIdTd).append(empNameTd).append(genderTd).append(emailTd).append(deptNameTd).append(btnTd).appendTo("#emps_table tbody");});}

PS:
因為用戶不僅僅是瀏覽器，有可能是安卓、IOS，處理數據會變得復雜，返回json的話更利于數據解析，可以實現客戶端的無關性

最后，分頁查詢到的結果會在jsp頁面使用C標簽庫獲取，分頁查詢的效果就是這樣啦

第二，修改

? 1、點擊編輯
? 2、彈出用戶修改的模態框（顯示用戶信息）
? 3、點擊更新，完成用戶修改
修改功能我寫的比較簡單，也很容易實現，效果就像下面這樣

第三，新增

1、在index.jsp頁面點擊”新增”，彈出新增對話框
2、去數據庫查詢部門列表，顯示在對話框中
3、用戶輸入數據，并進行校驗（jquery前端校驗，ajax用戶名重復校驗，重要數據（后端校驗(JSR303)，唯一約束）；
4、完成保存
修改的sql

update tbl_empset emp_id = #{record.empId,jdbcType=INTEGER},emp_name = #{record.empName,jdbcType=VARCHAR},gender = #{record.gender,jdbcType=CHAR},email = #{record.email,jdbcType=VARCHAR},d_id = #{record.dId,jdbcType=INTEGER}

前端的校驗比較簡單，主要還是后臺JSR303重要數據的校驗

@RequestMapping(value = "/emp", method = RequestMethod.POST)@ResponseBodypublic Msg saveEmp(@Valid Employee employee, BindingResult result) {if (result.hasErrors()) {// 校驗失敗，應該返回失敗，在模態框中顯示校驗失敗的錯誤信息Map<String, Object> map = new HashMap<>();List<FieldError> errors = result.getFieldErrors();for (FieldError fieldError : errors) {System.out.println("錯誤的字段名：" + fieldError.getField());System.out.println("錯誤信息：" + fieldError.getDefaultMessage());map.put(fieldError.getField(), fieldError.getDefaultMessage());}return Msg.fail().add("errorFields", map);} else {employeeService.saveEmp(employee);return Msg.success();}}

添加頁面的效果和修改差不多

第四、刪除

單條數據的刪除：

多條數據批量刪除

寫的時候還是離不開service, 里邊簡單的兩個方法

/*** 員工刪除* * @param id*/public void deleteEmp(Integer id) {// TODO Auto-generated method stubemployeeMapper.deleteByPrimaryKey(id);}public void deleteBatch(List<Integer> ids) {// TODO Auto-generated method stubEmployeeExample example = new EmployeeExample();Criteria criteria = example.createCriteria();// delete from xxx where emp_id in(1,2,3)criteria.andEmpIdIn(ids);employeeMapper.deleteByExample(example);}

控制器中使用Rest風格的URI，直接指明RequestMethod.DELETE，規范http請求

/*** 單個批量二合一* 批量刪除：1-2-3 單個刪除：1* * @param id* @return*/@ResponseBody@RequestMapping(value = "/emp/{ids}", method = RequestMethod.DELETE)public Msg deleteEmp(@PathVariable("ids") String ids) {// 批量刪除if (ids.contains("-")) {List<Integer> del_ids = new ArrayList<>();String[] str_ids = ids.split("-");// 組裝id的集合for (String string : str_ids) {del_ids.add(Integer.parseInt(string));}employeeService.deleteBatch(del_ids);} else {Integer id = Integer.parseInt(ids);employeeService.deleteEmp(id);}return Msg.success();}

everything is all right~~~~最后來總結一波~

小小白在努力>_<

總結

以上是生活随笔為你收集整理的员工信息管理系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。