个人简介
朱鹏程,25岁,郑州轻工业学院毕业
4年web前端经验,PC端、移动端开发皆擅长。
目前在上海源产喜递电子商务有限公司,任前端开发一职。
手机:15836543105 邮箱:309579250@qq.com
GitHub: https://github.com/Cuixote
期望工作
期望城市杭州,上海、深圳、广州亦可
期望公司: 互联网知名公司,B轮以上
期望薪资: 17K-22k
自我描述
-
对前端模块化,组件化有深刻理解与实践
-
能独立完成独立完成从产品、设计到前端、后端的全栈项目
-
自己造轮子满足业务需求。如:
-
以下技术皆在工作与个人项目实践中深入使用:
- 库/框架方面,
jQuery ng1.x Vuejs1~2
- 代码管理:
requirejs seajs
- 构建工具:
fis grunt spm webpack
- 以及
es6 iconfont express
- 库/框架方面,
-
对JavaScript语言有深入研究(个人认为,这才是判定一个前端能力的关键)
工作经历
-
2016年至今,在黎明重工下属两个子公司郑州悉知股份有限公司和上海源产喜递电子商务有限公司工作
-
喜地电商平台,跨境电商项目
- 负责喜地app运营后台的开发和维护;
- 负责喜地招商管理后台的开发和维护;
- 负责喜地小程序的开发
-
2014年-2016年,河南鑫山科技公司
项目经验
知乎日报(个人项目)
项目介绍
这个是完全由我个人写的项目
前端部分基于Vuejs
[已升级到2.0],并使用了以下技术
-
VueX,管理全局数据
-
Vue-Router,管理路由
-
Vue-resource,Http/Https 请求
后端部分基于Expressjs
,开发完成后部署到了LeanCloud
当前项目包含以下模块:
-
首页: 获取知乎日报App的启动图片,如果获取失败,就获取bing每日背景图作为替换;
-
最新: 获取今日最新的日报新闻列表,头部为可左右滑动的swiper,数据为当前热文;
-
往期: 获取今天之前的新闻列表,以天为单位,默认是昨天的。
-
点击最下方 「瞅瞅前一天的」按钮获取往前一天的新闻。
-
顶部的搜索框支持不联网搜索当前页面的新闻标题。
-
-
我: 默认显示用户名输入框,提示用户输入,输入框使用了
debounce
。-
若用户输入的用户名已存在,则直接提示用户登录;
-
若用户名不存在,直接提示用户注册,注册成功则直接登录;
-
登录成功跳转到个人账户界面,会显示默认的用户名,头像,个人签名,以及退出登录按钮;
-
个人账户界面支持编辑信息,点击右上角的编辑/保存即可。
-
收藏和浏览记录,以及修改头像暂不支持,后续会推出。
-
-
文章详情: 获取文章的详情并展示。
-
顶部的返回按钮支持返回到列表页面;
-
顶部的赞按钮,目前只能浏览,不能点击;
-
顶部的评论按钮,点击后会出现评论列表的界面。点击顶部按钮「就你话多」和「就你懒」可切换长评论列表和短评论列表。由于接口的限制,评论列表最多20条数据。
-
开发中遇到的难点及解决方案
-
资源跨域
问题: 因为最终网站是部署在
github.io
的域名下的,而知乎的数据在zhihu.com
域名下,直接请求就是跨域。文章里所有的图片都在pic4.zhimg.com
域名下,并且知乎设置了只有在zhihu.com
才可以请求图片,其他域名下直接就是跨域。解:
数据方面:前端请求服务器的时候,把源数据地址放在url里,例:
https://cuixote.leanapp.cn/daily-data?originUrl=5523929%2Fswen%2F4%2Fipa%2Fmoc.uhihz.ta-swen%2F%2F%3Aptth
服务器收到请求后,拿到源地址,并在服务器端请求,获取到数据后返回给前端。
图片方面:前端从返回的数据中检出请求图片的数据,
https://cuixote.leanapp.cn/daily-img?originUrl=gpj.b1a3b1fd23e9fe950210f3feec5d385c%2Fmoc.gmihz.4cip%2F%2F%3Aptth
服务器接收到请求后,拿到图片源地址,在服务端请求并将返回的图片存到缓存文件里,然后将缓存文件存储的
LeanCloud
的数据库中,拿到返回的新的图片链接地址,返回给前端。PS: 由于使用的免费服务器,且多了一步异步操作,前端显示图片的过程会很慢。
-
支持多环境开发
需要自动支持在公司,家中电脑,线上访问三个域名。加入了用户模块之后也要同时支持用户的cookie在三端可用。代码如下
app.all('*', (req, res, next) => { let allowedOrigins = ['http://127.0.0.1:8080', 'https://cuixote.github.io','http://172.16.14.70:8080']; let origin = req.headers.origin; (allowedOrigins.indexOf(origin) > -1) && res.header("Access-Control-Allow-Origin", origin); //set cookie cors res.header("Access-Control-Allow-Credentials", "true"); next(); })
-
前端显示
由于问题1中的问题,所以前端图片在 VM 层要经历一次从源地址切换到转化后地址的过程。
解决方法就是默认先显示一张全站通用的默认图片,然后带地址成功返回后,再进行一一替换。
喜地小程序
项目介绍
小程序其实就是运行在微信上的mini App,主要特点就是简约而不简单。
简约是遵循微信的设计原则,减少多余流程和简化交互流程;
而不简单,是指其内部业务逻辑依然复杂,每一环都不可或缺。
简而言之,就是用更少的代码,重新实现了一个App,在微信store上。
可在小程序里搜索喜地购物添加
项目开发
根据小程序的特点和应用环境:
-
开发模式上,采用前后端的开发模式,由后端提供所需API,前端负责整个View层;
-
接口规范遵循以往项目(App,移动站)制定的规范,细节处可微调;
-
前端在布局方面,统一采用Flex布局,使用微信提供的
rpx
作为单位; -
前端底层方面,分离出公用组件以及公用方法,便于各个模块使用
项目职责
-
参与小程序从开发、设计到API规范梳理、前端开发的每个流程;
-
主导和把控整个前端工作的正常进行;
-
开发前端公用组件以及公用方法,如登录,支付,请求/存取数据等;
-
负责开发购物车、购买流程等业务逻辑和交互场景最为复杂的模块;
-
指导相关同事前后端分离的开发模式, 以及数据双向绑定的相关技术
项目总结
-
虽然小程序环境尚不成熟,坑比较多。但是,小程序说到底还是微信基于浏览器定制了一套JavaScript框架,其实还是JavaScript的问题。
-
由于我有前后端分离以及
Vue.js
这种MVVM框架的项目经验,带领团队做起来在开发流程上还是相当顺利的。 -
另外,Flex布局以及
rpx
单位,是一套不错的移动端多屏幕适配方案。
有料阅读
项目介绍
抓取微信公众号发布的文章,建造一个阅读平台。
纯移动端项目,主要使用场景是微信。主要负责前端部分。
整体功能及交互,高仿了今日头条App
线上版本此版本未上线左右滑动切换分类功能
技术亮点
-
文章列表页支持下拉刷新当前列表,上滑加载新的内容。并且保存列表页的阅读进度;
-
支持左右滑动切换文章分类,顶部文章分类可滑动选取;
-
收藏文章支持右滑删除;
-
微信公众号的视频及音频都有专门的控件,移植到其他地方不可用,于是便进行了重新开发,还原了这些控件。
-
文章支持收藏,评论,点赞。
技术难度
-
顶部分类与列表的联动。
-
列表的下拉刷新,上滑加载,左右滑动切换分类。
实现代码在这里
3D编辑器
基于Three.js
构建3D在线家装平台。
主要负责界面交互的设计和实现,使用Angular.js
进行了项目开发。
工作内容
-
设计并开发了漫游模式;
-
设计并开发了交互界面;
-
开发了装修清单生成的功能。
网友评论