Este es un proyecto simple de separación de front-end y back-end, desarrollado principalmente utilizando tecnologías Vue.js + SpringBoot.
Además de usarse como ejercicio introductorio, también espero que el proyecto pueda usarse como andamio para algunos proyectos web comunes para ayudarlo a simplificar el proceso de creación de un sitio web. Se llama cuaderno blanco porque comienza en 0 y mejora gradualmente con el tiempo.
Repositorio frontal: https://github.com/realdonald1994/WhiteJotter_Vue
Repositorio backend: https://github.com/realdonald1994/WhiteJotter
¡Bienvenido a unirse al White Jotter!
A modo de página de visualización, incluyendo los principales materiales de referencia para el desarrollo de este proyecto, actualizaciones recientes y Lema.
Proporciona función de visualización de información de libros y películas.
Proporcionar notas y función de visualización de publicaciones de blog.
Incluyendo panel de control, gestión de contenidos, gestión de usuarios y autoridades, etc.
Introducción personal y enlaces relacionados.
1.Vue.js
2.ElementoUI
3.axios
4.Vuex
1.Bota de primavera
2.Datos de primavera + JPA
3.MySQL
4.Shiro
1.Mysql
1.Centos7
2.Nginx
3.FastDFS
1.junio
2.Broma
1.clonar proyecto a local
Interfaz:
git clone https://github.com/realdonald1994/WhiteJotter_Vue
extremo trasero:
git clone https://github.com/realdonald1994/WhiteJotter
2.Cree una base de datos white_jotter
en mysql, ejecute el proyecto y los datos se inyectarán automáticamente.
El puerto de Redis es 6379 (puerto predeterminado) y la contraseña está en blanco.
3.La base de datos está configurada en el archivo application.properties
en el directorio src main resources
del proyecto backend y la versión de mysql es 8.0.15.
4.Ejecute el proyecto backend en IntelliJ IDEA. Para garantizar que el proyecto se ejecute correctamente, puede hacer clic con el botón derecho pom.xml
y seleccionar maven-> reimportar y reiniciar el proyecto.
En este punto, el servidor se inició con éxito y, al mismo tiempo, ejecute el proyecto front-end, visite http: // localhost: 8080
, puede ingresar a la página de inicio de sesión, la cuenta predeterminada es admin
y la contraseña es 123
Si desea realizar un desarrollo secundario, continúe viendo los pasos quinto y sexto.
5.Ingrese el directorio raíz del proyecto front-end e ingrese los siguientes comandos en orden en la línea de comando:
# Install dependencies
npm install
# Start the project at localhost: 8080
npm run dev
Dado que el reenvío de puertos se configuró en el proyecto wj-front
para reenviar datos a SpringBoot, después de que comience el proyecto, ingrese http: // localhost: 8080
en el navegador para acceder a nuestro proyecto front-end. Todas las solicitudes reenvían datos a SpringBoot a través del reenvío de puertos (tenga en cuenta que no debe cerrar el proyecto SpringBoot en este momento).
6.Finalmente, puede usar WebStorm
y otras herramientas para abrir el proyecto wj-front
y continuar con el desarrollo. Una vez completado el desarrollo, cuando el proyecto se pondrá en línea, aún debe ingresar al directorio wj-front
y luego ejecutar el siguiente comando:
npm run build
Una vez que el comando se ejecuta correctamente, se genera una carpeta dist
en el directorio wj-front y los dos archivos assets
e index.html
de la carpeta se pueden copiar a nginx. Luego ingrese al directorio raíz del backend y ejecute la línea de comando:
mvn clean install
Finalmente, ingrese la línea de comando java -jar xxx.jar
en el directorio target
recién generado. Inicie el servidor de fondo.
Ingrese la línea de comando debajo del archivo nginx: start nginx
. Inicie el servidor de aplicaciones para el usuario.
08-20 Agregar Redis
06-09 Agregar prueba unitaria con utilidades de prueba Vue y Jest
06-04 Use gzip para solucionar la carga lenta de la página web
06-02 ¿El proyecto se implementa en el servidor en la nube y el sitio web se publica por primera vez ?
05-29 Proyectos front-end y back-end separados
04-20 Utilice el editor de rebajas de código abierto para lograr el módulo de gestión y visualización de artículos
...