iBlog

Preparación ambiental

• Nodo.js v14.15.5
• MongoDB v4.2.17

Instalar la base de datos MongoDB

Ingrese al sitio web oficial para descargar, la versión es 4.2.17, la plataforma es Windows y el paquete de instalación está en formato msi.

desarrollo de proyectos

1. Clona el proyecto localmente:

$ git clone [email protected]:miqilin21/vue-blog.git
$ cd vue-blog
$ pnpm i

2. Instale las dependencias del proyecto front-end, back-end (admin, web) y back-end (servidor):

$ pnpm install-all

3. Ejecute proyectos de front-end, back-end (admin, web) y back-end (servidor):

$ pnpm serve-all

4. Abra la vista previa del navegador:

http://localhost:8080 abre la página local de front-end; http://localhost:8088 abre la página local de fondo.

Registre al usuario cuando inicie sesión como administrador de backend por primera vez. Después de iniciar sesión, puede ocultar el botón de registro para evitar que se filtre la cuenta de inicio de sesión.

Sistema de gestión de fondo

• Agregar nueva categoría

• Lista de categorías (agregar, eliminar, modificar, verificar)

• Agregar nuevo artículo

• Lista de artículos (añadir, eliminar, modificar, comprobar)

• Lista de comentarios de artículos

• Agregar enlace de amigo

• Lista de enlaces amigables (agregar, eliminar, modificar, verificar)

• Lista de mensajes

• Lista de usuarios de mensajes

• Integración del editor Markdown

• Función de carga de imágenes

• Agregar nuevo usuario

• Lista de usuarios (añadir, eliminar, modificar, comprobar)

• Implementación universal de interfaz de adición, eliminación, modificación y consulta (recurso de middlewareMiddleware)

• Función de registro de inicio de sesión

• Función de cierre de sesión

• Agregar verificación jwt (1. Búsqueda de nombre de usuario 2. Verificación de contraseña 3. Token de devolución)

• Agregar interceptor http (solicitud, respuesta)

sistema de blogs

• Interfaz de usuario de la página de inicio del blog
• Implementación de la interfaz de la página de inicio del blog
• Interfaz de usuario de la página de archivo del blog
• Implementación de la interfaz de la página de archivo del blog
• Interfaz de usuario de la página de etiquetas del blog
• Implementación de la interfaz de la página de etiquetas de blog
• Interfaz de usuario de la página de publicación de blog
• Implementación de la interfaz de la página del artículo del blog
• Interfaz de usuario de la página de enlace de amigo del blog
• Implementación de la interfaz de la página de enlace de amigos del blog
• Interfaz de usuario de la página de mensajes del blog
• Implementación de la interfaz de la página de mensajes del blog

Notas de configuración

1. Para responder a los comentarios de otras personas en la página de comentarios, su buzón QQ se utiliza para la notificación sincronizada. Debe configurar el buzón en server/plugins/sendEmail.js . En la siguiente figura se muestra cómo obtener el código de autorización del buzón QQ. en la página de cuenta de configuración del buzón de QQ).

2. Configuración de la cuenta principal para comentarios (la cuenta principal se usa para respuestas de correo electrónico, por lo que el correo electrónico de la cuenta creada para comentarios debe ser el mismo que el correo electrónico para el código de autorización del buzón QQ en el paso anterior y, al mismo tiempo, el comentario). La cuenta debe configurarse en web/src/commentConfig.js (tenga en cuenta que topNickName debe ser coherente con el apodo de la cuenta principal creada por el comentario. topParentId se puede obtener desde la página de fondo si se borra la cuenta principal). debe ser reconfigurado.
3. Con respecto a la carga de la imagen de fondo: el valor predeterminado es cargar en el local. Este método tiene requisitos más altos para el servidor. Naturalmente, la velocidad de carga del front-end se verá afectada. Puede optar por utilizar el OSS de Alibaba Cloud para la carga y el almacenamiento. Debe agregar server/routes/admin/index.js , comentar el código para la carga de imágenes locales y, finalmente, completar la configuración oss de Alibaba Cloud.

Empaquetado e implementación de proyectos

• Empaquetado de proyectos web y de administración (ejecute el comando pnpm build-all en el directorio raíz)
• compra de nombre de dominio
• Resolución de nombres de dominio
• compra de servidor en la nube linux
• instalación de git, adición de clave ssh
• gestión de procesos pm2
• configuración ngnix
• configuración mongodb
• Migrar datos de mongodb del local al servidor
• Qiniuyun cdn aceleración gratuita para todo el sitio

Para la implementación del servidor en línea, consulte esta guía.

Sistema de gestión backend de blogs

sistema de blogs

BienvenidoEstrella,Problemas

• ¡Tu estrella es mi motivación para las actualizaciones y el mantenimiento continuos! ! !
• Si hay algún problema durante el uso, no dude en informar problemas

Lista de tareas pendientes

• Optimización del rendimiento, las imágenes deben comprimirse y precargarse
• Agregar función de búsqueda a la página de publicación del blog
• Problemas de compatibilidad del navegador, adaptación móvil. Solo utilicé el desarrollo del navegador Google Chrome de mi propia computadora y los efectos de adaptación del teléfono móvil. No he probado ningún otro método, pero no se recomienda utilizar el terminal móvil.
• Resuelva el problema de SEO de Vue y el problema de inquietud al actualizar la página de renderizado. Haremos un renderizado previo de Vue por el momento. No descartamos realizar un renderizado del lado del servidor de Vue o un renderizado del lado del servidor de nuxt.js en el futuro.
• Organiza el código y divídelo en componentes. Haga la estructura más clara y reduzca la cantidad de código.
• Refactorice todo el proyecto usando mecanografiado
• Se agregarán funciones interesantes gradualmente a medida que las vaya pensando, y están en continuo desarrollo...