其实基于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:
yes
当vm实例中的data.yes=true时，模板引擎会编 译这个dom节点，输出
yes
值得注意的是：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
相当于innerText,与{{msg}}相比，避免了闪现的问题。
v-HTML 类似于innerHTML,也可以避免闪现
v-el 这个指令相当于给dom元素添加了个索引，例如
this is a test
,如果想获取当前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:
登录后复制 {{item.title}} {{item.description}}
2、v-for内置$index变量，可以在调用v-for的时候调用，例如
{{index}}-{{$index}}
3、修改数据
直接修改数组可以改变数据
不能直接改变数组的情况
1.vm.items[0]={} , 这种情况下无法修改，解决：vm.item.$set(0,{})或者vm.$set(‘item[0]’,{})
2.vm.item.length=0
4、v-for遍历对象，可以使用（key,value）的形式自定义key变量。
登录后复制 {{key}}—{{$key}}:{{vue}}
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 }}
登录后复制
在模板里载入组件
@@##@@
登录后复制
这样就可运行了
前后端分离
习惯了用node做全栈开发,现在用vue-webpack做前端开发，node做后端开发也挺爽的，前后端实现了分离。
启动后端接口
cd backcnpm installnpm run dev
登录后复制
启动前端服务器
cd frontcnpm installnpm 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 = 5000axios.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 = axiosnew Vue({ el: '#app', router, axios, template: '', 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: '/'
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在JS中如何实现网页自动秒杀点击（详细教程）
在JS中如何实现网页自动秒杀点击（详细教程）
在JS中如何实现网页自动秒杀点击（详细教程）
在JS中如何实现网页自动秒杀点击（详细教程）
在JS中如何实现网页自动秒杀点击（详细教程）
在JS中如何实现网页自动秒杀点击（详细教程）
以上就是在node中vue项目如何实现前后端分离的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2636506.html
