很久没有更新了,今天趁着中午吃饭前先来说说最近忙的事情,简单说下流水账,得空时把项目放到博客里做个demo,做个纪念!
最近一直在忙这单页面这方面的事情,之前一直没有好的项目练手!现在终于让我抓到了练手的了!先是有个内部数据后台用了angularjs,后有一个VUE单页面活动应用!
首先这两个东东都是现成的,都是其他部门后端开发的!我只是负责修改一下用到我们自己的项目中!但是从这两个已经完成的项目中我学到了很多!首先在网上所有的资料没有一个完整项目!都是零碎的,而且只有在我们自己项目中遇到的问题才是最好的老师!
由于这两个已有的现成的东东基本都算是后端开发!所有这两个项目中有很多在网上学不到的思想!
首先,项目中的所有页面全是模块
其次,项目中完全没用后端语言,所有数据全是通过接口解决,而整个项目不过用了三四个接口来做,只是修改下请求的参数就可返回当前页面想要的数据
还有一些其他的思路思想在用后端的方式思考问题!看一个好的项目文件目录和代码,真是一种享受,完全不费劲,一个刚刚接触的人完全不用费多大力气就能直接上手修改和编辑!我觉得这可能就是一个优秀程序猿写出来的代码把!
对上边两个项目做了修改之后我就有个小的项目适合用单页面的方式编写,这几天我一直在搞的事情,废话不多说,先看看我项目的简单目录:
目录还有待优化,这个项目我使用了vuejs制作SPA,主要的有两个页面,一个首页,一个列表页;
我把首页分成了两个静态tpl,一个是抽奖tpl,一个是游戏列表的tpl!列表页之气只用了一个tpl,因为里边都是后端请求回来的数据,我只是用vue的过滤器做了一个简单的tap显示!
大家看到我列表中还有借个tpl的文件,剩下几个都是这两个页面需要共同需要的tpl,一个是公用的弹框,还有一个是加载!
而js文件夹中现在我只又一个js文件,那就是弹框的方法!后面还会加入一个类似公用数据请求接口的js!这两个js文件都会对外暴露一个或两个方法供页面使用!
下面是我list.vue的代码:
简单看下代码,其实这个页面很简单,就做了一个假数据,然后在页面中做了事件绑定和数据的筛选过滤器功能;
这里就先不献丑了,只是一个小的项目简单做了一下规划!后期弄完把项目弄上线上供大家挑毛病!
最后推荐大家在chrome中安装vue-devtools这个调试工具,然后npm install --save vue-devtools
,方便调试vue!还有如果我们做项目时后端还没有除接口,按照我们以往的方法我们只能做好html坐等,或者自己出几个json文件来调试!如果用vue或ag我们就可以自己在页面中写假数据,等接口出来直接更换key就可以了!
写的比较匆忙,大家勿怪,有不对的地方大家多多批评和指教!快国庆节了,祝大家节日快乐!吃饭去喽……