So erreichen Sie die Front-End- und Back-End-Trennung im Vue-Projekt im Knoten

Tatsächlich gibt es viele Open-Source-Blogsysteme, die auf vue.js+node.js basieren. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zur Backend-Trennung vor der Entwicklung des Node-vue-Projekts ein stellt es im Detail durch Beispielcode vor, es hat einen gewissen Referenz- und Lernwert für jedermanns Studium oder Arbeit. Freunde, die es brauchen, können unten einen Blick darauf werfen.

Vorwort

In diesem Artikel werden hauptsächlich relevante Informationen zur Trennung von Node Vues Front-End und Back-End vorgestellt und geteilt Unten finden Sie die kleine Referenz und das Studium.

Node-Vue-Projektentwicklung

Ich habe kürzlich fast eine Woche lang die Vue-Entwicklung beobachtet und war vielen Gefühlen ausgesetzt, auf die ich reagiert habe eckig vorher, daher ist es etwas Besonderes, dass ich Vue lernen möchte, das ich schon lange bewundere. Nach langem Lernen habe ich festgestellt, dass es viel einfacher ist, die Vue-Anweisungen mit den Anweisungen von Angular in Berührung zu bringen. Das Komponentendesign von Vue ähnelt React, einschließlich einiger Router-Einstellungen und React. Die Routen in NodeJS oder NodeJS sind ähnlich, und Vuex basiert auf Redux und Flux. Obwohl ich immer noch nicht verstehe, wie man es verwendet, ist es für das Template-Rendering von Vue nicht viel Anders als Express-Rendering-EJS. Die Verwendung von Vue kann sich vollständig von JQ lösen. Obwohl ich keine magischen Vorteile verspüre, wenn ich JQ nicht verwende, ist diese bidirektionale Datenbindung meiner Meinung nach recht praktisch Ideen.

Befehl

• v-bind wird hauptsächlich zum dynamischen Binden von DOM-Elementattributen, also den tatsächlichen Werten, verwendet ​​von Elementattributen wird durch das Datenattribut in der VM-Instanz bereitgestellt.

• v-model führt hauptsächlich eine bidirektionale Datenbindung für Formularelemente durch. Wenn der Wert des Formularelements geändert wird, werden auch die entsprechenden Attribute der entsprechenden VM in der Instanz-VM aktualisiert gleichzeitig.

• v-if-, v-show-, v-else-Anweisungen veranschaulichen die logische Beziehung zwischen Vorlagen und Daten
  Die Funktion von v-if und v-else besteht darin, anhand des numerischen Werts zu bestimmen, ob das DOM-Element und die darin enthaltenen Unterelemente ausgegeben werden sollen.
  Beispiel:
  <p v-if="yes">yes</p> Wenn data.yes=true in der VM-Instanz, kompiliert die Template-Engine den Dom-Knoten und gibt <p>yes</p> aus. Es ist erwähnenswert, dass v-else auf v-if folgen muss, sonst funktioniert es nicht .
  Die Auswirkungen von v-show und v-if sind ähnlich. Sie beurteilen beide, ob der Inhalt wahr oder falsch ist. Der einzige Unterschied besteht darin, dass er display:none ist, was bedeutet, dass der Inhalt nicht angezeigt wird node bleibt erhalten, v-if jedoch nicht.

• v-for wird zum Rendern von Listen verwendet und kann Arrays und Objekte durchlaufen. Beachten Sie, dass sich v-for="b in 10" derzeit auf die Iteration von 1-10

• v-on-Ereignisbindung, abgekürzt @:

• entspricht innerText. Im Vergleich zu v-text <p v-text="msg"><p> vermeidet es das Blinkproblem. {{msg}}

• v-HTML ähnelt innerHTML und kann auch das Flashen vermeiden.

• v-el Dieser Befehl entspricht dem Hinzufügen eines Index zu Das Dom-Element. Wenn Sie beispielsweise den Wert im aktuellen Dom erhalten möchten, können Sie

  verwenden. Hinweis: Bei HTML wird die Groß-/Kleinschreibung nicht berücksichtigt . Sie können es mit - in Großbuchstaben umwandeln. <p v-el="demo">this is a test </p>vm.$els.demo.innerText

v-ref ähnelt v-el und greift über
• auf

  vim.$refs

v-pre zu, um das Kompilieren dieses Elements
• zu überspringen

v-cloak fühlt sich nutzlos an
v-once verfügt über einen neuen integrierten Befehl, der angibt, dass ein Element oder eine Komponente nur einmal gerendert wird.

Vorlagenrendering1. v-for wird hauptsächlich zum Listenrendering verwendet und entsprechend dem empfangenen Array wiederholt Rendern Sie das dom-Element und die internen Unterelemente, die an v-for gebunden sind, und rufen Sie die Daten im Array ab und rendern Sie sie im Knoten, indem Sie einen Alias ​​festlegen.

zB:

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

2. v-for verfügt über eine integrierte $index-Variable, die beim Aufruf von v-for aufgerufen werden kann, z. B.

<li v-for="(index,item) in items">{{index}}-{{$index}}</li>3. Ändern Sie die Daten

Sie können die Daten ändern, indem Sie das Array direkt ändern

Wenn Sie das Array nicht direkt ändern können

1.

, In diesem Fall kann es nicht geändert werden.

oder vm.items[0]={} vm.item.$set(0,{})vm.$set('item[0]',{}) 2.

vm.item.length=04 die Schlüsselvariable in der Form (Schlüssel, Wert).

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

5. Das Vorlagen-Tag

wird als Folgeknoten für das Vorlagen-Rendering verwendet, aber dieser Knoten existiert beim Rendern nicht

Ereignisbindung und Überwachung v-on kann die Methoden in den Instanzattributmethoden als Ereignishandler binden, v-on: kann später alle nativen Ereignisnamen akzeptieren.

Abkürzung @:
kann Methodenfunktionen binden und unterstützt auch Inline-JS, ist jedoch auf eine Anweisung beschränkt.

• 绑定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过滤器

Das obige ist der detaillierte Inhalt vonSo erreichen Sie die Front-End- und Back-End-Trennung im Vue-Projekt im Knoten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!