前端开发

开发流程

好久不见. 提交于 2019-12-28 07:07:21
  一个完整的开发流程应该有这四步:分析->设计->编码->测试。很多开发团队往往只有编码这边,弱化了其他步骤,他们拿到需求就开始写代码, 写着写着发现有问题,要么是遇到一个难点解决不了,要么是发现要返回修改以前写过的代码, 要么是发现有大量的重复代码,又不知道怎么封装,只能将错就错。做好了分析和设计编码时就不会有这么多问题, 做好了测试产品bug就少,产品质量才高。 下面我分别详细讲解一下这四步。 分析   分析的时候,我们要分析需求和难点。   分析需求的方法是做需求陈述处理,前面我提到过, 要区分做什么和怎么做,把这两部分独立出来,做什么是固定不变的, 而怎么做可能会经常变。我们再熟悉一下举的那个例子:我们要做一个成员列表(如图1-44),产品经理告诉我们要按姓名拼音排序。 图1-44 成员列表的例子   我们有时候不能直接听产品经理的,如果真写死成按姓名拼音排序就没有可扩展性了,比如某一天产品经理又告诉你需要把VIP会员提前,那么你只能再去修改排序的程序。这个需求始终不变的是排序,按姓名拼音只是排序的一种方法,我们在设计数据库时应该把排序字段设置为数字而不是拼音,再写一个拼音转换为数字的算法即可,这样在后面排序规则变化,比如VIP会员要提前,只是修改对应用户数据库的排序字段数值即可,不用大改程序。   我们可以用xmind做需求分析,

系统架构:Web应用架构的新趋势---前端和后端分离的一点想法

…衆ロ難τιáo~ 提交于 2019-12-28 00:51:52
最近研究servlet,看书时候书里讲到了c/s架构到b/s架构的演变,讲servlet的书都很老了,现在的b/s架构已经不是几年前的b/s架构,其实b/s架构就是web应用开发,对于这样的架构我们现在应该考虑的是前端和后端的分离(注意:这里的后端是指服务端)。   Web前端现在是一个独立的技术工种,这个工种的产生主要是针对互联网行业的需求,我在以前的文章里曾经讲到过,一个大型互联网网站,例如想淘宝网,它绝对不是一个Web项目,而是一群web项目的集合,那么如果不在前端进行整合,这么多web项目前端开发一定存在大量重复劳动,并且运维时候也存在难以统一管理的问题。本文假想一个面对需要前端资源整合的组织,如何做到前后端分离的解决思路。本文详情如下: (一) 前后端分离的目的和作用   做Web开发也可以说是B/S架构开发,B端和S端从技术体系角度而言异构性很大,换而言之就是B端使用的技术和S端使用的技术不适于同一个体系,这样的结果导致实际开发中,很难做到专业分工,如果项目开发过程中管控不到位,这样的问题可能会影响到整个项目的开发质量,因此前后端分离的目的之一就是要做到专业化分工,提高项目的质量和开发效率。   随着技术的发展,当下的Web开发形势已经和以前有了很大的不同,早期的Web项目是一个封闭的项目,用户从浏览器里看到的页面直到后台数据库都是在一个项目里集成的

前端开发:JS基础入门02

为君一笑 提交于 2019-12-28 00:26:44
JS的快速入门 前端开发:JS的入门02 JS的快速入门 三元表达式 数据转换 显示转换: 隐式转换: 短路运算 分支结构 : 1. if 2. if else(用的最多) 3. if else-if else 4. swicth case 循环结构 : while 代码结构 : do-while结构 : for循环结构(最常用) : 三种循环结构的适用场景 : 三种循环的注意点 : 循环的解析思想 循环的嵌套 : 练习 三元表达式 ?: 表达式1 ? 代码1 : 代码1; 语法解析 : 表达式1成立 , 就执行代码1, 否则就执行代码2 如果代码1或者代码2有结果, 那么这个三元表达式的结果就是代码1或者代码2的结果 表达式1可以是哪些表达式 : 关系表达式 布尔类型的值 一般表达式都会有一个结果 要不就直接输出, 要不就是用一个变量保存 数据转换 显示转换,隐式转换 显示转换: 转换成String类型 其他数据类型转换成字符串(String类型):String(变量名或者数据) 可以转换undefined和null 变量名.toString() 不可以转换undefined和null 转换成数字类型: 数据+"" 在数据后面加一个空字符串就可以实现转换 转换成number类型 parseInt() 把其他数据类型转换成整数类型 偏向于转换字符串 特点 : (1) 从左到右解析

前端这条路,我们该何去何从,续集

