vue-element-admin
- Solución de integración: vue-element-admin
- Plantilla básica: vue-admin-template
La solución integrada es muy recomendable.
Aunque el sitio web oficial recomienda el uso de plantillas básicas, agregue funciones según sea necesario desde la solución integrada. Debido a que algunas funciones del esquema de integración no están disponibles, se formarán códigos redundantes.
Sin embargo, usar la plantilla básica es realmente muy básico, y no hay muchas funciones, como la navegación por pestañas. La plantilla básica solo tiene navegación por ruta de navegación. En este momento, si desea agregar la función de pestañas, las personas como yo que están no estoy familiarizado con el código fuente. Realmente no puedo encontrar qué copiar.
Por lo tanto, el esquema de integración, la redundancia es redundante, eliminar el código siempre es más fácil que copiarlo.
El trabajo anterior estaba todo sobre los hombros de los gigantes, según las necesidades del negocio, el framework fue remodelado por los grandes de la industria, y se usaron directamente, básicamente preocupándose solo por el código comercial. Por tanto, aunque este marco no se ha utilizado, no es difícil de desarrollar.
Ahora, un nuevo proyecto, comenzando desde el principio, usará este marco nuevamente. Realmente está comenzando a desarrollarse descargando el código fuente del marco de github, por lo que muchos detalles deben resumirse y registrarse.
texto
Inicio de sesión: parámetros necesarios para iniciar sesión además del nombre de usuario y la contraseña, como el código de verificación
src / store / modules / user.js
login ({commit}, userInfo) {
const {nombre de usuario, contraseña, código, codeId} = userInfo
devolver nueva promesa ((resolver, rechazar) => {
login ({username: username.trim (), password: password, code: code.trim (), codeId: codeId}). luego (respuesta => {
const {datos} = respuesta
commit ('SET_TOKEN', data.token)
setToken (data.token)
// confirmar ('SET_TOKEN', data.token)
// setToken (data.token)
resolver()
}). catch (error => {
rechazar (error)
})
})
},
Modificar token
src / utils / request.js
if (store.getters.token) {
// dejar que cada solicitud lleve token
// ['X-Token'] es una clave de encabezados personalizados
// Modifíquelo de acuerdo con la situación real
//config.headersekenen'X-Token '] = getToken ()
config.headers ['auth-token'] = 'userToken:' + getToken () // Deje que cada solicitud lleve un token personalizado, modifíquelo de acuerdo con la situación real
}
Solicitar modificación del tiempo de espera
src / utils / request.js
tiempo de espera: 10000
Modificar el enrutamiento: si el enrutamiento no requiere redireccionamiento, como la contraseña olvidada en la página de inicio de sesión.
src / permiso.js
const whiteList = ['/ login', '/ auth-redirect', '/ rememberPwd'] // sin lista blanca de redireccionamiento
Enrutamiento de permisos: consulte el permiso de las páginas relacionadas con los permisos
src / enrutador / index.js
exportar const asyncRoutes = [{}];
La ruta está oculta en el menú de navegación: oculta: verdadera
src / enrutador / index.js
{
ruta: '/ olvidePwd',
nombre: 'ForgetPwd',
componente: () =>
importar ('@ / vistas / usuario / olvidarPwd'),
oculto: cierto
},
Configuración: configura para abrir la visualización del logotipo sobre el menú de forma predeterminada
src / store / modules / settings.js
src / setting.js
/ **
* @type {boolean} verdadero | falso
* @description Si necesita tagsView
* /
tagsView: verdadero,
Se debe acceder a la propiedad visible con $ o _ no se utilizan como proxy en la instancia de Vue
src / allow.js 中 修改 Message.error (error) 为 Message.error (error.message)
catch (error) {
// elimine el token y vaya a la página de inicio de sesión para volver a iniciar sesión
aguardar store.dispatch ('usuario / resetToken')
Message.error (error.message)
siguiente (`/ login? redirect = $ {to.path}`)
NProgress.done ()
}
Con respecto al control de permisos, el marco admite el control de permisos a nivel de página y de botón.
El control de permisos en el enrutamiento está a nivel de página.
src / enrutador / index.js
{
ruta: '/ permiso',
componente: Diseño,
redireccionar: '/ permiso / página',
alwaysShow: true, // siempre mostrará el menú raíz
nombre: 'Permiso',
meta: {
título: 'Permiso',
icono: 'candado',
roles: ['admin', 'editor'] // puede establecer roles en root nav
},
niños: [
{
ruta: 'página',
componente: () => importar ('@ / vistas / permiso / página'),
nombre: 'PagePermission',
meta: {
title: 'Permiso de página',
roles: ['admin'] // o solo puede establecer roles en la navegación secundaria
}
},
{
ruta: 'directiva',
componente: () => importar ('@ / vistas / permiso / directiva'),
nombre: 'DirectivePermission',
meta: {
title: 'Permiso de directiva'
// si no establece roles, significa: esta página no requiere permiso
}
},
{
ruta: 'rol',
componente: () => importar ('@ / vistas / permiso / rol'),
nombre: 'RolePermission',
meta: {
title: 'Permiso de rol',
roles: ['admin']
}
}
]
},
El control de permisos en la página está en el nivel del botón.
Método clave
v-if = "checkPermission (['admin', 'editor'])"
v-permiso = "['admin', 'editor']"
Interacción de parámetros de front-end y back-end: sobre códigos de respuesta y mensajes de respuesta
El backend solicita obtener el código de estado y el mensaje x-api en el encabezado como el código de respuesta y el mensaje de error.
Decodificar el mensaje (base64)
decodeURIComponent (window.atob ('dG9rZW4lRTQlQjglOEQlRTglODMlQkQlRTQlQjglQkElRTclQTklQkElRUYlQkMlODE ='))
Solicitar interceptor
src / utils / request.js
El problema con lo siguiente es que cuando el código de estado es 403 o 404, no se puede obtener usando res.status. Necesita usar error.response.status para obtenerlo en la función de manejo de errores.
// interceptor de respuesta
service.interceptors.response.use (
/ **
* Si desea obtener información http como encabezados o estado
* Por favor devuelva respuesta => respuesta
* /
/ **
* Determine el estado de la solicitud por código personalizado
* Aquí es solo un ejemplo
* También puede juzgar el estado por código de estado HTTP
* /
respuesta => {
// const res = response.data
const res = respuesta
// si el código personalizado no es 200, se considera un error.
// Obtener información del código de estado del estado de la respuesta
if (res.status! = 200) {
Mensaje({
mensaje: res.msg || 'Solicitud fallida',
error de tecleado',
duración: 5 * 1000
})
if (res.status == 401) {
// para volver a iniciar sesión
MessageBox.confirm ('Error al iniciar sesión, ¡inicie sesión de nuevo!', 'OK', {
confirmButtonText: 'Iniciar sesión de nuevo',
cancelButtonText: 'Cancelar',
tipo: 'advertencia'
}). luego (() => {
store.dispatch ('usuario / resetToken'). luego (() => {
location.reload ()
})
})
}
return Promise.reject (nuevo error (res.msg || 'Solicitud fallida'))
} más {
volver res
}
},
error => {
Mensaje({
mensaje: error.message,
error de tecleado',
duración: 5 * 1000
})
return Promise.reject (error)
}
)
Ampliar el aprendizaje: http://www.axios-js.com/zh-cn/docs/#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86
Manejo de errores
|
Resumen: Usemos la interacción de parámetros regular y qué hacen esas polillas. Posteriormente, consulté a otras personas, y la escritura anterior todavía tiene problemas funcionales Cuando se usan otros protocolos para la transmisión, algunos protocolos no tienen mensajes de encabezado. Además, el valor de retorno de back-end está encriptado como un todo, y el mensaje y el código de estado son más convenientes de escribir junto con otros valores de retorno.
{
"code": "200",
"msg": "成功",
"data": [{...},{...}]
}
设置的路由，跳出框架显示。
La razón es ese componente: el diseño no está configurado
src / enrutador / index.js
{
ruta: '/ usuario',
componente: Diseño,
niños: [{
ruta: 'centro',
nombre: 'Centro',
componente: () =>
importar ('@ / vistas / usuario / centro / índice'),
oculto: cierto,
meta: {título: 'Centro personal'}
}]
}
reinicio del formulario elementUI No se puede leer la propiedad 'formulario' de indefinido "
excluido
El formulario debe tener una referencia y el nombre de formName debe ser coherente.
Debe completar los componentes el-form y form-item y configurar los accesorios. Si ejecuta este método sin configuración, el valor del cuadro de entrada no se restablecerá.
Motivo del error: tenga en cuenta que es una referencia, no una referencia.
resetForm (formName) {
this. $ refs [formName] .resetFields ();
}
Cambiar la pantalla en inglés del componente de localización a chino
Al principio, no me di cuenta de que era un problema de idioma y no pude encontrar Ir a en la búsqueda de texto completo.
Más tarde supe que era un problema de idioma.
src / main.js
En la configuración predeterminada, se usa el inglés.
Comentario directo, porque el predeterminado es el chino. Tenga en cuenta que el siguiente elemento Vue.use también debe anotarse.
// import enLang from'element-ui / lib / locale / lang / en '// Si usa el paquete de idioma chino, apóyelo de forma predeterminada, no se requiere importación adicional, elimine la dependencia
Vue.use (Elemento, {
tamaño: Cookies.get ('tamaño') || 'medium', // establece el tamaño predeterminado de element-ui
// locale: enLang // Si usa chino, no es necesario configurarlo, elimínelo
})
Cerrar la página actual
this. $ store.dispatch ('tagsView / delView', this. $ ruta)
No tiene efecto si está escrito, puede estar escrito en un lugar incorrecto. Por ejemplo, en el siguiente ejemplo, el error del método de cierre está escrito en el componente de artículo (artículo).
Ejemplos de aplicación
Página de lista de administración de artículos (índice) == (haga clic para agregar, saltar a) == "Página de artículo nuevo (agregar) == (subcomponente) ==" componente de artículo (artículo) == (complete el contenido y haga clic en enviar ) ==》 Agregar correctamente, activar el componente principal (agregar) para cerrar la página actual y volver al evento de la página de lista.
Página de la lista de administración de artículos (índice) == (haga clic para editar, lleve la identificación del artículo a través del enrutamiento, vaya a) == "Página de edición del artículo (editar) == (subcomponente) ==" componente del artículo (artículo) == llenar en Después del contenido, haga clic en Enviar ==》 La edición se realizó correctamente y active el evento del componente principal (editar) para cerrar la página actual y volver a la página de lista.
Observaciones:
1. Permanezca en la página de edición (editar) y haga clic directamente en la actualización del navegador. Actualizar perderá la identificación del artículo. Al actualizar, otras páginas se cierran automáticamente y solo se conserva la página actual.
2. Agregar y editar, principalmente agregar Después de regresar a la página de lista, la página de lista necesita obtener datos nuevamente. En la página de lista, escriba el método de inicialización de la página en activado.
activado () {
this.getTableData ()
}
Artículo nueva página
<plantilla>
<article-detail: is-edit = "false" @ close = "closeSelectedTag" />
</template>
<script>
importar ArticleDetail desde './components/ArticleDetail'
exportar predeterminado {
nombre: 'ManageModuleNewsAdd',
componentes: {ArticleDetail},
métodos: {
closeSelectedTag () {
// Cerrar la página actual
this. $ store.dispatch ('tagsView / delView', this. $ ruta)
esto. $ router.push ({
nombre: 'ManageModuleNews'
})
}
}
}
</script>
Página de edición de artículo
<plantilla>
<article-detail: is-edit = "true" @ close = "closeSelectedTag" />
</template>
<script>
importar ArticleDetail desde './components/ArticleDetail'
exportar predeterminado {
nombre: 'ManageModuleNewsEdit',
componentes: {ArticleDetail},
métodos: {
closeSelectedTag () {
// Cerrar la página actual
this. $ store.dispatch ('tagsView / delView', this. $ ruta)
esto. $ router.push ({
nombre: 'ManageModuleNews'
})
}
}
}
</script>
Componente del artículo
creado() {
if (this.isEdit) {// 编辑 isEdit = true
const id = this. $ route.params.id
si yo d) {
// Refresh perderá id. Al actualizar, otras páginas se cierran automáticamente y solo se conserva la página actual.
este. $ mensaje ({
mensaje: 'La identificación de información se perdió, cierre esta página y vuelva a ingresar. ',
tipo: 'advertencia'
})
} más {
// Consulta los detalles del artículo según la identificación
this.fetchData (id)
}
} más {
// agregar
this.newsForm = this.defaultNews
this.fileObj.fileUrl = ''
}
},
métodos: {
handleSubmit () {
si (this.isEdit) {
this.updateNews (this.newsForm)
} más {
this.addNews (this.newsForm)
}
},
async addNews (fila) {
const res = aguardar addNews (fila)
if (código res. === 200) {
este. $ mensaje ({
mensaje: '¡Agregado exitosamente! ',
tipo: 'éxito'
})
// Activa el componente principal, cierra la página actual, salta a la página de lista
this. $ emit ('cerrar')
}
},
async updateNews (fila) {
const res = aguardar updateNews (fila)
if (código res. === 200) {
este. $ mensaje ({
mensaje: '¡Guardar con éxito! ',
tipo: 'éxito'
})
// Activa el componente principal, cierra la página actual, salta a la página de lista
this. $ emit ('cerrar')
}
},
}
======
Continuará