atguigu_ssm_crud

SSM-CRUD (Silicon Valley Video)

1. Development tools

• InteliJ IDEA 2019

• Maven 3.6.1

2. Function introduction

• 1. Add, delete, modify and check

• 2. Paging query

• 3. Data verification

  • Front-end validation (JS)

  • Backend validation (JSR303)

• 4. ajax

• 5. Rest style URI:

  • Use verbs in the Http protocol request mode to express operations on resources

  • GET: /emps/get/{id} query

  • GET: /emps/get query

  • POST: /emps/saveincrease

  • PUT: /emps/update/{id} Modify

  • DELETE: /emps/del/{id} delete

  • DELETE: /emps/dels/{ids} delete

3. Technical support

• 1. Basic framework (SSM-Spring+SpringMVC+Mybatis)

  • Spring 5.1.6

  • Mybatis 3.5.1

• 2. Database-Mysql 8.0

• 3. Front-end framework-BootStrap 3.3.1

• 4. Project dependency management-Maven 3.6.1

• 5. Paging plug-in PageHelper

• 6. Reverse engineering-mybatis-generator

4. Basic environment construction

• 1. Create maven-web project

• 2. Import the coordinates that the project depends on

  • spring core

  • spring mvc

  • spring jdbc

  • spring test

  • spring aop

  • mysql-connector-jar

  • jstl taglib

  • serlevt jsp

  • mybatis mybatis-spring

  • pagehelper

  • hiberate validate

  • other

• 3. Introduce Bootstrap front-end framework

• 4. Write ssm integration configuration file

  • web.xml

  • mybatis-config.xml

  • spring-mybatis.xml

  • springMVC.XML

  • configGenerator.xml

  • 5. Test dao layer configuration (TestMapper.java)

5. Inquiry

• 1. Visit index.jsp

• 2. The index page sends a request to query the employee list

• 3. EmployeeController receives the request, finds out the employee data, and returns to the view page

• 4. jsp parses data and displays it

6. Use ajax+json to implement query and subsequent functions

• 1. The index.jsp page sends an ajax request to perform paging query of employee data.

• 2. The server returns the queried data to the browser in the form of a json string.

• 3. The browser receives the json string, uses js to parse and process the json, and jquery operates the DOM object to display the data.

• 4. Ajax achieves client-side independence

7. New employees

• 1. Click the "Add" button on the index.jsp page

• 2. A dialog box for filling in information pops up (BootStrap modal box)

• 3. Go to the database to query the department list and display it in the drop-down list

• 4. The user inputs data and completes front-end and back-end verification.

  • js+jquery front-end verification data rationality

  • Ajax sends a request to verify whether the user name is repeated

  • Important data backend (JSR303) is verified again

• 5. Implement saving

8. Modification of employee information

• 1. Click the "Edit" button on the index.jsp page

• 2. Pop up a dialog box for modifying information (BootStrap modal box, showing existing information)

• 3. The user inputs data and performs plausibility verification.

• 4. Click Modify to complete the information update

9. Employee deletion

• 1. Click the "Delete" button on the index.jsp page

• 2. Pop up confirmation box

• 3. Complete deletion

  • Single delete URI: /emps/del/{id}

  • Delete URIs in batches: /emps/dels/{ids}

10. Summary