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 相关文章推荐
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
animate.css在vue项目中的使用教程
Aug 05 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
React中使用UMEditor的方法示例
Dec 27 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 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
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
python实现下载pop3邮件保存到本地
2018/06/19 Python
详解Python with/as使用说明
2018/12/13 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
如何进行Linux分区优化
2013/02/12 面试题
shell的种类有哪些
2015/04/15 面试题
实习生自荐信范文分享
2013/11/27 职场文书
劳资人员岗位职责
2013/12/19 职场文书
征婚广告词
2014/03/17 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
答辩状格式范本
2015/05/22 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书