4 - 9 점포 등록 의 전단 디자인

6982 단어 SSM 실전

UI 프레임 워 크
SUI Mobile 은 핸드폰 H5 애플 리 케 이 션 을 편리 하고 신속하게 구축 할 수 있 으 며 자체 적응 (웹 페이지 너비 에 자동 으로 적응 하고 해당 하 는 디자인) 웹 UI 프레임 워 크 입 니 다.
http://m.sui.taobao.org/
예제 에서 폼 선택 - 우 클릭 - 웹 소스 표시 - 복사

4-9 店铺注册之前端设计_第1张图片
 src / main / webapp 에서 index. html 만 들 기
전단 원본 을 복사 합 니 다.
그러나 css, js 코드 는 도입 되 지 않 았 다.

4-9 店铺注册之前端设计_第2张图片
"사용 시작" 클릭 http://m.sui.taobao.org/getting-started/
4-9 店铺注册之前端设计_第3张图片
페이지 템 플 릿 의 css 주 소 를 복사 하여 프로젝트 의 css 를 교체 합 니 다.
4-9 店铺注册之前端设计_第4张图片
4-9 店铺注册之前端设计_第5张图片
JS 동 리
수정 후 Tomcat 시작, 입력http://localhost:8080/o2oDemo/index.html
HTML 수정
우 리 는 아래 의 양식 이 필요 하 다.
주의:
1. 원래 코드 를 바탕 으로 수정 합 니 다. 예 를 들 어 드 롭 다운 상 자 는 다음 과 같은 코드 입 니 다.
  • Gender

  • 으로
     
             

  • 아 이 디 를 한 번 더 추가 하려 면 JS 를 조작 할 수 있 고 분류 정 보 는 데이터베이스 에서 읽 을 수 있 습 니 다.
    2. 업로드 공간, input type 은 file
    
            

  •  
    페이지 보기
    4-9 店铺注册之前端设计_第6张图片
     이곳 에서 우 리 는 사용자 가 직접 방문 하 는 것 을 원 하지 않 는 다.http://localhost:8080/o2oDemo/index.html 페이지 를 볼 수 있 기 때문에 WEB - INF 에 넣 을 수 있 습 니 다.
    따라서 다음 과 같이 수정 합 니 다.
    4-9 店铺注册之前端设计_第7张图片
    shophooperation. html
    이렇게 URL 을 통 해 이 페이지 에 직접 접근 할 수 없습니다.
    4-9 店铺注册之前端设计_第8张图片
     따라서 이 페이지 의 경 로 를 설정 해 야 합 니 다.
    ShopAdminController 파일 만 들 기
    4-9 店铺注册之前端设计_第9张图片
    4-9 店铺注册之前端设计_第10张图片
    위의 그림 에서
    1. HTML 이름
    2. 이 URL 이 있 는 폴 더 주소 입 니 다. 접두사 가 없 는 것 은 spring - web. xml 에 접두사 가 설정 되 어 있 기 때 문 입 니 다.
    4-9 店铺注册之前端设计_第11张图片
     
    설정 후 shopmin / shop operation 의 경로 에 따라 접근 할 수 있 습 니 다.
    4-9 店铺注册之前端设计_第12张图片
     
    제출 버튼 에 id 를 추가 하면 JS 작업 에 편리 합 니 다.

    소결:
    WEB - INF 에 있 는 파일 에 접근 하려 면 백 스테이지 리 트 윗 을 통 해서 만 받 을 수 있 습 니 다.
     

    좋은 웹페이지 즐겨찾기