Inicio>código fuente ASP>Otras categorias
Descargar

Introducción del proyecto

Alibaba Baixiu, un sistema de gestión de contenidos, se divide en dos funciones principales: gestión de contenidos y visualización de contenidos.

1. Módulo de funciones

1.1 Gestión de contenidos

módulo Función
usuario Inicio de sesión, cierre de sesión, alta, eliminación, modificación y consulta de usuarios
artículo Gestión de artículos
Clasificación Gestión de clasificación
Comentario Gestión de comentarios
Configuración del sitio web Palabras clave, descripción, logotipo del sitio web, imagen del carrusel.

1.2 Visualización de contenido

módulo Función
página delantera Navegación, visualización de datos del artículo.
Página de lista Mostrar una lista de artículos por categoría
Página de detalles Mostrar detalles del artículo e implementar la función de comentarios.

2. Modo de desarrollo

2.1 Modelo de desarrollo mixto de front-end y back-end

Todo el código HTML y los datos se empalman en el lado del servidor y todo el contenido se envía al cliente a la vez. El navegador ejecuta el código y presenta el contenido al usuario.

02

pregunta:

  1. Los desarrolladores de front-end y back-end no están familiarizados con el código de cada uno. Es muy difícil para el desarrollo mixto lidiar con el código de cada uno.
  2. Durante el proceso de desarrollo, los códigos inevitablemente se superpondrán entre sí, duplicando la carga de trabajo.

2.2 Modelo de desarrollo de separación de front-end y back-end

03

Ventajas: responsabilidades claras y división del trabajo, desarrollo independiente, sin influencia mutua.

3. Estructura del proyecto

Sistema de capas Usa la tecnología
capa de datos mongodb
capa de servicio node.js (rápido)
cliente plantilla de arte, jQuery, fuente impresionante, deslizar

4. Configurar el entorno operativo del proyecto (cosas que debes saber para ejecutar el proyecto)

  1. Instale el software node.js y compruebe si se instaló correctamente
    1. Win + R abre el programa en ejecución en el sistema Windows, ingresa powershell en el programa en ejecución y presiona Enter para abrir el programa de línea de comando
    2. Ingrese el comando node -v para verificar la versión de node.js. Si el número de versión aparece en el programa de línea de comando y no se informa ningún error, la instalación se realizó correctamente.
  2. Instale el software mongodb y mongodb-compass
  3. Copie la carpeta del proyecto Alibaba Baixiu al disco duro (programa del lado del servidor)
  4. Vaya al directorio raíz del proyecto en la herramienta de línea de comando
    1. Mantenga presionada la tecla Mayús, haga clic derecho y seleccione Abrir ventana de PowerShell aquí
  5. Utilice el comando npm install para instalar los archivos de dependencia necesarios para el proyecto
  6. Abra el archivo app.js y modifique la sección de conexión de la base de datos en la línea 47: 'mongodb://itcast:itcast@localhost:27017/alibaixiu'

​ para 'mongodb://localhost:27017/alibaixiu'

(1) Motivo: no creó la cuenta de conexión de la base de datos mongodb ni la información de contraseña. Elegimos utilizar el método predeterminado para iniciar sesión en la base de datos mongodb.

​ (2) Si desea iniciar sesión en la base de datos con su cuenta y contraseña. Consulte: https://www.cnblogs.com/b02330224/p/10049395.html

Ingrese los comandos en secuencia en la línea de comando: use alibaixiu #Ingrese a la base de datos alibaixiu

db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']}) #Crear usuario de base de datos

Si se le indica que los permisos son insuficientes, consulte el enlace anterior e inicie sesión en la base de datos con la cuenta de administrador de mongodb primero.

7. (Nuevo paso) Recientemente, se cargaron los datos de la base de datos db_data y se puede ingresar a la base de datos alibaixiu a través del software mongodb-compass.

Cree users , comment , slides , categories , posts y colecciones settings con el mismo nombre que los datos json en la carpeta db_data

(Colección) y finalmente importe los datos json correspondientes en cada colección por turno.

importar datos

8. Ingrese node app.js en la herramienta de línea de comando para iniciar el proyecto.

