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 相关文章推荐
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 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 日,周,月点击排行统计
2012/01/11 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
express.js中间件说明详解
2019/03/19 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
js中Function引用类型常见有用的方法和属性详解
2019/12/11 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
python实现文件的备份流程详解
2019/06/18 Python
python中自带的三个装饰器的实现
2019/11/08 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
Python Django路径配置实现过程解析
2020/11/05 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
学校对教师的评语
2014/04/28 职场文书
在校证明模板
2015/06/17 职场文书