atguigu_ssm_crud

SSM-CRUD（尚矽谷影片）

一、開發工具

• InteliJ IDEA 2019

• Maven 3.6.1

二、.功能介紹

• 1. 增刪改查

• 2. 分頁查詢

• 3. 資料校驗

  • 前端校驗（JS）

  • 後端校驗（JSR303）

• 4. ajax

• 5. Rest風格URI:

  • 使用Http協定請求方式的動詞，來表示對資源的操作

  • GET: /emps/get/{id} 查詢

  • GET: /emps/get 查詢

  • POST: /emps/save增加

  • PUT: /emps/update/{id} 修改

  • DELETE: /emps/del/{id} 刪除

  • DELETE: /emps/dels/{ids} 刪除

三、技術支援

• 1. 基礎架構（SSM-Spring+SpringMVC+Mybatis）

  • Spring 5.1.6

  • Mybatis 3.5.1

• 2. 資料庫-Mysql 8.0

• 3. 前端框架-BootStrap 3.3.1

• 4. 專案依賴管理-Maven 3.6.1

• 5. 分頁外掛程式PageHelper

• 6. 逆向工程-mybatis-generator

四、基礎環境搭建

• 1. 建立maven-web工程

• 2. 導入專案依賴的座標

  • spring core

  • spring mvc

  • spring jdbc

  • spring test

  • spring aop

  • mysql-connector-jar

  • jstl taglib

  • serlevt jsp

  • mybatis mybatis-spring

  • pagehelper

  • hiberate validate

  • 其他

• 3. 引進Bootstrap前端框架

• 4. 編寫ssm整合設定文件

  • web.xml

  • mybatis-config.xml

  • spring-mybatis.xml

  • springMVC.XML

  • configGenerator.xml

  • 5. 測試dao層配置（TestMapper.java）

五、查詢

• 1. 訪問index.jsp

• 2. index頁面發送出查詢員工清單請求

• 3. EmployeeController接收請求，找出員工數據，返回視圖頁面

• 4. jsp解析資料並顯示

六、使用ajax+json實現查詢及後續功能

• 1. index.jsp頁面發送ajax請求進行員工資料分頁查詢

• 2. 伺服器將查詢到的資料以json字串的形式傳回瀏覽器

• 3. 瀏覽器收到json字串，使用js對json進行解析並處理，jquery操作DOM對象，實作資料顯示

• 4. ajax實現了客戶端的無關性

七、員工新增

• 1. 在index.jsp頁面點選「新增」按鈕

• 2. 彈出填寫資訊的對話框（BootStrap模態框）

• 3. 去資料庫查詢部門列表，顯示在下拉列表

• 4. 使用者輸入數據，完成前後端校驗

  • js+jquery前端校驗資料合理性

  • ajax發送請求校驗使用者名稱是否重複

  • 重要資料後端（JSR303）再次校驗

• 5. 實現保存

八、員工資訊修改

• 1. 在index.jsp頁面點選「編輯」按鈕

• 2. 彈出用於修改訊息的對話框（BootStrap模態框，顯示已有資訊）

• 3. 使用者輸入數據，進行合理性校驗

• 4. 點選修改，完成資訊更新

九、員工刪除

• 1. 在index.jsp頁面點選「刪除」按鈕

• 2. 彈出確認框

• 3. 完成刪除

  • 單一刪除URI: /emps/del/{id}

  • 批次刪除URI: /emps/dels/{ids}

十、總結