Cree rápidamente marcos de desarrollo de front-end y back-end

inserte la descripción de la imagen aquí

Nuevo en Jianghu, por favor dame un consejo.

Hablemos primero, ¿qué dificultades encontrará Xiaobai en el proceso de desarrollo de front-end y back-end? En el proceso de desarrollo de front-end y back-end, el front-end es principalmente diseño web y representación de datos, el front-end siempre es un dolor, ¿dónde está el dolor principal?

Dolor en la gestión de paquetes,

Cualquiera que haya desarrollado el front-end sabe que al instalar las dependencias del proyecto a través de npm, algunas versiones del paquete entrarán en conflicto.Por ejemplo, si su versión de v-charts es demasiado alta, hará que vue y vue-router en el proyecto fallen.
Dolor en el diseño de la interfaz de usuario

Las personas que no tienen sentido de la belleza no pueden hacer bien este trabajo. Todavía recuerdo cuando era estudiante de primer año, después de aprender HTML, CSS y JavaScript, había básicamente tres partes en el diseño de la página, el encabezado, el área de contenido y el pie de página. Sin mencionar la simplicidad de la página, había muy poca información presentada al usuario. En este momento, utilice las páginas de otras personas para eliminar algunos módulos no utilizados. La idea es muy buena, pero es difícil de implementar. Si mueve una parte, se lastimará todo el cuerpo. La página es un error o la página el estilo no es válido Más tarde, puede usar el posicionamiento del elemento del navegador para eliminar con precisión el módulo, y esta es una página relativamente buena.
Hay muchas cosas que aprender en el dolor.
Este punto, los amigos que estudian el front-end deben tener una comprensión profunda. Como dice el refrán, no existe el mejor marco, solo el escenario de aplicación más adecuado.

Hablemos del backend. Con la mejora continua de la ecología de primavera y el desarrollo de varios marcos de capa de persistencia, la realización de la interfaz es bastante fácil. Sin embargo, con el aumento de los requisitos y usuarios del sitio web, la arquitectura del sitio web seguirá siendo De la vertical anterior La arquitectura de la aplicación pasa a una arquitectura de servicios distribuidos, e incluso a una arquitectura de computación móvil. Estas arquitecturas son definitivamente inseparables del soporte técnico, por lo que Spring Security y Spring Cloud son el foco y la dificultad del aprendizaje.

Proceso de desarrollo front-end

El siguiente contenido toma: vue+axios+elementUI+vcharts tecnología stack como ejemplo

conocimiento preliminar

Documentación de referencia de Vue: https://cn.vuejs.org/v2/guide/
Documentación de referencia de Axios: http://www.axios-js.com/zh-cn/docs/
Documentación de referencia de elementUI: https://element.eleme.io/#/zh-CN
Documentación de referencia de vcharts: https://v-charts.js.org/#/

Nota: En el proyecto vue, en muchos casos, se usa el método npm para agregar paquetes.Se recomienda no usar npm install durante el desarrollo para instalar dependencias globalmente. Qué paquetes se necesitan y qué instalar, de lo contrario, use npm install para instalar globalmente, no sabe cuántos paquetes se descargarán, recuerdo haber eliminado la carpeta node_module una vez, que contenía más de 2000 archivos, y tomó casi 10 minutos para eliminar, por lo que se recomienda no usar npm install para instalar globalmente.

Construir el entorno vue

Requisito previo: el entorno del nodo se ha instalado

Comandos relacionados:

node -v  检查node版本
npm  -v  检查npm版本npm 
install -g cnpm --registry=https://registry.npm.taobao.org  换源加速插件下载
cnpm install vue  下载vue
vue -V  检查vue版本
vue init webpack fileName  通过vue指令初始化文件
.....
cnpm run dev                  启动服务
Ctrl+C                        关掉服务器

Comprender la estructura del directorio

La secuencia de llamada después de que comience el proyecto vue:

index.html---->main.js----->app.vue->index.js----->componentes/componentes

