发表于: 2017-04-10 22:04:49
1 1250
今天完成的事情:
重构了前端前台的项目方案,思路比较清楚了;
明天计划的事情:
明天成都停电,要找地方继续干活,希望能完成后台的项目方案;
遇到的问题:
对一些技术实现细节还没搞清楚;
收获:
现将重构的前台方案贴到日报里,如下:[图片很多就不贴了]!
架构实现:
1.CSS框架bootstrap;
2.JS框架angularjs;
3.JS库jquery;
4.使用less编写css;
5.插件:
1)ui-bootstrap(分页、轮播图);
2)ui-router路由;
3)表单验证ngMessage,懒加载ocLazyLoad.
AngularJS模块设置:
app.js启动文件,放置路由;
constant: 找职位页面职位标签:产品、技术、设计及其相应二级分类;
搜索面板:公司/职位搜索中信息:如地区、行业、融资规模,工作经验、公司行业、薪资水平、发布时间;
controller: 每个页面一个控制器,控制页面的业务逻辑;
directive: 分页、轮播图;
service:不同页面调用的接口;
filter: 条件筛选做成过滤器,如按地区、行业、融资进行筛选时;
Html模板设置:
index.html 包括主要外联CSS,主要库和框架,以及angular文件,只有一个ui-view;
main.html放置header和footer,中间设置ui-view,其他所有模板页面都插入其中;
每个主要页面均为一个html模板页面;
前台部分
前台页面共13个页面,页面的头尾共用;
一、首页(5个需求)
1.1 导航栏
(1)使用ui-route跳转页面,状态使用 $state.includes()标示;
1.2 首页banner
(1)用ui-bootstrap轮播插件实现banner图;
(2)点击banner图用ui-router路由跳转到指定页面;
1.3 最新职位列表
(1)用ui-bootstrap轮播插件实现banner图;
(2)点击翻页用ui-bootstrap轮播插件中的翻页按钮实现;
(3)点击更多用ui-router路由跳转到最新职位页,并且传参公司的名称和职位字段;
1.4 页脚
(1)有两个跳转链接,采用ui-router实现跳转;
1.5 推荐职位/最新职位列表页
(1)点击标题或标签页改变值,发送请求,根据后端返回数据来切换职位显示;
(2)点击更多ui-router路由跳转到推荐职位/最新职位页;
(3)点击职位card ui-router路由跳转到职位介绍页面;
二、找职位(9个需求)
2.1 找职位banner
(1)用ui-bootstrap轮播插件实现banner图;
(2)点击banner图用ui-router路由跳转到指定页面;
2.2公司搜索
(1)使用form表单,点击搜索ui-router路由跳转到搜索页,并把字段发送给后端,根据后端返回数据渲染页面,当输入为空时,参数为””;
2.3 搜索导航
(1)点击标签改变对应值,发送请求给后端,渲染接受的信息,使用ng-repeat生成;
(2)点击搜索时,将选中的参数保存到url里,并发送请求将选中的参数给后端,接受数据ng-repeat生成;
(3)pc端按照psd布局方式,hover切换列表在右侧弹出显示,在移动端做成下拉形式;
2.4 推荐公司
(1)左上角最新认证公司,定时向后台请求数据查看最新认证公司是否变化,要有变化则改变公司;
(2)右侧小公司通过后台数据渲染;
(3)竖向轮播图通过修改插件参数来实现;
(4)点击更多ui-router路由跳转到搜索公司页;
(5)点击职位card ui-router路由跳转到职位详情页面;
2.5搜索公司页
(1)搜索根据用户输入的参数,向服务器的搜索接口发起请求,返回数据后跳转至列表页填充页面;
2.6公司详情
(1)分为两部分,上一部分是独立的,下面是公司详情/在招职位Tab切换;数据通过后台加载,点击标签页改变对应值,发送给后端,将接收的信息渲染;
2.7职位详情
(1)发送对应字段向后端,静态展示从后端获取的相应职位信息;
2.8搜索职位页
(1)搜索根据用户输入的参数,向服务器的搜索接口发起请求,返回数据后跳转至列表页填充页面;
2.9在招职位
三、找精英
3.1 找精英banner
(1)用ui-bootstrap轮播插件实现banner图;
(2)点击banner图用ui-router路由跳转到指定页面;
3.2 成功案例
(1)从后台获取最新认证公司渲染页面;
(2)点击更多用ui-router路由跳转到公司列表;
四、关于我们
(1)使用ng-show和ng-hide实现切换隐藏;
评论