국비과정 (138) 썸네일형 리스트형 [Vue] 문법정리 {{데이터바인딩}} JS데이터를 HTML에 꽂아넣는 문법 데이터바인딩 하는 이유 _ 이걸 왜, 언제쓰냐가 중요** 1. HTML에 하드코딩해놓으면 나중에 변경 어려움 (가변적인 데이터들은 변수화 해두면 좋음) 2. Vue의 실시간 자동 렌더링 기능을 쓰기위해 HTML속성도 데이터바인딩 가능 : 속성="데이터이름" * 단방향 데이터 바인딩 _ 데이터 => UI(사용자 인터페이스) 데이터가 변경되면 UI에 반영되지만 UI에서의 변경은 데이터에 반영되지 않는다. 따라서, 주로 데이터를 읽고 표시할 때 사용 ( v-text ) * 양방향 데이터 바인딩 _ 데이터 => UI(사용자 인터페이스) 데이터의 변경은 UI에 반영되고, UI에서의 변경은 데이터에도 반영된다. 따라서, 사용자 입력을 받거나 사용자가 UI를 .. 20231006 _[85일차]_01. Vue _ 로그인 이어서 아이디 & 패스워드 입력 유효성검사 해보자. LoginPage.vue에 div 추가하고 data에서는 각각 idInputCheck 와 pwInputCheck 를 거짓으로 설정해줬다. data와 methods 사이에 watch {} 를 넣어준다. // Vue 인스턴스의 데이터 변경을 관찰 / 반응 watch:{ userId(){ this.idInputCheck = true; } }, userId는 아래처럼 input창에서 v-model로 지정해줬었다 아이디 입력창에 값을 입력하면 idIInputCheck가 true가 되면서 지정한 문구(div)가 뜬다. 비밀번호도 4글자 이하면 문구가 뜨도록 설정해준다. watch:{ userId(){ this.idInputCheck = true; }, userPasswo.. 20231005 _[84일차]_01. Vue 관련 개념들 [ 수제비 기출문제 ] 소수판별 @RequestMapping 으로 /api 요청을 받아 처리해준다. http://localhost:80/api/board => api가 포함된 요청은 controller에서 받아서 처리하고 이후 vue에서 넘겨받아 데이터를 브라우저에 띄워줄예정. * vue에게 요청한게 controller로 가면 json형태의 데이터를 그대로 보여주기 때문에 구분을 위해 api를 붙여준거다. main.js에서도 /api를 붙여준다. (Vue 와 서버 연결) * 참고 * 8080 : 테스트용 홈페이지에서 사용. 80 : 실제 서비스용. Controller와 View 사이에 데이터를 주고받을 때 xml, json 을 사용해서 통신. ( 지금은 json을 사용해서 Spring boot 와 Vue.. 20231004 _[83일차]_01. Vue (5차)_로그인 기능 구현 BoardList.vue 에서 가장먼저 실행되는 부분은 함수부분 mounted 부분이 먼저 실행되면서 하단의 board(pageNo)가 실행 => paging(totalcount)가 실행 쌤이 주신 파일 다시 넣었다. 페이징부분은 다시 살펴보자 pdf_5차 참고 p12 ~ Vuex 설치하기 [ Vuex ] > npm install --save vuex > npm install --save vuex-persistedstate 설치가 완료됐다면 아래처럼 package.json에서 확인할 수 있다. src 아래 store 폴더 생성 > 내부에 store.js 파일생성 pdf에 있는 코드 붙여넣어주고 (로그인&로그아웃을 위해 필요) * mutaion : Vuex 스토어에서 상태(state)를 변경하는 일련의 함.. [팀플] DongneBook_ 자동로그인 [ login.jsp ] _ body 부분 아이디저장 자동로그인 로그인 아이디 & 비밀번호 찾기 | 회원가입 [ login.jsp ] _ script 부분 자동로그인 체크박스에 체크한 채로 로그인버튼을 누르면 login.jsp에서 체크박스 체크여부를 검사한다. 체크되어있다면 입력한 id와 pw를 서버로 보낸다. 위의 요청에 대해 LoginController에서 처리 > 입력한 id & pw 값에 대한 일치여부 확인 (login메소드) > 일치한다면 해당 계정에 대한 auto값을 1로 설정 (autoCheck메소드) login메소드에 대한 쿼리문 autoCheck메소드에 대한 쿼리문 auto값을 update한 결과값 (auto=1)이 들어온다면 setCookie("SuserID", id, 7); setCo.. 20230922 _[79일차]_01. Vue (4차)_게시판 댓글창 만들기 오늘은 댓글만들자 댓글 CRUD 1. comments와 연동하기 1-1. 보드에 댓글 수 출력하기 comments에 최근글에 대한 댓글 더미데이터 넣어주세요. 쿼리문 변경 boardList.vue 변경 2. 상세보기 눌렀을 때 화면에 댓글들 출력하기 2-1. 글제목 옆에 댓글 갯수 먼저 표시해줄건데 게시판 글 list를 불러온 boardview에 이미 commentcount가 있다. 그래서 그냥 vue에서 댓글 갯수를 뽑아내 주기만 하면 된다. board 번호 제목 글쓴이 날짜 조회수 {{ n.bno }} {{ n.btitle }} ({{ n.commentcount }}) {{ n.m_name }} {{ n.bdate }} {{ n.blike }} 글쓰기 이제 detailPage에도 댓글을 띄워보자. 일.. 20230921 _[78일차]_01. Vue (4차)_게시판만들기3 오늘은 게시판 삭제 수정 만든다. 그럼 CRUD 완성 Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현 | Bottlehs Tech Blog Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한 www.bottlehs.com [ Vue.js ] 게시판만들기 (Update, Delete) (tistory.com) [ Vue.js ] 게시판만들기 (Update, Delete) detail components 게시글 클릭했을 때, 상세 페이지 만들기 Read.vu.. 20230920 _[78일차]_01. Vue (4차)_게시판만들기2 구동하고 postman에서 확인 어제 만든 게시판 테이블 아래쪽에 button 추가해준다. board 번호 제목 글쓴이 날짜 조회수 {{ n.bno }} {{ n.btitle }} {{ n.m_name }} {{ n.bdate }} {{ n.blike }} 글쓰기 클릭기능 넣어주고 아래쪽에서 write 메소드 만들어주나보다. 글쓰기 method 에 write 추가해준다. methods:{ viewDetail(bno){ //alert(bno+'번을 눌렀습니다'); this.requestBody.bno = bno; this.$router.push({ path: './detail', query: this.requestBody }); }, write(){ this.$router.push("write"); } }.. 이전 1 2 3 4 5 6 ··· 18 다음