5. Cosas a tener en cuenta después de ejecutar el proyecto (cosas que debes saber para ejecutar好看的项目)

1. Abra el navegador e ingrese localhost:3000/admin/login.html en la barra de direcciones del navegador para ingresar a la página de inicio de sesión.

Ingrese el nombre de usuario predeterminado del sistema: (original) [email protected] (ahora) [email protected] Contraseña: 123456 Ingrese a la página del administrador

2. Dado que el archivo de la base de datos no se carga, todos los datos deben agregarse manualmente (si se introducen los datos json en db_data, omita los pasos 2-10)

3. Ingrese a la página del administrador y primero cambie la información de su cuenta (cambie la contraseña, etc.) y cargue el avatar del usuario.

4. Luego agregue información del artículo, información de configuración del sistema e información de imagen del carrusel (el pedido no es necesario, agregar significa completar la información del formulario, seleccionar archivos de imagen, etc.)

5. Tenga en cuenta que al cambiar la información de clasificación, el ícono de la información de clasificación debe buscarse en fuentes impresionantes, como: fa-phone, fa-gift, etc.

El formato del nombre de la clase de imagen buscado en font-awesome es: fa fa-xxx-xxx, solo necesita agregar la parte fa-xxx-xxx después.

6. Después de agregar la información básica de la base de datos, puede optar por cerrar sesión y registrar un nuevo usuario (el usuario registrado por defecto es un usuario normal)

O utilice los derechos de agregar usuario del administrador para agregar usuarios normales.

7. Después de agregar los datos de fondo, use una cuenta de usuario normal para ingresar a la página de visualización del artículo frontal (si desea que el contenido de la página sea más rico).

Se recomienda agregar alrededor de 15 piezas de información del artículo y alrededor de 4 piezas de información de categoría)

8. Si desea utilizar la cuenta de administrador para ingresar al sitio web, no cierre sesión en la cuenta de administrador. Abra una nueva pestaña en su navegador

Ingrese localhost:3000 en la barra de direcciones para ingresar a la página de visualización del artículo principal

9. Si el administrador activa la función de comentarios, la función de comentarios se mostrará en la página de detalles del artículo principal. Si el administrador desactiva la función de comentarios, la función de comentarios se mostrará en la página de detalles del artículo principal.

La página no muestra la función de comentarios.

10. Si el administrador activa la función de revisión de comentarios, los comentarios del usuario no se mostrarán en la página inmediatamente y el administrador deberá estar en segundo plano.

Los comentarios se revisan en la página de administración y se mostrarán en la página del artículo solo después de su aprobación. Si el administrador desactiva la función de comentarios, el

Se mostrará en la página de detalles del artículo.

11. Si el proyecto aún no se puede ejecutar, comuníquese conmigo al 1565066165

6.Dirección del proyecto

Página de inicio: http://luoxu.ltd:3000/ (cambiada temporalmente a http://luoxucoder.icu durante el registro del nombre de dominio)

Página de inicio de sesión: http://luoxu.ltd:3000/admin/login.html (de manera similar)

Visualización del efecto del proyecto

1. Página de visualización del artículo frontal

índice

2. Página de clasificación de artículos de inicio

categoría

3. Página de detalles del artículo frontal

correo

4. Página de inicio de sesión

acceso

5. Página de registro

registro

6.Página de administración de backend

administración

Función del proyecto

1. Funciones de usuario

1.1 Iniciar sesión

  1. Agregar evento de clic para el botón de inicio de sesión
  2. Obtenga el nombre de usuario y contraseña ingresados ​​por el usuario en el cuadro de texto
  3. Verifique si el usuario ha ingresado el nombre de usuario y la contraseña. De lo contrario, evite que el programa se ejecute hacia abajo y solicite al usuario que ingrese el nombre de usuario y la contraseña.
  4. Llame a la interfaz que implementa la función de inicio de sesión. Si el inicio de sesión es exitoso, saltará a la página de inicio de administración de datos. Si el inicio de sesión falla, le indicará que el nombre de usuario o la contraseña son incorrectos.

1.2 Intercepción de inicio de sesión

  1. Utilice la etiqueta script para cargar la dirección de interfaz proporcionada por el servidor
  2. Determine el valor de la variable isLogin. Si el valor es falso, salte a la página de inicio de sesión.

1.3 Agregar usuario

  1. Agregue un atributo de nombre a cada elemento del formulario que agregue funciones de usuario, y el valor del atributo de nombre debe ser coherente con el nombre del parámetro requerido en el documento de la interfaz.
  2. Vincule el evento de envío al formulario y evite que el formulario se envíe de forma predeterminada en la función del controlador de eventos.
  3. Obtener el contenido ingresado por el usuario en el formulario en la función de controlador de eventos
  4. Llame a la interfaz para agregar usuario y envíe el contenido obtenido al servidor a través de la interfaz. Si la operación es exitosa, la página se actualizará. Si la operación falla, se le dará un mensaje al usuario.

1.4 Mostrar lista de usuarios

  1. Envíe una solicitud Ajax al servidor para solicitar datos de la lista de usuarios
  2. El segundo paso es utilizar el motor de plantillas para unir los datos y la plantilla html.
  3. El tercer paso es mostrar el contenido empalmado en la página.

1.5 Carga de avatar de usuario

  1. Agregue un evento de cambio al control de selección de archivos y obtenga el archivo seleccionado por el usuario en la función de manejo de eventos.
  2. Cree un objeto formData para cargar archivos de imagen
  3. Llame a la interfaz de carga de archivos de imagen para implementar la carga de imágenes
  4. Agregue un nuevo campo oculto en el formulario para agregar nuevo usuario y almacene la dirección de la imagen en el campo oculto

1.6 Visualización de la lista de usuarios

  1. Enviar una solicitud Ajax al servidor cuando se carga la página para solicitar datos de la lista de usuarios
  2. Utilice un motor de plantillas para unir datos y plantillas html
  3. Mostrar el contenido empalmado en la página.

1.7 Modificación de la información del usuario

  1. Agregue eventos para hacer clic en el botón de edición mediante la delegación de eventos
  2. Obtenga el valor de ID del usuario actual en el que se hizo clic en la función de manejo de eventos
  3. Obtenga la información detallada del usuario en función de la identificación del usuario y represente la información detallada del usuario en el formulario de la izquierda a través del motor de plantillas.
  4. Agregue un evento de clic para el botón modificar, obtenga el contenido ingresado por el usuario en el formulario en la función de procesamiento de eventos y llame a la interfaz de modificación de información del usuario para implementar la función de modificación de información del usuario.

1.8 Eliminar usuario

  1. Agregar evento de clic para el botón eliminar
  2. Confirmar si el usuario quiere eliminar la operación
  3. Obtener la identificación del usuario actualmente en el que se hizo clic
  4. Llame a la interfaz de eliminación de usuario para eliminar el usuario según el ID. Si la eliminación se realiza correctamente, actualice la página actual para que muestre el contenido más reciente.

1.9 Eliminar usuarios por lotes

  1. Administrar el estado marcado de las casillas de verificación
    1. Cuando se selecciona el botón Seleccionar todo, se seleccionan todos los usuarios; cuando se anula la selección del botón Seleccionar todo, se anula la selección de todos los usuarios.
    2. Cuando se cambia el estado del botón de la casilla de verificación frente al usuario, verifique si algún usuario está en un estado no seleccionado. Si es así, cancele el estado seleccionado del botón Seleccionar todo. De lo contrario, significa que todos los usuarios están en un. estado seleccionado. En este momento, el botón Seleccionar todo se establece en el estado seleccionado.
  2. Administrar el estado de los botones de eliminación masiva
    1. Cuando se selecciona el botón Seleccionar todo, se muestra el botón Eliminar por lotes. Cuando se deselecciona el botón Seleccionar todo, el botón Eliminar por lotes se oculta.
    2. Cuando cambie el estado del botón de la casilla de verificación frente al usuario, verifique el estado seleccionado de todos los usuarios. Si se selecciona algún usuario, muestre el botón de eliminación por lotes. Si no todos los usuarios están seleccionados, oculte el botón de eliminación por lotes.
  3. Implementar la función de eliminación por lotes de usuarios
    1. Agregue un evento de clic al botón de eliminación por lotes. En la función de procesamiento de eventos de clic, almacene todas las ID de usuario seleccionadas en una matriz.
    2. Llame a la interfaz de eliminación de usuario para implementar la función de eliminación de usuario