Descripción de la estructura del directorio del proyecto:

Tabla de contenido	ilustrar
construir	La configuración básica de webpack, webpack.base.conf.js (puedes mirar el código)
configuración	Directorio de configuración de compilación, número de puerto para el inicio del proyecto...
node_modules	Los kits de herramientas que dependen del nodo y la instalación del nodo xxx están aquí
origen	Paquete básico del proyecto
índice.html	página de entrada
paquete.json	Información del paquete de descarga del proyecto, versión...

El paquete principal del proyecto src, mejora el directorio de acuerdo a tu propia situación:

Tabla de contenido	ilustrar
API	Todas las solicitudes para el proyecto.
afirma	Recursos estáticos, css, js, img...
paginas	página
componentes	directorio de componentes públicos
enrutador	enrutamiento de front-end
aplicación.vue	componente raíz
principal.js	Archivo js de entrada

procesamiento de solicitudes de axios

Cree el archivo src/api/http.js (opcional, cree según su propia situación)

Establecer los parámetros correspondientes de la solicitud

import axios from 'axios';
axios.defaults.timeout=6000;//设置超时时间6s
axios.defaults.retry = 4;//请求次数
axios.defaults.retryDelay = 1000;//间隙
axios.defaults.withCredentials=true;//允许跨域
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=utf-8';
axios.defaults.baseURL = 'http://localhost:8888';//基础url,后端地址

Establecer interceptor de respuesta

//响应拦截器
axios.interceptors.response.use(
    response=>{
    
      return response;},
    error => {
    
      return Promise.reject(error);}
);

Encapsular los métodos get y post

Propósito: los métodos de publicación y obtención se usan mucho más tarde y se pueden encapsular, y luego se pueden llamar directamente pasando parámetros, lo que reduce la cantidad de código de página.

export function get(url, params = {
     
     }) {
    
    
  return new Promise((resolve, reject) => {
    
    
    axios.get(url, {
    
    
      params: params
    })
      .then(response => {
    
    
        resolve(response.data);
      })
      .catch(err => {
    
    
        reject(err)
      })
  })
}
export function post(url, data = {
     
     }) {
    
    
  return new Promise((resolve, reject) => {
    
    
    axios.post(url, data)
      .then(response => {
    
    
        resolve(response.data);
      }, err => {
    
    
        reject(err);
      })
  })
}

Desarrollo de páginas y mapeo de rutas.

Vue + Vue Router simplifica el desarrollo de páginas A través de Vue.js, los componentes integran páginas, agregan Vue Router, asignan componentes a rutas y permiten que Vue Router sepa dónde representarlos.

Proceso de desarrollo de fondo

Requisito previo: la base de datos está lista

Tome la pila de tecnología springboot+mybatisplus como ejemplo:

Conocimientos preliminares:

documentación de referencia de springboot: https://docs.spring.io/

Documentación de referencia de mybatisplus: https://mp.baomidou.com/guide/

Crear un proyecto springboot

Se recomienda usar el cargador de arranque Spring Initializr de IDEA para crear, una palabra: ¡rápido! ! !

Importar paquetes jar relacionados

Puede buscar a través del almacén de maven, sitio web oficial: https://mvnrepository.com

Tome el ejemplo más básico

<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
</dependency>
<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>8.0.16</version>
</dependency>
<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid-spring-boot-starter</artifactId>
			<version>1.2.6</version>
</dependency>
<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.4.3.1</version>
</dependency>

Crear application.yml, configuración básica del proyecto

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/xxx?userUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
    username: root
    password: 123456
  jackson:
    date-format: yyyy-MM-dd
    time-zone: GMT+8
  servlet:
    multipart:
      max-file-size: 20MB
      max-request-size: 20MB

server:
  port: 8888

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true

AutoGenerator genera módulos de proyecto (opcional, de creación propia)

Premisa: importar dependencias mybatis-plus-generator, spring-boot-starter-freemarker

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-generator</artifactId>
    <version>3.5.0</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
    <version>2.5.3</version>
</dependency>

Código de referencia: https://mp.baomidou.com/guide/generator.html

Resultado: se generan Entity, Mapper, Mapper XML, Service, Controller y otros módulos.

Nota: Puede verificar cada archivo generado, especialmente el campo de tiempo.AutoGenerator generará automáticamente el tipo LocalTime y, en general, debe cambiarse al tipo Fecha.

Crear una clase de configuración

Propósito: Resolver problemas de dominios cruzados, problemas de mapeo de recursos estáticos, etc. (cambie según sus propias necesidades). Entonces, ¿qué es el dominio cruzado? En pocas palabras, dado que los puertos de front-end y back-end son diferentes, la transmisión de datos de front-end y back-end se resuelve a través de dominios cruzados.

Código de caso:

@Configuration
public class ApplicationConfig implements WebMvcConfigurer {
    
    
    //1.解决跨域问题：放行哪些路径、原始域、请求方法、是否验证
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    
    
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("*")
                .allowCredentials(true);
    }
    //2.处理静态资源映射问题,定位各种文件或图像地址
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
    
    
        //path=file:xxx（根目录）/img/singerPic/
        String path1="file:"+System.getProperty("user.dir")+System.getProperty("file.separator")
                + "img"+System.getProperty("file.separator")
                +"singerPic"+System.getProperty("file.separator");//歌手图像地址
        registry.addResourceHandler("/img/singerPic/**")
                .addResourceLocations(path1);
    }
}

Escribir la capa del controlador (código central)

Responda a los datos JSON para el front-end de acuerdo con la solicitud iniciada por el front-end.

Interfaz CRUD de servicio: obtenga una sola fila de consulta, elimine la eliminación, enumere la colección de consultas, etc.
T genérico es cualquier objeto de entidad
El objeto Wrapper es un constructor condicional, que puede ser nulo y puede consultarse incondicionalmente.

Envoltura de constructor condicional, adecuada para SQL complejo, admite encadenamiento.

Documento de referencia: https://mp.baomidou.com/guide/wrapper.html#alleq

función	ilustrar	ejemplo
equivalente, no	= 、！=	`eq("name", "老王")`—>`name = '老王'`
es, es decir	< , <=	lt(“edad”, 18) `--->`edad < 18
gt, ge	> 、 >=	`ge("age", 18)`—>`age >= 18`
me gusta, no me gusta	COMO '%valor%'	like(“nombre”, “王”) `--->`nombre como '%王%'
No es nulo	El campo ES NULO	isNotNull(“nombre”) `--->`el nombre no es nulo
entre	ENTRE valor 1 Y valor 2	entre(“edad”, 18, 30) `--->`edad entre 18 y 30
ordenarPorDesc	orden descendiente	orderByDesc(“puntuación”) `--->`ordenar por Puntuación DESC

Nota: El primer campo del parámetro corresponde al campo de propiedad de la base de datos

Código de muestra:

//名字、邮箱不为空且年龄为大于12
QueryWrapper<User> wrapper = new QueryWrapper<>();
wrapper.isNotNull("name")
       .isNotNull("email")
       .ge("age",12);

Recomendación: algunos estudiantes sienten que el uso de funciones para operar la base de datos puede ser confuso. Puede configurar el inicio de sesión en application.yml. Cuando el método completa una llamada, la ventana en ejecución imprimirá el registro y puede usar el registro para comprender el implementación subyacente.

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

Resumir

En este punto, los marcos front-end y back-end están todos configurados. Luego, escriba el código de acuerdo con los requisitos. El front-end inicia una solicitud de obtención o publicación al back-end a través de axios, y el back-end end responde a los datos JSON al front-end. El front-end obtiene los datos JSON a través de la sintaxis vue, procesa los datos en la página y se completan las funciones front-end y back-end de dicha interfaz.

La capacidad es limitada, el artículo es insuficiente, espero que dejes tus huellas, y lo corregiré lo antes posible...

De la mano para construir el marco de desarrollo front-end