VUE项目实战
来源:互联网 发布:linux文件复制粘贴命令 编辑:程序博客网 时间:2024/05/20 06:07
Vue实战—–用户登录及注册
1.用户登录
用户登录页面主要是获取当前页面用户输入的帐号跟密码,验证是否为空并通过VUE axios(http请求插件)
,vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。
配置文件选项,这里的config是对一些基本信息的配置,比如请求头,baseURL,请求方式等等,当然这里提供了一些比较方便配置项:
//configimport Qs from 'qs'{ //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url url: '/user', // 请求方法同上 method: 'get', // default // 基础url前缀 baseURL: 'https://some-domain.com/api/', transformRequest: [function (data) { // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装) data = Qs.stringify({}); return data; }], transformResponse: [function (data) { // 这里提前处理返回的数据 return data; }], // 请求头信息 headers: {'X-Requested-With': 'XMLHttpRequest'}, //parameter参数 params: { ID: 12345 }, //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错 data: { firstName: 'Fred' }, //设置超时时间 timeout: 1000, //返回数据类型 responseType: 'json', // default}
当你配置完congig文件,我们就可以减少很多额外的处理代码也更优美,直接使用
axios.post(url,{},config) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); }) //axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。 //下面是关于同时发起多个请求时的处理 axios.all([get1(), get2()]) .then(axios.spread(function (res1, res2) { // 只有两个请求都完成才会成功,否则会被catch捕获 }));
使用VUE的过渡效果,大家知道vue诞生的初衷就是为了做动画效果。我们使用自定义name
为modal
,实现弹框消失和出现时的缩放效果;
.modal-container { width: 520px; margin: 0 auto; background-color: #fff; border-radius: 0px; box-shadow: 0 2px 8px rgba(55, 55, 55, .6); transition: all .3s ease;//设置最外层盒子的transition } .modal-enter { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); }
2.用户注册
用户注册流程仿照 花瓣网 注册流程,分为多个小的页面,通过VUEv-if
控制每个页面的动态加载,不得不提的是在滑块插件运用的过程中出现找不到元素的问题,主要是插件脚本和vue初始化加载顺序的问题,VUE实例还未渲染到页面,插件脚本就已经执行,当然会找不到元素,所以我一开是运用的是VUW声明周期钩子mouted
,在页面实例加载完成后,加载插件脚本,VUE API中的原话是el 被新创建的 vm.moutrd
钩子每次页面刷新只能加载一次,所以后来我换成了watch
动态监听事件,这样每次参数改变都会触发事件,调用验证滑块插件;
详细代码请查看 git,戳这里
阅读全文
0 0
- vue+webpack项目实战
- vue项目实战语法
- VUE项目实战
- Vue SPA + Nodejs项目实战
- vue +webpack项目实战(转载)
- 从零开始的vue.js实战项目
- Vue 2.0 真实点餐项目实战
- vue项目开发实战(三)——vue-router
- 浅谈Vue项目实战(项目结构了解)
- vue项目开发实战(一)——vue项目起航
- vue项目开发实战(二)——vue项目打包
- Vue项目实战(二)- 引入JQuery等第三方库
- Vue项目实战(三)- 组件的注册和使用
- Vue项目实战(四)- 组件之间的通信
- Apicoud+vue开发高性能商城APP项目实战教程
- 浅谈Vue项目实战(页面渲染+事件绑定)
- vue.js2.0实战:搭建开发环境及构建项目
- Vue项目
- JME sdk中的中文乱码(全是方框)的解决办法
- 第三章:函数
- 我的做题日志(1),来源:COCI2017,SDOJ
- 【LeetCode】53.Maximum Subarray解题报告
- unicode,ansi,utf-8,unicode big endian编码区别 --篇1
- VUE项目实战
- MySQL查看视图
- [kuangbin带你飞]专题二 搜索进阶 A(康拓展开+bfs)
- QQ小红点终极版 DragPointView
- STM32串口接收中断溢出问题解决
- MySql安装配置
- c++STL内存池和空间配置器
- 哇。。原来这个就是博客啊。。。
- 1、volley 官方教程-简介、配置