點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

node vue項目開發之前后端分離實戰記錄

來源：懂視網責編：小OO 時間：2020-11-27 22:23:49

node vue項目開發之前后端分離實戰記錄

前言；本文主要介紹了關于node vue前后端分離的相關資料，分享出來供大家參考學習，下面隨著小編來一起學習學習吧。node vue項目開發。最近看了近一周的vue開發，有諸多感觸，我之前接觸過react、angular所以特別想學學久仰大名的vue。學習半天以后發現，接觸到的東西多了，學習起來就是容易很多，vue的指令我能個聯想到angular的指令，vue組件化設計類似于react的組件化設計，包括一些router的設置跟react里的路由或者nodejs里的路由都差不多，vuex更是根據redux、flux改寫的，雖然我還搞不太明白怎么用，至于vue的模板渲染，跟expres渲染ejs沒有太大的區別指令；

推薦度：

點擊下載本文 文檔為doc格式

導讀前言；本文主要介紹了關于node vue前后端分離的相關資料，分享出來供大家參考學習，下面隨著小編來一起學習學習吧。node vue項目開發。最近看了近一周的vue開發，有諸多感觸，我之前接觸過react、angular所以特別想學學久仰大名的vue。學習半天以后發現，接觸到的東西多了，學習起來就是容易很多，vue的指令我能個聯想到angular的指令，vue組件化設計類似于react的組件化設計，包括一些router的設置跟react里的路由或者nodejs里的路由都差不多，vuex更是根據redux、flux改寫的，雖然我還搞不太明白怎么用，至于vue的模板渲染，跟expres渲染ejs沒有太大的區別指令；

前言

本文主要介紹了關于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:
<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新增內置指令，用于標明元素或組件只渲染一次。

模板渲染

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:后面可以接受所有的原生事件名稱。

簡寫 @:

可以綁定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' })

使用

在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 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-module/node-vue

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com