1.10 Cambiar contraseña

  1. Agregue un atributo de nombre a cada elemento del formulario en el formulario de cambio de contraseña. El valor del atributo de nombre debe ser coherente con el nombre del parámetro en la interfaz.
  2. Agregue un evento de envío de formulario al formulario de cambio de contraseña y, en la función del controlador de eventos, evite el comportamiento de envío predeterminado del formulario.
  3. Obtener el contenido ingresado por el usuario en el formulario
  4. Llame a la interfaz de modificación de contraseña para implementar la función de modificación de contraseña. Si la contraseña se modifica correctamente, salte a la página de inicio de sesión y permita que el usuario inicie sesión nuevamente.

1.11 Mostrar información del usuario registrado

  1. De acuerdo con el valor de la variable userId, obtenga del servidor la información del usuario actualmente conectado.
  2. Mostrar información del usuario en el lado izquierdo de la página.

2. Función de clasificación

2.1 Agregar categoría

  1. Agregue un atributo de nombre a cada elemento del formulario. El valor del atributo de nombre debe ser coherente con el nombre del parámetro requerido en el documento de la interfaz.
  2. Agregue un evento de envío de formulario al formulario y, en la función del controlador de eventos, evite el comportamiento predeterminado del envío de formulario.
  3. Obtener el contenido ingresado por el usuario en el formulario
  4. Llame a la interfaz de adición de categorías para implementar la función de adición de categorías

2.2 Visualización de datos clasificados

  1. Envíe una solicitud Ajax al servidor para solicitar datos de la página de categorías
  2. Utilice un motor de plantillas para unir los datos devueltos por el servidor con la plantilla HTML
  3. Mostrar el contenido empalmado en la página.

2.3 Modificación de datos clasificados

  1. Agregue un evento de clic al botón de edición mediante la delegación de eventos y obtenga el ID de datos de clasificación que se modificará en la función de procesamiento de eventos.
  2. Llame a la interfaz según la identificación para obtener información detallada de los datos clasificados.
  3. Utilice el motor de plantillas para unir datos clasificados y caracteres HTML. Una vez completado el empalme, el contenido se representará en la página.
  4. Agregue un evento de clic al botón modificar y obtenga el contenido ingresado por el administrador en el formulario en la función de controlador de eventos
  5. Llame a la interfaz de modificación de datos de clasificación para implementar la función de modificación de datos de clasificación.

2.4 Eliminación de datos clasificados

  1. Agregue un evento de clic al botón Eliminar mediante la delegación de eventos y aparecerá el cuadro de confirmación de eliminación en el controlador de eventos de clic.
  2. Después de que el usuario haga clic para confirmar la eliminación, obtenga la identificación de los datos clasificados que se eliminarán.
  3. Llame a la interfaz de eliminación de datos de categoría para implementar la función de eliminar datos de categoría. Si la categoría se elimina correctamente, actualice la página.

3. Función del artículo

3.1 Agregar artículo

  1. Obtener datos de clasificación de artículos y mostrar los datos en la lista desplegable de la categoría para que el administrador los seleccione
  2. Cargue la imagen de portada del artículo y guarde la dirección de la imagen cargada en un campo oculto
  3. Agregue un atributo de nombre a cada elemento del formulario en el formulario para agregar artículo, y el valor del atributo de nombre debe ser coherente con el nombre del parámetro requerido en la interfaz.
  4. Vincule el evento de envío del formulario al formulario para agregar artículo y evite que el formulario se envíe de forma predeterminada en la función del controlador de eventos.
  5. Obtener el contenido ingresado por el administrador en el formulario
  6. Envíe una solicitud para agregar un artículo al servidor para implementar la función de agregar artículos. Una vez que el artículo se agregue correctamente, saltará a la página de lista de artículos.

