Comment réaliser la séparation front-end et back-end dans nginx+vue.js-js tutoriel-php.cn

Cet article présente principalement l'exemple de code de nginx+vue.js pour réaliser la séparation front-end et back-end. Maintenant, je le partage avec vous et le donne comme référence.

1.nginx est un serveur HTTP et proxy inverse hautes performances, souvent utilisé pour la gestion de serveurs distribués

Il est souvent utilisé pour l'équilibrage de charge (ceci est obtenu en appelant plusieurs serveurs) <.>

La sortie des ressources statiques est plus rapide et la ressource peut être compressée et sortie au format gzip (c'est également une raison importante pour laquelle cet article l'utilise pour l'accès aux ressources statiques)

Convient pour résoudre des problèmes inter-domaines et reverse Proxy (car personne ne veut voir l'accès à d'autres noms de domaine sous ce nom de domaine, le cross-domain peut conduire à des attaques CSRF, c'est la deuxième raison de l'utiliser dans cet article)

prend moins mémoire et prend quelques secondes Démarrage, peut changer rapidement de nœud pour éviter les temps d'arrêt

2.es6 est la sixième version d'ECMAScript Si vous voulez bien apprendre les frameworks js tels que vue.js, c'est un langage qui doit l'être. appris.Il est recommandé L'adresse d'apprentissage est la suivante : http://es6.ruanyifeng.com/

3.vue.js est un moteur de rendu de modèles front-end, similaire au jsp back-end, beetl et d'autres moteurs de modèles. Bien sûr, il peut également être combiné avec l'environnement de nœud pour le rendu back-end (le site officiel le prend déjà en charge)

Après avoir mentionné les points ci-dessus, répondons à quelques pourquoi ?

1. Quels sont les avantages de réaliser une séparation front-end et back-end ? Quels sont les principaux scénarios d'application
2 Pourquoi avez-vous besoin d'utiliser un moteur de template front-end ? -moteur de modèles final ? Quels sont leurs avantages et inconvénients ?
3. Quels changements doivent être apportés pour parvenir à la séparation front-end et back-end ?

Après avoir réfléchi à la longue ligne de démarcation………………

1 Tout d'abord, examinez le problème du point de vue du développement. , et la scène est simple et fixe. Maintenant, nous avons souvent plus de projets mobiles, et la plupart des mêmes applications sont une combinaison de pages natives et intégrées. signifie qu'un module fonctionnel est susceptible d'être le résultat de demandes de plusieurs projets.

2 Si l'on suit toujours l'approche précédente, le premier problème est que je ne peux utiliser jsonp que pour résoudre le problème de l'ajustement de plusieurs. tâches inter-domaines. Le problème avec la requête est que le code est trop redondant pour être implémenté. Pour une même fonction, il est très probable qu’il existe deux méthodes d’écriture différentes côté application et côté PC. Et la bande passante est une chose très coûteuse. Le client se tourne toujours vers le serveur pour demander des ressources statiques, ce qui entraînera une vitesse lente. La séparation dynamique et statique peut réaliser l'acquisition séparée de ressources statiques et de ressources dynamiques, et le serveur peut également séparer les ressources dynamiques et statiques, résolvant ainsi efficacement le problème de bande passante.

3. Les développeurs back-end peuvent ne pas être aussi compétents en CSS et en js que le front-end. Par exemple, lorsqu'ils utilisent jsp pour remplir des données, les développeurs back-end doivent souvent ajuster les styles et écrire du js. , ce qui entraînera une faible efficacité de développement.

4. L'utilisation du rendu de modèles front-end peut libérer une partie de la pression côté serveur, et le moteur de modèles front-end prend en charge plus de fonctions que le back-end. Par exemple, vous pouvez utiliser vue pour personnaliser. composants, méthodes de vérification, dégradés approfondis, etc., ce qui est mieux que Le moteur de modèles back-end doit être plus fonctionnel.

Notre solution est la suivante1. Méthode d'interaction traditionnelle :

Initiées par la demande du client, réponse côté serveur, les données dynamiques sont générées via une série d'opérations et les données dynamiques sont transmises au modèle back-end. moteur, et après le rendu, est transmis au front-end.

2. Méthode d'interaction améliorée

Le client lance une requête et nginx l'intercepte S'il s'agit d'une ressource statique, c'est le cas. directement compressées par le serveur de fichiers et envoyées au front-end. S'il s'agit d'une demande de ressources dynamiques, les données dynamiques sont générées via le serveur de ressources dynamiques, renvoyées au front-end au format json et transmises à vue.js Display après le rendu. .

5. Explication des fonctions clés de vue.js version 2.x

1. Comment se lier à la structure html et comment la lier à la structure html. style Pour la liaison dynamique, quels sont les événements de surveillance couramment utilisés ?

1. Rendu de base

2. Liaison de classe et de style

    //html结构
    <p id="app">
     {{ message }}
    </p>

    //js模块
    var app = new Vue({
    //会检索绑定的id 如果是class 则是.class即可绑定
       el: &#39;#app&#39;,
       data: {
        message: &#39;Hello Vue!&#39;
       }
    })

Copier après la connexion

3. utilisé Événements de liaison

<p class="static"
  v-bind:class="{ active: isActive, &#39;text-danger&#39;: hasError }">
</p>

 data: {
     isActive: true,
     hasError: false
    }

渲染结果为:<p class="static active"></p>

Copier après la connexion

2. Comment communiquer avec le serveur

 //输出html
<p v-html="rawHtml"></p>
//绑定id或class
<p v-bind:id="dynamicId"></p>
//绑定herf
<a v-bind:href="url" rel="external nofollow" ></a>
//绑定onclick
<a v-on:click="doSomething"></a>

Copier après la connexion

Il est recommandé d'utiliser axios pour faire des requêtes au serveur, puis de transmettre les données demandées à vue. js pour le traitement.

À propos de l'adresse de lien d'exemple d'utilisation d'axios

3. Instructions personnalisées de vérification des données de l'instruction de contrôle de flux commun

Vérification des données et liaison de contrôle de formulaireLien fixe adresse (https://cn.vuejs.org/v2/guide/forms.html)

 //if 语句
 <h1 v-if="ok">Yes</h1>

 //for 循环语句
 <ul id="example-1">
 <li v-for="item in items">
  {{ item.message }}
 </li>
 </ul>

Copier après la connexion

Les quatre points suivants font référence à l'api du site officiel, qui ne sera plus introduit

4 . Réponse approfondie Comment implémenter la formule (que faire si des changements se produisent après l'initialisation de la première page et le remplissage des valeurs) ?

5. Application de composants personnalisés et utilisation de Render pour créer une structure HTML

6. Utilisation du routage

7. Modificateurs communs

6 Exemples pratiques

Ressources statiques de configuration 1.nginx

2. Demande backend pour renvoyer des données json (en prenant java comme exemple)

 server {
    listen    4000;
    server_name www.test.com;
    charset utf-8;
    index /static/index.html;//配置首页

    //这边可使用正则表达式,拦截动态数据的请求,从而解决跨域问题
    location = /sellingJson.html {
      proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
    }

    #配置Nginx动静分离，定义的静态页面直接从static读取。
    location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
    { 
    root /static/;
    #expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以   节省带宽和缓解服务器的压力
    expires   7d; 
    }  
  }

Copier après la connexion

3. Exemple de vue d'appel front-end

  @RequestMapping("/vueHelpSellingcar.html")
  public void vueHelpSellingcar(HttpServletRequest request,HttpServletResponse response) {
    //若干操作后,返回json数据
    JSONObject resultJson = new JSONObject();

    resultJson.put("carbrandList", carbrandList);
    resultJson.put("provinceList", provinceList);

    //进行序列化,返回值前端
    try {
      byte[] json =resultJson.toString().getBytes("utf-8");
      response.setHeader("Content-type", "text/html;charset=UTF-8");
      response.getOutputStream().write(json);
    } catch (Exception e) {
      e.printStackTrace();
    }

  }

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère. cela sera utile à tout le monde à l’avenir.

//html模块
  <p v-if="carbrandList.length" class="char_contain">
   <p v-for="brand in carbrandList" id="  {{brand.brand_id}}">{{brand.brand_name}}</p>
  </p>

//js模块 页面加载后,自动去获取动态资源
  let v={};
  $(function() {
    axios.get(&#39;http://test.csx365.com:4000/sellingJson.html&#39;)
      .then(function(data){
        //定义一个vue对象,方便模板渲染
        v =Object.assign(v, new Vue({
        el : &#39;.char_contain&#39;, //绑定事件名
        data : {
           carbrandList : data.data.carbrandList, //数据流
         }
        })); 
       })
       .catch(function(err){
         console.log(err);
       });
    });

Copier après la connexion