编写项目复盘方案

成都中央巡视组萝卜多复盘项目方案

·         创建： 曹樾 

一、开发环境/插件选择

开发工具： sublime

版本管理工具：svn

JS框架：angular JS 1.6.4

Css框架：bootstrap3.3.6

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串联多个过滤器

四、页面跳转（前台）

index上四个子路由

1.首页

推荐职位

更多-->最新职位页面

职位-->职位介绍

公司名称-->公司详情

2.找职位

推荐职位，最新职位

更多-->进入相应页面

职位-->职位介绍页面

推荐公司

更多-->搜索公司页面

公司图标-->公司详情页面

职位搜索

职位搜索列表-->职位介绍页面

3.找精英

成功案例

更多公司-->公司列表页

4.关于我们

五、页面跳转（后台）

1.登录页-->欢迎页面

2.信息管理

公司列表

新增 编辑--> 新增编辑页面

职位-->进入职位列表

职位列表

编辑--> 编辑列表页

如果是通过公司名称点击的职位列表

-->转到该公司的在招职位列表

在招职位列表

新增--> 新增职位列表

3.内容管理

Article 管理

点击新增，编辑--> 新增编辑页面

4.后台管理

账号管理

新增账户-->新增账户页面

编辑-->账号编辑页面

角色管理

新增，编辑-->编辑新增页面

模块管理

新增，编辑-->新增编辑页面

六、前台方案

1.首页

首页的header和footer公用，四个选项对应四个子路由

轮播部分

1.使用bootstrap轮播图

优点：容易使用

缺点：对于在angular内使用需要重新配置

2.使用ui-bootstrap轮播图

优点：对于angular支持很好

缺点：不好配置

2.推荐/最新职位页面

顶部搜索部分，这个部分是一个公共样式，在职位搜索，公司搜索部分都可以复用。

根据后台所给的接口，用ng-repeat生成选项，对于每个选项绑定点击事件。

关键字部分使用angular的双向绑定，实时显示。

分页插件

1.自己写一个分页指令

优点：项目契合度高，可控性好，随时可以修改

缺点：会消耗一部分时间

2.使用插件，ui-bootstrap，bootstrap

优点：使用方便，节省时间

缺点：需求改变时不好修改

3.找职位页面

顶部职位查看，使用hover实现。

推荐/最新职位

用ng-show来实现两块的切换，在页面加载时将两块都加载出来，这样点击切换的时候不需要重新加载，减少页面抖动。

4.公司/职业搜索

顶部搜索部分同上。

这里两个页面是这个页面下的两个子路由。

因为这两个页面获取数据后渲染页面的布局不同。

5.公司详情/在招职位页面

这两部分都从后台获取数据渲染，两个也写成两个子路由

在招职位这里，顶部筛选，因为没有搜索按钮，每次点击设置成从后台重新按照筛选目标获取数据渲染页面

6.职位介绍

点击我感兴趣，这里用模态框去做，alert太单薄了

分享部分

这部分需要插件支持分享到微信 微博 qq。

7.公司列表页

和上面的在招职位一样，筛选部分每个选项点击后获取数据重新渲染页面。

8.关于我们

这边两个部分的点击切换用子路由。

七、后台方案

1.登录页

这里的提示部分用后台获取的数据渲染

这个页面要传给后面页面一个关于这个登录者角色信息的参数，用于后面渲染模块。

2.欢迎页

获取登录部分传递过来的角色身份信息，根据规定的权限来渲染左侧模块部分。

3.公司/职位列表

根据后台获取参数渲染列表。

搜索后的结果要在刷新页面后保存，这里可以用url传参或者是用cookie。

普通进入职位列表只能是编辑，只有在点击公司，进入公司在招职位的时候，把公司id作为一个参数传到这个页面，获取到这个参数，就显示一个新增按钮，支持新增职位。

4.公司/职位的新增/编辑

主要是做表单验证

结合html5的表单验证方式，再补充一些正则式的验证。

必填项 使用html5的验证方式

仅限数字 html5/正则

限制长度 angular/正则

文件格式 html5/正则

图片上传

1.自己写

2.angular-file-upload

5.Article管理

拖动排序：JQuery拖动插件