3.2 Visualización de datos de la lista de artículos

  1. Cuando aparezca la página, envíe una solicitud al servidor para obtener datos de la lista de artículos.
  2. Utilice el motor de plantillas para unir los datos de la lista de artículos y HTML. Una vez completado el empalme, el contenido se mostrará en la página.
  3. Implementar la función de paginación de datos de lista basada en datos de paginación

3.3 Filtrado de la lista de datos de artículos

  1. Enviar una solicitud al servidor para solicitar datos de clasificación del artículo y mostrar los datos en la lista desplegable de la categoría a la que pertenece.
  2. Agregue un evento de clic al botón de filtro y obtenga el contenido seleccionado por el usuario en la función de controlador de eventos
  3. Enviar una solicitud al servidor para solicitar los datos de la lista de artículos solicitados por el administrador y mostrar los datos en la página.

3.4 Edición de artículos

  1. Agregue un enlace al botón de edición y pase la identificación del artículo como parámetro de consulta del enlace a la página de edición del artículo.
  2. Obtenga el parámetro id en la barra de direcciones en la página de edición del artículo
  3. Obtenga detalles del artículo según la identificación y muestre la información del artículo en el formulario de edición del artículo.
  4. Vincule el evento de envío del formulario para modificar el formulario del artículo y evite que el formulario se envíe de forma predeterminada en la función del controlador de eventos.
  5. Obtener el contenido ingresado por el usuario en el formulario
  6. Envíe una solicitud al servidor para implementar la función de modificar la información del artículo. Si la información del artículo se modifica correctamente, salte a la página de lista de artículos.

3.5 Eliminación del artículo

  1. Agregue un evento de clic al botón Eliminar mediante la delegación de eventos, abra un cuadro de confirmación de eliminación en la función de procesamiento de eventos y confirme la operación de eliminación con el administrador.
  2. Obtenga la identificación del artículo que se eliminará en la función del controlador de eventos
  3. Envíe una solicitud Ajax para realizar la operación de eliminación. La operación de eliminación se realiza correctamente y la página se actualiza.

3.6 Recomendaciones de artículos populares

  1. Enviar una solicitud al servidor para obtener datos de recomendaciones populares.

  2. Utilice un motor de plantillas para unir datos y plantillas html y mostrar el contenido unido en la página 

     var str = '<div>{{name}}</div>' ;
var obj = { name : '张三' }
var html = template . render ( str , obj ) ;

3.7 Búsqueda de artículos

  1. Vincular el evento de envío del formulario al formulario de búsqueda
  2. Evite el comportamiento de envío predeterminado del formulario en el controlador de eventos y obtenga las palabras clave de búsqueda ingresadas por el usuario
  3. Vaya a la página de resultados de búsqueda y pase las palabras clave de búsqueda ingresadas por el usuario a la página de resultados de búsqueda.
  4. En la página de resultados de búsqueda, las palabras clave ingresadas por el usuario se obtienen de los parámetros de consulta en la barra de direcciones.
  5. La interfaz de búsqueda se llama de acuerdo con las palabras clave de búsqueda ingresadas por el usuario. Cuando el servidor devuelve los datos, los datos del resultado de la búsqueda y la plantilla HTML se fusionan y el contenido fusionado finalmente se muestra en la página.

4.Función de comentario

4.1 Visualización de la lista de comentarios

  1. Enviar una solicitud al servidor para obtener los datos de la lista de comentarios.
  2. Utilice un motor de plantillas para unir los datos de la lista de comentarios y la plantilla HTML, y luego muestre el contenido en la página una vez que se complete el empalme.
  3. Implementar la función de paginación basada en datos de paginación.

4.2 Moderación de comentarios

  1. Cambie el texto en el botón de moderación según el estado del comentario actual. Si el comentario actual no se revisa, el botón mostrará Aprobación; si se revisa el comentario actual, el botón mostrará Descartar.
  2. Agregue un evento de clic al botón de revisión mediante la delegación de eventos y obtenga el estado del comentario actual en la función de manejo de eventos
  3. Envíe una solicitud al servidor e indíquele a qué estado se debe cambiar el comentario. Si la modificación se realiza correctamente, actualice la página para que se muestren los datos más recientes.

