vue admin webapp

aplicación web vue-admin

Después de leer un artículo de Nuggets, creé un sistema de gestión de backend Vue basado en demostraciones de otras personas.

Dirección del artículo original de los Nuggets

Las pilas de tecnología involucradas en este proyecto incluyen vue vue-cli vue-Router axios Echarts element-ui fastmock webpack

Dirección de github de este proyecto vue-admin-webapp

dirección de ejecución del proyecto

Introducción del proyecto

vue-admin-webapp es un sistema de administración de backend basado en vuecli y element-ui , que utiliza fastmock para simular datos, incluidos gráficos, tablas, permisos, Excel, etc. Puede agregar rutas según sus necesidades.

Instalar

 # 克隆项目

git clone [email protected]:yqxshiki/vue-admin-webapp.git

# 进入项目目录
cd vue-admin-webapp

# 安装依赖
npm install

# 启动服务
npm run serve

Después del inicio, el navegador http://localhost:8080 se abrirá automáticamente y podrá ver el efecto del proyecto.

Estructura de la página del proyecto

Vaya a la página de inicio de sesión. La página consta principalmente de tres partes: la página de visualización de la barra lateral del encabezado . Puede hacer clic en la barra lateral para saltar a la ruta.

Verificación de permiso de inicio de sesión

Reciba el token de fastmock, guárdelo en localStorage al iniciar sesión, configure la protección frontal global, al ingresar a otras páginas, solo puede ingresar cuando haya un token; de lo contrario, saltará a la página de inicio de sesión

Primera guardia mundial

 router . beforeEach ( ( to , from , next ) => {
  const isLogin = localStorage . loginToken ? true : false ;
  if ( to . path == "/login" ) {
    next ( ) ;
  } else {
    isLogin ? next ( ) : next ( '/login' )
  }
} ) 

solicitar interceptación

 axios . interceptors . request . use ( config => {
  // 判断是否有token
  if ( localStorage . loginToken ) {
    config . headers . Authorization = localStorage . loginToken ;
  }
  return config ;
} , err => {
  // 请求错误
  return Promise . reject ( err ) ;
} ) 

interceptación de respuesta

 axios . interceptors . response . use ( res => {
  return res ;
} ,
  err => {
    const { status } = err . response ;
    if ( status == 401 ) {
      // 后台定义401为过期
      alert ( "token过期,请重新登录!" )
      // 清楚token
      localStorage . removeItem ( "loginToken" ) ;
      router . push ( "/login" ) ;
    } else {
      alert ( err . response . data )
    }
    return Promise . reject ( err ) ;
  } ) ;

Echart multigráfico

Domine el uso de Echart, gráficos de líneas, gráficos circulares, gráficos de barras, gráficos de datos dinámicos, etc., como la imagen a continuación

Sobresalir

En proyectos reales, Excel se realiza principalmente en el back-end. Por supuesto, también se puede hacer en el front-end, pero no creo que sea necesario ahora, así que no lo hice. Si quieres saber más, puedes buscarlo.

datos de simulación rápida

Aquí hay una cita de la introducción oficial.

Fastmock le permite simular realmente solicitudes ajax en línea sin un programa de back-end. Puede usar fatmock para lograr una demostración pura del efecto de front-end en las primeras etapas del proyecto, o puede usar fastmock para implementar la simulación de datos durante el desarrollo para lograr el front-end. -separación final y back-end. Antes de usar fastmock, su equipo puede usar una o más de las siguientes soluciones para implementar la simulación de datos:

• La simulación local de datos escritos a mano genera muchos códigos simulados en el código front-end.
• Utilice el can-fixture de mockjs o canjs para implementar la interceptación ajax y configurar las reglas json necesarias localmente.
• El backend fabrica datos en la capa del Controlador y los devuelve al frontend.

---

Mi puerto de proyecto fastmock