1、文件目录结构
| /web/ | 前端目录 | ||
|---|---|---|---|
| srcstatic/dist/ | |||
| index.html | 前端单页入口文件，响应除/api/、favicon.ico、robots.txt和静态文件之外所有其他请求 | ||
| ｜ | favicon.ico | 浏览器网址图标文件 | |
| ｜ | robots.txt | 搜索引擎文件 | |
| ｜ | 目录下的其他文件 | 前端所有静态资源文件（css, js, jpg, png, etc），对应url为 / （根目录） | |
| /public/ ｜ | 后端API目录 | ||
| ｜ index.php | 后端PHP入口文件，仅响应/api/前缀的URL |
2、PHP开发规范
1.PHP仅响应/api/前缀下的请求，所有路由以/api/为前缀
2.所有前端页面初始化时需要获取的数据，尽量使用一个API一次获取，比如GET /api/init_param
3.所有需要权限认证后方可访问的页面，在认证失败或未认证时，请直接在HTTP header上返回401
4.CSRF token检查失败时，需要返回code=custom_code.params_invalid.code，且info=”CSRF_TOKEN_FAILED” 注意：CSRF token请在登陆后使用/api/init_param返回给前端页面。
3、前端开发规范
1.前端响应所有请求（不含favicon、robots.txt 、/api/*和静态资源文件）。
2.前端初始化时，需要访问/api/init_param获取初始化数据，根据项目情况决定内容，一般包括是否已登录、CSRF token初始值等。
3.前端需要处理如下情况：请求了API之后，返回HTTP header 401错误（表示当前请求并未通过登录认证）。
4.前端需要处理如下情况：请求了method=POST的 API之后，返回json串中code=custom_code.params_invalid.code，且info=”CSRF_TOKEN_FAILED”的情况。 出现此情况表示当前登录的用户已经切换到另外一个用户id上，或者在其他浏览器标签页中登录退出又登录进来。
5.考虑到百度统计功能，在部署构建时，开发、测试和staging环境使用npm run test，正式环境使用npm run build:debug。脚本的区别是npm run build:debug会在单页中增加百度统计的相关代码。
Eslint规范
linebreak-style 换行符使用LF(line-feed, ASCII 10, \n)
no-alert, no-console, no-debugger 不能存在alert, console, debugger
quotes 字符串使用单引号
space-before-function-paren 大括号之前需要存在空格
block-scoped-var 块作用域定义的变量只能在块下使用
one-var, one-var-declaration-per-line 变量声明和定义都需要单行
no-multiple-empty-lines 文件最多连续两个空行, 文件头尾不能留空行
max-len code最多115单行，comment最多80字单行
max-depth 嵌套最多4层
max-params 参数最多5个
max-statements 变量连续声明不能超过20个
newline-after-var 变量声明/定义之后需要有空行
no-tabs 不能使用空格代替tab
indent 使用tab缩进
key-spacing 键值对前面不需要空格，后面需要加空格
brace-style if, function必须使用大括号, 不能单行
前端逻辑规范
1.变量的定义：
分为常量的定义和变量的定义；注：常量采用全大写字母，变量则采用驼峰式或小写进行命名；
如：
var CONTENT = ‘请输入姓名’;
var flag = true;
2.自定义事件
用于当前页面的公共组件方法。
- Dom事件的定义
定义Dom的相关事件，包括click,mouseover等事件。
- 执行Dom事件
将Dom事件绑定在对应的标签上；
- 关键节点的检测
在模块化页面中，多个模块组成了一个页面。这里主要用于判断页面中是否存在某一模块；
- 获取常用节点
为了减少重复取用页面的节点，在这里将常用的节点存储起来，一般是存在数组中。
- 初始化事件定义区
页面初始化的定义区。
-
定义页面函数的执行入口。
-
执行入口函数。
define(function(require, exports){
//变量定义区，如下例：
var Query = T.dom.query;
var dom= T.dom;
var node, nodes={};
//自定义事件区，用于当前页面的公共组件方法
var customedEvent = {
}
// Dom事件定义区
var bindDOMFuns = {
}
//Dom事件的执行区
var bindDOM = function () {
}
//关键节点检验区
var argsCheck = function () {
//示例代码
if (!document.getElementById(‘element’)) {
return;
}
}
//获取常用节点区
var getDomElements = function () {
}
//初始化事件定义区
var initPlugins = function () {
}
//执行入口
var init = function () {
argsCheck();
getDomElements();
initPlugins();
bindDOM();
};
//执行
init ();
})
Vue规范
define(function(require){
//自定义事件区，用于当前页面的公共组件方法
var customedEvent = {
};
// vue事件定义区; vue的相关事件写在这个对象里 方便维护
var vueEventList = {
search: function () {
}
};
// 超过十行写在vue数据区
var vueData = {
};
// 初始化vue对象
function initVue () {
new Vue(
el: '',
data: vueData,
methods: {
search: vueEventList.search,
addLine: vueEventList.addLine
})
}
//初始化事件定义区
var initPlugins = function () {
};
//执行入口
var init = function () {
initPlugins();
initVue();
};
//执行
init();
});
4、运维
4.1、Nginx配置 以beeper_customer_clue为例：
server {
listen 8530;
server_name localhost;
root /var/www/deploy/beeper_customer_clue/public;
index index.php index.html;
location ^~/api/ {
try_files $uri $uri/ /index.php$is_args$query_string;
break;
}
location ~ \.php$ {
try_files $uri =404;
fastcgi_pass 127.0.0.1:9000;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
location / {
root /var/www/deploy/beeper_customer_clue/web/srcstatic/dist/;
try_files $uri /index.html;
}
access_log /var/log/nginx/beeper_customer_clue.access.log main;
error_log /var/log/nginx/beeper_customer_clue.error.log error;
}
4.2、环境要求
| 项目 | 要求版本 |
|---|---|
| 后端 | 根据项目要求，建议PHP5.6 |
| 前端-发布机 | NodeJS 5.9+ |
4.3、部署脚本
| 环境 | 前端构建代码 |
|---|---|
| testing | npm install |
| staging | npm install |
| production | npm install |
End
