Vue (45) 썸네일형 리스트형 글 수정 1 (springboot - vue) 추가한 파일 boardEdit.vue 추가한 코드 (springboot) BoardJpaController - editBoard (vue) board.vue BoardEdit 1. 글 읽기 화면(board.vue) 에서 Edit 버튼을 누르면 board Id를 넘겨주면서 수정화면으로 넘어간다 2. mounted 를 사용하여 화면이 로드되면 v-model에 수정 전 제목과 내용을 할당하는 메소드 실행 (v-model="subject" 지정되어있고, subject값에 기존 제목을 저장한다.) detailUsers() { let bid = this.$route.query.bid console.log("bid ? : " + bid) this.$axios.get("boardjpa/"+ bid,) .then(res.. 글 작성 (Springboot + Vue) 수정내용 컬럼 변경 내용 1. board table의 password 삭제 2. 기존 board id인 id 를 bid 로 변경 (member id를 참조키로 받기위해) 3. member table id -> mid 수정 DB table 관계변경 -> member mid를 board 에서 참조 springboot 수정내용 1. board id 를 bid 그리고 password 컬럼을 삭제했으므로 dto.BoardDTO & model.Board에 해당내용 적용 2. 위 내용의 변경사항에 따라 BoardRepository 수정 3 Member id -> mid로 수정했으니 MemberController, JwtTokenUtil, Member 파일 수정 4 수정파일 dto.BoardDTO model.Board.. Store 수정 & 마이페이지 구현 (12.31~1.04) 1. UserStore 수정 기능이 뒤죽박죽 섞여있었던 userStore를 수정하였다 action에서 일어나는 일들을 mutations로 보내서 state를 수정한다. action에는 login 메소드와 getUserInfo 메소드가 있다. login action // Login.Vue의 로그인 버튼을 누르면 실행되는 메소드 일부 try { this.$axios.post("/authenticate", JSON.stringify(saveData), { headers: { "Content-Type": `application/json`, }, }) .then((response) => { this.$store.dispatch('login', response.data); //dispatch this.$router.. (signUp-3) 회원가입 마무리 1. passCheck passCheckNum 데이터를 만들어 비밀번호가 일치할때 0, 틀렸을때 1 값이 부여되도록 설정한다 passCheck(){ if(this.passwordCheck===""||null||undefined||NaN){ this.placeholder = "" }else if(this.password!==this.passwordCheck){ this.placeholder = "비밀번호가 틀렸습니다"; this.passCheckNum = 1; }else{ this.placeholder="비밀번호가 일치합니다"; this.passCheckNum = 0; } }, 2. doubleCheck 지난번에 만든 checkNum는 닉네임이 생성가능하면 0, 중복되면 1 값 을 부여한다 // Vue -.. (signup-2) 중복확인 수정한 파일 위치 Springboot-- springbootapi.member.Member springbootapi.member.MemberRepository springbootapi.security.controller.MemberController Vue.js-- views.signup plugins.axios 기존 Member의 컬럼에 이름과 닉네임을 추가했다. 회원가입시 "이메일, 패스워드, 이름, 닉네임" 을 입력해야한다 1. 닉네임 중복방지 구현 signup.vue 페이지에 doubleCheck 메소드를 생성해 닉네임 중복체크를 구현했다. text-field에서 닉네임을 입력 후 중복확인 버튼을 누르면 doubleCheck메소드를 통해 입력한 닉네임을 Post 방식으로 Springboot에 실어.. doFilter 특정 URL 제외시키기 private static final List EXCLUDE_URL = Collections.unmodifiableList( Arrays.asList( "/signup/**", "/api/member", "/authenticate" )); ... ... ... @Override protected boolean shouldNotFilter(HttpServletRequest request) throws ServletException { return EXCLUDE_URL.stream().anyMatch(exclude -> exclude.equalsIgnoreCase(request.getServletPath())); } sholudNotFilter 메서드를 사용하여 EXCLUDE_URL 리스트에 제외시킬 URL.. (SignUp-1) 회원가입 구현하기 이전에 만들어둔 JspMVC에서 구현한 회원가입 기능을 조금 가져왔다. js로 구현할때 보다 Vue가 더 편리하고 기능도 많은 것 같다. passCheck(){ if(this.passwordCheck===""||null||undefined||NaN){ this.placeholder = "" }else if(this.password!==this.passwordCheck){ this.placeholder = "비밀번호가 틀렸습니다" }else{ this.placeholder="비밀번호가 일치합니다"; } } passCheck를 통해서 비밀번호 일치를 알려주고 Next 버튼을 클릭하면 입력한 사용자의 정보를 Springboot로 데이터를 넘기도록 한다. Springboot member에 닉네임과 이름을 저장할.. (Login-3) axios 인터셉터 사용하기 인터셉터란? 인터셉터는 1.요청하기 직전, 2. 응답을 받고 then, catch로 처리 직전에 가로챌 수 있다. 인터셉터는 모든 소스 내 axios가 들어간 부분에 공통적으로 적용이 되어야 한다. 따라서 global config를 해줘야한다. 여러가지 인터셉터를 구현하는 방법이 있지만, axios.interceptors를 내 web application에 전역으로 설정하여 구성하였다. (다음 블로그 참고 :: https://ayoteralab.tistory.com/entry/Vuejs-21-axios-interceptors) import axios from 'axios'; // Add a request interceptor axios.interceptors.request.use( function (co.. 이전 1 2 3 4 5 6 다음
