基于vue2.0打造移动商城页面实践
2017-08-24 12:36
197 查看
前言
从angular到react再到后来的vue~火热的框架可谓一个接一个,着实让小的有点力不从心,大神们为了更好的组织编写代码,费尽心机捣鼓了各种各样的框架。由于小的没有怎么接触react,暂且不做过多描述,且说说angular和vue吧。
接触angular大约是在两年前,那会还是angular1。这也是小的使用的第一个框架,让我印象最深刻的是它让我完全改变了基于jquery开发时的编码方式,从dom的操作,拼接转变为数据驱动。从此不用再去纠结页面的呈现应该如何切换,如何追加列表,信息录入的时候不用再遍历选中输入框再去获取其中的输入值,还有强大的自定义指令能够方便的将需要复用的功能抽取。但也不得不说,这个版本的angular确实蛮重的,所幸那会编写的都是pc端的页面,还hold的住,现在再瞅瞅好像都出到4了,再次感叹这迭代速度,不过好来小的因为工作的原因,很少再接触这个框架了。
后来工作主要涉及移动端的开发,遇到个比较棘手的问题是项目都是基于前后端混合的方式开发的,在分工明确的情况下,往往一份代码就需要两个小伙伴的配合,确实有点小揪心,于是一直谋划着做个前后端分离的工作。
因为是前后端分离,页面数据不再是通过后端语言的变量分配的方式来呈现,那么数据的显示就是一个大问题,所以面临两个选择,要不选一个mvvm的框架做数据渲染,要不自己捣鼓一个,后者一直是小的梦想(嗯~梦想还是要有的),在框架的选择上,第一个想到的还是angualr,但是觉得将angular用在移动端页面上有点杀鸡用牛刀,最后选中了轻量高效的vue(这里再次点赞vue cli,对我的编码工作带来了很大的便利)。
注:此项目页面基于sanse商城,只是笔者做前后端分离的实践实验,如需下单请到sanse app或是微信公众号
项目地址
https://github.com/x-shadow-x/sanse_wap_v2
技术栈
vue2 + vue-rotuer2 + vuex + webpack + ES6 + axios + flex
挖坑集锦
跨域
项目中几乎所有的数据请求都是基于ajax,数据通过测试接口返回,而开发环境下是基于node服务器打开的网页,于是就不可避免面临跨域的问题,所幸强大的vue cli考虑到了这点,只需稍做配置,便可将请求代理到指定的域名下,操作如下:
基于vue cli构建的项目,都可在根目录下找到config文件夹,我们修改其中的index.js文件,在dev属性中添加如下代码:
其中 ‘/api’ 为匹配项,target 为被请求的地址
此时只需将请求数据的baseURL设置为/api,便可正确请求到target选项中指明的请求地址下的数据,比如:
当然,这只是开发环境为了方便编码,如果项目部署到测试环境或是正式上线,跨域还需另外处理,具体看项目对应的后端,主要就是添加几个允许跨域的头。
build出来的项目刷新报404错误
因为一开始做路由的时候使用的是history模式,开发环境的时候使用node做服务器,并未遇到这个问题,但是当将项目build出来放置到测试服务器上运行的时候,因为服务器使用的是iis,并不支持history的模式,页面在刷新的时候因为其url都是脚本模拟的,故找不到对应的资源而报404,无奈之下只能讲路由形式改回hash。
这里注意如果涉及到微信支付,在微信后台配置域名的时候要注意配置到#之后
项目截图
首页
品牌列表
商品列表
商品详情
购物袋
订单页
个人中心
结尾
本项目主要基于vue2 构建前后端分离项目的实验,因为是用业余时间捣鼓的项目,周期有点长,目前也有段时间木有更新了,后续会找机会将首页改版为自定义广告布局页面。
从angular到react再到后来的vue~火热的框架可谓一个接一个,着实让小的有点力不从心,大神们为了更好的组织编写代码,费尽心机捣鼓了各种各样的框架。由于小的没有怎么接触react,暂且不做过多描述,且说说angular和vue吧。
接触angular大约是在两年前,那会还是angular1。这也是小的使用的第一个框架,让我印象最深刻的是它让我完全改变了基于jquery开发时的编码方式,从dom的操作,拼接转变为数据驱动。从此不用再去纠结页面的呈现应该如何切换,如何追加列表,信息录入的时候不用再遍历选中输入框再去获取其中的输入值,还有强大的自定义指令能够方便的将需要复用的功能抽取。但也不得不说,这个版本的angular确实蛮重的,所幸那会编写的都是pc端的页面,还hold的住,现在再瞅瞅好像都出到4了,再次感叹这迭代速度,不过好来小的因为工作的原因,很少再接触这个框架了。
后来工作主要涉及移动端的开发,遇到个比较棘手的问题是项目都是基于前后端混合的方式开发的,在分工明确的情况下,往往一份代码就需要两个小伙伴的配合,确实有点小揪心,于是一直谋划着做个前后端分离的工作。
因为是前后端分离,页面数据不再是通过后端语言的变量分配的方式来呈现,那么数据的显示就是一个大问题,所以面临两个选择,要不选一个mvvm的框架做数据渲染,要不自己捣鼓一个,后者一直是小的梦想(嗯~梦想还是要有的),在框架的选择上,第一个想到的还是angualr,但是觉得将angular用在移动端页面上有点杀鸡用牛刀,最后选中了轻量高效的vue(这里再次点赞vue cli,对我的编码工作带来了很大的便利)。
注:此项目页面基于sanse商城,只是笔者做前后端分离的实践实验,如需下单请到sanse app或是微信公众号
项目地址
https://github.com/x-shadow-x/sanse_wap_v2
技术栈
vue2 + vue-rotuer2 + vuex + webpack + ES6 + axios + flex
挖坑集锦
跨域
项目中几乎所有的数据请求都是基于ajax,数据通过测试接口返回,而开发环境下是基于node服务器打开的网页,于是就不可避免面临跨域的问题,所幸强大的vue cli考虑到了这点,只需稍做配置,便可将请求代理到指定的域名下,操作如下:
基于vue cli构建的项目,都可在根目录下找到config文件夹,我们修改其中的index.js文件,在dev属性中添加如下代码:
其中 ‘/api’ 为匹配项,target 为被请求的地址
此时只需将请求数据的baseURL设置为/api,便可正确请求到target选项中指明的请求地址下的数据,比如:
当然,这只是开发环境为了方便编码,如果项目部署到测试环境或是正式上线,跨域还需另外处理,具体看项目对应的后端,主要就是添加几个允许跨域的头。
build出来的项目刷新报404错误
因为一开始做路由的时候使用的是history模式,开发环境的时候使用node做服务器,并未遇到这个问题,但是当将项目build出来放置到测试服务器上运行的时候,因为服务器使用的是iis,并不支持history的模式,页面在刷新的时候因为其url都是脚本模拟的,故找不到对应的资源而报404,无奈之下只能讲路由形式改回hash。
这里注意如果涉及到微信支付,在微信后台配置域名的时候要注意配置到#之后
项目截图
首页
品牌列表
商品列表
商品详情
购物袋
订单页
个人中心
结尾
本项目主要基于vue2 构建前后端分离项目的实验,因为是用业余时间捣鼓的项目,周期有点长,目前也有段时间木有更新了,后续会找机会将首页改版为自定义广告布局页面。
相关文章推荐
- 基于vue2.0打造移动商城页面实践
- 基于socket.io打造hybrid调试页面
- Linux+postfix+extmail+dovecot打造基于web页面的邮件系统
- 一步步打造基于ASP.NET的CMS内容管理系统--Step3 添加新闻页面
- 老肖实录分享 | 基于 Mesos 打造高可用微服务系统实践
- 一、东软实践项目2-基于android平台的应用开发:实现页面之间的跳转
- 基于jquery打造的一款全页面图片分享特效
- 【实践】基于Ceph打造高性能高可靠的分布式块存储系统
- Linux+postfix+extmail+dovecot打造基于web页面的邮件系统
- Hybrid移动应用在多页面大数据复杂业务背景下的优化实践方案
- 基于webpack2.x的vue2.x的多页面站点
- 车纷享:基于阿里云HBase构建车联网平台实践
- 基于thinkphp框架开发的项目在lnmp环境下,出现除了主页能显示,访问其他页面都抛出404异常
- 基于Hadoop生态圈的数据仓库实践 —— 进阶技术(十)
- JavaScript网站设计实践(六)编写live.html页面 改进表格显示
- 聊聊基于Lucene的搜索引擎核心技术实践
- 实践《基于 Apache Mahout 构建社会化推荐引擎》--2
- 基于jquery实现页面滚动到底自动加载数据的功能
- REST风格API开发实践:基于IDEA+MAVEN+Jersey
- 设计模式实践-反射到所有接口实现类实践工厂方法,页面中有大量计算数据时设计实践