不想你离开。 提交于 2019-12-27 21:43:06
距上篇 前端这条路,我们该何去何从 发布已有将近两个月时间,写那篇文章时我是很纠结的,因为一个月就要过去了,但我的工作却一直没有着落,想起刚来北京时,那段时间除了学习什么也不想,也没有烦恼只想一心的学,现在想想那时真好,有几个年龄比我大的朋友很是羡慕,因为他们总有很多烦心的事,而那时我是体会不到的,对于一个刚踏上社会的人来说,但也正是因为那时什么都不想只想学好前端,所有那时进步很快,但也走了不少弯路,这都是后话了。 本来不想把自己真实的事写出来,但想想也不是见不得人的事情,而那也是一个成长的过程,几年后说不定还是一个不错的纪念,本文不会按照特定的顺序来写,想到哪写哪,希望本文能给你带来帮助。 那是我离开上一个公司的半个月里,那段时间里每天早上一起来就看个大网站投的简历,一开始是在智联,51job,后来发现这些网站在一两个月前就彻底埋没了,因为投了将近2000多份,竟然只有几个打电话的,后来索性都在拉勾上投了,虽然成功率也不高,但真实性稍微还好点。 那段时间每天都是是在希望和绝望中度过,一个月对我来说太长,但好的是自己还懂得时间的珍贵,虽然没有面试,但也得学习啊,于是把JS的面向对象等东西重新研究了一下,也是在那一个月里面把面向对象拿下的。虽然精通说不上,但至少自己在实际开发中知道如何运用了。有一句话真的不可不信,“没有什么是拿不下的,只是看你愿意不愿意花时间”。

最近学到的一些前端知识

家住魔仙堡 提交于 2019-12-27 20:23:00
在Vue中使用v-for不仅可以遍历数组,还可以遍历对象,当然也可以遍历字符串。 还有在Vue中,不可以深度监听数组的变化,比如将数组arr某一项的值改变,在视图上不会发生变化,在网上找了很多方法,包括Vue.$set(原对象,位置,值),以及vue中的变异方法,像push,pop,shift,unshift,这些,最后发现都不生效,最后找到原因是我push的值不对,在数组中不能直接push数组,要进行扁平化处理,让其变成元素而不是一个数组,才行。 之后就是在页面中有一个数组,最后向后台传数据时需要传这个数组,这时候怎么办呢, 首先新建一个对象,对你要传的数组进行forEach遍历,然后将对象中的[key]设置为value,我的代码是这样的 let form_data = {}; list.forEach((obj)=>{ form_data[obj.key] = obj.val; }) 如果对象中有值要新增的值 也可以对form_data.对象名 = 对象值进行设置 还有在swiper中对其分页器进行设置时,建议使用自定义样式,这样自定义性更强适应性更强。 最后在布局时,要考虑多方面因素,这里的数据是死的还是活的,如果数据多了怎么办。还有就是在做响应式开发时,进行列表布局时,如果是偶数个宽可以定为数值,如果是奇数个最好还是使用百分比进行布局。 暂时想到这么多,以后有新的收获再补充

SpringMVC学习(一)——对于springMVC的整体认识

二次信任 提交于 2019-12-27 18:49:38
一、首先什么是SpringMVC? SpringMVC是一个基于MVC实现的web框架,用于替代传统的servlet。MVC全名是Model View Controller,是模型(model)——视图(view)——控制器(controller)的缩写。 二、同类的技术有哪些? SpringMVC同类的技术要数Struts2 三、对比同类的优缺点是哪些? 对比Struts2的优势很明显: 1、拦截机制的不同,Struts2是类级别的拦截,SpringMVC是方法级别的拦截 2、底层架构的不同,Struts2采用Filter(StrutsPrepareAndExecuteFilter)实现,SpringMVC则是采用Servlet(DispatcherServlet)实现。 3、配置方面不同,SpringMVC和Spring是无缝结合的,相对于Struts2省却了很多配置,提高了开发效率符合当前敏捷开发思路。 四、SpringMVC的组成部分? 1、前端控制器(DispatcherServlet)——框架已提供不需要开发 中央处理器,负责请求的转发,相当于一个请求转发器 2、处理器映射器(HandlerMapping)——框架已提供不需要开发 接收到前端控制器发送来的url后,对url进行匹配,返回给前端控制器一个处理器执行链(HandlerExecuteChain) 3

用大前端技术实现的一款仿Boss直聘app(已开源)

