패키지 구조
설정파일 구조
application.properties
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
spring.datasource.url=jdbc:log4jdbc:oracle:thin:@192.168.0.27:1521:topcredu
spring.datasource.driver-class-name=net.sf.log4jdbc.sql.jdbcapi.DriverSpy
spring.datasource.username=j2
spring.datasource.password=j2
# Enable multipart uploads
spring.servlet.multipart.enabled=true
# Threshold after which files are written to disk.
spring.servlet.multipart.file-size-threshold=2KB
# Max file size.
spring.servlet.multipart.max-file-size=50MB
# Max Request Size
spring.servlet.multipart.max-request-size=75MB
## File Storage Properties
# All files uploaded through the REST API will be stored in this directory
file.upload-dir=./src/main/resources/static/assets/ProductImg
mybatis.config-location=classpath:mybatis/mybatis-config.xml
logging.config=classpath:logback-spring.xml
| cs |
마이바티스 설정파일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<typeAliases>
<typeAlias alias="Products" type="shop.park.model.Products"/>
<typeAlias alias="Faq" type="shop.park.model.Faq"/>
<typeAlias alias="Notice" type="shop.park.model.Notice"/>
<typeAlias alias="Qna" type="shop.park.model.Qna"/>
<typeAlias alias="User" type="shop.kim.login.model.User"/>
<typeAlias alias="Login" type="shop.kim.login.model.Login"/>
<typeAlias alias="Cart" type="shop.kim.order.model.Cart"/>
<typeAlias alias="Order" type="shop.kim.order.model.Order"/>
<typeAlias alias="OrderDetail" type="shop.kim.order.model.Order_Detail"/>
<typeAlias alias="Review" type="shop.son.review.model.Review"/>
<typeAlias alias="ProductQna" type="shop.son.productqna.model.ProductQna"/>
<typeAlias alias="Admin" type="shop.choi.admin.model.Admin"/>
<typeAlias alias="OrderWriter" type="shop.kim.order.model.OrderWriter"/>
</typeAliases>
<mappers>
<mapper resource="mybatis/mapper/noticeMapper.xml"/>
<mapper resource="mybatis/mapper/productMapper.xml"/>
<mapper resource="mybatis/mapper/faqMapper.xml"/>
<mapper resource="mybatis/mapper/qnaMapper.xml"/>
<mapper resource="mybatis/mapper/loginMapper.xml"/>
<mapper resource="mybatis/mapper/cartMapper.xml"/>
<mapper resource="mybatis/mapper/orderMapper.xml"/>
<mapper resource="mybatis/mapper/reviewMapper.xml"/>
<mapper resource="mybatis/mapper/productQnaMapper.xml"/>
<mapper resource="mybatis/mapper/joinMapper.xml"/>
<mapper resource="mybatis/mapper/adminMapper.xml"/>
<mapper resource="mybatis/mapper/userMapper.xml"/>
</mappers>
</configuration>
| cs |
로그인
LoginController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
package shop.kim.login;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import shop.kim.login.model.Login;
import shop.kim.login.model.User;
import shop.kim.login.service.LoginService;
@RequestMapping("/toma/login")
@RestController
@CrossOrigin(origins="*")
public class LoginController {
@Autowired
private LoginService loginService;
@PostMapping("/")
public User login(@RequestBody Login login) { //Login : 앵귤러에서 던진 id/pw 만 가진객체
User user = loginService.logincheck(login);
if(user==null) {//아이디가 존재하지 않는다
System.out.println("널이들어왔다");
return null;
}else {
if(!user.getUpw().equals(login.getUpw())) {//비밀번호가 틀렸다
User pwdError = new User();
pwdError.setUaddr1("err"); // pwdError란 User객체를 던져준다
return pwdError;
}
}
return user;
}
}
| cs |
Model 클래스들
Login.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
package shop.kim.login.model;
public class Login {
private String uid;
private String upw;
public String getUid() {
return uid;
}
public void setUid(String uid) {
this.uid = uid;
}
public String getUpw() {
return upw;
}
public void setUpw(String upw) {
this.upw = upw;
}
}
| cs |
User.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
package shop.kim.login.model;
import java.sql.Date;
import lombok.Getter;
import lombok.Setter;
public class User {
//DB, AngularJS 자료형과 일치.
private String uid;
private String upw;
private String uname;
private String uphone;
private String uaddr1;
private String uaddr2;
private String uaddr3;
private int uaddrcheck;
private String ubirth;
private char ugender;
private Date ujoindate;
private char usmsyn;
private char uemailyn;
public String getUid() {
return uid;
}
public void setUid(String uid) {
this.uid = uid;
}
public String getUpw() {
return upw;
}
public void setUpw(String upw) {
this.upw = upw;
}
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getUphone() {
return uphone;
}
public void setUphone(String uphone) {
this.uphone = uphone;
}
public String getUaddr1() {
return uaddr1;
}
public void setUaddr1(String uaddr1) {
this.uaddr1 = uaddr1;
}
public String getUaddr2() {
return uaddr2;
}
public void setUaddr2(String uaddr2) {
this.uaddr2 = uaddr2;
}
public String getUaddr3() {
return uaddr3;
}
public void setUaddr3(String uaddr3) {
this.uaddr3 = uaddr3;
}
public int getUaddrcheck() {
return uaddrcheck;
}
public void setUaddrcheck(int uaddrcheck) {
this.uaddrcheck = uaddrcheck;
}
public String getUbirth() {
return ubirth;
}
public void setUbirth(String ubirth) {
this.ubirth = ubirth;
}
public char getUgender() {
return ugender;
}
public void setUgender(char ugender) {
this.ugender = ugender;
}
public Date getUjoindate() {
return ujoindate;
}
public void setUjoindate(Date ujoindate) {
this.ujoindate = ujoindate;
}
public char getUsmsyn() {
return usmsyn;
}
public void setUsmsyn(char usmsyn) {
this.usmsyn = usmsyn;
}
public char getUemailyn() {
return uemailyn;
}
public void setUemailyn(char uemailyn) {
this.uemailyn = uemailyn;
}
}
| cs |
LoginService.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
package shop.kim.login.service;
import java.util.ArrayList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import shop.kim.login.model.User;
import shop.kim.login.model.Login;
@Service
public class LoginService {
@Autowired
private LoginMapper loginMapper;
public User logincheck(Login login) {
return loginMapper.logincheck(login.getUid());
}
//지금은 사용하지 않는코드
public ArrayList<User> getUser() {
return loginMapper.getUser();
}
}
| cs |
LoginMapper.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
package shop.kim.login.service;
import java.util.ArrayList;
import org.apache.ibatis.annotations.Mapper;
import shop.kim.login.model.User;
import shop.kim.login.model.Login;
@Mapper
public interface LoginMapper {
public User logincheck(String uid);
//사용하지 않는 코드
public ArrayList<User> getUser();
}
| cs |
loginMapper.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="shop.kim.login.service.LoginMapper">
<resultMap type="User" id="userResultMap">
<result property="uid" column="U_ID" />
<result property="upw" column="U_PW" />
<result property="uname" column="U_NAME" />
<result property="uphone" column="U_PHONE" />
<result property="uaddr1" column="U_ADDR1" />
<result property="uaddr2" column="U_ADDR2" />
<result property="uaddr3" column="U_ADDR3" />
<result property="uaddrcheck" column="U_ADDRCHECK" />
<result property="ubirth" column="U_BIRTH" />
<result property="ugender" column="U_GENDER" />
<result property="ujoindate" column="U_JOINDATE" />
<result property="usmsyn" column="U_SMSYN" />
<result property="uemailyn" column="U_EMAILYN" />
</resultMap>
<select id="logincheck" resultType="User" resultMap="userResultMap">
SELECT * FROM TM_USER WHERE U_ID=#{uid}
</select>
<select id="getUser" resultType="User">
select * from tm_user
</select>
</mapper>
| cs |
앵귤러 JS
(프론트. 스프링 RequestMapping URL로 정보를 요청, 스프링에서 준 정보를 화면에 출력)
이어져있는 소스들이 너무 많으므로, 핵심적인 기능들만 올립니다.. (html, ts, service) [라우팅설정,모듈설정,모델클래스 등등제외]
login.component.ts
(서비스의 함수이용, Spring에 데이터요청, 받아온데이터로 객체조작, html과 연동하여 화면에출력)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
|
import { NgForm, EmailValidator } from "@angular/forms";
import { Component, OnInit } from "@angular/core";
import { ToastyService, ToastOptions, ToastData, ToastyConfig } from "ng2-toasty";
import { Router, ActivatedRoute } from "@angular/router";
import { UserService } from "../../shared/services/user.service";
import { AuthService } from "../../shared/services/auth.service";
import { User } from "../../shared/models/user";
import { Login } from "../../shared/models/login";
declare var $: any;
@Component({
selector: "app-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.scss"]
})
export class LoginComponent implements OnInit {
//로그인할때만 쓰는 로그인객체
login1 = new Login;
//서비스에 저장될 로그인 유저 또는 아이디찾기 유저 객체
user = new User;
//비번찾는 유저 (아이디 찾은 user로 토큰을 유지하고있기때문)
user2 = new User;
//새로가입하는 유저
createUser;
//아이디/비밀번호를 분실한 유저
findIDUser=new User;
findPWUser=new User;
//비밀번호확인변수
upw2;
constructor(
private userService: UserService,
private authService: AuthService,
private toastyService: ToastyService,
private router: Router,
private route: ActivatedRoute,
private toastyConfig: ToastyConfig
) {
this.toastyConfig.position = "top-right";
this.toastyConfig.theme = "material";
this.createUser = new User();
}
ngOnInit() { }
FindUserId(FindIdForm: NgForm){
this.userService.findUserID(this.findIDUser).subscribe((data:User)=>{
this.user = data;
},(error: any)=>{
alert("일치하는 데이터가 없습니다.");
this.user = new User;
});
}
FindUserPw(FindPwForm:NgForm){
this.userService.findUserPW(this.findPWUser).subscribe((data:User)=>{
this.user2 = data;
},(error: any)=>{
alert("일치하는 데이터가 없습니다.");
this.user2 = new User;
}
);
}
//daum 주소 api .. 참고 : https://www.npmjs.com/package/ng2-daum-address
daumAddressOptions = {
class: ['btn', 'btn-primary']
};
AddrSearch2:string; //우편번호(zip)+기본주소(addr)
AddrSearch3:string=""; //상세주소
setDaumAddressApi(AddrSearch){
// 여기로 주소값이 반환
console.log(AddrSearch);
this.AddrSearch2 = AddrSearch.zip+" / "+AddrSearch.addr;
}
//회원가입
addUser(userForm: NgForm) {
userForm.value["isAdmin"] = false;
this.createUser.uaddr1 = this.AddrSearch2+" / "+this.AddrSearch3;
// 회원가입 폼 입력필터
let submitStatus:Boolean=false;
if(
this.createUser.uid!=null &&
this.createUser.upw!=null &&
this.createUser.uname!=null &&
this.createUser.uphone!=null &&
this.createUser.uaddr1!=null &&
this.AddrSearch2!=null &&
this.AddrSearch3!="" &&
this.createUser.ubirth!=null &&
this.createUser.ugender!=null &&
this.createUser.usmsyn!=null &&
this.createUser.uemailyn!=null
){
let emailcheck=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/; //이메일 표현식
let namecheck=/^[가-힣a-zA-Z]+$/; //이름표현식. (한글또는 영어로만)
let numpattern =/^[0-9]*$/; //숫자표현식. (숫자만)
if(this.upw2!=this.createUser.upw || this.createUser.upw.length>20){ //비밀번호 틀리거나 21자 이상일때
submitStatus=false;
alert('비밀번호를 다시 확인해주세요');
this.createUser.upw="";
this.upw2="";
$("#userPw").focus();
return;
}if(this.createUser.uid.length>=40){
submitStatus=false;
alert('아이디는 40자를 넘을 수 없습니다');
$("#userId").focus();
return;
}if(emailcheck.test(this.createUser.uid)==false){
submitStatus=false;
alert('아이디가 이메일 형식이 아닙니다');
$("#userId").focus();
return;
}if(this.createUser.uname.length>10){
submitStatus=false;
alert('이름의 길이가 너무 깁니다');
$("#userName").focus();
return;
}if(namecheck.test(this.createUser.uname)==false){
submitStatus=false;
alert('이름을 한글 또는 영어로만 입력해주세요');
$("#userName").focus();
return;
}if(this.createUser.uphone.length<=8 || this.createUser.uphone.length>=12){
submitStatus=false;
alert('연락처는 9~11자 이내로 입력해주세요');
$("#userPhone").focus();
return;
}if(numpattern.test(this.createUser.uphone)==false){
submitStatus=false;
alert('연락처는 숫자만 입력 가능합니다');
$("#userPhone").focus();
return;
}if(this.createUser.ubirth.length!=6){
submitStatus=false;
alert('생년월일은 주민등록번호 앞 6자리를 입력해야 합니다');
$("#userBirth").focus();
return;
}if(numpattern.test(this.createUser.ubirth)==false){
submitStatus=false;
alert('생년월일은 숫자만 입력 가능합니다');
$("#userBirth").focus();
return;
}if(this.createUser.uaddr1.length>=101){
submitStatus=false;
alert('주소를 100자 이내로 입력해주세요');
return;
}else{ //모든 항목 입력완료, 비밀번호 확인완료
submitStatus=true;
}
}else{
submitStatus=false;
alert('모든 항목을 입력해주세요');
}
//submitStatus 가 true일 경우에만 실행
if(submitStatus){
this.userService.createUser(this.createUser).subscribe((data:User) => {
console.log('섭스크라이브중');
this.createUser = data;
const toastOption: ToastOptions = { // 우측상단 1.5초간 회원가입중... 창 띄워줌
title: "회원가입",
msg: "회원가입 확인중...",
showClose: true,
timeout: 3000,
theme: "material"
};
this.toastyService.wait(toastOption);
setTimeout((router: Router) => {
$("#createUserForm").modal("hide");
alert("회원가입 완료. 로그인 해주세요.");
this.router.navigate(["index/login"]);
}, 1500);
},
(error:any) => {
// 스프링에서 중복아이디 에러만 주게끔 위의 조건문으로 필터링.
alert('이미 존재하는 아이디입니다.');
return false;
}
);
}else if(submitStatus==false){
console.log('회원가입 취소');
return false;
}
}
//로그인
login() {
if(this.login1.uid==null || this.login1.uid==""){
alert("아이디를 입력해주세요");
return;
}else if (this.login1.upw==null || this.login1.upw==""){
alert("비밀번호를 입력해주세요");
return;
}else {
this.userService.getUsers(this.login1)
.subscribe((user:User) => {
if(user==null){
console.log("아이디 불일치");
alert("아이디가 없습니다");
return false;
}
this.user = user;
if(this.user.uaddr1=='err'){
console.log("비밀번호 불일치");
alert("비밀번호가 틀립니다");
return false;
}
//서비스에 로그인된 객체를 저장
this.userService.loginUser=this.user;
// authService 토큰부여(세션유지)
if(this.userService.loginUser!=null){
this.authService.saveUserToken();
this.router.navigate(["index"]);
}
},(error: any)=>{
});
}
}
}
| cs |
user.service.ts
(User 객체를 유지하고, SpringURL로 데이터를 요청하는 함수를 가지고있습니다.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
import { Injectable } from "@angular/core";
import { HttpClientModule,HttpHeaders, HttpClient } from '@angular/common/http';
// import {
// AngularFireDatabase,
// AngularFireList,
// AngularFireObject
// } from "angularfire2/database";
import * as moment from "moment";
import { User } from "../models/user";
import { Login } from "../models/login";
@Injectable()
export class UserService {
selectedUser: User = new User();
loginUser: User;
location = {
lat: null,
lon: null
};
joinUrl='http://localhost:8080/toma/join/';
loginUrl='http://localhost:8080/toma/login/';
updateUrl='http://localhost:8080/toma/user/Update/';
findUserIDUrl='http://localhost:8080/toma/user/findID/';
findUserPWUrl='http://localhost:8080/toma/user/findPW/';
constructor(private http: HttpClient) {
this.loginUser=new User();
}
// 로그인
getUsers(login: Login) {
return this.http.post(this.loginUrl, login);
}
// 회원가입
createUser(data: User) {
return this.http.post(this.joinUrl,data);
}
// 회원정보수정
updateUser(data:User){
return this.http.put(this.updateUrl,data);
}
// 아이디찾기
findUserID(data : User){
return this.http.post(this.findUserIDUrl,data);
}
// 비밀번호찾기
findUserPW(data : User){
return this.http.post(this.findUserPWUrl,data);
}
setLocation(lat, lon) {
this.location.lat = lat;
this.location.lon = lon;
}
}
| cs |
login.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
|
<br /><br />
<section class="container" style="position:relative;">
<!-- 로그인 폼 -->
<div class="col-sm-6" style="margin:auto;">
<form style="width:22rem" #loginForm="ngForm" (ngSubmit)="login()">
<p class="h5 text-center mb-4">Sign in</p>
<div class="md-form">
<i class="fa fa-envelope prefix grey-text"></i>
<input mdbActive type="text" id="loginUserId" class="form-control" name="uid" [(ngModel)]="login1.uid">
<label for="userId">아이디</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix grey-text"></i>
<input type="password" id="userPassword" name="upw" [(ngModel)]="login1.upw" class="form-control" mdbActive>
<label for="defaultForm-pass">비밀번호</label>
</div>
<div class="text-center">
<button type="submit" class="btn btn-outline-primary" id="loginButton" mdbRippleRadius>Login</button>
</div>
</form>
<!-- 로그인 폼 끝-->
<!-- 모달 활성화 링크들 -->
<br />
<br />
<br />
<p>회원이 아니십니까?
<a data-toggle="modal" data-target="#createUserForm" style="color:dodgerblue; font-weight:bold;">회원가입하기</a>
</p>
<p>아이디를 분실하셨나요?
<a data-toggle="modal" data-target="#FindUserIDInfoForm" style="color:dodgerblue; font-weight:bold;">아이디찾기</a>
</p>
<p>비밀번호를 분실하셨나요?
<a data-toggle="modal" data-target="#FindUserPWInfoForm" style="color:dodgerblue; font-weight:bold;">비밀번호찾기</a>
</p>
</div>
<br>
<!--회원가입폼 (모달)-->
<div class="modal fade" id="createUserForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top: -90px;">
<div class="modal-dialog cascading-modal" role="document">
<form #userForm="ngForm" (ngSubmit)="addUser(userForm)" name="JoinForm">
<div class="modal-content" >
<div class="modal-header light-blue darken-3 white-text" >
<h4 class="title">
<i class="fa fa-user-plus"></i> 회원가입</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- mdbInputValidate: 만족하면 success, 실패하면 false. 글씨가 뜨게해주는 속성 삭제. 컨트롤하는 방법을 모르겠어서 삭제-->
<div class="modal-body" style="font-size:12px;">
<div class="md-form form-sm" style="margin:0px;">
<i class="fa fa-envelope prefix"></i>
<input mdbActive type="text" id="userId" class="form-control" name="uid" [(ngModel)]="createUser.uid" >
<label for="userId">아이디(40자이내), 이메일형식입니다.</label>
</div>
<div class="md-form form-sm" style="width:200px; display:inline-block; height:40px;">
<i class="fa fa-lock prefix"></i>
<input mdbActive type="password" id="userPw" class="form-control" [(ngModel)]="createUser.upw" name="upw" >
<label for="userPw">비밀번호(20자이내)</label>
</div>
<div class="md-form form-sm" style="width:200px; display:inline-block; height:40px;">
<i class="fa fa-lock prefix"></i>
<input mdbActive type="password" id="userPw2" class="form-control" name="upw2" [(ngModel)]="upw2">
<label for="userPw2">비밀번호 확인</label>
</div>
<div class="md-form form-sm" style="margin:0px; padding:0px;">
<i class="fa fa-user prefix"></i>
<input mdbActive type="text" id="userName" class="form-control" [(ngModel)]="createUser.uname" name="uname">
<label for="userName">이름(10자이내)</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-phone prefix"></i>
<input mdbActive type="text" id="userPhone" class="form-control" [(ngModel)]="createUser.uphone" name="uphone">
<label for="userPhone">연락처( '-' 제외, 9~11자리 숫자만입력)</label>
</div>
<div class="md-form form-sm">
<div class="dododo" style="margin-left: 28px;"><btn-daum-address (result)="setDaumAddressApi($event)" [options]="daumAddressOptions"></btn-daum-address></div>
<i class="fa fa-map-marker prefix"></i>
<br />
<p>기본주소 : {{AddrSearch2}}</p>
<input mdbActive type="text" id="DetailAddr" class="form-control" [(ngModel)]="AddrSearch3" name="uDetailAddr" placeholder="상세주소(50자이내)">
<br />
</div>
<div class="md-form form-sm">
<i class="fa fa-calendar prefix"></i>
<input mdbActive type="text" id="userBirth" class="form-control" [(ngModel)]="createUser.ubirth" name="ubirth" >
<label for="userBirth">생년월일(주민등록번호 앞6자리만 입력)</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-transgender prefix"></i>
<select class="mdb-select" [(ngModel)]="createUser.ugender" name="ugender" id="ugenderlist" style="margin-left:180px; margin-top:10px; width:100px;" >
<option value="" disabled selected>성별을 선택해주세요</option>
<option value="M">남자</option>
<option value="F">여자</option>
</select>
<label for="ugenderlist">성별</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-twitter-square prefix"></i>
<select class="mdb-select" [(ngModel)]="createUser.usmsyn" name="usmsyn" id="userSmsyn" style="margin-left:180px; margin-top:10px; width:100px;">
<option value="" disabled selected>SMS로 정보를 수신하시겠습니까?</option>
<option value="Y">예</option>
<option value="N">아니오</option>
</select>
<label for="userSmsyn">sms 수신여부</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-twitch prefix"></i>
<select class="mdb-select" [(ngModel)]="createUser.uemailyn" name="uemailyn" id="userEmailyn" style="margin-left:180px; margin-top:10px; width:100px;">
<option value="" disabled selected>이메일로 정보를 수신하시겠습니까?</option>
<option value="Y">예</option>
<option value="N">아니오</option>
</select>
<label for="userEmailyn">이메일 수신여부</label>
</div>
<div class="text-center mt-2">
<button type="submit" class="btn btn-info waves-light" id="signUpButton" mdbRippleRadius>가입하기
<i class="fa fa-sign-in ml-1"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- 회원가입모달 끝 -->
<!-- 아이디 찾기 -->
<div class="modal fade" id="FindUserIDInfoForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!-- 이름,주민등록번호,연락처로 아이디찾기 -->
<form #FindIdForm="ngForm" (ngSubmit)="FindUserId(FindIdForm)">
<div class="modal-content">
<!-- 메뉴타이틀 -->
<div class="modal-header light-blue darken-3 white-text">
<h4 class="title">
<i class="fa fa-user-plus"></i>아이디 찾기</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 입력박스 -->
<div class="modal-body">
<div class="md-form form-sm">
<i class="fa fa-user prefix"></i>
<input mdbActive type="text" id="FindID_userName" class="form-control" [(ngModel)]="findIDUser.uname" name="FindID_uname">
<label for="FindID_userName">이름</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-phone prefix"></i>
<input mdbActive type="text" id="FindID_userPhone" class="form-control" [(ngModel)]="findIDUser.uphone" name="FindID_uphone">
<label for="FindID_userPhone">연락처('-'제외, 숫자만입력)</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-calendar prefix"></i>
<input mdbActive type="text" id="FindID_userBirth" class="form-control" [(ngModel)]="findIDUser.ubirth" name="FindID_ubirth">
<label for="FindID_userBirth">생년월일(숫자만입력)</label>
</div>
<div class="text-center mt-2">
<button type="submit" class="btn btn-info waves-light" id="FindID_Button" mdbRippleRadius>아이디찾기
<i class="fa fa-sign-in ml-1"></i>
</button>
</div>
<br />
<ng-template [ngIf]="user.uid == null">위 항목들을 작성해주세요</ng-template>
<ng-template [ngIf]="user.uid != null"><p style="text-align: center; font-weight:bold; font-size:16px;">일치하는 아이디 : {{user.uid}}</p></ng-template>
</div>
</div>
</form>
</div>
</div>
<!-- 비밀번호 찾기 -->
<div class="modal fade" id="FindUserPWInfoForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!-- 아이디,이름,주민등록번호,연락처로 아이디찾기 -->
<form #FindPwForm="ngForm" (ngSubmit)="FindUserPw(FindPwForm)">
<div class="modal-content">
<!-- 메뉴타이틀 -->
<div class="modal-header light-blue darken-3 white-text">
<h4 class="title">
<i class="fa fa-user-plus"></i>비밀번호 찾기</h4>
<button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- 입력박스 -->
<div class="modal-body">
<div class="md-form form-sm">
<i class="fa fa-envelope prefix"></i>
<input mdbActive type="text" id="FindPW_userId" class="form-control" [(ngModel)]="findPWUser.uid" name="FindPW_uid">
<label for="FindPW_userId">아이디</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-user prefix"></i>
<input mdbActive type="text" id="FindPW_userName" class="form-control" [(ngModel)]="findPWUser.uname" name="FindPW_uname">
<label for="FindPW_userName">이름</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-phone prefix"></i>
<input mdbActive type="text" id="FindPW_userPhone" class="form-control" [(ngModel)]="findPWUser.uphone" name="FindPW_uphone">
<label for="FindPW_userPhone">연락처('-'제외, 숫자만입력)</label>
</div>
<div class="md-form form-sm">
<i class="fa fa-calendar prefix"></i>
<input mdbActive type="text" id="FindPW_userBirth" class="form-control" [(ngModel)]="findPWUser.ubirth" name="FindPW_ubirth">
<label for="FindPW_userBirth">생년월일</label>
</div>
<div class="text-center mt-2">
<button type="submit" class="btn btn-info waves-light" id="FindPW_Button" mdbRippleRadius>비밀번호찾기
<i class="fa fa-sign-in ml-1"></i>
</button>
</div>
<br />
<ng-template [ngIf]="user2.upw == null">위 항목들을 작성해주세요</ng-template>
<ng-template [ngIf]="user2.upw != null"><p style="text-align: center; font-weight:bold; font-size:16px;">비밀번호 : {{user2.upw}}</p></ng-template>
</div>
</div>
</form>
</div>
</div>
</section>
<br>
<br>
<br>
<ng2-toasty></ng2-toasty>
| cs |
위의 html에서 modal 창에서 입력을 받아서 회원가입을 진행.
회원가입
스프링소스
구조
JoinController.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
package shop.lee.join;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import shop.kim.login.model.User;
import shop.lee.join.service.JoinService;
@RestController
@RequestMapping("/toma/join")
@CrossOrigin(origins= "*")
public class JoinController {
@Autowired
JoinService joinService;
@PostMapping("/")
public int NewUser(@RequestBody User user) {
return joinService.NewUser(user);
}
}
| cs |
JoinService.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
package shop.lee.join.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import shop.kim.login.model.User;
@Service
public class JoinService {
@Autowired
JoinMapper joinMapper;
public int NewUser(User user) {
return joinMapper.NewUser(user);
}
}
| cs |
JoinMapper.java
1
2
3
4
5
6
7
8
9
10
11
|
package shop.lee.join.service;
import org.apache.ibatis.annotations.Mapper;
import shop.kim.login.model.User;
@Mapper
public interface JoinMapper {
public int NewUser(User user);
}
| cs |
joinMapper.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="shop.lee.join.service.JoinMapper">
<resultMap type="User" id="userResultMap">
<result property="uid" column="U_ID" />
<result property="upw" column="U_PW" />
<result property="uname" column="U_NAME" />
<result property="uphone" column="U_PHONE" />
<result property="uaddr1" column="U_ADDR1" />
<result property="uaddr2" column="U_ADDR2" />
<result property="uaddr3" column="U_ADDR3" />
<result property="uaddrcheck" column="U_ADDRCHECK" />
<result property="ubirth" column="U_BIRTH" />
<result property="ugender" column="U_GENDER" />
<result property="ujoindate" column="U_JOINDATE" />
<result property="usmsyn" column="U_SMSYN" />
<result property="uemailyn" column="U_EMAILYN" />
</resultMap>
<insert id="NewUser" parameterType="User">
INSERT INTO TM_USER(U_ID,U_PW,U_NAME,U_PHONE,U_ADDR1,U_BIRTH,U_GENDER,U_SMSYN,U_EMAILYN)
VALUES (#{uid},#{upw},#{uname},#{uphone},#{uaddr1},#{ubirth} ,#{ugender}, #{usmsyn},#{uemailyn})
</insert>
</mapper>
| cs |
댓글 없음:
댓글 쓰기