Análisis del problema del acoplamiento de front-end

Análisis del problema del acoplamiento de front-end

Uno, JSON

Concepto:
JavaScript Object Notation notación de objetos de JavaScript (período inicial: en JavaScript, json se usaba para representar objetos)

Ejemplo: var p = {"nombre": "Zhang San", "edad": "23", "género": "男"};

JSON se usa generalmente para intercambiar datos con el servidor. Cuando se reciben datos del servidor, generalmente es una cadena. Podemos usar el método JSON.parse () para convertir los datos en objetos JavaScript.
Sintaxis: los
datos están en un par nombre / valor: json data es una clave compuesta por pares clave-valor, entre comillas (simples y dobles) o sin comillas.
El tipo de valor del valor :

1. Número (entero o punto flotante)
2. Cadena (entre comillas dobles)
3. Valor lógico (verdadero o falso)
4. Matriz (entre corchetes) {"persons": [{}, {}]} (puede contener varias personas)
5. Objeto (entre llaves) {"dirección": {"provincia": "Shaanxi" ...}}
6. nulo

Nota:

Los datos están separados por comas: varios pares clave-valor están separados por comas. Los
corchetes guardan el objeto: use {} para definir el formato json. Los
corchetes guardan la matriz: []

Enlace original: https://blog.csdn.net/weixin_46008168/article/details/106314239

二 、 AJAX

AJAX = JavaScript y XML asíncronos (JavaScript y XML asíncronos).

Concepto : Ajax hace que la página web se actualice de forma asincrónica, actualizando parte de la página web sin recargar la página completa.

Atributos Ajax : cache, processData, contentType
① cache:
Después de que se inicia una solicitud, la caché almacenará los resultados obtenidos en forma de caché. Cuando la solicitud se inicie nuevamente, si el valor de la caché es verdadero, será directamente leer de la caché, en lugar de volver a realizar una solicitud.
Se puede concluir del principio de funcionamiento de la caché que la función de la caché generalmente solo se usa en solicitudes de obtención.

② processData: Datos de proceso
Por defecto, el valor de processData es verdadero, lo que significa que todos los datos cargados en forma de objetos se convertirán en cadenas y se cargarán. Al cargar un archivo, no es necesario convertirlo en una cadena, así que cámbielo a falso.

③ contentType: El formato de los datos enviados
y contentType tienen un atributo similar es dataType, que representa el formato de los datos que se espera recibir del backend. Generalmente, habrá json, text ... etc., y contentType corresponde al tipo de datos. Representa el formato de los datos enviados por la interfaz

Valor predeterminado: application / x-www-form-urlencoded
representa los datos ajax. Tiene la forma de una cadena como id = 2019 & password = 123456.
Con este formato de datos, es imposible transmitir datos complejos, como multi matrices dimensionales, archivos, etc.

A veces, debe prestar atención a si el formato de datos que está transmitiendo es coherente con el formato contentType de ajax. Si no es coherente, debe encontrar una manera de convertir los datos. Cambiar el contentType a falso cambiará el formato de datos predeterminado anterior No se informará ningún error.

Enlace original: https://blog.csdn.net/qq_41564928/article/details/90580375

Introducción de parámetros:

$.ajax( [settings] ); // La configuración de los parámetros es la lista de parámetros del método $ .ajax (), que se utiliza para configurar la colección de pares clave-valor de la solicitud Ajax;

Paquete Ajax basado en jQuery

$.ajax({
    
    
    type:'GET',	//请求的类型,GET、POST等	
    url:'www.baidu.com',	//向服务器请求的地址。
    contentType:'application/json',	//向服务器发送内容的类型，默认值是：application/x-www-form-urlencoded
    dataType:'JSON',	//预期服务器响应类型
    async:true,	//默认值是true,表示请求是异步的，false是同步请求，同步请求会阻碍浏览器的其他操作（不建议使用）
    timeout:'5000',	//设置本地的请求超时时间（单位是毫秒）
    cache:true,	//设置浏览器是否缓存请求的页面
    success:function(result,status,XMLHttpRequest){
    
    		//请求成功是执行的函数,result：服务器返回的数据，    status：服务器返回的状态，
              }，
    error:function(xhr,status,error){
    
    	//请求失败是执行的函数
              }，
    complete：function(xhr,status){
    
         //不管请求失败还是请求成功，都执行的函数
              }
            })

