how wonderful the cain design
第一版模板工程
how-wonderful-the-cain-design es una versión mejorada de la plantilla de backend después de la versión v1, basada en vue.js y element . Actualmente, el proyecto de plantilla integra inicio de sesión , verificación de autoridad , configuración de enrutamiento , solicitud ajax , simulación , gráficos , páginas 404 , páginas 401 y varias páginas de plantilla . Resuelva los problemas del personal del lado del servidor que desarrolla páginas de administración de back-end. A continuación, presentaré los preparativos antes de usar este proyecto y cómo usarlo. Espero que pueda ayudar a algunos socios con una base de front-end débil ~.
Este proyecto hace referencia a vue-admin-element
Nota : este proyecto utiliza la versión [email protected]+ y [email protected]+
Para instalar el nodo (8.0+) localmente, puede descargar la versión de instalación directamente y seguir los pasos. Una vez completada la instalación, verifique si la instalación fue exitosa.
node -v
npm -v
El éxito se produce cuando aparece el número de versión.
El proyecto incluye principalmente los siguientes puntos técnicos:
Para el desarrollo del lado del servidor, solo debe prestar atención a la sintaxis de vue, la biblioteca de componentes element-ui, el método de escritura de solicitudes de axios y las especificaciones del código eslint. Si los gráficos son útiles, también debe prestar atención a echarts.
**Nota importante:** El uso de eslint es obligatorio en el proyecto para estandarizar la escritura del código. Puede resultar desagradable cuando entra en contacto con él por primera vez. Debe ir al sitio web oficial para descubrir qué problemas existen. están en la gramática y cómo modificarla. Pero para el mantenimiento posterior, es una inversión sumamente valiosa. Así que no creas que es engorroso, solo acostúmbrate ^-^
// 结构树
|- build/ ------------------- 组件webpack区
|- config/ ------------------ 组件启动配置区，开发人员可在index.js中配置动态代理（当运行npm run dev时，该动态代理会生效，即可调用服务端接口），也可以修改端口号，防止端口号冲突
|- src/ --------------------- 组件源代码
|- api/ ----------------- 接口编码区
|- assets/ -------------- 图片区
|- components/ ---------- 组件编码区
|- icons/ --------------- 菜单icon svg图标区
|- mock/ ---------------- 模拟接口区
|- permission/ ---------- 路由权限编码区(可以不用修改)
|- router/ --------------- 配置路由区，开发完成的页面都要在这里挂路由，才能展现
|- store/ --------------- 全局缓存注入区，目前登陆的入口从这进入，会缓存用户信息，token信息以及权限信息
|- styles/ -------------- 公共样式区
|- utils/ ---------------- 工具区，开发人员开发的工具集都放在该目录中
|- views/ ---------------- 页面开发区，开发人员开发的页面放在该目录中
|- App.vue --------------- 启动的vue文件
|- index.js -------------- 启动js文件，element-ui是按需加载的，开发人员要根据引用了哪些element组件在该js文件中引入，引入格式参照模板
|- static/ ------------------ static放置一些静态文件，和assets的区别：assets会被编译替换名字，static中的不会被编译，原汁原味
|- .babelrc ----------------- babel 配置文件
|- .eslintignore ------------ eslint ignore配置文件
|- .eslintrc.js ------------- eslint配置文件
|- .gitignore --------------- git忽略提交文件配置
|- .postcssrc.js ------------ postcss配置文件
|- index.html --------------- HTML 模板
|- package-lock.json -------- npm 版本锁定文件，每添加一个依赖都会变化这个，保证对依赖版本的控制
|- package.json ------------- npm 配置文件
|- README.md ---------------- 项目帮助文档
Los directorios a los que los desarrolladores reales deben prestar más atención al desarrollar páginas son **/src/views y /src/router**. El primero escribe la página y el segundo escribe la información de enrutamiento de la página correspondiente. el enrutamiento se utiliza como un campo de juicio de permisos en la plantilla, es decir, la matriz de permisos devuelta por el servidor en realidad se compara con el nombre y el resultado coincidente es la página de permisos propiedad del usuario; de lo contrario, una página 401 o una. Se devolverá la página 404.
Actualmente, el proyecto tiene dos usuarios configurados: admin y ChartUser. El objetivo principal es probar los permisos.
Puede iniciar sesión sin ingresar una contraseña, pero debe ingresar su número de cuenta.
步骤一：
将本项目克隆到本地
git clone XXX
步骤二：
安装依赖
npm install
步骤三：
开发及预览
npm run dev
步骤四：
当运行上步控制台报了很多错误时，先运行
npm run lint
会自动帮你解决一些格式化的错误，若还有错误，就得自己找到错误的关键字，到官网中查找该如何修复，后面会介绍步骤
Tomando el componente del botón como ejemplo, cuando necesite introducir el componente del botón, debe seguir los siguientes pasos:
Cuando el componente correspondiente se encuentre en el sitio web oficial, copie el código correspondiente
<el-button>默认按钮</el-button>
Introduzca el componente en /src/index.js bajo demanda. Si no sabe cómo introducirlo, puede consultar la introducción bajo demanda de todos los componentes y encontrar el componente correspondiente para importar.
Lea atentamente cómo utilizar este componente, la documentación del sitio web oficial lo explicará muy claramente.
El inicio de sesión en el proyecto de plantilla utiliza mockjs para simular el inicio de sesión. Los pasos de implementación específicos del inicio de sesión en la plantilla son:
Aviso:
- La cuenta a juicio de if no existe y debe modificarse. Hay un total de tres nombres de usuario en la plantilla, que corresponden a tres permisos de usuario. Para simplificar la escritura, en realidad debería ser así. Sea el mensaje de retorno de la interfaz después de ajustar la interfaz.
- this.$store.dispatch('Login', ...) es la sintaxis de vuex. El propósito es llamar al método Login en /src/store/modules/user.js para solicitar la interfaz del servidor y devolver el usuario correspondiente. datos almacenados en En el caché global, es conveniente para llamadas globales.
- Preste atención al formato de los parámetros. Los parámetros en el objeto están fijos en parámetros, y el valor de los parámetros es un objeto. Se pueden colocar varios parámetros permitidos por axios en el objeto, porque la solicitud de obtención se simula aquí, por lo que solo. el parámetro params es necesario para obtener más parámetros, consulte la configuración de axios.
Cuando hace clic para iniciar sesión, se llamará al método anterior. El cuerpo del método en realidad llama a la interfaz getInfo en /scr/api/api.js para obtener los datos de usuario correspondientes. Entre ellos, se deben utilizar las cuatro rutas de inserción. El personal, independientemente de su autoridad, primero se inserta en la matriz de rutas y luego se almacenan en caché los permisos, la información del usuario y la información del token.
Luego llame a la interfaz getInfo. Aquí se usa Async (es6). Aquí debe prestar atención a result.code. Puede ser estado, estado o código, que varía según el formato de la configuración de la interfaz del servidor. de persona a persona.
Tenga en cuenta que el objeto userMap son los tres usuarios que simulé. El campo de función es el campo de permiso. En comparación con el campo de nombre en la tabla de configuración de enrutamiento, el menú en el campo de permiso es la página de función para la que el usuario tiene permisos.
En el desarrollo real, al modificar la interfaz de inicio de sesión, el campo de función debe estar presente y el formato debe ser coherente con la matriz anterior; de lo contrario, el sistema de permisos no será válido.
Después de los cuatro pasos anteriores, se completa todo el proceso de inicio de sesión.
Antes de desarrollar la plantilla, negociamos con el personal del servidor para utilizar jwt para la autenticación de la información del usuario.
El flujo de procesamiento es que la información del token se guardará en el caché global al iniciar sesión. Cada vez que se solicitan los datos de la interfaz, el marco guardará automáticamente la información del token en el encabezado. Si falla, se transferirá directamente al. página de inicio de sesión y se cerrará la información de inicio de sesión.
También es la interfaz de inicio de sesión, en la que **commit('SETTOKEN', 'test')** maneja el valor del token. En el desarrollo real del proyecto, esta prueba debe reemplazarse con el token real obtenido al iniciar sesión.
Ruta:/src/api/server.js
Preste atención al juicio res.code===301 aquí. Después de una negociación previa con el personal del servidor, cuando el token caduque, el código devuelto se establecerá en 301 para su identificación. Por lo tanto, el juicio aquí también se basa en la configuración de su propio proyecto, que puede ser código, estado, etc. ., que puede modificarse según el proyecto.
Ruta:/src/router/index.js
El menú y la tabla de enrutamiento en el sistema de plantillas son inseparables. En otras palabras, la estructura jerárquica del menú y la tabla de enrutamiento son consistentes . Por lo tanto, la tabla de enrutamiento debe escribirse de acuerdo con las reglas; de lo contrario, afectará la visualización del menú.
Primero debe comprender las reglas de configuración. El menú no puede exceder los tres niveles , por lo que hay tres formatos en la tabla de configuración de enrutamiento que se presentan a continuación.
Tenga en cuenta que el parámetro de ruta 401 oculto, cuando se establece en verdadero, significa que el árbol del menú filtrará esta ruta y no la mostrará.
La ruta del panel es un menú de primer nivel. El formato de escritura del menú de primer nivel es el anterior. Solo hay una ruta en los niños.
El título del parámetro en meta representa el nombre del menú que se muestra en el menú.
El ícono es el ícono del menú, y lo que se lee es el ícono del menú svg en el directorio /src/icons/. Por lo tanto, al hacer su propio proyecto, debe pedirle al artista que produzca el ícono del menú en formato svg y luego colocarlo. en el directorio de iconos. El valor del parámetro de icono es el nombre de archivo de los iconos.
Los permisos del menú de primer nivel coinciden con el nombre en niños.
La única diferencia entre el menú de segundo nivel y el menú de primer nivel es que los niños son mayores que uno y los demás son iguales.
El formato de menú de tercer nivel tiene hijos dentro de hijos.
La configuración de la tabla de enrutamiento debe configurarse de acuerdo con las instrucciones anteriores; de lo contrario, el efecto que desea no será el que desea. También preste atención a la combinación de nombre y permisos de menú para controlar la visualización del menú.
Ruta:/src/api/api.js
Todas las interfaces utilizadas en la página deben definirse en este archivo para una administración unificada y una fácil modificación.
El formato de escritura es el método de escritura proporcionado por la plantilla.
Sin embargo, en el desarrollo real, encontrará múltiples formas de transmitir parámetros, como obtener, publicar formulario sin formulario, publicar formulario y formulario de descanso. Las siguientes son las plantillas de escritura correspondientes a estos formatos.
Nota: Si necesita pasar el parámetro de encabezado de application/x-www-form-urlenconded, el parámetro debe escribirse como
const params = { data: {}, headers: { 'content-type': 'application/x-www-form-urlencoded' } }
El envío sin formulario es básicamente lo mismo que el envío de formulario. La diferencia es que la asignación original a los datos debe cambiarse a la asignación a los parámetros.
El marco de la plantilla también encapsula uniformemente los parámetros restantes y el método de transferencia de parámetros es una captura de pantalla.
El desarrollo real es todo desarrollo local. Utilice npm run dev para iniciar el servicio localmente. Entonces surge la pregunta ¿Cómo lidiar con una solicitud de interfaz?
En realidad es muy simple, es solo una configuración.
Ruta:/config/index.js
proxyTable: {
'/cloudfs': {
target: 'http://your_ip_address',
changeOrigin: true,
pathRewrite: {
'^/cloudfs': '/cloudfs'
}
},
'/api': {
target: 'http://your_ip_address',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
},
'/plustek': {
target: 'http://your_ip_address/plustek',
changeOrigin: true,
onProxyReq: function (proxyReq, req, res) {
console.log('获取到', process.env.eimCookie)
proxyReq.setHeader('Cookie', process.env.eimCookie) // 配置cookie方式
},
pathRewrite: {
'^/plustek': ''
}
}
}
Los desarrolladores pueden configurar el proxy ellos mismos según sea necesario
Si el sistema backend tiene su propio mecanismo de autenticación, como jwt. Entonces no es necesario considerar la autenticación de la información de las cookies.
Si desea utilizar cookies, agregue directamente la configuración onProxyReq en el proxy de configuración anterior, inserte la información de la cookie en la información del encabezado, guárdela y ejecute npm run dev nuevamente.
import chartMaker from '@/components/charts/chartMaker';
components: {
chartMaker,
},
<chart-maker id="chart-small1" height="120px" width="100%" :option.sync="chartOption" :forceRefresh.sync="forceRefreshChart"></chart-maker>
id---不能重复
height---固定高度
width---宽度使用百分比，才能支持自适应，容器宽度由外层容器控制。
option---echarts参数，模板中已经集成了较为常用的图形使用
forceRefresh---强制刷新组件，传入为true时才会强制刷新
getChart1Option() {
const tmpOption = {};
tmpOption.title = {
text: '访问量',
left: '5',
top: '10',
};
tmpOption.tooltip = {
axisPointer: {
lineStyle: {
color: '#57617B',
},
},
position(point, params, dom, rect, size) {
if (point[0] < 30) {
return [0, '50%'];
} else if (point[0] > (size.viewSize[0] - 80)) {
return [size.viewSize[0] - 80, '50%'];
}
return [point[0] - 30, '50%'];
},
formatter: '{b}月: {c}',
};
tmpOption.grid = {
top: 55,
left: '-8%',
right: '5%',
bottom: '2%',
containLabel: true,
};
tmpOption.xAxis = [{
show: false,
type: 'category',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#475669',
},
},
splitLine: {
show: true,
lineStyle: {
color: ['#E3E9EF'],
},
},
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
}];
tmpOption.yAxis = [{
show: false,
type: 'value',
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: '#475669',
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
splitLine: {
lineStyle: {
color: ['#E3E9EF'],
},
},
}];
tmpOption.series = [{
name: '日访问量',
type: 'line',
smooth: true,
// symbol: 'circle',
symbolSize: 6,
showSymbol: true,
lineStyle: {
normal: {
width: 2,
},
},
itemStyle: {
normal: {
color: '#0086E6',
borderColor: '#0086E6',
borderWidth: 2,
},
},
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
}];
this.chartOption = Object.assign({}, this.option, tmpOption);
},
注意：模板中使用的属性设置方法，用的是Object.assign，用方法中的tmpOption属性强制覆盖默认的option属性，传入到组件
this.getChart1Option();
// 调用这个方法后，表格就能展现了
Cuando terminas de escribir el código, piensas felizmente que ya está hecho y quieres publicarlo. Resultó que la conferencia de prensa fue rechazada porque cuando hay problemas de formato en el código, no se permite enviarlo al servidor.
Entonces, ¿cómo resolver el problema del formato del código?
Primero use npm run lint. Pase lo que pase, si ejecuta esto primero, eliminará rápidamente muchos problemas de formato.
Si descubres que todavía quedan muchos problemas, debes resolverlos uno por uno. La solución es la siguiente.
- Hay un enlace en el mensaje de error, como http://eslint.ort/docs/rules/no-var. Haga clic en este enlace para ir al sitio web oficial de eslint, descubrir la causa del error y modificarlo. el formato correspondiente.
- Si este error es realmente difícil de corregir, puede bloquear esta especificación. Vaya al archivo .eslintrc.js en el directorio raíz y agregue el blindaje de reglas correspondiente al objeto de reglas, como la regla no-var anterior. Configure "no-var": 0 y esta regla se filtrará.
####liberar
npm run build
运行完这个步骤后，会在该目录下生成vue-template文件目录，里面就是打包好的生产代码，放到nginx或者服务端的static目录就可以访问了。
Después del tutorial anterior, creo que no solo puede usar esta plantilla, sino que también ha ingresado al mundo del front-end. Si el documento aún no está claro, o si aún desea saber qué conocimientos relevantes deben complementarse, puede contactarme en cualquier momento ~
