node-vue先後端分離記錄

時間 2019-11-09

標籤 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的一些新的知識和想法。css

指令

v-bind 主要用於動態綁定DOM元素屬性，即元素屬性實際的值是有vm實例中的data屬性提供的。
v-model 主要對錶單元素進行雙向數據綁定，在修改表單元素的值時，實例vm中對應的vm對應的屬性也同時更新。
v-if,v-show,v-else這幾個指令來講明模板和數據間的邏輯關係html
- v-if和v-else的做用是根據數值來判斷是否輸出該dom元素，以及包含的子元素。
  eg:
  <div v-if="yes">yes</div> 當vm實例中的data.yes=true時，模板引擎會編譯這個dom節點，輸出 <div>yes</div>值得注意的是：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元素添加了個索引，例如<div v-el="demo">this is a test </div>,若是想獲取當前dom裏的值,能夠vm.$els.demo.innerText,注意：html不區分大小寫，駝峯式的寫法會自動轉成小寫，能夠經過-的方式轉換成大寫。
v-ref 與v-el相似經過vim.$refs訪問
v-pre 跳過編譯這個元素
v-cloak 感受沒啥用
v-once新增內置指令，用於標明元素或組件只渲染一次。

模板渲染

v-for 主要用於列表渲染，講根據接受到的數組重複渲染v-for綁定到的dom元素及內部子元素，並能夠經過設置別名的方式，獲取數組內數據渲染到節點中。
eg:前端
```
<ul v-for="item in items">
      <li>{{item.title}}</li>
      <li>{{item.description}}</li>
    </ul>
```
v-for在vue1.x內置$index變量，在vue.2x移除了此變量，直接使用{{index}},例如<li v-for="(item,index) in items">{{index}}</li>
修改數據vue
- 直接修改數組能夠改變數據
- 不能直接改變數組的狀況node
  - 1.vm.items[0]={},這種狀況下沒法修改，解決：vm.item.$set(0,{})或者vm.$set('item[0]',{})
  - 2.vm.item.length=0

v-for遍歷對象，可使用（key,value）的形式自定義key變量。react

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

注意：在vue1.x內置`$key`變量，在vue.2x移除了此變量，直接使用`{{key}}`

template標籤

用來做爲模板渲染的跟節點，可是渲染出來不存在此節點webpack

事件綁定與監聽

v-on能夠綁定實例屬性methods中的方法做爲事件的處理器，v-on:後面能夠接受全部的原生事件名稱。ios

簡寫 @:
能夠綁定methods函數，也支持內聯js，可是僅限一個語句。
綁定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' })

使用git

在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>

這樣就可運行了

自定義組件

例如我想在加一個導航組件名字叫作headerBar,我在components里加一個文件叫作headerBar.vue：web

<template>
  <h2>這是一個導航</h2>
</template>

使用：
在App.vue中須要先導入這個組件，再註冊這個組件，最後使用它

<template>
<div id="app">
  <headerBar></headerBar>
  //以標籤形式使用，注意：避免使用原生html的標籤
  <img src="./assets/logo.png">
  <router-view/>
</div>
</template>

<script>
import headerBar from './components/headerBar.vue'  //導入組件
export default {
  name: 'app',
  components: {
    headerBar: headerBar  //註冊組件
  }
}

先後端分離

習慣了用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: '/'

源碼位置 https://gitee.com/react-modul...

遇到的問題

vue.esm.js?dcc1:574 [Vue warn]: Do not use built-in or reserved HTML elements as component id: Header緣由：由於header在HTML5裏面是個原生的標籤，因此在開發的時候會提示錯誤。解決方法：修改components裏面左邊的header名稱