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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
django允许外部访问的实例讲解
2018/05/14 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
python操作cfg配置文件方式
2019/12/22 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
什么是Smart Navigation?
2016/07/03 面试题
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
公司新年寄语
2014/04/04 职场文书
学历公证委托书
2014/04/09 职场文书
环保倡议书怎么写
2014/05/16 职场文书
幼师小班个人总结
2015/02/12 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
Python竟然能剪辑视频
2021/05/25 Python
浅析Python实现DFA算法
2021/06/26 Python
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis