spring rest admin

Rengal de primavera

Breve introducción

Este proyecto es un proyecto frontal basado en la mesa de administración construida por Vue, Elementui, que se utiliza con el backend de resorte. Optimizar principalmente la función de gestión de la autoridad. Haga clic aquí para ingresar la demostración en línea .

mejoramiento

• Los permisos de menú se generan automáticamente de acuerdo con la configuración de enrutamiento, y el administrador se sincroniza con la base de datos de fondo;

• Puede agregar, modificar y eliminar los permisos de botones bajo los permisos del menú sincrónico;

• Además de los permisos de botones, los metadatos de los permisos de menú y los permisos de interfaz se generan automáticamente por el delantero y la parte posterior. ;

• Al agregar los permisos de botón, el prefijo se genera automáticamente, solo las piezas necesarias para evitar que el formato sea caótico;

• Aumente la función de los permisos maternos y los permisos de botones de los permisos de interfaz asociados.

• Al identificar los elementos de la página, use la constante de enumeración para evitar el uso directo de la cadena limitada correcta para un fácil mantenimiento;

• Defina el nivel de la clase de llamadas de interfaz API, que es consistente con el nivel de la categoría de interfaz de fondo, elimina la redundancia y mejora la reutilización del código;

• Al reparar el error del componente de el-scrollbar : cuando el navegador se reduce en cierto grado, la barra de rodadura original oculta se expuso.

Preparación del entorno de desarrollo

Preparación de entorno node.js

Se recomienda que la versión Node.js use V112, y otras versiones parecen estar bien.

En Linux y MacOS, se recomienda usar NVM para la administración de versiones de Node.js.

Tome NVM-Windows como ejemplo (Git Bash) debajo de Windows: Ejecutar) ::

 # 设置 nvm 下载 node 和 npm 的镜像地址（直接访问外网太慢）
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/

# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org

# 查看可用的 Node.js版本
$ nvm list available

# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1

# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >

# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v

Detección y operación de proyectos

Nota: Antes de ejecutar la parte delantera de la plataforma de administración, es mejor ejecutar primero los antecedentes del final del servicio.

$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install

Nota: Si hay un error al ejecutar el comando npm install , y la información de error es npm install npm ERR! Failed at the [email protected] install script.

$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

Si hay otras fallas en la etapa de instalación de NPM, puede deberse a que algunos paquetes no se pueden descargar desde la estación de espejo Taobao, y debe acceder directamente a algunos incapaz de acceder a descargas de direcciones de red externas, pero si la descarga no tiene éxito, puede intentar Para agregar una configuración de agente después de re -test.

$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port

Si npm install se ejecuta correctamente, no hay error y puede continuar ejecutándose

$ npm run serve

Después de un momento, el navegador se abrirá automáticamente y saltará a la dirección http://localhost:9527/login .

Nota: El fondo del servidor debe iniciarse antes de iniciar sesión.

Archivo de configuración ambiental

Vue-Element-Admin admite la configuración multi-ambiente, git el formato del nombre del archivo de configuración ambiental es .local .env.[环境名]

Nota: Además de la configuración del entorno de desarrollo .env.development y .env.development.local , otros archivos de configuración ambiental deben establecer ENV NODE_ENV = production . .env y .local en el entorno VUE_APP_BASE_API

Nota: Si desea definir otras variables ambientales en el archivo de configuración, debe comenzar con VUE_APP_ y obtenerlo en el código a través process.env.VUE_APP_xxxx en el código.

Implementación de paquetes

Nota: Antes de empacar, confirme que tanto npm install como npm run serve se pueden implementar normalmente.

El comando de embalaje es: npm run build -- --mode <环境名> , la figura anterior es un ejemplo, el comando de embalaje es:

$ npm run build -- --mode vm-centos7

Una vez que el comando se ejecuta correctamente, el archivo de resultados del paquete está en el directorio DIST.

NOTA: El complemento de compresión de código- compression-webpack-plugin solo puede usar la versión V6 anterior, y la última versión de V7 no se puede usar, de lo contrario parece informar un error.

Además, el modo de enrutamiento de este proyecto está configurado como el modo de history.pushState . Al mismo tiempo, agregue la configuración relacionada con GZIP (solo se puede requerir esta línea de configuración):

 location / {
  gzip_static on ;
  try_files $uri $uri / /index.html;
}