프로젝트 소개
콘텐츠 관리 시스템인 Alibaba Baixiu는 콘텐츠 관리와 콘텐츠 표시라는 두 가지 핵심 기능으로 구분됩니다.
1. 기능 모듈
1.1 콘텐츠 관리
기준 치수 | 기능 |
---|
사용자 | 로그인, 로그아웃, 사용자 추가, 삭제, 수정 및 조회 |
기사 | 기사 관리 |
분류 | 분류관리 |
논평 | 댓글 관리 |
웹사이트 설정 | 키워드, 설명, 웹사이트 로고, 캐러셀 이미지 |
1.2 콘텐츠 표시
기준 치수 | 기능 |
---|
첫 페이지 | 내비게이션, 기사 데이터 표시 |
목록 페이지 | 카테고리별 기사 목록 표시 |
세부정보 페이지 | 기사 내용 표시 및 댓글 기능 구현 |
2. 개발 모드
2.1 프론트엔드와 백엔드의 혼합 개발 모델
모든 HTML 코드와 데이터는 서버 측에서 접합되며 모든 콘텐츠는 한 번에 클라이언트로 전송됩니다. 브라우저는 코드를 실행하여 사용자에게 콘텐츠를 제공합니다.
질문:
- 프론트엔드와 백엔드 개발자는 서로의 코드에 익숙하지 않습니다. 혼합 개발에서는 서로의 코드를 다루는 것이 매우 어렵습니다.
- 개발 과정에서 코드는 필연적으로 서로 겹쳐 작업량이 두 배로 늘어납니다.
2.2 프론트엔드와 백엔드 분리 개발 모델
장점: 명확한 책임과 업무 분담, 독립적인 개발, 서로 영향이 없음.
3. 프로젝트 구조
시스템 계층화 | 기술 사용 |
---|
데이터 레이어 | 몽고DB |
서비스 계층 | node.js(익스프레스) |
고객 | 아트 템플릿, jQuery, 멋진 글꼴, 스와이프 |
4. 프로젝트 운영 환경 설정(프로젝트를 실행하기 위해 꼭 알아야 할 사항)
- node.js 소프트웨어를 설치하고 성공적으로 설치되었는지 테스트합니다.
- Win + R은 Windows 시스템에서 실행 중인 프로그램을 열고, 실행 중인 프로그램에 powershell을 입력하고 Enter를 눌러 명령줄 프로그램을 엽니다.
-
node -v
명령을 입력하여 node.js 버전을 확인합니다. 명령줄 프로그램에 버전 번호가 출력되고 오류가 보고되지 않으면 설치가 성공한 것입니다.
- mongodb 및 mongodb-compass 소프트웨어 설치
- Alibaba Baixiu 프로젝트 폴더를 하드 디스크에 복사합니다(서버측 프로그램).
- 명령줄 도구에서 프로젝트 루트 디렉터리로 이동합니다.
- Shift 키를 누른 채 마우스 오른쪽 버튼을 클릭하고 여기에서 PowerShell 창 열기를 선택합니다.
-
npm install
명령을 사용하여 프로젝트에 필요한 종속 파일을 설치합니다. - app.js 파일을 열고 47행의 데이터베이스 연결 섹션을 수정합니다: 'mongodb://itcast:itcast@localhost:27017/alibaixiu'
'mongodb://localhost:27017/alibaixiu'의 경우
(1) 이유: mongodb 데이터베이스 연결 계정 및 비밀번호 정보를 생성하지 않았습니다. mongodb 데이터베이스에 로그인하는 데 기본 방법을 사용하기로 했습니다.
(2) 귀하의 계정과 비밀번호로 데이터베이스에 로그인하려는 경우. 참고하세요: https://www.cnblogs.com/b02330224/p/10049395.html
명령줄에 명령을 순서대로 입력합니다: use alibaixiu
#Enter alibaixiu 데이터베이스
db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']})
# 데이터베이스 사용자 생성
권한이 부족하다는 메시지가 나오는 경우, 먼저 위 링크를 참고하여 mongodb 관리자 계정으로 데이터베이스에 로그인해 주시기 바랍니다.
7. (새로운 단계) 최근 db_data 데이터베이스 데이터가 업로드되었으며, mongodb-compass 소프트웨어를 통해 alibaixiu 데이터베이스에 들어갈 수 있습니다.
db_data 폴더에 있는 json 데이터와 동일한 이름으로 users
, comment
, slides
, categories
, posts
, settings
컬렉션을 생성합니다.
(컬렉션), 마지막으로 각 컬렉션의 해당 json 데이터를 차례로 가져옵니다.
8. 명령줄 도구에 node app.js
입력하여 프로젝트를 시작합니다.
5. 프로젝트 실행 후 주의사항 (好看的项目
실행하기 위해 꼭 알아야 할 사항)
1. 브라우저를 열고 브라우저 주소 표시줄에 localhost:3000/admin/login.html을 입력하여 로그인 페이지로 들어갑니다.
시스템 기본 사용자 이름 입력: (원본) [email protected] (현재) [email protected] 비밀번호: 123456 관리자 페이지 입력
2. 데이터베이스 파일이 업로드되지 않기 때문에 모든 데이터를 수동으로 추가해야 합니다. (db_data에 json 데이터가 도입된 경우 2~10단계를 건너뜁니다.)
3. 관리자 페이지에 접속하여 먼저 계정 정보를 변경(비밀번호 변경 등)한 후 사용자 아바타를 업로드하세요.
4. 그런 다음 기사 정보, 시스템 설정 정보, 캐러셀 이미지 정보를 추가합니다. (주문은 필요하지 않으며 추가란 양식 정보 작성, 이미지 파일 선택 등을 의미합니다.)
5. 분류정보 변경시 분류정보 아이콘은 fa-phone, fa-gift 등 폰트어썸으로 검색이 필요하니 참고하세요.
Font-awesome에서 검색되는 이미지 클래스 이름 형식은 fa fa-xxx-xxx이며, 그 뒤에 fa-xxx-xxx 부분만 추가하면 됩니다.
6. 기본 데이터베이스 정보를 추가한 후 로그아웃을 선택하고 신규 사용자를 등록할 수 있습니다. (등록된 사용자는 기본적으로 일반 사용자로 설정됩니다.)
또는 관리자의 사용자 추가 권한을 이용하여 일반 사용자를 추가할 수 있습니다.
7. 배경 데이터를 추가한 후 일반 사용자 계정을 사용하여 프런트 엔드 기사 표시 페이지에 들어갑니다(페이지 콘텐츠를 더 풍부하게 만들고 싶은 경우).
기사정보 약 15개, 카테고리 정보 약 4개를 추가하는 것이 좋습니다)
8. 관리자 계정을 사용하여 웹사이트에 접속하려면 관리자 계정에서 로그아웃하지 마세요. 브라우저에서 새 탭을 엽니다.
주소 표시줄에 localhost:3000을 입력하면 첫 기사 표시 페이지로 들어갑니다.
9. 관리자가 댓글 기능을 켜면 프론트 기사 상세 페이지에 댓글 기능이 표시됩니다. 관리자가 댓글 기능을 끄면 프론트 기사 상세 페이지에 댓글 기능이 표시됩니다.
페이지에 댓글 기능이 표시되지 않습니다.
10. 관리자가 댓글 검토 기능을 켜면 사용자의 댓글이 즉시 페이지에 표시되지 않으며 관리자가 백그라운드에 있어야 합니다.
댓글은 관리 페이지에서 검토되며, 승인된 후에만 기사 페이지에 표시됩니다. 관리자가 댓글 기능을 꺼놓은 경우,
기사 세부정보 페이지에 표시됩니다.
11. 그래도 프로젝트가 실행되지 않으면 1565066165로 연락주세요.
6.프로젝트 주소
홈페이지: http://luoxu.ltd:3000/ (도메인 이름 등록 중 http://luoxucoder.icu로 임시 변경됨)
로그인 페이지: http://luoxu.ltd:3000/admin/login.html (비슷함)
프로젝트 효과 표시
1. 프런트 엔드 기사 표시 페이지
2. 프런트엔드 기사 분류 페이지
3. 프런트엔드 기사 세부정보 페이지
4. 로그인 페이지
5. 등록 페이지
6.백엔드 관리 페이지
프로젝트 기능
1. 사용자 기능
1.1 로그인
- 로그인 버튼 클릭 이벤트 추가
- 사용자가 텍스트 상자에 입력한 사용자 이름과 비밀번호를 가져옵니다.
- 사용자가 사용자 이름과 비밀번호를 입력했는지 확인하세요. 그렇지 않은 경우 프로그램이 아래쪽으로 실행되지 않도록 하고 사용자에게 사용자 이름과 비밀번호를 입력하라는 메시지를 표시합니다.
- 로그인 기능을 구현하는 인터페이스를 호출합니다. 로그인에 성공하면 데이터 관리 홈 페이지로 이동합니다. 로그인에 실패하면 사용자 이름이나 비밀번호가 올바르지 않다는 메시지가 표시됩니다.
1.2 로그인 차단
- 스크립트 태그를 사용하여 서버에서 제공하는 인터페이스 주소를 로드합니다.
- isLogin 변수의 값을 확인합니다. 값이 false이면 로그인 페이지로 이동합니다.
1.3 사용자 추가
- 사용자 기능을 추가하는 각 양식 항목에 이름 속성을 추가하고, 이름 속성 값은 인터페이스 문서에서 요구하는 매개변수 이름과 일치해야 합니다.
- 제출 이벤트를 양식에 바인딩하고 이벤트 핸들러 함수에서 기본적으로 양식이 제출되지 않도록 합니다.
- 이벤트 핸들러 함수에서 사용자가 양식에 입력한 내용을 가져옵니다.
- 추가 사용자 인터페이스를 호출하고 인터페이스를 통해 얻은 콘텐츠를 서버에 보냅니다. 작업이 실패하면 페이지가 새로 고쳐집니다.
1.4 사용자 목록 표시
- 사용자 목록 데이터를 요청하기 위해 서버에 Ajax 요청을 보냅니다.
- 두 번째 단계는 템플릿 엔진을 사용하여 데이터와 HTML 템플릿을 결합하는 것입니다.
- 세 번째 단계는 접합된 내용을 페이지에 표시하는 것입니다.
1.5 사용자 아바타 업로드
- 파일 선택 컨트롤에 onchange 이벤트를 추가하고 이벤트 처리 기능에서 사용자가 선택한 파일을 가져옵니다.
- 이미지 파일을 업로드하기 위한 formData 객체 생성
- 이미지 업로드를 구현하기 위해 이미지 파일 업로드 인터페이스를 호출합니다.
- 새 사용자 추가 양식에 새 숨겨진 필드를 추가하고 숨겨진 필드에 이미지 주소를 저장합니다.
1.6 사용자 목록 표시
- 사용자 목록 데이터를 요청하기 위해 페이지가 로드될 때 서버에 Ajax 요청을 보냅니다.
- 템플릿 엔진을 사용하여 데이터와 HTML 템플릿을 결합하세요.
- 페이지에 접합된 내용을 표시합니다.
1.7 이용자 정보의 수정
- 이벤트 위임을 통해 편집 버튼 클릭에 대한 이벤트 추가
- 이벤트 처리 함수에서 현재 클릭된 사용자의 ID 값을 가져옵니다.
- 사용자 ID를 기준으로 사용자의 상세 정보를 얻고, 템플릿 엔진을 통해 사용자의 상세 정보를 왼쪽과 같은 형태로 렌더링합니다.
- 수정 버튼에 대한 클릭 이벤트를 추가하고, 이벤트 처리 기능에서 사용자가 폼에 입력한 내용을 얻어와 사용자 정보 수정 인터페이스를 호출하여 사용자 정보 수정 기능을 구현합니다.
1.8 사용자 삭제
- 삭제 버튼 클릭 이벤트 추가
- 사용자가 작업 삭제를 원하는지 확인
- 현재 클릭된 사용자의 ID를 가져옵니다.
- 삭제 사용자 인터페이스를 호출하여 ID를 기반으로 사용자를 삭제합니다. 삭제에 성공하면 페이지에 최신 콘텐츠가 표시되도록 현재 페이지를 새로 고칩니다.
1.9 일괄적으로 사용자 삭제
- 체크박스의 체크 상태 관리
- 모두 선택 버튼을 선택하면 모든 사용자가 선택되고, 모두 선택 버튼을 선택 취소하면 모든 사용자가 선택 해제됩니다.
- 사용자 앞에 있는 체크박스 버튼의 상태가 변경되면, 선택되지 않은 상태에 있는 사용자가 있는지 확인하십시오. 그렇다면 모두 선택 버튼의 선택 상태를 취소하십시오. 그렇지 않으면 모든 사용자가 선택되지 않은 상태입니다. 이때 선택된 상태로 설정된 버튼을 모두 선택합니다.
- 일괄 삭제 버튼 상태 관리
- 모두 선택 버튼을 선택하면 일괄 삭제 버튼이 표시됩니다. 모두 선택 버튼을 선택 해제하면 일괄 삭제 버튼이 숨겨집니다.
- 사용자 앞의 체크박스 버튼 상태가 변경되면 모든 사용자의 선택 상태를 확인하고, 모든 사용자가 선택되어 있으면 일괄 삭제 버튼을 표시합니다.
- 사용자 일괄 삭제 기능 구현
- 일괄 삭제 버튼에 클릭 이벤트를 추가합니다. 클릭 이벤트 처리 기능에서는 선택된 모든 사용자 ID를 배열로 저장합니다.
- 사용자 삭제 기능을 구현하려면 삭제 사용자 인터페이스를 호출하세요.
1.10 비밀번호 변경
- 비밀번호 변경 양식의 각 양식 항목에 이름 속성을 추가하십시오. 이름 속성의 값은 인터페이스의 매개변수 이름과 일치해야 합니다.
- 비밀번호 변경 양식에 양식 제출 이벤트를 추가하고 이벤트 핸들러 기능에서 양식의 기본 제출 동작을 방지합니다.
- 사용자가 양식에 입력한 내용을 가져옵니다.
- 비밀번호 수정 기능을 구현하기 위해 비밀번호 수정 인터페이스를 호출합니다. 비밀번호가 성공적으로 수정되면 로그인 페이지로 이동하여 사용자가 다시 로그인할 수 있도록 합니다.
1.11 로그인한 사용자 정보 표시
- userId 변수의 값에 따라 현재 로그인된 사용자의 정보를 서버로부터 얻어온다.
- 페이지 왼쪽에 사용자 정보 표시
2. 분류 기능
2.1 카테고리 추가
- 양식의 각 양식 항목에 이름 속성을 추가합니다. 이름 속성의 값은 인터페이스 문서에 필요한 매개변수 이름과 일치해야 합니다.
- 양식에 양식 제출 이벤트를 추가하고 이벤트 핸들러 기능에서 양식 제출의 기본 동작을 방지합니다.
- 사용자가 양식에 입력한 내용을 가져옵니다.
- 카테고리 추가 기능을 구현하기 위해 카테고리 추가 인터페이스를 호출합니다.
2.2 분류된 데이터 표시
- 카테고리 페이지 데이터를 요청하기 위해 서버에 Ajax 요청을 보냅니다.
- 템플릿 엔진을 사용하여 서버에서 반환된 데이터를 HTML 템플릿과 연결합니다.
- 페이지에 접합된 내용을 표시합니다.
2.3 기밀 데이터의 수정
- 이벤트 위임을 통해 편집 버튼에 클릭 이벤트를 추가하고, 이벤트 처리 기능에서 수정할 분류 데이터 ID를 획득합니다.
- 분류된 데이터의 상세 정보를 얻기 위해 해당 ID에 따른 인터페이스를 호출합니다.
- 템플릿 엔진을 사용하여 분류된 데이터와 HTML 문자를 연결하면 콘텐츠가 페이지에 렌더링됩니다.
- 수정 버튼에 클릭 이벤트를 추가하고, 이벤트 핸들러 함수에서 관리자가 폼에 입력한 내용을 얻어옵니다.
- 분류 데이터 수정 기능을 구현하려면 수정 분류 데이터 인터페이스를 호출하세요.
2.4 기밀 데이터 삭제
- 이벤트 위임을 통해 삭제 버튼에 클릭 이벤트를 추가하면, 클릭 이벤트 핸들러에 삭제 확인 박스가 팝업됩니다.
- 사용자가 삭제 확인을 클릭한 후 삭제할 분류 데이터의 ID를 획득합니다.
- 카테고리 삭제 기능을 구현하기 위해 카테고리 삭제 인터페이스를 호출합니다. 카테고리가 성공적으로 삭제되면 페이지를 새로 고칩니다.
3. 기사 기능
3.1 기사 추가
- 기사 분류 데이터를 얻고 관리자가 선택할 수 있는 카테고리의 드롭다운 목록에 데이터를 표시합니다.
- 기사 표지 이미지를 업로드하고 업로드된 이미지 주소를 숨겨진 필드에 저장하세요.
- 기사 추가 양식의 각 양식 항목에 이름 속성을 추가하고, 이름 속성 값은 인터페이스에서 요구하는 매개변수 이름과 일치해야 합니다.
- 양식 제출 이벤트를 기사 추가 양식에 바인딩하고 이벤트 핸들러 기능에서 기본적으로 양식이 제출되지 않도록 합니다.
- 관리자가 양식에 입력한 내용을 가져옵니다.
- 기사 추가 기능을 구현하기 위해 기사 추가 요청을 서버에 보냅니다. 기사가 성공적으로 추가되면 기사 목록 페이지로 이동합니다.
3.2 기사 목록 데이터 표시
- 페이지가 나타나면 기사 목록 데이터를 서버에 요청합니다.
- 기사 목록 데이터와 HTML을 결합하려면 템플릿 엔진을 사용하세요. 결합이 완료되면 콘텐츠가 페이지에 표시됩니다.
- 페이징 데이터를 기반으로 목록 데이터 페이징 기능 구현
3.3 기사 데이터 목록 필터링
- 기사 분류 데이터를 요청하고 해당 데이터가 속한 카테고리의 드롭다운 목록에 데이터를 표시하도록 서버에 요청을 보냅니다.
- 필터 버튼에 클릭 이벤트를 추가하고 이벤트 핸들러 함수에서 사용자가 선택한 콘텐츠를 가져옵니다.
- 관리자가 요청한 기사 목록 데이터를 서버에 요청하여 페이지에 표시하도록 요청합니다.
3.4 기사 편집
- 편집 버튼에 링크를 추가하고 기사 ID를 기사 편집 페이지 링크의 쿼리 매개변수로 전달합니다.
- 기사 편집 페이지의 주소 표시줄에서 id 매개변수를 가져옵니다.
- ID를 기반으로 기사 세부정보를 가져오고 기사 편집 양식에 기사 정보를 표시합니다.
- 양식 제출 이벤트를 바인딩하여 기사 양식을 수정하고, 이벤트 핸들러 기능에서 기본적으로 양식이 제출되지 않도록 합니다.
- 사용자가 양식에 입력한 내용을 가져옵니다.
- 기사 정보 수정 기능을 구현하기 위해 서버에 요청을 보냅니다. 기사 정보가 성공적으로 수정되면 기사 목록 페이지로 이동합니다.
3.5 기사 삭제
- 이벤트 위임을 통해 삭제 버튼에 클릭 이벤트를 추가하고, 이벤트 처리 기능에서 삭제 확인 박스를 팝업시켜 관리자에게 삭제 작업을 확인합니다.
- 이벤트 핸들러 함수에서 삭제할 기사의 ID를 가져옵니다.
- 삭제 작업을 수행하기 위해 Ajax 요청을 보냅니다. 삭제 작업이 성공하고 페이지가 새로 고쳐집니다.
3.6 인기 기사 추천
인기 추천 데이터를 서버에 요청합니다.
템플릿 엔진을 사용하여 데이터와 HTML 템플릿을 접합하고 접합된 내용을 페이지에 표시합니다.
var str = '<div>{{name}}</div>' ;
var obj = { name : '张三' }
var html = template . render ( str , obj ) ;
3.7 기사 검색
- 양식 제출 이벤트를 검색 양식에 바인딩
- 이벤트 핸들러에서 양식의 기본 제출 동작을 방지하고 사용자가 입력한 검색 키워드를 얻습니다.
- 검색 결과 페이지로 이동하여 사용자가 입력한 검색 키워드를 검색 결과 페이지에 전달합니다.
- 검색 결과 페이지에서 사용자가 입력한 키워드는 주소 표시줄의 쿼리 매개변수에서 가져옵니다.
- 사용자가 입력한 검색 키워드에 따라 검색 인터페이스가 호출되며, 서버가 데이터를 반환하면 검색 결과 데이터와 HTML 템플릿이 접합되고 최종적으로 접합된 내용이 페이지에 표시됩니다.
4.댓글 기능
4.1 코멘트 목록 표시
- 댓글 목록 데이터를 얻기 위해 서버에 요청을 보냅니다.
- 템플릿 엔진을 사용하여 댓글 목록 데이터와 HTML 템플릿을 접합한 후 접합이 완료된 후 페이지에 콘텐츠를 표시합니다.
- 페이징 데이터를 기반으로 페이징 기능 구현
4.2 댓글 조정
- 현재 댓글 상태에 따라 검토 버튼의 텍스트를 변경합니다. 현재 댓글을 검토하지 않으면 버튼에 승인이 표시되고, 현재 댓글을 검토하면 버튼에 해제가 표시됩니다.
- 이벤트 위임을 통해 리뷰버튼에 클릭 이벤트를 추가하고, 이벤트 처리 기능에서 현재 댓글의 상태를 가져옵니다.
- 서버에 요청을 보내고 댓글이 어떤 상태로 변경되어야 하는지 서버에 알려줍니다. 수정에 성공하면 페이지에 최신 데이터가 표시되도록 페이지를 새로 고칩니다.
4.3 댓글 삭제
- 이벤트 위임을 통해 삭제 버튼에 클릭 이벤트를 추가하고, 이벤트 처리 기능에 삭제 확인 박스 팝업을 띄웁니다.
- 관리자가 삭제하려는 댓글의 id 값을 가져옵니다.
- 댓글을 삭제하도록 서버에 요청을 보냅니다. 댓글이 성공적으로 삭제되면 페이지를 새로 고칩니다.
5.캐러셀 차트 기능
5.1 이미지 캐러셀 데이터 추가
- 이미지 업로드 기능을 구현하고 업로드된 이미지 주소를 숨겨진 필드에 저장합니다.
- 이미지 캐러셀 양식의 각 양식 항목에 이름 속성을 추가합니다. 이름 속성의 값은 인터페이스에 필요한 매개변수 이름과 일치해야 합니다.
- 양식 제출 이벤트를 이미지 캐러셀 양식에 바인딩하고 이벤트 핸들러 기능에서 기본적으로 양식이 제출되는 것을 방지합니다.
- 관리자가 양식에 입력한 내용을 가져옵니다.
- 이미지 캐러셀 데이터 추가 기능을 구현하기 위해 서버에 요청을 보냅니다. 데이터가 성공적으로 추가되면 페이지를 새로 고칩니다.
5.2 캐러셀 차트 데이터 표시
- 이미지 캐러셀 목록 데이터에 대한 요청을 서버에 보냅니다.
- 템플릿 엔진을 사용하여 이미지 캐러셀 목록 데이터와 HTML 템플릿을 연결하면 콘텐츠가 페이지에 표시됩니다.
5.3 이미지 캐러셀 데이터 삭제
- 이벤트 위임을 통해 삭제 버튼에 클릭 이벤트 추가
- 이벤트 핸들러 기능에서 삭제 확인 상자 팝업
- 삭제할 캐러셀 이미지 데이터의 ID를 가져옵니다.
- 삭제 작업을 수행하도록 요청을 서버에 보냅니다. 삭제 작업이 성공하고 페이지가 새로 고쳐집니다.
5.4 캐러셀 차트 데이터 표시(업데이트됨)
- 캐러셀 데이터에 대한 요청을 서버에 보냅니다.
- 템플릿 엔진을 사용하여 데이터와 HTML 문자열을 연결하고, 연결한 내용을 페이지에 표시합니다.
- 캐러셀 효과를 구현한 원본 JavaScript 코드를 ajax 메소드의 성공 함수 끝 부분으로 이동합니다.
6. 홈페이지 설정 기능
6.1 웹사이트 설정
- 웹사이트 로고 이미지 업로드를 구현하고 업로드된 이미지 주소를 숨겨진 도메인에 저장합니다.
- 양식의 각 양식 항목에 이름 속성을 추가합니다. 이름 속성의 값은 인터페이스 문서에 필요한 매개변수 이름과 일치해야 합니다.
- 제출 이벤트를 양식에 바인딩하고 이벤트 핸들러 함수에서 기본적으로 양식이 제출되지 않도록 합니다.
- 관리자가 양식에 입력한 내용을 가져옵니다.
- 웹 사이트 설정 데이터 추가 기능을 구현하기 위해 서버에 요청을 보냅니다.
6.2 웹사이트 설정 데이터 표시
- 웹사이트 설정 데이터를 얻기 위해 서버에 요청 보내기
- 서버에서 반환한 데이터가 true인지 확인합니다. true인 경우 해당 데이터를 양식에 표시합니다.
7. 홈페이지 최신 업데이트 기능
7.1 이 페이지에는 기사 댓글 정보가 표시됩니다.
1. 기사ID를 기준으로 해당 기사의 댓글을 검색합니다.
2. 승인된 댓글은 페이지에 바로 표시됩니다.
3. 최신 댓글이 최적화되었습니다.
4. 관리 페이지에서 승인되지 않은 댓글은 빨간색으로 표시됩니다.
7.2 페이지 최적화
1. 모든 좋아요 버튼은 좋아요 기능을 구현합니다.
2. 댓글 링크는 댓글 기사로 이동하는 기능을 구현합니다.
3. 모든 분류 버튼은 분류 페이지로 이동하는 기능을 구현합니다.
7.3 등록 페이지
1. 로그인 페이지에 사용자 등록 버튼을 추가했습니다.
2. 등록 페이지의 js는 프런트엔드 등록 정보에 대한 기본 확인을 구현합니다.
3. 부트스트랩을 활용한 페이지 기능 개발
4. 회원가입 페이지에 등록된 모든 이용자는 일반 이용자입니다.
5. 이메일 주소로 사용자를 찾는 기능 구현
자세한 내용은 인터페이스 설명서를 참조하세요.