前言
本文主要介绍了关于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的一些新的知识和想法。
指令
模板渲染
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:后面可以接受所有的原生事件名称。
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
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对呐喊教程的支持。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。