mindol1004/real-world-springboot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: user signup page, main page feature and api communication success

Browse Source
This commit is contained in:
kms
2022-09-13 00:28:21 +09:00
parent c4e18501e2
commit d4763d0098
12 changed files with 257 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
build.gradle
View File

@@ -20,6 +20,9 @@ dependencies {
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-test'
implementation 'org.projectlombok:lombok:1.18.24'
// render
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.1.0'
annotationProcessor 'org.projectlombok:lombok'
// https://mvnrepository.com/artifact/org.postgresql/postgresql

25
src/main/java/com/io/realworld/api/MainController.java Normal file
View File

@@ -0,0 +1,25 @@
package com.io.realworld.api;
import com.io.realworld.DTO.UserSignupRequest;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Slf4j
@Controller
public class MainController {
@GetMapping("")
public String mainHome(){
return "index";
}
@GetMapping("/register")
public String signupView(){
return "/users/signup";
}
}

10
src/main/java/com/io/realworld/api/users/UserController.java
View File

@@ -5,12 +5,17 @@ import com.io.realworld.DTO.UserResponse;
import com.io.realworld.repository.User;
import com.io.realworld.service.UserService;
import com.io.realworld.service.UserServiceImpl;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import javax.validation.Valid;
@RestController
@Slf4j
@RequestMapping("/api")
public class UserController {
@@ -20,14 +25,15 @@ public class UserController {
this.userService = userService;
}
@PostMapping("/users")
@PostMapping(value = "/users")
public UserResponse signup(@Valid @RequestBody UserSignupRequest userSignupRequest) {
User user = userService.signup(userSignupRequest);
log.info("register");
return UserResponse.builder().username(user.getUsername())
.email(user.getEmail())
.bio(user.getBio())
.image(user.getImage())
.build();
}
}

3
src/main/java/com/io/realworld/config/WebConfig.java
View File

@@ -27,7 +27,7 @@ public class WebConfig {
http.csrf()
.disable()
.authorizeRequests()
.antMatchers("/users/**","/h2-console/**").permitAll()
.antMatchers("/api/users/**", "/h2-console/**", "/**").permitAll()
.anyRequest().authenticated()
.and().headers().frameOptions().sameOrigin()
.and()
@@ -37,4 +37,5 @@ public class WebConfig {
.authenticationEntryPoint(new HttpStatusEntryPoint(HttpStatus.UNAUTHORIZED));
return http.build();
}
}

1
src/main/resources/application.properties
View File

@@ -1,4 +1,3 @@
server.servlet.contextPath=/api
# H2
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console

25
src/main/resources/static/js/userAjax.js Normal file
View File

@@ -0,0 +1,25 @@
function register() {
const username = $("#username").val();
const password = $("#password").val();
const email = $("#email").val();
const userDTO = JSON.stringify({
user: {
username: username,
password: password,
email: email,
}
})
$.ajax({
url: "/api/users",
data: userDTO,
contentType: "application/json",
async: false,
type: "POST",
}).success(function (data) {
// Todo redirect home login status
console.log(JSON.stringify(data));
window.location.href= "/index.html";
console.log(window.location.href)
});
}

14
src/main/resources/templates/framents/footer.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="Footer">
<footer>
<div class="container">
<a href="/" class="logo-font">conduit</a>
<span class="attribution">
An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed under MIT.
</span>
</div>
</footer>
</th:block>
</html>

47
src/main/resources/templates/framents/header.html Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="HeaderFragment">
<head>
<meta http-equiv="Content-Type" content="application/json; charset=UTF-8"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>Conduit</title>
<!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic"
rel="stylesheet" type="text/css">
<!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
<link rel="stylesheet" href="//demo.productionready.io/main.css">
</head>
<body>
<nav class="navbar navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">conduit</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<!-- Add "active" class when you're on that page" -->
<a class="nav-link active" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<i class="ion-compose"></i>&nbsp;New Article
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<i class="ion-gear-a"></i>&nbsp;Settings
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Sign in</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/register}">Sign up</a>
</li>
</ul>
</div>
</nav>
</body>
</th:block>
</html>

