Comment réaliser la séparation front-end et back-end dans le projet Vue dans le nœud

En fait, il existe de nombreux systèmes de blog open source construits sur la base de vue.js+node.js. L'article suivant vous présente principalement les informations pertinentes sur la séparation back-end avant le développement du projet node vue. le présente en détail à travers un exemple de code, il a une certaine valeur de référence et d'apprentissage pour les études ou le travail de chacun. Les amis qui en ont besoin peuvent venir jeter un œil ci-dessous.

Avant-propos

Cet article présente principalement les informations pertinentes sur la séparation du front-end et du back-end de Node Vue, et les partage pour la référence et l'étude de chacun. Vous trouverez ci-dessous le petit Apprenons ensemble.

Développement du projet Node Vue

J'ai récemment regardé le développement de Vue pendant près d'une semaine et j'ai de nombreux sentiments auxquels j'ai été exposé pour réagir et. angulaire avant, donc c'est spécial je veux apprendre Vue, que j'admire depuis longtemps. Après avoir étudié pendant longtemps, j'ai trouvé que c'est beaucoup plus facile à apprendre car je suis entré en contact avec plus de choses. Je peux associer les instructions de Vue aux instructions d'Angular. La conception des composants de Vue est similaire à la conception des composants de. React, y compris certains paramètres du routeur et React. Les routes dans nodejs ou nodejs sont similaires, et vuex est réécrit en fonction de redux et de flux. Bien que je ne comprenne toujours pas comment l'utiliser, quant au rendu du modèle de vue, ce n'est pas grand-chose. différent des ejs de rendu express. Utiliser vue peut complètement s'éloigner de jq. Bien que je n'ai ressenti aucun avantage magique à ne pas utiliser jq, je pense que cette liaison de données bidirectionnelle est assez pratique. Ce document est utilisé pour enregistrer les nouvelles connaissances que j'ai apprises sur vue et. des idées.

Command

• v-bind est principalement utilisé pour lier dynamiquement les attributs d'éléments DOM, c'est-à-dire les valeurs réelles ​​des attributs d'élément. Il est fourni par l'attribut data dans l'instance vm.

• v-model effectue principalement une liaison de données bidirectionnelle sur les éléments du formulaire. Lorsque la valeur de l'élément du formulaire est modifiée, les attributs correspondants de la vm correspondante dans la vm d'instance sont également mis à jour. en même temps.

• Les instructions v-if, v-show, v-else illustrent la relation logique entre les modèles et les données
  La fonction de v-if et v-else est de déterminer s'il faut afficher l'élément DOM et les sous-éléments contenus en fonction de la valeur numérique.
  Par exemple :
  f8df8a6d3e4781c2d8245dabd46ac8c6yes94b3e26ee717c64999d7867364b1b4a3 Lorsque data.yes=true dans l'instance vm, le moteur de modèle compilera le nœud dom et affichera e388a4556c0f65e1904146cc1a846beeyes94b3e26ee717c64999d7867364b1b4a3 Il convient de noter que v-else doit suivre v-if, sinon cela ne fonctionnera pas. .
  Les effets de v-show et v-if sont similaires. Ils affichent tous deux le contenu en jugeant s'il est vrai ou faux. La seule différence est que lorsque v-show n'est pas affiché, c'est display:none, ce qui signifie que le dom. node est conservé, mais pas v-if.

• v-for est utilisé pour le rendu de liste et peut parcourir des tableaux et des objets. Notez que v-for="b in 10" fait actuellement référence à l'itération de 1 à 10

• liaison d'événement v-on, en abrégé @:

• est équivalent à innerText Par rapport à v-text 14007c507bb1ec81299dbbe283918033e388a4556c0f65e1904146cc1a846bee, cela évite le problème de clignotement. {{msg}}

• v-HTML est similaire à innerHTML, et peut également éviter de flasher

• v-el Cette commande équivaut à ajouter un index à. l'élément dom. Par exemple

  , si vous souhaitez obtenir la valeur dans le dom actuel, vous pouvez utiliser ed0649719fc4bfba38383a87f5fc83f1this is a test 94b3e26ee717c64999d7867364b1b4a3 Remarque : le HTML n'est pas sensible à la casse et la casse camel sera automatiquement convertie en minuscule. Vous pouvez utiliser - pour le convertir en majuscules. vm.$els.demo.innerText

• v-ref est similaire à v-el et accède à

  vim.$refs

v-pre via
• pour ignorer la compilation de cet élément

• v-cloak semble inutile

• v-once a une nouvelle commande intégrée pour indiquer qu'un élément ou un composant ne sera rendu qu'une seule fois.

Rendu de modèle

