发表于: 2017-08-01 23:24:12
1 878
一、今天完成的事:
1.跟后端对接口,查看对需求不清楚的地方,统一意见;
2.更改方案设计,基本完成前后台方案;
二、明天的计划:
技术方案demo
三、遇到的问题:
1.暂无
四、收获:
1、基本完成前后台方案设计;
一.开发工具
1、 编译器:webstrom
2、 版本管理:svn
3、 切图:Photoshop
4、 Css预处理:sass
5、 框架使用:AngularJs
6、 css框架使用:bootstrap
7、 类库使用:Jqurey
8、 路由使用:ui-router
9、 轮播图使用:ui-bootstrap
10、 懒加载:oclazyload
11、 文件上传使用:angular-file-upload
12、 表单验证:ng-message
13、 模态框:bootbox
二.文件架构
project:
img;
css;
header.css
footer.css
main.css(总文件)
home.css(首页)
findJob.css(找职位)
findAlma.css(找精英)
about.css(关于我们)
frame;(框架类文件)
angular
jQuery
bootstrap
bootbox
js:
app.js;(初始化文件)
constant.js
controllers.js
directives.js;
filters.js;
services.js;
pages:(页面)
index.html;(首页)
三.页面逻辑
暂无
四.前台story
1.首页
1.1导航
ui-serf跳转
四个标签hover
1.2首页banner
使用ui-bootstrap轮播
ng-click实现点击图片跳转对应链接;
1.3最新职位列表
使用ui-bootstrap轮播,从后台获取20条数据,不足20条则由前面数据添加
点击更多ui-sref跳转至最新职位页面
点击轮播图ui-sref跳转至职业详情界面
1.4页脚
ui-sref跳转至关于我们、联系我们
2.找职位
2.1找职位banner
后台获取banner图数据,ui-bootstrap轮播
2.2 公司搜索
搜索栏:位于banner图上方,ui-sref传参至找公司页面,参数为空跳转默认搜索页
2.3搜索导航
侧边栏:hover实现,数据用constant,点击ui-sref跳转至找职业界面
2.4推荐职位/最新职位列表
使用ng-if切换选项卡。点击推荐职位,获取最新的8条职业列表,点击更多跳转推荐职位列表页码,点击最新职位同理
2.5推荐公司
从后台获取最新认证公司信息,使用bootstrap上下轮播,点击图片进入公司详情页面,点击查看更多进入搜索公司页
2.6公司详情
接受跳转参数,渲染页面,两个子路由,公司详情和在招职位,默认为公司详情,路由切换时局部渲染为在找职位;
2.7在招职位
点击在招职位标签,从后台获取数据渲染页面显示结果,点击标签进入职业详情
2.8职业详情
职位详情页面通过职位id获取职位信息,分为两个部分,页面左边显示职位信息,右边显示公司信息。
发送对应字段向后端,静态展示从后端获取的相应职位信息
2.9搜索公司
使用ng-if切换公司搜索或职位搜索。
上部为搜索项,下部为搜索数据,无数据时显示默认页面。搜索选项可以多选,搜索选项通过ng-repeat出来,数据为常数过滤,多选操作请求数据为数组;
2.10搜索职位
关键字输入后在旁边显示;
搜索请求同搜索公司
无数据情况下显示默认页面,底部出现推荐职位;
3.找精英
3.1找精英banner
请求数据,使用ui-bootstrap实现轮播图
3.2成功案例
渲染最新认证公司列表,不足8个时显示普通公司;
点击更多合作公司,跳转公司列表页面;
4.关于我们
4.1关于我们、联系我们
静态页面,使用ng-if实现
评论