這篇文章主要介紹node vue項(xiàng)目開(kāi)發(fā)之前后端分離的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司客戶(hù)idc服務(wù)中心，提供托管服務(wù)器、成都服務(wù)器、成都主機(jī)托管、成都雙線(xiàn)服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過(guò)各地的服務(wù)中心，我們向成都用戶(hù)提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開(kāi)放、透明、穩(wěn)定、高性?xún)r(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。

node vue項(xiàng)目開(kāi)發(fā)

最近看了近一周的vue開(kāi)發(fā)，有諸多感觸，我之前接觸過(guò)react、angular所以特別想學(xué)學(xué)久仰大名的vue。學(xué)習(xí)半天以后發(fā)現(xiàn)，接觸到的東西多了，學(xué)習(xí)起來(lái)就是容易很多，vue的指令我能個(gè)聯(lián)想到angular的指令，vue組件化設(shè)計(jì)類(lèi)似于react的組件化設(shè)計(jì)，包括一些router的設(shè)置跟react里的路由或者nodejs里的路由都差不多，vuex更是根據(jù)redux、flux改寫(xiě)的，雖然我還搞不太明白怎么用，至于vue的模板渲染，跟expres渲染ejs沒(méi)有太大的區(qū)別。使用vue可以完全脫離jq，雖然我還沒(méi)感受到不用jq有什么神奇的趕腳，但是我覺(jué)得這種雙向數(shù)據(jù)綁定的還是挺方便的，此文檔用來(lái)記錄我學(xué)習(xí)vue的一些新的知識(shí)和想法。

指令

• v-bind 主要用于動(dòng)態(tài)綁定DOM元素屬性，即元素屬性實(shí)際的值是 有vm實(shí)例中的data屬性提供的。

• v-model 主要對(duì)表單元素進(jìn)行雙向數(shù)據(jù)綁定，在修改表單元素的值時(shí)，實(shí)例vm中對(duì)應(yīng)的vm對(duì)應(yīng)的屬性也同時(shí)更新。

• v-if,v-show,v-else這幾個(gè)指令來(lái)說(shuō)明模板和數(shù)據(jù)間的邏輯關(guān)系
   v-if和v-else的作用是根據(jù)數(shù)值來(lái)判斷是否輸出該dom元素，以及包含的子元素。
   eg:
   <div v-if="yes">yes</div> 當(dāng)vm實(shí)例中的data.yes=true時(shí)，模板引擎會(huì)編 譯這個(gè)dom節(jié)點(diǎn)，輸出 <div>yes</div>值得注意的是：v-else要緊跟v-if否則不起作用。
   v-show與v-if的效果差不多，都是通過(guò)判斷真假顯示內(nèi)容，唯一不同的是，v-show不顯示的時(shí)候是display:none,也就是保留了dom節(jié)點(diǎn)，但是v-if不會(huì)。

• v-for 用于列表渲染，可以循環(huán)遍歷數(shù)組和對(duì)象,注意v-for="b in 10"目前指的是1-10的迭代

• v-on 事件綁定，簡(jiǎn)寫(xiě)@:

• v-text <p v-text="msg"><p>相當(dāng)于innerText,與{{msg}}相比，避免了閃現(xiàn)的問(wèn)題。

• v-HTML 類(lèi)似于innerHTML,也可以避免閃現(xiàn)

• v-el 這個(gè)指令相當(dāng)于給dom元素添加了個(gè)索引，例如<div v-el="demo">this is a test </div> ,如果想獲取當(dāng)前dom里的值,可以vm.$els.demo.innerText ,注意：html不區(qū)分大小寫(xiě)，駝峰式的寫(xiě)法會(huì)自動(dòng)轉(zhuǎn)成小寫(xiě)，可以通過(guò)-的方式轉(zhuǎn)換成大寫(xiě)。

• v-ref 與v-el類(lèi)似 通過(guò)vim.$refs訪(fǎng)問(wèn)

• v-pre 跳過(guò)編譯這個(gè)元素

• v-cloak 感覺(jué)沒(méi)啥用

• v-once新增內(nèi)置指令，用于標(biāo)明元素或組件只渲染一次。

模板渲染

1、v-for 主要用于列表渲染，講根據(jù)接受到的數(shù)組重復(fù)渲染v-for綁定到的dom元素及內(nèi)部子元素，并可以通過(guò)設(shè)置別名的方式，獲取數(shù)組內(nèi)數(shù)據(jù)渲染到節(jié)點(diǎn)中。

eg:

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

2、v-for內(nèi)置$index變量，可以在調(diào)用v-for的時(shí)候調(diào)用，例如<li v-for="(index,item) in items">{{index}}-{{$index}}</li>

3、修改數(shù)據(jù)

直接修改數(shù)組可以改變數(shù)據(jù)

不能直接改變數(shù)組的情況

     1.vm.items[0]={} , 這種情況下無(wú)法修改，解決：vm.item.$set(0,{})或者vm.$set('item[0]',{})

     2.vm.item.length=0

4、v-for遍歷對(duì)象，可以使用（key,value）的形式自定義key變量。

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

5、template標(biāo)簽

用來(lái)作為模板渲染的跟節(jié)點(diǎn)，但是渲染出來(lái)不存在此節(jié)點(diǎn)

事件綁定與監(jiān)聽(tīng)

v-on可以綁定實(shí)例屬性methods中的方法作為事件的處理器，v-on:后面可以接受所有的原生事件名稱(chēng)。

• 簡(jiǎn)寫(xiě) @:

• 可以綁定methods函數(shù)，也支持內(nèi)聯(lián)js，但是僅限一個(gè)語(yǔ)句。

• 綁定methods函數(shù)和內(nèi)聯(lián)js都可以獲取原生dom元素，event.

• 綁定多個(gè)事件時(shí)，為順序執(zhí)行。

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文件夾下新建一個(gè)頁(yè)面，從餓了嗎找到自己喜歡的組件，比如走馬燈 Carousel.vue 把代碼復(fù)制到這個(gè)頁(yè)面

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

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

在模板里載入組件

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

這樣就可運(yùn)行了

前后端分離

習(xí)慣了用node做全棧開(kāi)發(fā),現(xiàn)在用vue-webpack做前端開(kāi)發(fā)，node做后端開(kāi)發(fā)也挺爽的，前后端實(shí)現(xiàn)了分離。

啟動(dòng)后端接口

cd back
cnpm install
npm run dev

啟動(dòng)前端服務(wù)器

cd front
cnpm install
npm start

進(jìn)入登錄頁(yè)面，點(diǎn)擊登錄，控制臺(tái)打印訪(fǎng)問(wèn)成功的信息,并成功跳轉(zhuǎn)到helloworld頁(yè)面

前后端通信

vue-resource

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

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

在config/index.js 配置 proxyTable代理服務(wù)器

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

使用

this.$http.get('api/apptest')
 .then((response) => {
  // 響應(yīng)成功回調(diào)
  console.log(response)
 }).catch(e => {
  // 打印一下錯(cuò)誤
  console.log(e)
 })
 }

缺點(diǎn)：在開(kāi)發(fā)環(huán)境下沒(méi)有問(wèn)題，但是在生產(chǎn)環(huán)境下請(qǐng)求后端接口不成功

axios

首先配置axios,在src下新建一個(gè)http.js

import axios from ‘a(chǎn)xios'
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: '<App/>',
 components: { App }
})

使用

get方法

login () {
 // 獲取已有賬號(hào)密碼
 this.axios.get('/apptest')
 .then((response) => {
 // 響應(yīng)成功回調(diào)
 console.log(response)
 // this.$router.go({name: 'main'})// 不管用
 this.$router.push({name: 'HelloWorld'})
 }).catch(e => {
 // 打印一下錯(cuò)誤
 console.log(e)
 })
}

post方法

register () {
 console.log(this)
 // 獲取已有賬號(hào)密碼
 let params = {
 user: this.userinfo.account,
 password: this.userinfo.password,
 directionId: this.userinfo.directionId
 }
 this.axios.post('/signup', params)
 .then((response) => {
 // 響應(yīng)成功回調(diào)
 console.log(response)
 }).catch(e => {
 // 打印一下錯(cuò)誤
 console.log(e)
 })
}

生產(chǎn)環(huán)境路徑問(wèn)題

在生產(chǎn)環(huán)境下發(fā)現(xiàn)打包以后路徑不對(duì)，修改config下的index.js

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

 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './', //原來(lái)是 assetsPublicPath: '/'

源碼位置：https://gitee.com/react-module/node-vue

以上是“node vue項(xiàng)目開(kāi)發(fā)之前后端分離的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：nodevue項(xiàng)目開(kāi)發(fā)之前后端分離的示例分析-創(chuàng)新互聯(lián)
當(dāng)前URL：http://aaarwkj.com/article6/gieog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)