88
src/main/resources/templates/framents/home.html Normal file
View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="MainHome">
<div class="home-page">
<div class="banner">
<div class="container">
<h1 class="logo-font">conduit</h1>
<p>A place to share your knowledge.</p>
</div>
</div>
<div class="container page">
<div class="row">
<div class="col-md-9">
<div class="feed-toggle">
<ul class="nav nav-pills outline-active">
<li class="nav-item">
<a class="nav-link disabled" href="">Your Feed</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="">Global Feed</a>
</li>
</ul>
</div>
<div class="article-preview">
<div class="article-meta">
<a href="profile.html"><img src="http://i.imgur.com/Qr71crq.jpg"/></a>
<div class="info">
<a href="" class="author">Eric Simons</a>
<span class="date">January 20th</span>
</div>
<button class="btn btn-outline-primary btn-sm pull-xs-right">
<i class="ion-heart"></i> 29
</button>
</div>
<a href="" class="preview-link">
<h1>How to build webapps that scale</h1>
<p>This is the description for the post.</p>
<span>Read more...</span>
</a>
</div>
<div class="article-preview">
<div class="article-meta">
<a href="profile.html"><img src="http://i.imgur.com/N4VcUeJ.jpg"/></a>
<div class="info">
<a href="" class="author">Albert Pai</a>
<span class="date">January 20th</span>
</div>
<button class="btn btn-outline-primary btn-sm pull-xs-right">
<i class="ion-heart"></i> 32
</button>
</div>
<a href="" class="preview-link">
<h1>The song you won't ever stop singing. No matter how hard you try.</h1>
<p>This is the description for the post.</p>
<span>Read more...</span>
</a>
</div>
</div>
<div class="col-md-3">
<div class="sidebar">
<p>Popular Tags</p>
<div class="tag-list">
<a href="" class="tag-pill tag-default">programming</a>
<a href="" class="tag-pill tag-default">javascript</a>
<a href="" class="tag-pill tag-default">emberjs</a>
<a href="" class="tag-pill tag-default">angularjs</a>
<a href="" class="tag-pill tag-default">react</a>
<a href="" class="tag-pill tag-default">mean</a>
<a href="" class="tag-pill tag-default">node</a>
<a href="" class="tag-pill tag-default">rails</a>
</div>
</div>
</div>
</div>
</div>
</div>
</th:block>
</html>

6
src/main/resources/templates/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:replace="framents/header :: HeaderFragment"></th:block>
<th:block th:replace="framents/home :: MainHome"></th:block>
<th:block th:replace="framents/footer :: Footer"></th:block>
</html>

39
src/main/resources/templates/users/signup.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<script type="text/javascript" th:src="@{/js/userAjax.js}"></script>
<th:block th:replace="framents/header :: HeaderFragment"></th:block>
<div class="auth-page">
<div class="container page">
<div class="row">
<div class="col-md-6 offset-md-3 col-xs-12">
<h1 class="text-xs-center">Sign up</h1>
<p class="text-xs-center">
<a href="">Have an account?</a>
</p>
<ul class="error-messages">
<li>That email is already taken</li>
</ul>
<form onsubmit="return register()";>
<fieldset class="form-group">
<input class="form-control form-control-lg" type="text" placeholder="Your Name" id="username">
</fieldset>
<fieldset class="form-group">
<input class="form-control form-control-lg" type="text" placeholder="Email" id="email">
</fieldset>
<fieldset class="form-group">
<input class="form-control form-control-lg" type="password" placeholder="Password" id="password">
</fieldset>
<button class="btn btn-lg btn-primary pull-xs-right" >
Sign up
</button>
</form>
</div>
</div>
</div>
</div>
<th:block th:replace="framents/footer :: Footer"></th:block>
</html>

16
web/index.jsp
View File

@@ -1,16 +0,0 @@
<%--
Created by IntelliJ IDEA.
User: kms
Date: 2022/09/07
Time: 10:56 PM
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
$END$
</body>
</html>