发表于： 2017-05-28 19:56:43
2 956
写审核方案
创建：曹樾 2017/5/26
一、开发环境/插件选择
开发工具： sublime
版本管理工具：svn
JS框架：angular JS 1.6.4
Css框架：bootstrap3
Css预处理语言：sass
切图工具：Photoshopcc
插件：
日期选择
图片上传（封装指令）
手风琴菜单
路由
二、文档结构
前台/后台
App
Script
App.js（路由）
Servies.js（服务）（小的服务写到一个里面去，一些比较复杂的服务会单独写出来）
Filter.js（过滤器）
Directive.js（指令）（同servies）
Controller.js（控制器）（同servies）
Config.js(配置文件)
Style
Public.css（公共样式）
Fontsize.css（字体）
Color.css（颜色）
Xxxx.css（样式文件）
Html
子路由页面
Image
切图文件
Index.html（主路由页面）
框架
Angular JS
Bootstrap
三、约定/规范
1.配合：
使用禅道拆分与管理项目，每日9：30前开晨会，发晨报。
2.代码规范：
CSS，JS：
严格按照项目要求的css、js代码书写规范其中需要注意的是：
属性按照特定顺序书写：class->id,name（尽量少用）->data-*->src,type,href,value->title,alt->role,aria-*
尽量减少标签的数量
避免使用JS生成标签
属性声明顺序：定位->盒子模型->排版->外观
SASS尽量少嵌套
注释很必要，写在代码块之前
当使用多个CSS文件时，通过组件而不是页面来区分
CSS3属性:transform,transition,animation等需要加浏览器前缀按如下顺序添加-webkit-/-moz-/-ms-/-o-/std标准的放最后
链接样式:a:link->a:visited->a:hover->a:active
Angular:
angularJS中使用$resource 而非$http进行通讯
使用promise，$q服务处理异步
不污染$scope，仅添加与视图相关的函数和变量
使用controller as语法而非$scope进行操作
控制器是js构造函数，所以应该用大驼峰法命名
Controller中只写主要逻辑，具体的判断由service负责
DOM操作只通过指令完成
使用$cacheFactory进行缓存
使用ng-bind进行内容输出
使用$state.go进行页面跳转
过滤器中只做一件事，更复杂的操作可以用pipe串联多个过滤器
四、页面跳转（前台）
Header,footer单独写出来作组件公用
index上四个子路由
1. 首页
1.1首页
最新职位（使用轮播图，每次显示四张，一共二十张，图片是公司logo）
公司logo—〉职位介绍
更多-->最新职位页面
职位-->职位介绍
公司名称-->公司详情
服务流程和成功合伙人评价写死
1.2最新职位页面
1.2.1搜索栏
清空à所有搜索条件还原，显示所有结果
搜索à根据后端返回的数据在列表中进行页面渲染
1.2.2列表
根据搜索栏从后端获取的数据进行页面渲染，每页八条信息，显示出具体的时间精确到分。做好分页和翻页功能
2. 找职位
2.1招职位
推荐职位，最新职位
更多-->进入相应页面
职位-->职位介绍页面
推荐公司
更多-->搜索公司页面
公司图标-->公司详情页面
职位搜索
职位搜索列表-->职位介绍页面
2.2搜索公司页
2.2.1搜索栏
清空à所有搜索条件还原，显示所有结果
搜索à根据后端返回的数据在列表中进行页面渲染
2.2.2列表
根据搜索栏从后端获取的数据进行页面渲染，每页八条信息，显示出具体的时间精确到分。做好分页和翻页功能
2.3公司详情
2.3.1公司产品，公司介绍（放在一个块中，分别居于上下）
公司产品：包含产品logo图，产品名字和简介。
公司介绍：文字介绍
2.3.2公司信息，公司标签（放在一个块中，分别居于上下）
公司信息：规模，行业，地址
公司标签：五险一金什么的，有多少加多少，做成九宫格样子
2.4公司在招职位页
2.4.1公司介绍
公司logo，名字，口号
2.4.2职位列表
根据搜索栏从后端获取的数据进行页面渲染，每页十条信息，可以点击标签进行筛选。做好分页和翻页功能
2.4.3公司信息，公司标签（放在一个块中，分别居于上下）
公司信息：规模，行业，地址
公司标签：五险一金什么的，有多少加多少，做成九宫格样子
2.5职位介绍
2.5.1职位介绍
(1)职位简介：薪资，职位名称，职位标签（后台编辑），地点，发布时间
(2)职位描述：加边框，分三块——岗位职责，必备条件，公司福利
(3)按钮：
分享：鼠标移到图标上面变色：微信绿色，QQ橘黄色，微博红色
微信：点击显示弹框，点击空白页或者X就消失
微博，QQ：点击跳转新页面进行分享
我感兴趣：点击弹出感兴趣的弹框
感兴趣的弹框：一些介绍文字，点击XX或者空白处都可以关闭
2.5.2公司信息：公司logo，规模，行业，地址
2.6搜索职位页
同公司在招职位页
3. 找精英
3.1找精英
依次划分方格打广告
成功案例（根据最新发布时间现实认证公司，数量不足时显示普通公司）
更多公司-->公司列表页
3.2公司列表页
标签栏分三行依次是公司地点，融资阶段，行业领域
每页十二个公司，注意翻页和分页功能
4. 关于我们
两个按钮分别显示两个页面
五、页面跳转（后台）
1.登录页-->欢迎页面
2.信息管理
公司列表
新增 编辑--> 新增编辑页面
职位-->进入职位列表
职位列表
编辑--> 编辑列表页
如果是通过公司名称点击的职位列表
-->转到该公司的在招职位列表
在招职位列表
新增--> 新增职位列表
3.内容管理
Article 管理
点击新增，编辑--> 新增编辑页面
4.后台管理
账号管理
新增账户-->新增账户页面
编辑-->账号编辑页面
角色管理
新增，编辑-->编辑新增页面
模块管理
新增，编辑-->新增编辑页面
六、前台方案
1.首页
首页的header和footer公用，四个选项对应四个子路由
轮播部分
1.使用bootstrap轮播图
优点：容易使用
缺点：对于在angular内使用需要重新配置
2.使用uibootstrap轮播图
优点：对于angular支持很好
缺点：不好配置
2.推荐/最新职位页面
顶部搜索部分，这个部分是一个公共样式，在职位搜索，公司搜索部分都可以复用。
根据后台所给的接口，用ng-repeat生成选项，对于每个选项绑定点击事件。
关键字部分使用angular的双向绑定，实时显示。
分页插件
1.自己写一个分页指令
优点：项目契合度高，可控性好，随时可以修改
缺点：会消耗一部分时间
2.使用插件，ui-bootstrap，bootstrap
优点：使用方便，节省时间
缺点：需求改变时不好修改
3.找职位页面
顶部职位查看，使用hover实现。
推荐/最新职位
用ng-show来实现两块的切换，在页面加载时将两块都加载出来，这样点击切换的时候不需要重新加载，减少页面抖动。
4.公司/职业搜索
顶部搜索部分同上。
这里两个页面是这个页面下的两个子路由。
因为这两个页面获取数据后渲染页面的布局不同。
5.公司详情/在招职位页面
这两部分都从后台获取数据渲染，两个也写成两个子路由
在招职位这里，顶部筛选，因为没有搜索按钮，每次点击设置成从后台重新按照筛选目标获取数据渲染页面
6.职位介绍
点击我感兴趣，这里用模态框去做，alert太单薄了
分享部分
这部分需要插件支持分享到微信 微博 qq。
7.公司列表页
和上面的在招职位一样，筛选部分每个选项点击后获取数据重新渲染页面。
8.关于我们
这边两个部分的点击切换用子路由。
七、后台方案
1.登录页
这里的提示部分用后台获取的数据渲染
这个页面要传给后面页面一个关于这个登录者角色信息的参数，用于后面渲染模块。
2.欢迎页
获取登录部分传递过来的角色身份信息，根据规定的权限来渲染左侧模块部分。
3.信息管理
3.1公司列表
根据后台获取参数渲染列表。
搜索后的结果要在刷新页面后保存，这里可以用url传参或者是用cookie。
普通进入职位列表只能是编辑，只有在点击公司，进入公司在招职位的时候，把公司id作为一个参数传到这个页面，获取到这个参数，就显示一个新增按钮，支持新增职位。
3．1.1公司/职位的新增/编辑
主要是做表单验证
结合html5的表单验证方式，再补充一些正则式的验证。
必填项 使用html5的验证方式
仅限数字 html5/正则
限制长度 angular/正则
文件格式 html5/正则
图片上传用指令封装
进度条使用做个样式，直接从零到一百
3.2职位列表
用框架写出所有下拉菜单，标签先设置好，前面勾选表示选中
4.Article管理
拖动排序：JQuery拖动插件
5.账号管理
点击新增打开页面进行账户增加，保存后将数据传给后端
点击删除确认后，把用户ID发送给后端
6.角色管理
删除同上
7.删除密码
8.模块管理
点击删除确认后，把用户ID发送给后端
返回列表
评论