4.3 Eliminación de comentarios

  1. Agregue un evento de clic al botón Eliminar mediante la delegación de eventos y abra el cuadro de confirmación de eliminación en la función de manejo de eventos.
  2. Obtenga el valor de identificación del comentario que el administrador desea eliminar
  3. Envíe una solicitud al servidor para eliminar el comentario. Si el comentario se elimina correctamente, actualice la página.

5.Función de gráfico de carrusel

5.1 Agregar datos del carrusel de imágenes

  1. Implemente la función de carga de imágenes y guarde la dirección de la imagen cargada en un campo oculto
  2. Agregue un atributo de nombre a cada elemento del formulario en el formulario del carrusel de imágenes. El valor del atributo de nombre debe ser coherente con el nombre del parámetro requerido en la interfaz.
  3. Vincule el evento de envío del formulario al formulario del carrusel de imágenes y evite que el formulario se envíe de forma predeterminada en la función del controlador de eventos.
  4. Obtener el contenido ingresado por el administrador en el formulario
  5. Envíe una solicitud al servidor para implementar la función de agregar datos del carrusel de imágenes. Si los datos se agregan correctamente, actualice la página.

5.2 Visualización de datos del gráfico en carrusel

  1. Enviar una solicitud al servidor para obtener datos de la lista del carrusel de imágenes
  2. Utilice un motor de plantillas para unir los datos de la lista del carrusel de imágenes y la plantilla HTML. Una vez completado el empalme, el contenido se mostrará en la página.

5.3 Eliminación de datos del carrusel de imágenes

  1. Agregue un evento de clic al botón Eliminar mediante la delegación de eventos
  2. Abra el cuadro de confirmación de eliminación en la función del controlador de eventos
  3. Obtenga el ID de los datos de la imagen del carrusel que se eliminarán
  4. Envíe una solicitud al servidor para realizar la operación de eliminación. La operación de eliminación se realiza correctamente y la página se actualiza.

5.4 Visualización de datos del gráfico en carrusel (actualizado)

  1. Enviar una solicitud al servidor para obtener datos del carrusel.
  2. Utilice un motor de plantillas para unir datos y cadenas HTML y mostrar el contenido unido en la página
  3. Mueva el código JavaScript original que implementa el efecto carrusel al final de la función de éxito del método ajax.

6. Función de configuración del sitio web

6.1 Configuración del sitio web

  1. Implemente la carga de imágenes del logotipo del sitio web y guarde la dirección de la imagen cargada en un dominio oculto
  2. Agregue un atributo de nombre a cada elemento del formulario. El valor del atributo de nombre debe ser coherente con el nombre del parámetro requerido en el documento de la interfaz.
  3. Vincule el evento de envío al formulario y evite que el formulario se envíe de forma predeterminada en la función del controlador de eventos.
  4. Obtener el contenido ingresado por el administrador en el formulario
  5. Envíe una solicitud al servidor para implementar la función de agregar datos de configuración del sitio web

6.2 Mostrar datos de configuración del sitio web

  1. Enviar una solicitud al servidor para obtener datos de configuración del sitio web
  2. Determine si los datos devueltos por el servidor son verdaderos. Si es verdadero, muestre los datos en el formulario.

7. Función de actualización más reciente del sitio web

7.1 La página muestra información de comentarios del artículo.

1. Buscar los comentarios del artículo según el ID del artículo.

2. Los comentarios aprobados se mostrarán directamente en la página.

3. Los últimos comentarios han sido optimizados.

4. Los comentarios no aprobados en la página de administración se marcarán en rojo.

7.2 Optimización de página

1. Todos los botones Me gusta implementan la función Me gusta.

2. El enlace de comentario implementa la función de saltar al artículo de comentario.

3. Todos los botones de clasificación implementan la función de saltar a la página de clasificación.

7.3 Página de registro

1. Se agregó un botón de registro de usuario a la página de inicio de sesión.

2. js en la página de registro implementa una verificación básica de la información de registro de front-end

3. Funciones de página desarrolladas mediante bootstrap.

4. Todos los usuarios registrados en la página de registro son usuarios normales.

5. Implementó la función de buscar usuarios según sus direcciones de correo electrónico.

Para obtener información detallada, consulte la documentación de la interfaz.

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo