Maison >interface Web >js tutoriel >Comment réaliser la séparation front-end et back-end dans nginx+vue.js
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 ?
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.x1. 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: '#app',
data: {
message: 'Hello Vue!'
}
})3. utilisé Événements de liaison <p class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</p>
data: {
isActive: true,
hasError: false
}
渲染结果为:<p class="static active"></p>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>
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>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;
}
}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();
}
}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('http://test.csx365.com:4000/sellingJson.html')
.then(function(data){
//定义一个vue对象,方便模板渲染
v =Object.assign(v, new Vue({
el : '.char_contain', //绑定事件名
data : {
carbrandList : data.data.carbrandList, //数据流
}
}));
})
.catch(function(err){
console.log(err);
});
});Articles connexes :
Comment obtenir un effet de défilement de cycle de texte intermittent via JSExplication détaillée des références dans React (tutoriel détaillé) Utilisez tween.js pour implémenter l'algorithme d'animation d'interpolationCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!