前端开发,技术培训,动效研究,求职信息

今年主要做的都是移动端项目，仅有的三个PC端项目中，也都包含了移动端部分。

有两个项目做得苦，一个是项目不由自主，自己的事做完了，但是同伴没有时间推动，我做为主导人又不能辜负客户，这种情绪很折磨人。还有一个IRH项目，是一团乱麻，前后端沟通成本太高，虽努力推动，但始终无法着力，最终不得不放弃。放弃之后，如释重负。

也碰到了几个解决起来很吃力的技术问题，当然最终还是解决了。越过大山之后再回望，刚经历的也不过就是个小山包。真正的难题，是那些未知的迷雾，不声不响的让自己绕圈。

 

技术：

2017年所有移动端项目都使用了vue2.0，到下半年组件化程度更深。年底的最后一个项目中，甚至在非SPA架构中，直接使用了.vue的单文件组件。组件化的积累已经很多，明年肯定会过渡到webpack方式进行开发。

 

另外扫平了协作体系中一系列问题。比如mock测试、与后端的合作。这不光体现有技术上，很大程度也体现在与真正的后端人员、后端团队的协作与沟通。今年的IRH项目中，我思考不足，接下这种需要升级，需要兼容老接口的项目，又没有对后端提出明确的限制条件，结果导致前后端磨合出现大问题。开始的几天，光是跨域、列表格式、出错形式，都花了几个整工作日磨合。接下来，要去猜解他的技术文档，要一层层的去剥离页面逻辑。事实证明，这种类似行业ERP的项目，逻辑复杂，时间紧迫，因此最好是在一起工作，而不宜采用外包形式。

当然，IRH项目，催生了我对于组件化的认识，尽可能的组件化。感谢老白，提供了ajax过程中的promise思路。在我后几个项目中，利用axios主导的ajax体系，利用单例定义、拦截器、promise，对ajax请求进行了较完整的封装，彻底解决了请求方向的问题。在原型阶段引入easy mock，可以在后端未就位的情况下，模拟较复杂的接口情况，让前端提前进入角色。

 

 

 

API接口规范方面，在年终的金圣达项目中，仍由我来设计接口。这时我终于可以收拾起前两个项目的血汗经验，进行比较规范的接口定义，与后端的合作也比较友好。

 

对于很多人关心的VUE第三方UI框架这块儿。今年我还是以使用YDUI和element-ui为主，年后打算在电商项目中引入一个“有赞vant”组件库。VUE的生态已经足够丰富，该有的都有了。---在组件方面，我已经脱离了心理依赖。

 

学习方面，入手了两个VUE相关的慕课网课程，争取早日看完。

 

2018愿景：

VUE提升到webpack开发方式。

继续实战APP开发。可尝试小程序。

做1-2个自己的小产品。

总结下今天出现的问题，主要是在跨域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，不能使用*这样的配置。这样对于做预检的，有什么自定义头部字段，这里就要额外增加。

 

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）错误/正确是两种不同的结构，出错时的返回数据式统一为

 

 

6、正确时的“列表”返回结构：

{

   "total": 9,    //总条数

   "page":***,    //当前页码，第1页序号为1，不为0

   "pagesize":5,    //每页条数

   "items": [

      {  "pid": 82, "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、附返回码取值，仅供参考：