Introducción al contenido: el proceso de desarrollo del front-end es completamente independiente del back-end. La verdadera separación del front-end se refiere al proceso de trabajo. El código del front-end a menudo se mezcla con cierta lógica del back-end. El backend devolvió un objeto json
En el proceso de desarrollo front-end, el front-end y el back-end son completamente independientes entre sí, que es la verdadera separación entre el front-end y el back-end.
Significa que durante el proceso de trabajo, el código de front-end a menudo se mezcla con cierta lógica de back-end.
ejemplo
El backend devolvió un objeto json:
const data = {
total:100,
apple:30
}La proporción de manzanas que deben mostrarse en la parte frontal, por lo que en el proceso de presentación, el procesamiento de conversión de datos se incluirá en la lógica empresarial o plantilla html.
Este tipo de situación en la que el código de front-end se mezcla con algún código "redundante" porque los datos devueltos por el back-end no son datos completamente procesados puede considerarse como una "separación incompleta entre el front-end y el back-end".
defecto
- El código de interfaz no es lo suficientemente conciso
- Mal mantenimiento posterior
- ralentizar el progreso del trabajo
- Depuración conjunta de los extremos frontal y posterior.
Un modo de trabajo más amigable con separación de front-end y back-end
Diseño de software front-end MVC (mvvm), este concepto a menudo es solo una abstracción hecha de la lógica de todo el código. Sin embargo, simplemente mirando el directorio de códigos, no podemos distinguir si este proyecto usa mvc (mvvm). Entonces, ¿podemos lograr la división mvc a nivel de directorio mediante la división de archivos?
- m: capa de conversión de datos api (clave)
- v: capa de vista html
- c: capa de lógica empresarial js
capa de conversión de API (clave)
En el proyecto, se configura especialmente un directorio como capa de conversión de API, que realiza la conversión de datos internamente y expone las interfaces de API externamente.
un ejemplo
En el proceso de desarrollo paralelo del front-end y el back-end, el front-end ignora el back-end y primero se burla de la estructura de datos más concisa que satisface las necesidades comerciales del front-end en la página que requiere una interfaz para el desarrollo. Cuando el front-end y el back-end se depuran conjuntamente en la etapa posterior, solo necesitamos crear una capa de conversión para los datos devueltos por el back-end y generar el formulario de datos del simulacro anterior.
// 数据转换层
export const getUserInfo = () => {
// 定义一个Promise在内部作数据转换处理
return new Promise((resolve, reject) => {
axios
.get(`/sys/user/info`)
.then(({
data
}) => {
// 接入api并在自定义的handler函数转换数据结构
resolve(
handler(data)
)
})
.catch(error => {
// 在没有接入api之前在这里resolve输出mock数据
resolve({
code：0,
errMessage：'success',
data: {
user: {
userId: 1,
username: 'admin',
email: '[email protected]',
}
}
})
reject(error)
})
})
}Post-mantenimiento del proyecto
El backend puede cambiar la interfaz a voluntad: solo necesita cambiar la capa de conversión de la interfaz, sin cambiar la lógica empresarial.
Cambios en los requisitos del proyecto: la interfaz puede convertir y generar estructuras de datos más concisas en la capa de conversión de la interfaz, y la capa de lógica empresarial tiene menos cambios
Lo anterior son "Algunas opiniones personales sobre la separación de la parte delantera y trasera" que le presentó el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. a ti a tiempo.