首頁  >  文章  >  web前端  >  在node中vue專案如何實現前後端分離

在node中vue專案如何實現前後端分離

亚连
亚连原創
2018-06-20 18:13:343195瀏覽

其實是基於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:
    77e9b00f286a023516e1ad2791758300yes94b3e26ee717c64999d7867364b1b4a3 當vm實例中的data.yes=true時,範本引擎會編譯這個dom節點,輸出e388a4556c0f65e1904146cc1a846beeyes94b3e26ee717c64999d7867364b1b4a3值得注意的是: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 33d45fd0196ddabea081ef00165f8fe0e388a4556c0f65e1904146cc1a846bee相當於innerText,與{{msg}}相比,避免了閃現的問題。

  • v-HTML 類似innerHTML,也可以避免閃現

  • v-el 這個指令相當於為dom元素增加了索引,例如38f1741f5c681e23dc256708b1faaacdthis is a test 94b3e26ee717c64999d7867364b1b4a3 ,如果想取得目前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的時候調用,例如dd94f3c87766c295ea77fe44bd21394b{{index}}-{{$index}}bed06894275b65c1ab86501b08a632eb

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 &#39;element-ui&#39;
import &#39;element-ui/lib/theme-chalk/index.css&#39;
Vue.use(ElementUI, { size: &#39;small&#39; })

使用

在components文件夹下新建一个页面,从饿了吗找到自己喜欢的组件,比如走马灯 Carousel.vue 把代码复制到这个页面

在需要的此组件的文件下,比如APP.vue里

import Carousel from &#39;./components/Carousel&#39;
export default {
 name: &#39;app&#39;,
 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 &#39;vue-resource&#39;
Vue.use(VueResource)

在config/index.js 配置 proxyTable代理服务器

proxyTable: {
 &#39;/api/**&#39;: {
 target: &#39;http://localhost:3000&#39;,
 pathRewrite: {
 &#39;^/api&#39;: &#39;/api&#39;
 }
 }
}

使用

this.$http.get(&#39;api/apptest&#39;)
 .then((response) => {
  // 响应成功回调
  console.log(response)
 }).catch(e => {
  // 打印一下错误
  console.log(e)
 })
 }

缺点:在开发环境下没有问题,但是在生产环境下请求后端接口不成功

axios

首先配置axios,在src下新建一个http.js

import axios from ‘axios&#39;
axios.defaults.timeout = 5000
axios.defaults.baseURL = &#39;http://localhost:3000&#39;
axios.defaults.headers.post[&#39;Content-Type&#39;] = &#39;application/x-www-form-urlencoded&#39;
export default axios

在main.js中引入

import axios from &#39;./http&#39;
Vue.prototype.axios = axios
new Vue({
 el: &#39;#app&#39;,
 router,
 axios,
 template: &#39;<App/>&#39;,
 components: { App }
})

使用

get方法

login () {
 // 获取已有账号密码
 this.axios.get(&#39;/apptest&#39;)
 .then((response) => {
 // 响应成功回调
 console.log(response)
 // this.$router.go({name: &#39;main&#39;})// 不管用
 this.$router.push({name: &#39;HelloWorld&#39;})
 }).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(&#39;/signup&#39;, params)
 .then((response) => {
 // 响应成功回调
 console.log(response)
 }).catch(e => {
 // 打印一下错误
 console.log(e)
 })
}

生产环境路径问题

在生产环境下发现打包以后路径不对,修改config下的index.js

build: {
 // Template for index.html
 index: path.resolve(__dirname, &#39;../dist/index.html&#39;),

 // Paths
 assetsRoot: path.resolve(__dirname, &#39;../dist&#39;),
 assetsSubDirectory: &#39;static&#39;,
 assetsPublicPath: &#39;./&#39;, //原来是 assetsPublicPath: &#39;/&#39;

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在JS中如何实现网页自动秒杀点击(详细教程)

在node中如何实现http小爬虫

在angular2中有关Http请求原理(详细教程)

使用VueAwesomeSwiper容易出现的问题?

使用Node.js爬虫如何实现网页请求

如何使用VUE2.X过滤器

以上是在node中vue專案如何實現前後端分離的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn