node-vue前後端分離記錄

譚悅發表於2019-02-16
Vue後端

node vue專案開發

看了近一週的vue開發，有諸多感觸，我之前接觸過react、angular所以特別想學學久仰大名的vue。學習半天以後發現，接觸到的東西多了，學習起來就是容易很多，vue的指令我能個聯想到angular的指令，vue元件化設計類似於react的元件化設計，包括一些router的設定跟react裡的路由或者nodejs裡的路由都差不多，vuex更是根據redux、flux改寫的，雖然我還搞不太明白怎麼用，至於vue的模板渲染，跟expres渲染ejs沒有太大的區別。使用vue可以完全脫離jq，雖然我還沒感受到不用jq有什麼神奇的趕腳，但是我覺得這種雙向資料繫結的還是挺方便的，此文件用來記錄我學習vue的一些新的知識和想法。

指令

  1. v-bind 主要用於動態繫結DOM元素屬性，即元素屬性實際的值是 有vm例項中的data屬性提供的。
  2. v-model 主要對錶單元素進行雙向資料繫結，在修改表單元素的值時，例項vm中對應的vm對應的屬性也同時更新。

  3. v-if,v-show,v-else這幾個指令來說明模板和資料間的邏輯關係

    • 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不會。
  4. v-for 用於列表渲染，可以迴圈遍歷陣列和物件,注意v-for="b in 10"目前指的是1-10的迭代
  5. v-on 事件繫結，簡寫@:
  6. v-text <p v-text="msg"><p>相當於innerText,與{{msg}}相比，避免了閃現的問題。
  7. v-HTML 類似於innerHTML,也可以避免閃現
  8. v-el 這個指令相當於給dom元素新增了個索引，例如<div v-el="demo">this is a test </div>,如果想獲取當前dom裡的值,可以vm.$els.demo.innerText,注意：html不區分大小寫，駝峰式的寫法會自動轉成小寫，可以通過-的方式轉換成大寫。
  9. v-ref 與v-el類似 通過vim.$refs訪問
  10. v-pre 跳過編譯這個元素
  11. v-cloak 感覺沒啥用
  12. 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在vue1.x內建$index變數，在vue.2x移除了此變數，直接使用{{index}},例如<li v-for="(item,index) in items">{{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}}:{{vue}}
</li>
    注意：在vue1.x內建`$key`變數，在vue.2x移除了此變數，直接使用`{{key}}`
  5. template標籤

用來作為模板渲染的跟節點，但是渲染出來不存在此節點

事件繫結與監聽

v-on可以繫結例項屬性methods中的方法作為事件的處理器，v-on:後面可以接受所有的原生事件名稱。

  • 簡寫 @:
  • 可以繫結methods函式，也支援內聯js，但是僅限一個語句。
  • 繫結methods函式和內聯js都可以獲取原生dom元素，event.
  • 繫結多個事件時，為順序執行。

ui元件 餓了嗎

使用指南

  1. 安裝

npm install cnpm install element-ui –save-dev

  1. 引入檔案main.js
import ElementUI from `element-ui`
import `element-ui/lib/theme-chalk/index.css`
Vue.use(ElementUI, { size: `small` })

  1. 使用

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

<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做後端開發也挺爽的，前後端實現了分離。

  1. 啟動後端介面

cd back
cnpm install
npm run dev

  1. 啟動前端伺服器

cd front
cnpm install
npm start

  1. 進入登入頁面，點選登入，控制檯列印訪問成功的資訊,併成功跳轉到helloworld頁面

前後端通訊

  1. 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)
       })
   }
    • 缺點：在開發環境下沒有問題，但是在生產環境下請求後端介面不成功

  2. 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…

遇到的問題

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

相關文章