［1.Springレガシーを使用してWebプロジェクトを作成する:スクリーンを飾る］
38723 ワード
1.スプリングツールキット(STS)プラグインがインストールされているeclipseでFile>New>Other>Spring>Spring legacyproject>...Spring MVCプロジェクトを作成する
2. https://startbootstrap.com/同じサイトを参照して、好きなガイド画面を選択し、ソースをダウンロードします。
3.スクリーンソースを私のプロジェクトのwebappディレクトリの下に貼り付ける
4. web.xmlで<url-pattern>*です。pcm</url-pattern>はurlをこのように設定します。
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/root-context.xml</param-value>
</context-param>
<!-- Creates the Spring Container shared by all Servlets and Filters -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- Processes application requests -->
<servlet>
<servlet-name>appServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>appServlet</servlet-name>
<url-pattern>*.pcm</url-pattern>
</servlet-mapping>
</web-app>5. HomeController.JAvaは以下の形式で変更されます。
package com.ssafy.web;
import org.springframework.stereotype.Controller;
@Controller
public class HomeController {
}6.プロジェクトを開始し、インデックスを作成します。htmlが表示されているかどうかを確認します
7.適切な画像装飾画面を追加する（画像：BurgerKingホームページ参照）
8.以下を参照して会員加入リンクを作成する
index.htmlのnavセクションに次のコードを挿入します.
<li class="nav-item"><a class="nav-link" href="#" onclick="window.open('html/memberInsertForm.html', '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=500,width=400,height=750');">회원가입</a></li>
9. webapp/html/memberInsertForm.htmlは以下の内容を参照して作成します。
次のコードを挿入します.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/my.js"></script>
</head>
<body>
<article class="container">
<div class="page-header">
<div class="col-md-6 col-md-offset-3">
<h3>회원가입 Form</h3>
</div>
</div>
<div class="col-sm-6 col-md-offset-3">
<form role="form">
<div class="form-group">
<label for="inputName">성명</label>
<input type="text" class="form-control" id="name" placeholder="이름을 입력해 주세요">
</div>
<div class="form-group">
<label for="InputEmail">ID</label>
<input type="text" class="form-control" id="id" placeholder="ID를 입력해주세요">
</div>
<div class="form-group">
<label for="inputPassword">비밀번호</label>
<input type="password" class="form-control" id="pw" placeholder="비밀번호를 입력해주세요">
</div>
<div class="form-group">
<label for="inputPasswordCheck">비밀번호 확인</label>
<input type="password" class="form-control" id="inputPasswordCheck" placeholder="비밀번호 확인을 위해 다시한번 입력 해 주세요">
</div>
<div class="form-group">
<label for="inputMobile">휴대폰 번호</label>
<input type="tel" class="form-control" id="inputMobile" placeholder="휴대폰번호를 입력해 주세요">
</div>
<div class="form-group">
<label for="inputtelNO">사무실 번호</label>
<input type="tel" class="form-control" id="inputtelNO" placeholder="사무실번호를 입력해 주세요">
</div>
<div class="form-group">
<label>약관 동의</label>
<div data-toggle="buttons">
<label class="btn btn-primary active">
<span class="fa fa-check"></span>
<input id="agree" type="checkbox" autocomplete="off" checked>
</label>
<a href="#">이용약관</a>에 동의합니다.
</div>
</div>
<div class="form-group text-center">
<input type="button" id="memberInsertBtn" class="btn btn-primary"
value="회원가입">
<button type="submit" class="btn btn-warning">
가입취소<i class="fa fa-times spaceLeft"></i>
</button>
</div>
</form>
</div>
</article>
</body>
</html>
10.ここまで確認
次に会員入金処理を行います.
Reference
この問題について(［1.Springレガシーを使用してWebプロジェクトを作成する:スクリーンを飾る］), 我々は、より多くの情報をここで見つけました https://velog.io/@fe26min/1.-스프링-legacy-project로-웹-프로젝트-작성-화면-꾸미기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol