[SpringBoot+Vue] El proyecto de separación front-end y back-end más simple pero práctico, notas de combate reales en toda la red: front-end

Dirección de vídeo de apoyo: https://www.bilibili.com/video/BV1dG4y1T7yp/

Notas frontales

1. entorno de nodo

Sitio web oficial: https://nodejs.org

Tenga en cuenta que el nodo puede ser un poco más bajo que yo, pero no más alto

2. Descargar vue-admin-plantilla

https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

3. Inicialización del proyecto

1. Descomprimir en un directorio que no sea chino sin espacios

2. proyecto abierto vscode

3. instalar dependencias

   npm config set registry http://registry.npm.taobao.org/
   

   npm install
   

4. ejecutar prueba

   npm run dev
   

5. modificación de configuración

   

6. reiniciar prueba

4. Modificación de la página de inicio de sesión

1. descripción china

2. imagen de fondo

   Coloque la imagen en activos y luego modifique .login-container

   background-image: url('../../assets/bg.jpeg');
   

   Ajuste del cuadro de inicio de sesión

3. Iniciar sesión Nombre de usuario Cancelar Restricciones
   

5. Modificar el menú desplegable de usuario en la esquina superior derecha

6. Navegación con migas de pan en la página de inicio

7. Inicialización del menú

1. Cree un directorio de módulos sys y un directorio de módulos de prueba en el directorio src\views (para cargar, y luego puede usarse para pruebas de asignación de permisos)

2. Cree dos archivos de componentes user.vue y role.vue en sys

   Cree test1.vue, test2.vue, test3.vue bajo prueba

3. Modificar la configuración de enrutamiento

   {
         
         
       path: '/sys',
       component: Layout,
       redirect: '/sys/user',
       name: 'sys',
       meta: {
         
          title: '系统管理', icon: 'sys' },
       children: [
         {
         
         
           path: 'user',
           name: 'user',
           component: () => import('@/views/sys/user'),
           meta: {
         
          title: '用户管理', icon: 'userManage' }
         },
         {
         
         
           path: 'role',
           name: 'role',
           component: () => import('@/views/sys/role'),
           meta: {
         
          title: '角色管理', icon: 'roleManage' }
         }
       ]
     },
   
     {
         
         
       path: '/test',
       component: Layout,
       redirect: '/test/test1',
       name: 'test',
       meta: {
         
          title: '功能测试', icon: 'form' },
       children: [
         {
         
         
           path: 'test1',
           name: 'test1',
           component: () => import('@/views/test/test1'),
           meta: {
         
          title: '测试点一', icon: 'form' }
         },
         {
         
         
           path: 'test2',
           name: 'test2',
           component: () => import('@/views/test/test2'),
           meta: {
         
          title: '测试点二', icon: 'form' }
         },
         {
         
         
           path: 'test3',
           name: 'test3',
           component: () => import('@/views/test/test3'),
           meta: {
         
          title: '测试点三', icon: 'form' }
         }
       ]
     }
   

   El archivo svg del icono se puede descargar desde https://www.iconfont.cn/

8. Navegación de la barra de pestañas

1. @/layout/components/AppMain.vue
   

   <keep-alive :include="cachedViews">
       <router-view :key="key" />
   </keep-alive>
   

   cachedViews() {
         
         
       return this.$store.state.tagsView.cachedViews
   }
   

2. Copie los archivos en el proyecto vue-element-admin al directorio correspondiente

   @/layout/components/TagsView
   @/store/modules/tagsView.js
   @/store/modules/permission.js

3. Modifique el archivo @store/getters.js
   

   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,   
   permission_routes: state => state.permission.routes
   

4. Modifique el archivo @store/index.js
   

5. Modifique el archivo @\layout\index.vue
   

6. Modifique el archivo @layout\components\index.js

   Agregar

   export {
         
          default as TagsView } from './TagsView'
   

7. Affix pin
   Cuando se agrega el atributo Affix al declarar la ruta, la etiqueta actual se fijará en la vista de etiquetas (no se puede eliminar)
   

9. Inicie sesión en el peinado de la interfaz

interfaz	URL	método
Acceso	/inicio de sesión de usuario	correo
Obtener información del usuario	/Información de usuario	conseguir
cerrar sesión	/usuario/cerrar sesión	correo

{
    
    "code":20000,"data":{
    
    "token":"admin-token"}}

{
    
    "code":20000,"data":{
    
    "roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}

{
    
    "code":20000,"data":"success"}

10. Interfaz de back-end de acoplamiento

1. Modifique la API base en .env.development y modifique .env.production si empaqueta e implementa

   VUE_APP_BASE_API = 'http://localhost:9999'
   

2. Modifique vue.config.js para bloquear solicitudes simuladas
   

3. Modifique src\api\user.js y elimine /vue-admin-template en url
   

4. Probado, errores entre dominios esperados

5. La prueba de procesamiento entre dominios en el backend debería ser exitosa y las llamadas a la interfaz se pueden observar en la ventana de depuración.

11. Gestión de usuarios

avance

• consulta de usuario

  1. define-userManager.js

  2. Procesamiento de número de secuencia de página

     <template slot-scope="scope">
         {
            
            {(searchModel.pageNo-1) * searchModel.pageSize + scope.$index + 1}}
     </template>
     

• Nuevo Usuario

  1. Los datos siguen ahí después de cerrar la ventana.

     Escuchar para cerrar, limpiar el formulario

  2. formulario de validación de datos

     verificación periódica

     validación personalizada

  3. Después de cerrar la ventana, el resultado de la última verificación todavía está allí

• modificación de usuario

• borrar usuario