atguigu_ssm_crud

SSM-CRUD(실리콘밸리 동영상)

1. 개발 도구

• InteliJ IDEA 2019

• 메이븐 3.6.1

2. 기능 소개

• 1. 추가, 삭제, 수정 및 확인

• 2. 페이징 쿼리

• 3. 데이터 검증

  • 프런트엔드 검증(JS)

  • 백엔드 검증(JSR303)

• 4. 아약스

• 5. 나머지 스타일 URI:

  • Http 프로토콜 요청 모드에서 동사를 사용하여 리소스에 대한 작업 표현

  • GET: /emps/get/{id} 쿼리

  • GET: /emps/쿼리 가져오기

  • POST: /emps/saveincrease

  • PUT: /emps/update/{id} 수정

  • 삭제: /emps/del/{id} 삭제

  • 삭제: /emps/dels/{ids} 삭제

3. 기술지원

• 1. 기본 프레임워크(SSM-Spring+SpringMVC+Mybatis)

  • 스프링 5.1.6

  • 마이바티스 3.5.1

• 2. 데이터베이스-Mysql 8.0

• 3. 프론트엔드 프레임워크 - BootStrap 3.3.1

• 4. 프로젝트 종속성 관리 - Maven 3.6.1

• 5. 페이징 플러그인 PageHelper

• 6. 리버스 엔지니어링-mybatis-generator

4. 기본환경 구축

• 1. Maven-web 프로젝트 생성

• 2. 프로젝트가 의존하는 좌표를 가져옵니다.

  • 스프링 코어

  • 봄 MVC

  • 봄 jdbc

  • 스프링 테스트

  • 스프링 어옵

  • mysql-커넥터-jar

  • jstl 태그 라이브러리

  • Serlevt JSP

  • mybatis mybatis-봄

  • 페이지 도우미

  • 최대 절전 모드 확인

  • 다른

• 3. Bootstrap 프런트엔드 프레임워크 소개

• 4. SSM 통합 구성 파일 작성

  • web.xml

  • mybatis-config.xml

  • 봄-mybatis.xml

  • springMVC.XML

  • configGenerator.xml

  • 5. dao 레이어 구성 테스트(TestMapper.java)

5. 문의

• 1. index.jsp를 방문하세요.

• 2. 인덱스 페이지는 직원 목록을 쿼리하라는 요청을 보냅니다.

• 3. EmployeeController는 요청을 수신하고 직원 데이터를 찾은 후 보기 페이지로 돌아갑니다.

• 4. jsp는 데이터를 구문 분석하고 표시합니다.

6. ajax+json을 사용하여 쿼리 및 후속 기능 구현

• 1. index.jsp 페이지는 직원 데이터의 페이징 쿼리를 수행하기 위해 ajax 요청을 보냅니다.

• 2. 서버는 쿼리된 데이터를 json 문자열 형식으로 브라우저에 반환합니다.

• 3. 브라우저는 json 문자열을 수신하고 js를 사용하여 json을 구문 분석하고 처리하며 jquery는 DOM 개체를 작동하여 데이터를 표시합니다.

• 4. Ajax는 클라이언트 측 독립성을 달성합니다.

7. 신입사원

• 1. index.jsp 페이지에서 "추가" 버튼을 클릭하세요.

• 2. 정보 입력 대화 상자가 나타납니다(BootStrap 모달 상자).

• 3. 데이터베이스로 이동하여 부서 목록을 쿼리하고 드롭다운 목록에 표시합니다.

• 4. 사용자가 데이터를 입력하고 프런트엔드 및 백엔드 검증을 완료합니다.

  • js+jquery 프런트 엔드 검증 데이터 합리성

  • Ajax는 사용자 이름이 반복되는지 확인하는 요청을 보냅니다.

  • 중요 데이터 백엔드(JSR303)를 다시 검증합니다.

• 5. 절약을 실천하라

8. 직원정보의 수정

• 1. index.jsp 페이지에서 "Edit" 버튼을 클릭하세요.

• 2. 정보 수정을 위한 대화 상자 팝업(기존 정보를 표시하는 BootStrap 모달 상자)

• 3. 사용자가 데이터를 입력하고 타당성 검증을 수행합니다.

• 4. 수정을 클릭하면 정보 업데이트가 완료됩니다.

9. 직원 삭제

• 1. index.jsp 페이지에서 "삭제" 버튼을 클릭하세요.

• 2. 확인창 팝업

• 3. 완전삭제

  • 단일 삭제 URI: /emps/del/{id}

  • 일괄적으로 URI 삭제: /emps/dels/{ids}

10. 요약