블로그 콘텐츠 관리 시스템에 대한 자세한 설명-JS 튜토리얼-php.cn

1. 콘텐츠 업데이트

데이터베이스가 재설계되어 사용자별로 그룹화된 하위 문서 데이터베이스 구조로 변경되었습니다.
데이터베이스 변경에 대응하여 모든 인터페이스가 재설계되었으며 인터페이스 스타일이 Get과 일치합니다. 즉시 부자
기존 게스트 모드를 삭제하고, 로그인 등록 기능을 추가하고, 팝업 로그인을 지원합니다.
최근에 게시된 기사와 등록된 사용자를 표시하는 홈페이지를 추가하세요.
비밀번호 수정, 로그아웃, 로그아웃과 같은 기능을 추가하세요.
더 똑똑하고 구성 항목이 더 많으며 NetEase $.dialog 구성 요소에 가까운 팝업 창 구성 요소를 최적화하세요. 그리고 일련의 코드는 동일한 인터페이스에서 PC 측 팝업 창과 WAP 측 토스트 기능을 구현하기 위해 CSS만 수정했습니다.
모바일 적응 추가
원래 코드를 최적화하고 일부 버그를 수정하세요.

더 많은 업데이트 콘텐츠를 보려면 CMS-of-Blog_Production 및 CMS-of-Blog 프로젝트로 이동하세요.

2. 핵심 코드 분석

1. 데이터베이스

원래 데이터베이스를 재설계하고 사용자별로 그룹화된 하위 문서 데이터베이스 구조로 변경합니다. 이러한 방식으로 사용자 전체의 데이터베이스 구조가 더 명확해지고 조작 및 읽기도 더 쉬워집니다. 코드는 다음과 같습니다.

코드 시작 부분에는 세 가지 새로운 스키마(articleSchema, linkSchema 및 userSchema)가 정의되어 있습니다. ArticleSchema 및 linkSchema는 userSchema에 중첩되어 사용자별로 그룹화된 subDocs 데이터베이스 구조를 형성합니다. 스키마는 파일 형태로 저장되는 데이터베이스 모델 뼈대이며, 데이터베이스를 운영할 수 있는 능력은 없습니다. 그러면 스키마가 모델로 게시됩니다. 모델은 추상 속성과 동작을 갖춘 데이터베이스 작업 쌍인 스키마 게시에 의해 생성된 모델입니다. 모델에서 생성할 수 있는 엔터티 예를 들어 새 사용자가 등록되면 엔터티가 생성됩니다.

데이터베이스가 생성된 후에는 이를 읽고 작동해야 합니다. 등록 시 이메일 인증 코드를 전송하는 코드를 살펴보면서 알아볼 수 있습니다.

이메일 인증 코드 전송 요청을 받은 후 백그라운드에서 tmp 사용자가 초기화됩니다. new db.User()를 사용하면 User 인스턴스가 생성되고, save() 작업을 실행하면 이 데이터가 데이터베이스에 기록됩니다. 30분 이내에 등록이 실패하면 이메일 주소를 일치시킨 다음 db.User.remove()를 통해 해당 데이터가 삭제됩니다. 보다 구체적인 사용법은 공식 문서new db.User()会创建一个User的实例，然后执行save()操作会将这条数据写到数据库里。如果在半小时内没有注册成功，通过匹配邮箱，然后db.User.remove()将这条数据删除。更多具体用法请移步官方文档。

2. 后台

将所有请求分为三种：

ajax异步请求，统一路径：/web/
公共页面部分，如博客首页、登录、注册等，统一路径：/
与博客用户id相关的博客部分，统一路径：/:id/

这样每个用户都可以拥有自己的博客页面，具体代码如下：

具体的ajax接口代码大家可以看server文件夹下的index.js文件。

3. pop/toast组件

3.1 pop/toast组件配置参数说明

pop: 弹窗的显示与否, 根据content参数，有内容则为true
css: 自定义弹窗的class, 默认为空
showClose: 为false则不显示关闭按钮, 默认显示
closeFn: 弹窗点击关闭按钮之后的回调
title: 弹窗的标题，默认’温馨提示’, 如果不想显示title, 直接传空
content（required）: 弹窗的内容，支持传html
btn1: ‘按钮1文案|按钮1样式class’, 格式化后为btn1Text和btn1Css
cb1: 按钮1点击之后的回调，如果cb1没有明确返回true，则默认按钮点击后关闭弹窗
btn2: ‘按钮2文案|按钮2样式class’, 格式化后为btn2Text和btn2Css
cb2: 按钮2点击之后的回调，如果cb2没有明确返回true，则默认按钮点击后关闭弹窗。按钮参数不传，文案默认’我知道了’，点击关闭弹窗
init: 弹窗建立后的初始化函数，可以用来处理复杂交互（注意弹窗一定要是从pop为false变成true才会执行）
destroy를 참조하세요.
🎜
🎜2. Backstage 🎜🎜는 모든 요청을 세 가지 유형으로 나눕니다. 🎜
🎜이러한 방식으로 각 사용자는 자신의 자신의 블로그 페이지에서 구체적인 코드는 다음과 같습니다. 🎜🎜구체적인 ajax 인터페이스 코드는 서버 폴더에 있는 index.js 파일을 보시면 됩니다. 🎜🎜
🎜3.팝/토스트 컴포넌트🎜
🎜3.1 pop/toast 컴포넌트 구성 매개변수 설명
wapGoDialog: 모바일 단말기에서 팝업창 사용 여부, 기본값은 false, toastwapGoDialog: 在移动端时，要不要走弹窗，默认false，走toast

3.2 pop/toast组件代码

3.3 pop/toast组件参数格式化代码

为了使用方便，我们在使用的时候进行了简写。为了让组件能识别，需要在vuex的action里对传入的参数格式化。

为了让移动端兼容pop弹窗组件，我们采用mediaQuery对移动端样式进行了更改。增加参数wapGoDialog

3.2 pop/toast 컴포넌트 코드

3.3 pop/toast 구성 요소 매개 변수 서식 코드

편의상 사용 시에는 이를 축약하여 사용하였습니다. 구성 요소를 인식하려면 vuex 작업에서 들어오는 매개 변수의 형식을 지정해야 합니다.

모바일 단말기가 팝업 창 구성 요소와 호환되도록 하기 위해 mediaQuery를 사용하여 모바일 단말기 스타일을 변경합니다. 모바일 단말기에 있을 때 팝업 창을 사용해야 하는지 여부를 나타내기 위해 wapGoDialog 매개변수를 추가합니다. 기본값은 false이고 토스트를 사용합니다. 이러한 방식으로 하나의 코드 세트가 PC 및 WAP와 호환될 수 있습니다.

Postscript여기에서는 주로 백엔드와 데이터베이스를 분석하는데, 비교적 간단하게 소스코드를 확인할 수 있습니다. 한마디로 백엔드와 데이터베이스로 시작하는 프런트엔드의 좋은 예다. 풍부한 기능을 가지고 있으며 vue.js를 배울 수 있습니다.