代码拉取完成,页面将自动刷新
本指引实乃仓促之作在下才能有限,如果有任何问题可以PullRequests和提Issues。
原则:--追求简单易用、简洁。--因为是做一些通用的东西,为的就是方便开发者,封装的粒度之间需要做一个权衡,常出现的一种情况就是封装了太多的方法和库,使用者在使用的时候往往找不到文档,很影响开发效率。使用一些比较出名的第三方库是个不错的选择,知名度好,文档齐全,编码统一。
自从HTML5出来以后,前端就开始火了,再加上移动端近年来发展的趋势,愈来愈火。最开始是没有前端这个概念的,远古时期的“前端”其实是由后端人员完成的,因为那是的页面很简单并不复杂。现在不一样了,用户对前端页面的审美需求、页面的复杂性(比如电商页面)越来越高,所以前端就独立出来了~奉劝各位非特别需要不要再去研究和IE浏览器相关的技术了,毕竟把时间浪费在这些过时的技术上面还不如多去外面走走看看祖国的大好山河。
传统:页面由后端渲染,和后端的耦合性很强,甚至页面还嵌套有服务器端的代码。IE时代的特殊性,出现了跨浏览器统一的JQuery,JQuery很受欢迎,那时候世界上45%的网站都使用了它。所以那时候的方式就是HTML+css+jquery
Ajax:ajax个人理解为一句话就是:局部获取页面部分数据。传统由后端渲染的页面是同步的方式,不如点击下一页的时候整个页面都会刷新,数据是同步展现出来的。ajax出现后,就不用整个页面刷新了,传输的数据也就更少更快了,这样用户体验操作就好了。现在任然有很多网站使用后端渲染(同步)+ajax的方式(异步)开发网站。
SPA:(Single Page Application)单页面应用程序的出现,是目前最流行的方式,各种mvvm框架层出不穷,如Angular、React、Vue......以数据驱动的方式,面向接口的方式,比较真正意义上的和后端解耦了。
优势:
1.前后端职责、关注点分离,架构清晰,方便维护。
2.后端由于是面向接口的,可以多个端同时使用
3.最重要的是用户体验好
当然也有缺点,比如不利于SEO等,放心这些都有解决方案。
--伍冠源 2018-1-10
以下工具和框架要熟悉使用,详细使用教程麻烦自行百度(网上有很多资源)。抛弃传统的方式面向SPA单页应用ba(~ ̄▽ ̄)~
vue+vue-cli+vue-router+vuex 俗称vue全家桶系列~
项目地址:vue-admin(请先联系我获取权限)
使用Element搭建的一个后台框架。并没有进行过多的封装,目的是方便易于学习和使用。当然你也可以自由发挥,搭建自己喜欢的后台框架。
首先跟着vue官网把文档和官网的例子都写一遍
查看网上的教程,理解整个vue的体系从环境搭建到发布。
查看别人的例子
查漏补缺
一些项目由于历史遗留问题,任然还在使用JQuery等库开发项目,没办法咯~在这里奉献上一些我们在实际项目中常用的资源、插件。
PC端的网上太多了,找一个自喜欢的就好了,还是说你有什么好的推荐呢?
移动端优先使用flex>rem>百分比
rem布局使用:
(function(e,h){var g=document,d=window;var b=g.documentElement;var c;var i,a;function f(){var j=b.getBoundingClientRect().width;var k=window.devicePixelRatio||1;b.setAttribute("data-dpr",k);if(!h){h=750}if(j>h){j=h}var m=j*100/e;a="html{font-size:"+m+"px !important}";i=document.getElementById("rootsize")||document.createElement("style");if(!document.getElementById("rootsize")){document.getElementsByTagName("head")[0].appendChild(i);i.id="rootsize"}if(i.styleSheet){i.styleSheet.disabled||(i.styleSheet.cssText=a)}else{try{i.innerHTML=a}catch(l){i.innerText=a}}b.style.fontSize=m+"px"}f();d.addEventListener("resize",function(){clearTimeout(c);c=setTimeout(f,300)},false);d.addEventListener("pageshow",function(j){if(j.persisted){clearTimeout(c);c=setTimeout(f,300)}},false);if(g.readyState==="complete"){g.body.style.fontSize="16px"}else{g.addEventListener("DOMContentLoaded",function(j){g.body.style.fontSize="16px"},false)}})(750,768);//750为设计稿的宽度,768为设置页面的最大宽度
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。