node vue项目开发之前后端分离实战记录

2023-09-19 11:57:05 159

前言

本文主要介绍了关于nodevue前后端分离的相关资料，分享出来供大家参考学习，下面随着小编来一起学习学习吧。

nodevue项目开发

最近看了近一周的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="bin10"目前指的是1-10的迭代

v-on事件绑定，简写@:

v-text

相当于innerText,与{{msg}}相比，避免了闪现的问题。

v-HTML类似于innerHTML,也可以避免闪现

v-el这个指令相当于给dom元素添加了个索引，例如thisisatest

,如果想获取当前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组件饿了吗

使用指南

安装

npminstallcnpminstallelement-ui--save-dev

引入文件main.js

importElementUIfrom'element-ui'
import'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI,{size:'small'})

使用

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

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

importCarouselfrom'./components/Carousel'
exportdefault{
name:'app',
components:{//components加s
Carousel:Carousel
}
}

在模板里载入组件

这样就可运行了

前后端分离

习惯了用node做全栈开发,现在用vue-webpack做前端开发，node做后端开发也挺爽的，前后端实现了分离。

启动后端接口

cdback
cnpminstall
npmrundev

启动前端服务器

cdfront
cnpminstall
npmstart

进入登录页面，点击登录，控制台打印访问成功的信息,并成功跳转到helloworld页面

前后端通信

vue-resource

安装vue-resource并在main.js中引用

importVueResourcefrom'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

importaxiosfrom‘axios'
axios.defaults.timeout=5000
axios.defaults.baseURL='http://localhost:3000'
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'
exportdefaultaxios

在main.js中引入

importaxiosfrom'./http'
Vue.prototype.axios=axios
newVue({
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)
//获取已有账号密码
letparams={
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:{
//Templateforindex.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 vue项目开发之前后端分离实战记录

热门推荐

随机推荐