Amigo Project 2일차

메인페이지 설계

<div class="screen-area">

</div>
<div class="remote-controller">
    <div class="profile">
        <img src=""> {{!유저 프로필이미지}}
    </div>
    <div class="nickname">
        {{principal.name}}
    </div>
    <div class="my-page">
        마이페이지
    </div>
    <div class="enter">
        등교하기
    </div>
    <div class="post">
        게시판
    </div>
    <div class="logout">
        로그아웃
    </div>
</div>
<script src="/static/js/screen.js"></script>

 

screen-area영역을 script를 사용해 유동적으로 바뀌게 할 계획이다

 

src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js";
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==";
crossorigin="anonymous";
referrerpolicy="no-referrer";

const enter = $('.enter');
const post = $('.post');
const screen = $('.screen-area');
const logout = $('.logout');
const school = $('.other-school');
const friends = $('.friends');
// 학교 바꾸기 기능 추가
school.each(function (index, element) {
    $(element).on('click', function () {
        const schoolId = $(this).data('id');
        fetch("http://localhost:8080/main/changeSchool?id=" + schoolId)
            .then(data => {screen.innerHTML = data;});
    });
});
// 로그아웃 이벤트 추가 (로그인 화면으로)
logout.on('click',location.href="http://localhost:8080/");
// 학교로 들어가는 이벤트 추가
enter.on('click',fetch("http://localhost:8080/main/school")
    .then(data => {
        screen.innerHTML = data;
    }));
// 게시판으로 들어가는 이벤트 추가
post.on('click',fetch("http://localhost:8080/main/post")
    .then(data => {
        screen.innerHTML = data;
    }));
// 처음에는 게시판을 띄우도록 설정
fetch("http://localhost:8080/main/post").then(data => {
    screen.innerHTML = data;
});

 

JQUERY를 사용하여 자바스크립트를 더욱 간편하게 사용하였다

 

package com.example.amigo_project.controller;

import jakarta.servlet.http.HttpSession;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

/**
 * 스크린 변경 컨트롤러
 */
@RequiredArgsConstructor
@Controller
@RequestMapping("/main")
public class ScreenController {

    private final HttpSession session;
    /**
     * 게시판으로 화면 전환
     * @return
     */
    @GetMapping("/post")
    public String boardViewHandler(Model model) {
        int schoolId = (Integer)session.getAttribute("schoolId");
        // TODO schoolId로 해당하는 학교의 게시판리스트를 가져와서 Model에 넣기
        return "views/post";
    }

    /**
     * 학교로 들어가기
     * @return
     */
    @GetMapping("/school")
    public String schoolViewHandler() {
        return "views/school";
    }

    /**
     * 현재 학교 상태 바꾸기
     * @param schoolId
     * @return
     */
    @GetMapping("/changeSchool")
    public String changeSchoolViewHandler(@RequestParam(name="id")int schoolId) {
        session.setAttribute("schoolId", schoolId);
        return "redirect:/main/post";
    }
}

 

screen-area영역에 mustache 파일을 넘겨줄 ScreenController 설계