1. v-for est principalement utilisé pour le rendu de liste, en se répétant en fonction du tableau reçu. Restituez l'élément dom et les sous-éléments internes liés à v-for, obtenez les données dans le tableau et restituez-les dans le nœud en définissant un alias.

par exemple :

 <ul v-for="item in items">
 <li>{{item.title}}</li>
 <li>{{item.description}}</li>
 </ul>

2. v-for a une variable $index intégrée, qui peut être appelée lors de l'appel de v-for, telle que

b1c3790cf0d17a9a10aa5d9bfe2d7ad0{{index}}-{{$index}}bed06894275b65c1ab86501b08a632eb

3. Modifier les données

Modifier directement le tableau pour changer les données

Si le tableau ne peut pas être modifié directement

1.

, Dans ce cas, il ne peut pas être modifié. Solution : vm.items[0]={} ou vm.item.$set(0,{})vm.$set('item[0]',{})

2.

vm.item.length=0

4. v-for parcourt l'objet, et vous pouvez personnaliser le variable clé sous la forme de (clé, valeur).

<li v-for="(key,value)" in objectDemo>
 {{key}}---{{$key}}:{{vue}}
</li>

5. La balise de modèle

est utilisée comme nœud suivant pour le rendu du modèle, mais ce nœud n'existe pas lors du rendu

liaison d'événement Avec l'écouteur

v-on peut lier la méthode dans les méthodes d'attribut d'instance car le gestionnaire d'événements v-on : peut ultérieurement accepter tous les noms d'événements natifs.

• abréviation @:

• peut lier des fonctions de méthodes et prend également en charge les js en ligne, mais est limité à une seule instruction.

• 绑定methods函数和内联js都可以获取原生dom元素，event.

• 绑定多个事件时，为顺序执行。

ui组件 饿了吗

使用指南

安装

npm install cnpm install element-ui --save-dev

引入文件main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small' })

使用

在components文件夹下新建一个页面，从饿了吗找到自己喜欢的组件，比如走马灯 Carousel.vue 把代码复制到这个页面

在需要的此组件的文件下，比如APP.vue里

import Carousel from './components/Carousel'
export default {
 name: 'app',
 components: { //components加s
 Carousel: Carousel
 }
}

在模板里载入组件

<template>
<p id="app">
 <Carousel></Carousel>
 <img src="./assets/logo.png">
 <router-view/>
</p>
</template>

这样就可运行了

前后端分离

习惯了用node做全栈开发,现在用vue-webpack做前端开发，node做后端开发也挺爽的，前后端实现了分离。

启动后端接口

cd back
cnpm install
npm run dev

启动前端服务器

cd front
cnpm install
npm start

进入登录页面，点击登录，控制台打印访问成功的信息,并成功跳转到helloworld页面

前后端通信

vue-resource

安装vue-resource 并在main.js中引用

import VueResource from 'vue-resource'
Vue.use(VueResource)

在config/index.js 配置 proxyTable代理服务器

proxyTable: {
 '/api/**': {
 target: 'http://localhost:3000',
 pathRewrite: {
 '^/api': '/api'
 }
 }
}

使用

this.$http.get('api/apptest')
 .then((response) => {
  // 响应成功回调
  console.log(response)
 }).catch(e => {
  // 打印一下错误
  console.log(e)
 })
 }

缺点：在开发环境下没有问题，但是在生产环境下请求后端接口不成功

axios

首先配置axios,在src下新建一个http.js

import axios from ‘axios'
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
export default axios

在main.js中引入

import axios from './http'
Vue.prototype.axios = axios
new Vue({
 el: '#app',
 router,
 axios,
 template: &#39;<App/>&#39;,
 components: { App }
})

使用

get方法

login () {
 // 获取已有账号密码
 this.axios.get('/apptest')
 .then((response) => {
 // 响应成功回调
 console.log(response)
 // this.$router.go({name: 'main'})// 不管用
 this.$router.push({name: 'HelloWorld'})
 }).catch(e => {
 // 打印一下错误
 console.log(e)
 })
}

post方法

register () {
 console.log(this)
 // 获取已有账号密码
 let params = {
 user: this.userinfo.account,
 password: this.userinfo.password,
 directionId: this.userinfo.directionId
 }
 this.axios.post('/signup', params)
 .then((response) => {
 // 响应成功回调
 console.log(response)
 }).catch(e => {
 // 打印一下错误
 console.log(e)
 })
}

生产环境路径问题

在生产环境下发现打包以后路径不对，修改config下的index.js

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),

 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './', //原来是 assetsPublicPath: '/'

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JS中如何实现网页自动秒杀点击（详细教程）

在node中如何实现http小爬虫

在angular2中有关Http请求原理（详细教程）

使用VueAwesomeSwiper容易出现的问题？

使用Node.js爬虫如何实现网页请求

如何使用VUE2.X过滤器

Ce 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!