预览模式: 普通 | 列表

2017年总结--写于2018年初

经历:

今年主要做的都是移动端项目,仅有的三个PC端项目中,也都包含了移动端部分。
有两个项目做得苦,一个是项目不由自主,自己的事做完了,但是同伴没有时间推动,我做为主导人又不能辜负客户,这种情绪很折磨人。还有一个IRH项目,是一团乱麻,前后端沟通成本太高,虽努力推动,但始终无法着力,最终不得不放弃。放弃之后,如释重负。
也碰到了几个解决起来很吃力的技术问题,当然最终还是解决了。越过大山之后再回望,刚经历的也不过就是个小山包。真正的难题,是那些未知的迷雾,不声不响的让自己绕圈。
 
技术:
2017年所有移动端项目都使用了vue2.0,到下半年组件化程度更深。年底的最后一个项目中,甚至在非SPA架构中,直接使用了.vue的单文件组件。组件化的积累已经很多,明年肯定会过渡到webpack方式进行开发。
 
另外扫平了协作体系中一系列问题。比如mock测试、与后端的合作。这不光体现有技术上,很大程度也体现在与真正的后端人员、后端团队的协作与沟通。今年的IRH项目中,我思考不足,接下这种需要升级,需要兼容老接口的项目,又没有对后端提出明确的限制条件,结果导致前后端磨合出现大问题。开始的几天,光是跨域、列表格式、出错形式,都花了几个整工作日磨合。接下来,要去猜解他的技术文档,要一层层的去剥离页面逻辑。事实证明,这种类似行业ERP的项目,逻辑复杂,时间紧迫,因此最好是在一起工作,而不宜采用外包形式。
当然,IRH项目,催生了我对于组件化的认识,尽可能的组件化。感谢老白,提供了ajax过程中的promise思路。在我后几个项目中,利用axios主导的ajax体系,利用单例定义、拦截器、promise,对ajax请求进行了较完整的封装,彻底解决了请求方向的问题。在原型阶段引入easy mock,可以在后端未就位的情况下,模拟较复杂的接口情况,让前端提前进入角色。
 
另外一个项目,远在甘肃的嘉优购电商项目,则与之有不同的走向。这个项目,从原型开始,就由我在主导需求与接口。后端程序员按照我的要求在写接口。当然,此项目总体逻辑比IRH要简单。通过这个项目,我把一些知识点,提升到了实战程度。比如APIcloud打包、高德地图的各种应用、postman的测试技巧。apicloud将嘉优购商家端打包成APP这个过程中,让我接触到一个新的知识领域。实战中理解了从JS到APP,到底发生了哪些事情。对apicloud stodio工具和打包过程、原生API、驱动硬件,有了一定理解。也让自己成长为一个“产品开发者”,而不仅是一个前端程序员。毕竟,只有能够完全打通“需求-原型-设计-前端-后端-打包”的全过程,才算走完一个完整的产品历程。这一天,对我来说,来得太迟。在大分工的前提下,个人英雄出现的机率更低了。在后端这一块,我仍然是外行,只是通过前后端分离的模式,我可以对后端提出要求,也算是“打通了后端”。
 
对于地图应用这一块。从年初的云端湖项目的行车路线,到嘉优购项目的高德地图定位、云图、地图控件,把要用到的知识点,都经历了一下。
 
API接口规范方面,在年终的金圣达项目中,仍由我来设计接口。这时我终于可以收拾起前两个项目的血汗经验,进行比较规范的接口定义,与后端的合作也比较友好。
 
对于很多人关心的VUE第三方UI框架这块儿。今年我还是以使用YDUI和element-ui为主,年后打算在电商项目中引入一个“有赞vant”组件库。VUE的生态已经足够丰富,该有的都有了。---在组件方面,我已经脱离了心理依赖。
 
学习方面,入手了两个VUE相关的慕课网课程,争取早日看完。
 
2018愿景:
VUE提升到webpack开发方式。
继续实战APP开发。可尝试小程序。
做1-2个自己的小产品。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 594

跨域时遇到的一个顽症总结

在进行post跨域数据请求时(所有请求均header中带token),碰到一个奇怪的现象,postman测试可以通过,但是用页面进行调用时,总是报错。前后端忙活了大半天时间,最后找出问题。以下是程序员 “灰色头像”写的总结:

总结下今天出现的问题,主要是在跨域CORS的时候出现这个问题
 
首先需要知道一些容易忽略的知识点,浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
具体看
 
http://www.ruanyifeng.com/blog/2016/04/cors.html
 
还有一点需要注意,头部字段只支持
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
对于自定义的,比如我们头部传的token这个自定义头部会出现下面2种情况
 
1、axios对于跨域CORS正常会发送2次请求,第一次“预检”,我们这边有token自定义头部字段,虽然我们服务器设置了<add name="Access-Control-Allow-Headers" value="*" />但这个*虽然指所有,但只限制于上面所说的支持的,自定义的不会支持,所以就导致预检就失败,不会发送第二次请求
 
2、普通的ajax却可以支持,应该是没有做预检处理(这个还没详细了解)
 
所以主要还是服务器设置<add name="Access-Control-Allow-Headers" value="*" />要改为<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />,增加自定义的token,不能使用*这样的配置。这样对于做预检的,有什么自定义头部字段,这里就要额外增加。
 

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 627

常用前后端协作说明

1、对于要带权限访问的页面,首先调用全局接口/login获取返回的token和过期时间expire(单位:秒),token请自行保存客户端,过期时间expire默认30天过期,请提前比如10分钟进行过期,以免过期导致业务异常。
2、步骤1获取的token,每次请求调用鉴权页面时,都需要把token附带在头部Header中(由于token会存在特殊字符,不在url中传递)如:token:"步骤1获取的token串"
3、post格式前后端约定:前端请求头部参数格式需要设置Content-Type:application/json,后端post:$json_info = $HTTP_RAW_DATA
4、一般的查询request格式: /aaa?type=1&age=16  分页请求:/bbb?page=3
5、response总原则:1)body 直接就是数据,不要做多余的层次包装。2)错误/正确是两种不同的结构,出错时的返回数据式统一为
{
 "code":401,
 "msg":"相应的出错信息,方便前端提示"
}
 
code具体对应说明详见全局返回码说明。
 
6、正确时的“列表”返回结构:
{
   "total": 9,    //总条数
   "page":***,    //当前页码,第1页序号为1,不为0
   "pagesize":5,    //每页条数
   "items": [
      {  "pid": 82, "tit": "医学知识", "dDate": "2016-09-02 23:04:34"},
      {  "pid": 83, "tit": "医学知识", "dDate": "2016-09-02 23:04:34"},
        .............
    ]
}
7、“详情页”返回结构:
{
   "tit": "标题",
   "sub_tit":"副标题",
   "article":"正文正文正文正文正文正文",
        .............
    ]
}
8、时间格式:凡与时间(控件)相关的值,请使用以下三种之一,能保证控件直接兼容。
date--(yyyy-MM-dd)
time-(HH:mm)
datetime-(yyyy-MM-dd HH:mm)
 
------------------------------------
9、附返回码取值,仅供参考:
 
200 OK - [GET]:服务器成功返回用户请求的数据,该操作是幂等的(Idempotent)。
201 CreateD - [POST/PUT/PATCH]:用户新建或修改数据成功。
202 Accepted - []:表示一个请求已经进入后台排队(异步任务)
204 NO CONTENT - [Delete]:用户删除数据成功。
400 INVALID REQUEST - [POST/PUT/PATCH]:用户发出的请求有错误,服务器没有进行新建或修改数据的操作,该操作是幂等的。
401 Unauthorized - []:表示用户没有权限(令牌、用户名、密码错误)。
403 Forbidden - [] 表示用户得到授权(与401错误相对),但是访问是被禁止的。
404 NOT FOUND - []:用户发出的请求针对的是不存在的记录,服务器没有进行操作,该操作是幂等的。
406 Not Acceptable - [GET]:用户请求的格式不可得(比如用户请求JSON格式,但是只有XML格式)。
410 Gone -[GET]:用户请求的资源被永久删除,且不会再得到的。
422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时,发生一个验证错误。
500 INTERNAL SERVER ERROR - [*]:服务器发生错误,用户将无法判断发出的请求是否成功。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 600