La descripción del parámetro en el código también se puede ver en el siguiente enlace:

Enlace original: https://blog.csdn.net/qq_32325367/article/details/52291889

Ejemplo de aplicación:

Nota: La sintaxis del parámetro del método $ .ajax () es especial. La lista de parámetros debe incluirse entre un par de llaves "{}", y cada parámetro se escribe con el formato "nombre del parámetro": "valor del parámetro"; si hay varios parámetros, sepárelos con una coma ", ";

function addmovie(){
    
    
  var inputvalue = document.getElementById("inputmovie").value;//获取input框的内容
  console.log(inputvalue);//打印查看
  $.ajax({
    
    
    method: 'POST',//请求方式
    processData: false,
    url: '/api/movie/add',// 请求路径
    contentType: "application/json;charset=UTF-8",
    dataType:"json",//设置接受到的响应数据的格式
    data:JSON.stringify({
    
     //请求参数
      name:inputvalue,
    }),
    success(res) {
    
    
      try {
    
    
        if(res.code==200)
        {
    
    
          movielist();
        }
      }catch(e) {
    
    
        console.log(e)
      }
    },//响应成功后的回调函数
    error(e) {
    
    
      console.log('xhr error code is ' + e)
    }//表示如果请求响应出现错误，会执行的回调函数
  })
}

Análisis: El código anterior es mucho más conciso y claro que la implementación nativa de JavaScript de Ajax. Solo necesita establecer unos pocos parámetros. Entre ellos, la función de éxito se usa para lidiar con la respuesta, que es equivalente a la rama que debería tener éxito en el número de devolución de llamada cuando el JavaScript nativo implementa Ajax; la función de error es equivalente a la rama de error, en la que la operación después se realiza el error del programa, como dar un mensaje Espere. Además, debe tenerse en cuenta que los parámetros que no necesitan ser configurados especialmente pueden omitirse;

Tres, MD5

MD5 (algoritmo hash unidireccional) significa Message-Digest Algorithm 5 (algoritmo de resumen de mensajes), desarrollado a partir de MD2, MD3 y MD4.

Entorno de aplicación:

Al transmitir información confidencial y privada, como números de tarjetas y contraseñas, es fácil usar el método de obtención para exponer la contraseña y el nombre de usuario en el rl, y el método de publicación para encontrar fácilmente la información de datos en la consola, por lo que el método MD5 se utiliza para cifrar la contraseña.

Función:
información de entrada de cualquier longitud, después del procesamiento, la salida es información de 128 bits (huella digital);
diferentes resultados obtenidos por diferentes entradas (unicidad);
es imposible inferir la información de entrada en función del resultado de salida de 128 bits ( irreversible));

Introduce js:

<script src="js/md5.js" type="text/javascript"></script>

Funciones de uso común:

hex_md5(value)

b64_md5(value)

str_md5(value)

hex_hmac_md5(key, data)

b64_hmac_md5(key, data)

str_hmac_md5(key, data)

Ejemplo:

var password="hello"; 

var md5password = hex_md5(password);  

Cuatro, galleta

El navegador almacena temporalmente algunos datos, almacenados en su computadora (la última hora de acceso, cuando inicia sesión, debe guardar el nombre de usuario y luego mostrar "¡Bienvenido, nombre de usuario!" Y otros datos en la página de inicio después de iniciar sesión)

Introduce js:

<script src="cookie.js"></script>

Ejemplo de uso:

Cookies.set("username",username);//设置cookie
Cookies.remove("username");//删除cookie
Cookies.get('name');//获取cookie

Cinco, paquete JQuery

Concepto:
jQuery = javaScript + Query para consultar rápidamente elementos de la página a través del código js

El código de función de JavaScript está encapsulado en su interior para optimizar el procesamiento de documentos HTML, el procesamiento de eventos y la interacción AjAX.

Nota:

jquery en sí es una biblioteca de funciones de JavaScript, por lo que puede escribir código jquery directamente en el archivo js, ​​y el uso de jquery debe referirse al archivo jquery.js oficial. (El archivo js independiente no necesita hacer referencia a ningún archivo jquery.js, solo los archivos jquery.js y .js deben citarse en la página web html correspondiente. La referencia del archivo jquery debe estar antes del archivo .js ).

Introduce js:

<script src="./js/lib/jquery-3.4.1.js"></script>

La sintaxis relacionada se puede encontrar en el siguiente enlace:

Enlace original: https://blog.csdn.net/qq_34477549/article/details/52821889

Seis, la forma de los parámetros de solicitud de front-end

GETY POSTdos formas de
OBTENER para obtener datos del servidor especificado, POST para enviar los datos al servidor especificado para su procesamiento

En el método GET , los parámetros de los datos se empalman en la URL, en el método POST , los datos se convierten a json y se envían.

Siete, sobre la resolución de problemas entre dominios

¿Qué es un problema entre dominios?

La misma política de origen del navegador rechazó nuestra solicitud. El llamado mismo origen significa que el mismo nombre de dominio, protocolo y puerto son los mismos, y el script con el mismo origen solo se ejecutará cuando el navegador ejecute un script. Si no es del mismo origen, al solicitar datos, el navegador informará la excepción anterior en la consola, solicitando denegar el acceso. Esto es para evitar que la información de inicio de sesión de su sitio web A sea utilizada por el sitio web B para visitar el sitio web A cuando abre varios sitios web en el mismo navegador.

Por ejemplo: la dirección del proyecto de front-end después de ejecutarlo localmente es http: // localhost: 8080 /, en este momento, si desea acceder a la interfaz de back-end http://192.168.123.43:8000/api/ xxx / xxx, encontrará problemas entre dominios No se puede acceder.

Política del mismo origen: https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

# 同源的例子
http://example.com/app1/index.html  # 只是路径不同
http://example.com/app2/index.html
 
http://Example.com:80  # 只是大小写差异
http://example.com
# 不同源的例子
http://example.com/app1   # 协议不同
https://example.com/app2
 
http://example.com        # host 不同
http://www.example.com
http://myapp.example.com
http://example.com        # 端口不同
http://example.com:8080

¿Cómo resolver problemas entre dominios?

Usa nginx para resolver

nginx :

Proxy inverso: De hecho, el cliente desconoce el proxy, porque el cliente puede acceder sin ninguna configuración, solo necesitamos enviar la solicitud al servidor proxy inverso, y el servidor proxy inverso selecciona el servidor de destino para obtener los datos. Al regresar al cliente, el servidor proxy inverso y el servidor de destino son servidores externos, exponiendo la dirección del servidor proxy y ocultando la dirección IP del servidor real.

La diferencia entre el proxy inverso y el proxy de reenvío es: cliente de proxy de proxy de reenvío, servidor de proxy de proxy inverso.

Original: https://www.cnblogs.com/ysocean/p/9392908.html#_label0

Instrucciones de Nginx:

start nginx #启动
nginx -s reload #重新加载Nginx配置文件，然后以优雅的方式重启Nginx
nginx -s stop #强制停止Nginx服务

8. Cómo llenar nuestra página con los datos json devueltos por el backend

Método: utilizar un motor de plantillas

Motor de plantillas

El motor de plantillas es un módulo de terceros.

Permita que los desarrolladores empalmen cadenas de una manera más amigable, haciendo que el código del proyecto sea más claro y más fácil de mantener .

motor de plantilla de plantilla de arte

Uno, sintaxis de plantilla

Sintaxis estándar: fácil de leer y escribir.

{
    
    {
    
    if user}}
<h2>{
    
    {
    
    user.name}}</h2>
{
    
    {
    
    /if}}

Gramática original: potentes capacidades de procesamiento lógico.

<% if (user) {
    
     %>
<h2><%= user.name %></h2>
<% } %>

Dos, instalación

Utilice el comando npm install art-templaet en la herramienta de línea de comandos para descargar

3. Cómo usar

1. Presentar un motor de plantillas

<script src="template-web.js"></script>

2. Crea una plantilla en html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <!-- 创建script标签创建模板 -->
        <!-- 1. type="text/该斜杠后可以是 html,template... 不是script即可)" -->
        <!-- 2. 给 script 标签添加 id ，此 id 即为模板 id （也就是moviescript)-->
        <!-- 3. leval_1是对象，index-1是下标（也可用$value代替） -->
        <script id="moviescript" type="text/html">
            {
     
     {
     
     each shuffling leval_1 index_1}}
                <h1>{
     
     {
     
     leval_1.name}}</h1>
            {
     
     {
     
     /each}}
        </script>
    </div>
</body>
</html>
<!-- 引入模板引擎 -->
<!-- 注意：JS由于是解释型语言，是从上到下的顺序执行的，所以对于JS代码的引入一定要按照顺序，否则会报错
（后面的可能包含前面的，所以报错） -->
<script src="template-web.js"></script>
<script src="index.js"></script>

3. Método de creación de plantilla ()

//数据内容
var mydata =[
    {
    
    
      name:'哈利波特',
    },
    {
    
    
      name:'匆匆那年',
    },
    {
    
    
      name:'哪吒',
    },
    {
    
    
      name:'漫威',
    },
  ]
  //获取html中需要被渲染的div盒子
  var movieget = document.querySelector('.box');
  //在控制台中打印相关信息
  console.log(movieget);
  // 基于模板名渲染模板，template(filename/id, data);
  //data即为后端传送过来的data主要渲染的信息，shuffling为index.html页面语法的变量名
  var moviexuanran = template('moviescript',{
    
    
    //第一种
    shuffling:mydata,
    //第二种：存放mydata.js里的json内容 
    shuffling:[{
    
    ……}],
  })
  //在定位的div盒子里innerHTML渲染的信息（写入）
  movieget.innerHTML = moviexuanran;

Cuatro, gramática

Lo siguiente usa sintaxis estándar (admite plantillas básicas y expresiones js básicas) como ejemplos

1. Salida

{
    
    {
    
    value}}
{
    
    {
    
    data.key}}
{
    
    {
    
    data['key']}}
{
    
    {
    
    a ? b : c}}
{
    
    {
    
    a || b}}
{
    
    {
    
    a + b}}

2. Salida original

{
    
    {
    
    @ value}}

3. Salida condicional

<!-- 单 if 判断 -->
{
    
    {
    
    if value}} 
... 
{
    
    {
    
    /if}}

<!-- if ... else ... 判断 -->
{
    
    {
    
    if v1}} 
... 
{
    
    {
    
    else if v2}}
 ... 
{
    
    {
    
    /if}}

4. Atravesar

{
    
    {
    
    each target}}
  {
    
    {
    
    $index}} {
    
    {
    
    $value}}
{
    
    {
    
    /each}}

Nota: Estarget una matriz, que se eachutiliza para recorrer la matriz, $indexes el subíndice $valuede la matriz , es el valor de la matriz.

5. Subplantilla

Utilice sub-plantillas para extraer las secciones públicas (encabezado, final) del sitio web en archivos separados.

{
   
   {include '模板'}}
{
   
   {include './header.art'}}
{
   
   {include './header.art' data}}

6. Herencia de plantillas

El uso de la herencia de plantillas puede extraer el esqueleto HTML del sitio web en un archivo separado, y otras plantillas de página pueden heredar el archivo esqueleto.

{
   
   {extend './layout.html'}}
{
   
   {block 'head'}}
...
{
   
   {/block}}

Original: https://www.jianshu.com/p/d8d8e19157e0

Descargo de responsabilidad: Parte de la información proviene de Internet, si hay alguna infracción, comuníquese conmigo para eliminarla.
Si hay errores, confusiones, etc. en el artículo, ¡las críticas y correcciones son bienvenidas!