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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
Vue文件配置全局变量的实例
Sep 06 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Python3标准库总结
2019/02/19 Python
python——全排列数的生成方式
2020/02/26 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
签约仪式策划方案
2014/06/02 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
小石潭记导游词
2015/02/03 职场文书