牧云@^-^@ 提交于 2019-12-27 18:41:45
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 鱼哥从去年8月我参加GDD(谷歌开发者大会)后,Flutter在一年中,版本迭代频繁,很多没有的功能都逐渐有了,很多从事移动端开发的,目前面临巨大冲击,因为大前端不是喊口号,而是确实能有巨大优势。之前的RN,大家已经慢慢淡化,Github上Flutter开源的项目越来越多。今天是分享heruijun关于他用Flutter撸的一个仿Boss直聘项目。下面是正文: 项目简介 在过去的这段时间里,踊跃出了很多关于flutter的技术文章和开源项目例子,基本上每天都有,同比RN刚出来时,热情度远超RN。于是,笔者怀着对新技术热情的学习态度重写了这个开源项目,并且后续也会不断完善。 为什么选仿BOSS直聘作为题材? 因为这款APP相信大家都在使用,里面组件繁多且有一定复杂度,能衍生出来许多基于flutter组件库的子项目,里面有些功能,比如地图,IM,后面都会使用flutter来实现。为了让项目更接近真实,这次连服务端也实现了。先把开源地址提供给大家: github地址: 服务端版本: https://github.com/heruijun/flutter-boss-server flutter版本: https://github.com/heruijun/flutter_boss 项目效果图: 相关技术点 服务端:

哪些人适合学web前端?想入门的你卡在了哪里?

心不动则不痛 提交于 2019-12-27 17:33:14
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一、前端是什么? 工作流程为从UI处得到原型图或者效果图,在项目(网站、微信公众号、小程序、WEBAPP)中还原图片效果,然后与后台进行各种数据交互。 目前的前端市场整体还是处于迅速发展期,市场对于前端的需求也一直比较大。 市场对于中高级的前端工程师需求更加迫切,所以就算入了前端的门,也需要不断的提升自己,无论你是学院派,还是培训派,还是自学派,都应该具有强烈的学习意识。 二、目前入门前端的人群分类 1、计算机相关专业出身 系统走过计算机的理论基础,比如计算机组成原理、操作系统原理、计算机网络、算法数据结构、设计模式,至少用过两门以上编程语言(强类型+弱类型)。 **优点:**理论、架构方面扎实,有整体计算机思维,内功不错,外功学起来比较快。 **缺点:**部分人对前端相关细节技术不扎实,不过花时间能很快搞定。 2、非计算机出身自学(也包括计算机专业没好好学的) 理论基础薄弱,后来因个人兴趣或者职业需求,自学前端开发技能。 **优点:**自学能力比较强,能够根据自己的兴趣规划学习内容。 **缺点:**部分人对前端没有整体的学习框架不成体系,部分人计算机没有整体思维,建议系统梳理下前端知识体系结构,该补的还是要补起来。 三、入门前端时的一些困境 1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。 2

我所理解的RESTful Web API

一笑奈何 提交于 2019-12-27 10:09:24
在前面几节中已经完成了service层和dao层,到目前为止只是后端的设计与编写,这节就要设计到前端的设计了。下面开始总结下这个秒杀业务前端有哪些要点: 1. 前端页面的流程 首先是列表页,点某个商品进入详情页,在这里会有个判断是否用户已登录的逻辑。如果已登录则进入详情页展示逻辑,如果用户未登录则让用户登录,将用户的信息写入cookie后再进入展示逻辑。对于详情页,它首先拿到系统的当前时间,将其与当前秒杀单的秒杀开始时间和秒杀结束时间作比较。若大于秒杀结束结束时间则显示秒杀已结束,若小于秒杀开始时间则显示秒杀未开始和倒计时。若在秒杀时间之内或者倒计时结束则显示商品秒杀地址,用户点击,执行秒杀,返回执行结果。 2. Restful接口设计  具体什么是Restful呢?他是一种url设计规范,一种资源状态和资源状态的转移,关于Restful知识的具体讲解可以看这篇博文: 我所理解的RESTful Web API  业务的秒杀API设计如下: Get/seckill/list 秒杀列表 Get/seckill/{id}/detail 详情页 Get/seckill/time/now 系统时间 Post/seckill/{id}/exposer 暴露秒杀 Post/seckill/{id}/execution 执行秒杀 其中:Get表示查询操作,Post表示添加/修改操作,

前端开发必备的Sublime 3插件

最后都变了- 提交于 2019-12-27 10:00:45
Sublime的大名已经无需我介绍了,首先先介绍如何启用插件安装功能: 打开Sublime 3,然后按 ctrl+` 或者在View → Show Console 在打开的窗口里黏贴这个网站上的代码(注意: Sublime 2和3所黏贴的代码不一样,注意选择): https://packagecontrol.io/installation import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error