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


Posted in Javascript onDecember 13, 2017

前言

本文主要介绍了关于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:
    <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-HTML 类似于innerHTML,也可以避免闪现
  • 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元素及内部子元素,并可以通过设置别名的方式,获取数组内数据渲染到节点中。

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:后面可以接受所有的原生事件名称。

  • 简写 @:
  • 可以绑定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
 }
}

在模板里载入组件

<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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
js跑步算法的实现代码
Dec 04 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
Jquery promise实现一张一张加载图片
Nov 13 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
react基本安装与测试示例
Apr 27 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 #Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 #Javascript
Angular4编程之表单响应功能示例
Dec 13 #Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 #Javascript
vue登录路由验证的实现
Dec 13 #Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 #Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
javascript 数组排序函数
2009/08/20 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
最新大学生创业计划书写作攻略
2014/04/02 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
专家推荐信模板
2014/05/09 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
企业活动策划方案
2014/06/02 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
安全生产学习心得体会
2016/01/18 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang