发表于： 2017-06-02 21:16:33
2 1186
一.今天完成的事情
1.完成前台的架构，配置好各个插件，布置好路由。
2.拆好前台任务，和PM沟通了点击跳转的区域块的问题，点击这个区域块里面的东西跳转。
3.布置路由引入了oclazyload，延迟加载所需的文件，提高网页性能，原理大概看了下，也就是使用第三方服务：$。。。Provider服务来进行相应controller或者directive或者filter的延迟注册。要注意的是服务的延时注册直接使用$provider。服务源码如何实现的就不细看了，项目重要。
今天晚上回去把前台的设为首页和导航栏做完，这两个还是很简单的。
二，明天预计完成的事情
完成【轮播】，【搜索】，加入PIE.htc实现border-radius，box-shadow。
听PM说UI明天出图，可以按模块把逻辑和样式一起写了，开心～
三.遇到的问题
暂无
四.收获
angular使用第三方服务延迟加载相应文件，提高网页性能。
以下是昨天的前端前台技术方案
一， 架构
利用angular（1.3）架构，基础库用Jquery（1.9），UI基于bootstrap（3.3.6）。使用oclazyload加载文件。
1 插件：
轮播图：基于jquery的unslider插件。（兼容IE8）
ui-bootstrap做分页。
2代码规范：
前后台代码的样式使用less完成
控制器按照与组件统一，使用controllerAs：vm
页面绑定变量使用vm.xx。
<form>标签的name:formData；
Ie8不支持高版本angular、jquery；不支持html5、css3。因此布局不使用与html5与css3属性相关的库、插件、框架等，涉及ui图中需要用到圆角，阴影等属性，利用PIE.htc文件实现。
页面结构：
二、具体方案
首页
1.设为首页
设为首页使用document.body.style.behavior和document.body.setHomePage(url),url从改页面的url读取，使用$location读取。
新增加加入收藏，使用window.external.addFavorite和winddow.sidebar.addPanel
实现。如果设置失败，弹窗设置失败，文字引导设置。
2.搜索
需要后端返回搜索内容的ID和其父模块的ID，tittle，content，根据搜索到的内容使用字符串分割，从搜索结果切割出搜索内容，加上span标签加上变红的属性。根据返回ID和父模块ID确定需要跳转的页面。使用ui-bootstrap做分页。
3.导航栏
hover改变颜色，如有需要可以使用jquery加动画过渡。使用ul+li+a标签布局。
4.轮播图
轮播图使用unslider插件，bootstrap的轮播图，动画效果基于css3的动画。在ie8里面会失效，所以使用这个插件。
5.学术交流
使用柵格布局，处理字符串，字数大于50将后面的切割掉，接上“…”，ng-repeat，repeat标题到view层。动态生成ui-sref跳转，点击更多跳转相应模块。
6.学生活动
跟学术交流类似，最多显示13个字，根据时间倒序排列。
7.招生就业
点击招生就业进入子页面。
8.师资队伍
和招生就业类似
9.页脚
点击联系我们跳转相应页面，关注我们跳转相应链接
子路由
专业介绍页面(内容写死)
面包屑导航 使用 ui-sref超链接
正文根据ui图进行布局。
子路由
师资队伍页面
面包屑导航 ui-sref超链接
页面使用bootstrap栅格布局侧边栏与正文内容；
左侧导航栏两使用 jQuery 动画fadeToggle()，实现点击出现/隐藏效果（由于兼容性，不使用插件）；
使用ng-show结合ng-click实现当前菜单显示，其余菜单隐藏效果；
使用ng-class以及$index,通过标题的点击函数，实现当前标题被选中变色的效果。
左侧导航栏两个子菜单（标题内容写死）：教师团队、教师介绍写死。
教师团队正文内容使用路由嵌套至本页面；
团队简介子标题从后台获取数据后使用ng-repeat渲染并配置ui-serf，用路由实现右侧的文本内容嵌套。
进入页面后，默认打开 教师团队-团队简介子页面
子路由
实习基地页面
面包屑导航 ui-sref超链接
正文使用bootstrap栅格布局图片与文字。
子路由
学术交流页面
面包屑导航 使用ui-sref超链接
正文使用bootstrap栅格布局图片与文字。
正文通过http服务获取到数据后，使用ng-repeat渲染，限制数量为9，使用orderby进行排序。
显示日期位置输出两次日期。第一次用过滤器转化：|date:'dd'；第二次使用date:'yy.MM'。
正文图片边框的宽高固定，同时添加ng-if，条件为item.logo（假设图片的ng-src地址为item.logo）值不为空;
详情文字使用过滤器（调用substring()方法）对字符串进行截取，有图片截取25字；无图片截取140字；
为正文标题及图片添加ui-serf，传参跳转至 学术交流-具体介绍 页面。
分页使用指令完成。
子路由
学术交流-具体介绍 页面
根据ui图进行布局
子路由
学生活动、学生活动-详情页面
实现方式与 学术交流页面 相同
子路由
招生就业页面
实现方式与 师资队伍页面 相同
子路由
优秀毕业生页面
根据ui图进行布局
子路由
联系我们页面
写死+bootstrap栅格布局。
返回列表
评论