멤버등록이 좀더 깔끔하게 보이게 하기 위해
member.html 을 수정함
public 부분의 index.js 를 수정함
결과 짠!
구글에 bootstarp cdn 검색
시작하기 · 부트스트랩
부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치�
bootstrapk.com
저만큼 복사해서
member.html 에 붙여넣음
구글에 bootstrap button 검색해서
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
원하는 버튼 클래스명만 가져와서
public 의 index.js에서 수정
구글에 테이블도 검색해서
Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
getbootstrap.com
저 클래스 이름을
member.html list 에 붙여줌
구글에 input form 을 검색해서
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
getbootstrap.com
복사해서 member.html에 붙여넣고
필요한 부분만 수정함
결과
F12 눌러서
모바일 모양 버튼 누르면 모바일에서 보이는 화면이 나옴
수정버튼에 수정 기능을 추가하기위해
public의 index.js를 고침
routes의 member.js하단을 수정함
수정할 유저의 id를 넘겨받아서 id에 해당하는 유저이름을 바꿈
홍길동 1에서 수정을 누르고 홍길동 1234로 입력하고 확인을 누르고
새로고침을 누르면
수정됨
DB도 수정됨!
삭제 기능 추가
public index.js 부분에 추가함
routes의 member.js 에서 삭제부분을 추가함
해당 아이디의 유저 정보 삭제함
으아아아아 삭제
새로고침 하면 으아아아아 가 삭제됨
DB에서도 삭제
변경에 성공하면
node.js 터미널에 200이 뜬다
'Data Base > MySQL' 카테고리의 다른 글
| 2020.07.22. 수업내용 - sequelize 사용해서 nods.js / DB 연동하기(1) (0) | 2020.07.22 |
|---|---|
| 2020.07.21. 수업내용 - 데이터 베이스(MySQL - CRUD) (0) | 2020.07.21 |