接触前端将近一年了... 从最开始的html ,css,js,框架,插件..一点点的摸索..磕磕盼盼到现在
2018年下半年开始开始接手项目 到年前完成五个小项目 加一些零散的页面，因为公司接的都是学校的项目还需要兼容ie 经常会被一些兼容弄的头疼.. 统计一下遇到的难点（hh..总感觉遇到的第一次使用的都难）
1.第一个项目是一个后台管理 (pc-兼容ie10)
项目描述：
登录页面 --- 使用了验证码插件（组长说以后所有登录都需要有验证码 一开始我用的是算法验证码 后来出来的题目都太难了0.0 真的很尴尬 动不动出来一个66*99之类的 我都在控制台算一波 然后再填进去 后台应了要求统一换成数字单词对应的验证码）
后台系统一般都是单页面 可是并不会脚手架开发 我们都是js逻辑用vue写 这样方便很多 如果用js开发的话绑定数据之类的很麻烦
复制了比较官方的使用vue的好处：
当前端和数据做一些操作的时候，可以通过AJAX请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景，刷新页面太昂贵，会重新加载很多资源，虽然有些会被缓存，但是页面的DOM,JS,CSS都会被页面重新解析一遍，因此移动端页面通常会做出SPA单页应用。
但是如果兼容ie低版本一般都写原生代码 ..毕竟js原生是基础还是要好好学习一下的..后面马上要有一个项目开发需要兼容ie低版本 需要用原生写
页面登录进来左边是个侧边栏 根据左边侧边栏的选项控制右边显示内容 默认显示的是第一项 由于侧边栏的内容是固定的数据 所以自己造假数据josn 如果是一级菜单可以直接循环然后点击时显示对应内容就可以了 由于还有二级栏目 我觉得这里其实挺复杂的 每次点击的时候还需要判断当前列表是否是展开还是关闭之类的 挺绕我的..
右边使用的是iframe 也是第一次接触这个东西 就是页面里面再镶嵌一个页面的效果
其他功能最基础的增删改查 有一个多选框的选中和全选样式很讨厌 就是需要你把他最基础的input样式给隐藏起来然后用图片或者你写的样式移花接木的感觉 。 上传图片、文件功能 file (这个不支持ie9) 修改密码
我记得当时写完后组长要求加一个功能就是如果账号再另一个电脑登录这个账号 就需要显示一个弹框 异地登录..当时还没太听懂 后来才理解
2.第二个项目是一个学生选课和老师发布课程科目管理 (pc-兼容ie10)
项目描述：
登录页面 --- 学生 和 教师 根据身份跳入不同的后台页面
老师的后台 基础的增删改查 导出报名的名单 修改名单(也就是删) 这个项目大致和上一项目都相似因为都是后台布局 左边侧边栏 右边内容 忘记提了 我用的是layer的弹框提示.用框架改成自己想要的样式也是个头疼事 需要打开控制台慢慢调试 不过我挺喜欢写样式的 哈哈哈 毕竟逻辑对我来说还是更头疼的
这里当时和策划和后台核对了很久 因为逻辑这一块像策划说的那样根本走不通所以需要不停地沟通，难点主要是课目管理和发布课程这两块内容 (很难受 因为太久了 大概都记不清了) 先设置课目管理一级菜单是班级 203班 二级菜单可以添加他们班有的课程项目 语文数学之类的 然后再发布课程 设置班级然后人数 发布出去以后学生可以报名 这里有个bug就是如果我已经发布出去课程 学生也报名了 这个时候我删除或者修改了发布的课程的名字 报名的学生都没有了 还有修改了课目里名字 发布课程就又有变动 因为都是联动的 还有挺多业务问题的 后来商量的解决办法就是我修改名字或者删除的时候先判断下面有没学生报名或者有有没有二级菜单，如果有内容告诉他不可以修改或删除 因为下面有内容
学生的比较简单就是可以点击报名 查看当前报名人员 一些简单的增删改查
3.第三个项目一个学校的野外实习植物分类和介绍 (pc/app- 兼容ie8)
项目描述：
这个是一个展示野外植物分类 点击查看详情和搜索功能的页面 拿到手的时候 很开心 觉得很简单 然后听到我们组长让我兼容到ie8 我就想哭...QAQ
PC：进入页面是一个动画效果 然后用户点击检索平台然后进入展示页面 因为ie兼容 很多样式都需要特殊处理 什么圆角border呀 还有背景图片大小呀什么的.. 我是用jquer写的 这里的难点我觉得是点击一个植物出来弹框 他会出现这个植物一系列图片 然后每个图片左上角会根据后台返回的数据显示对应的花 草 叶 等等。。对应的标识 而且这个显示的图片是一个横向展示 也就类似于轮播图吧 但是点击要可以方大看 不会写 就找了很多插件 不停地试 然后再改样式调试 还要让他兼容
App：进入移动端也是一个动画 一开始觉得ie兼容够痛苦了 然后感受了一下 ios的兼容 更是伤感 hhh... 因为我是安卓 所以当时写完觉得没问题 后台 测试是ios 测得是一堆问题呢..然后就是拿着测试的手机改改改..我还记得那是一个寒冷的周六 T . T
4.第四个项目一个中医后台 (pc- 兼容ie10)
项目描述：
之前都是用layer的 这里我发现一个挺好用的框架是 iview 他可以兼容到ie9 特别赞~
后台页面布局同上 内容从草药写 基本每个页面都是联动的 写第二个方剂库页面时 添加 有一个多选 选择草药是之前草药页面的数据 每个页面都有基础的增删改和分页 然后就是病人列表展示也很简单
复杂的地方是添加病人 这里的数据特别多(对于我这个渣渣来说是目前比较复杂的json数据格式) 点击添加病人跳转到一个新的页面 我是用来专门写添加病人的 里面还分望闻问切 添加语音 我这里是默认样式 没弄出来想要的样式 因为改的话需要用js改样式 ，切诊里面还有一个tab页分身体的各个部位 又是一顿增删改 然后医生和病人的对话 最后有一个整体的病人总结 给他配什么药 诊断 和治疗方法 现在做完了 感觉没什么难的就是数据有点绕 自己代码写的有点乱 下次写需要注意和优化 遇到挺多坑爹的地方就是语音有个方法名搜索了也不是关键字但是就是用这个名字播放不出来 当时找了很久 改了以后就正常了..很无奈
5.第五个项目一个虚拟平台系统的官网 (pc- 兼容ie9)
项目描述：
这个官网页面我总觉的很好写 后来发现并不简单
先是一个校级页面然后从学员信息分类点进去可以看到其他院系的分类 因为不是脚手架写(脚手架开发适合单页面 也不适合这种) 用iframe没有办法自适应高度 右边有滚动条体验特别差 所以只能死办法 每个页面都写一遍头部导航以及底部 传值都是通过地址栏传值 然后进入另一个页面的适合获取地址栏的参数再发送请求获取数据 整个页面的排版基本都是轮播图轮播图轮播图...变着花样的轮播图。这里需要吧 jquer的轮播图改成vue的写法 不然动态获取到的图片会导致报错问题
呃("▔□▔)...我写文章挺流水账的 从小写作文就被老师说过 hhh.. 写给未来的自己看 ~
新的一年 制定好计划 好好努力！ (ง •_•)ง 加油~
网友评论