Node Vue前后端分离项目搭建与通信实战教程

Node与Vue项目构建概述

前言

本文主要整理了关于Node.js与Vue进行前后端分离开发的实践经验，旨在为相关学习者提供参考与借鉴。接下来将结合具体案例，逐步深入探讨开发过程中的关键技术与解决方案。

Node与Vue项目构建

在深入接触Vue开发一周后，笔者对前端框架有了更深的体会。由于此前曾接触过React和Angular，发现Vue的学习曲线相对平缓。Vue的指令系统与Angular类似，其组件化设计理念与React相近，路由配置也与React或Node.js中的路由机制有异曲同工之妙。此外，Vuex的状态管理思路借鉴自Redux和Flux，尽管具体用法仍需摸索。至于模板渲染，Vue的表现形式与Express中使用EJS模板并无太大差异。值得注意的是，使用Vue可以完全摆脱对jQuery的依赖，虽然尚未完全体会到移除jQuery带来的所有优势，但双向数据绑定机制确实提升了开发效率。本文档旨在记录学习Vue过程中积累的新知识与思考。

Vue核心指令详解

指令详解

v-bind指令主要用于动态绑定DOM元素的属性，其实际值由Vue实例中data对象提供的数据决定。
v-model指令主要用于表单元素的双向数据绑定。当修改表单元素的值时，Vue实例中对应的属性也会同步更新，实现数据与视图的双向同步。
v-if、v-show、v-else指令用于说明模板与数据间的逻辑关系。 v-if与v-else根据数值判断是否输出该DOM元素及其子元素。示例： <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-text可以避免页面加载时出现原始Mustache语法闪现的问题。
v-html指令类似于innerHTML，同样可以解决Mustache语法闪现的问题，适用于需要渲染HTML字符串的场景。
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元素及其内部子元素。通过设置别名，可以获取数组内数据并渲染到节点中。

示例如下：


 <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标签

template标签常作为模板渲染的根节点使用，但在最终渲染结果中，该标签本身不会出现在DOM结构中。

事件绑定与监听

v-on指令可以绑定实例methods中的方法作为事件处理器，v-on后接受所有原生事件名称。

其简写形式为@。
该指令可以绑定methods中的函数，也支持内联JavaScript代码，但内联代码仅限单个语句。
无论是绑定methods函数还是内联JavaScript，均可获取原生DOM元素对象event。
当绑定多个事件时，事件处理函数按顺序执行。

Element UI组件库使用

UI组件库：Element 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文件夹下新建一个页面，从Element UI官方文档中选择喜欢的组件，例如走马灯组件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.js进行全栈开发，现在采用Vue结合Webpack进行前端开发，Node.js作为后端服务，这种前后端分离的模式同样高效且便捷。

启动后端接口


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中引入axios实例。


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

总结

以上就是本文的全部内容，希望这些内容对大家的学习或工作具有一定的参考借鉴价值。如有任何疑问，欢迎留言交流，感谢大家对本站的支持。

Node.js与Vue前后端分离开发实战指南

Node与Vue项目构建概述

Vue核心指令详解

模板渲染机制

事件绑定与监听

Element UI组件库使用

前后端分离架构实践

前后端通信方案对比

实用工具推荐