其實是基於vue.js node.js建立的開源部落格系統有很多，以下這篇文章主要給大家介紹了關於node vue專案開發之前後端分離的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作有一定的參考學習價值，需要的朋友下面來一起看看吧。
前言
本文主要介紹了關於node vue前後端分離的相關資料，分享出來供大家參考學習，下面隨著小編來一起學習學習吧。
node vue專案開發
最近看了近一週的vue開發，有諸多感觸，我之前接觸過react、angular所以特別想學久仰大名的vue。學習半天以後發現，接觸到的東西多了，學習起來就是容易很多，vue的指令我能個聯想到angular的指令，vue組件化設計類似於react的組件化設計，包括一些router的設置跟react裡的路由或nodejs裡的路由都差不多，vuex更是根據redux、flux改寫的，雖然我還搞不太明白怎麼用，至於vue的模板渲染，跟expres渲染ejs沒有太大的差別。使用vue可以完全脫離jq，雖然我還沒感受到不用jq有什麼神奇的趕腳，但是我覺得這種雙向資料綁定的還是挺方便的，此文檔用來記錄我學習vue的一些新的知識和想法。
指令
#v-bind 主要用於動態綁定DOM元素屬性，也就是元素屬性實際的值是有vm實例中的data屬性提供的。
v-model 主要對表單元素進行雙向資料綁定，在修改表單元素的值時，實例vm中對應的vm對應的屬性也同時更新。
v-if,v-show,v-else這幾個指令來說明範本和資料間的邏輯關係
v-if和v-else的作用是根據數值來判斷是否輸出該dom元素，以及包含的子元素。
eg:<p v-if="yes">yes</p> 當vm實例中的data.yes=true時，範本引擎會編譯這個dom節點，輸出<p>yes</p>值得注意的是：v-else要緊接v-if否則不起作用。
v-show與v-if的效果差不多，都是透過判斷真假顯示內容，唯一不同的是，v-show不顯示的時候是display:none,也就是保留了dom節點，但是v-if不會。
v-for 用於列表渲染，可以循環遍歷數組和物件,注意v-for="b in 10"目前指的是1-10的迭代
v-on 事件綁定，簡寫@:
v-text <p v-text=" msg"><p>相當於innerText,與{{msg}}相比，避免了閃現的問題。
v-HTML 類似innerHTML,也可以避免閃現
v-el 這個指令相當於為dom元素增加了索引，例如<p v-el="demo">this is a test </p> ,如果想取得目前dom裡的值,可以vm.$els.demo.innerText ,注意：html不區分大小寫，駝峰式的寫法會自動轉成小寫，可以透過-的方式轉換成大寫。
v-ref 與v-el類似透過vim.$refs存取
v-pre 跳過編譯這個元素
v-cloak 感覺沒啥用
#v-once新增內建指令，用來標示元素或元件只渲染一次。
模板渲染
#1、v-for 主要用於列表渲染，講根據接受到的陣列重複渲染v-for綁定到的dom元素及內部子元素，並可透過設定別名的方式，取得陣列內資料渲染到節點中。
eg:
<ul v-for="item in items">
<li>{{item.title}}</li>
<li>{{item.description}}</li>
</ul>2、v-for內建$index變量，可以在調用v-for的時候調用，例如<li v- for="(index,item) in items">{{index}}-{{$index}}</li>
3、修改資料
##直接修改陣列可以改變資料不能直接改變陣列的情況 1.vm.items[0]={} , 這種情況下無法修改，解決： vm.item.$set(0,{})或vm.$set('item[0]',{})
vm.item.length=0
<li v-for="(key,value)" in objectDemo>
{{key}}---{{$key}}:{{vue}}
</li>事件綁定與監聽
v-on可以綁定實例屬性methods中的方法作為事件的處理器，v-on:後面可以接受所有的原生事件名稱。绑定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: '<App/>',
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: '/'上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是在node中vue專案如何實現前後端分離的詳細內容。更多資訊請關注PHP中文網其他相關文章！
