前言
本文主要介紹了關于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的一些新的知識和想法。
指令
<div v-if="yes">yes</div> 當vm實例中的data.yes=true時，模板引擎會編 譯這個dom節點，輸出 <div>yes</div>值得注意的是：v-else要緊跟v-if否則不起作用。display:none,也就是保留了dom節點，但是v-if不會。v-for="b in 10"目前指的是1-10的迭代v-text <p v-text="msg"><p>相當于innerText,與{{msg}}相比，避免了閃現的問題。<div v-el="demo">this is a test </div> ,如果想獲取當前dom里的值,可以vm.$els.demo.innerText ,注意：html不區分大小寫，駝峰式的寫法會自動轉成小寫，可以通過-的方式轉換成大寫。vim.$refs訪問模板渲染
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]',{})
2.vm.item.length=0
4、v-for遍歷對象，可以使用（key,value）的形式自定義key變量。
<li v-for="(key,value)" in objectDemo> {{key}}---{{$key}}:{{vue}}</li>5、template標簽
用來作為模板渲染的跟節點，但是渲染出來不存在此節點
事件綁定與監聽
v-on可以綁定實例屬性methods中的方法作為事件的處理器，v-on:后面可以接受所有的原生事件名稱。
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><div id="app"> <Carousel></Carousel> <img src="./assets/logo.png"> <router-view/></div></template>
這樣就可運行了
前后端分離
習慣了用node做全棧開發,現在用vue-webpack做前端開發，node做后端開發也挺爽的，前后端實現了分離。
啟動后端接口
cd backcnpm installnpm run dev
啟動前端服務器
cd frontcnpm installnpm 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 = 5000axios.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 = axiosnew 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: '/'源碼位置：https://gitee.com/react-module/node-vue
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
