需求介绍:
1. 系统权限管理，数据系统管理，各个系统权限联通。
2. 可以对不同用户设置角色，赋予不同权限，显示看到不同的页面。
3. 需要在不改代码的前提下，增加外部链接菜单页面。
4. 决策系统数据系统部分迁移到天眼。
项目命名
项目命名为bigdata-admin-vue
技术栈
1. vue-cli3;
2. vue-router、vuex、element、axios;
3. 权限基于RBAC权限管理模型，即用户→角色→权限管理模型;
系统目录
[站外图片上传中...(image-87a9ff-1575879535075)]
1路由控制和菜单显示
vue权限路由实现方式：
* 视图(View) 使用xtpl模板引擎
##路由解析，根据URL寻找对应的控制器和行为
```javascript
app.post('/template|/templatePC|/user-defined|/user-defined-pc',control.postRander); //post入口，页面编辑、报表、热图、abtest报表页面渲染
app.get('/modules/*/index',control.moduleRander); //用于本地单个无线模块开发调试
app.get('/modules_pc/*/index',control.moduleRander);//用于本地单个pc模块开发调试
app.get('/template/design(_second)?|design_pc(_second)?',control.pagePreview); // 所有iframe的入口，预览
app.get(/personalized$|personalized\/[^\/]*?$/,control.personalized); //个性化
app.get('/AB_RedirectServer?',control.abtest); //ab
//保存页面请求
app.post('/savePage|savePagePc/index',control.pageShow);
//js combo
app.get('/jscombo/',combo.jsCombo);
app.get('*',control.errorPage);
3.渲染部分：
编辑页渲染父级通过调用function dataSend(tag,viewModule,callback) 里的ajax将数据发送给cms postDataProcessing函数处理，
returnData = self.dataRender(data,equipment,xtplPath+data.template_file+'.xtpl',moduleName);
if(data.flagForPage == 0 || data.mustDocumentWrite == true){
xtpl.renderFile('./views/'+xtplPath+data.template_file+'.xtpl',returnData,function(error,content){
res.writeHead(200, {"Content-Type": "text/plain"});
res.write(content);
});
}else{
res.send(returnData);
}
iframe在展示页面之初，默认模板是index.xtpl，如果要使用用户自定义的xtpl模板，因为页面结构是默认的index.xtpl的结构,需要对页面进行重新写入。
1. 通过dataRender将处理好的返回数据，赋值给returnData
2. if语句里的代码对模板进行的渲染，得到的数据是字符串，并且通过res.write将数据返回个浏览器对应的浏览器部分代码处理如下
document.open(); //打开文档流
document.write(data); //将默认的iframe里页面内容替换
document.close(); //关闭文档流
3. else语句里将returnData直接返回给浏览器
对应代码处理如下:
$('#css-box').html(data.css);
$('#components-box').html(data.xtplHTml);
$("#body-content-box").attr({
"data-page-style": data.style,
"data-is-publish": data.isModule,
"ppcc-id": data.pageId_peopleId_childPageId_childPeopleId,
"idsite": data.idsite,
"page-id": (data['digital'] ? data['digital'].page_group_id : null) || data.id,
"is-personalized": data.isPersonalized,
"people-id": data.peopleId,
"data-view-module": (data.viewModule ? data.viewModule : "")
});
company_id = !!data.tenant_id ? data.tenant_id : (!!data.company_id ? data.company_id : 0);
//设置页面背景
(function () {
var style = $('body').attr('data-page-style');
if (style != '') {
$('body').css('background', style);
}
})();
$(getIframe()).attr("isSuccess", "true");
$('#components-box').append("");将iframe里的js替换
4.个性化
个性化是一个比较复杂的系统，但是cms只做了渲染，复杂的逻辑都在我们系统编辑部分做了处理，个性化页面没有生成静态的文件，通过接口获取数据，并有dataRender渲染展示页面
5.Abtest
函数abtest对其做的处理
目前有两种情况is_out 为 0 和is_out 为 1
为0的时候表示内部页面，也就是我们站点生成的页面，在调用dataRender方法做处理展示页面
为1的时候表示外部页面，也就是客户的页面，直接res.write渲染
6.页面生成机制
当页面保存的时候触发，将接收的数据里的配置信息解析，查找对应的xtpl模板，
在dist查找对应模块css和js并导入数据，生成个一个字符串的页面数据\
- pageSave函数执行；
- saveToMakeFile普通页面保存，就生成一个html，以页面id为命名
- makeImageFiles函数来生成图片文件
- separateFiles函数做文件分离处理，将html、css、js、图片剥离开，变成单个文件
- getlistening函数将监听文件添加到页面
- tongjiFn函数设置统计参数
7.日志管理：
require log4js
log4js.configure({
appenders: [
{ type: 'console' }, //控制台输出
{
type: 'dateFile', //文件输出
filename: './log/', //文件保存在log目录下
maxLogSize: 20480,
backups:3,
category: 'log_date',
alwaysIncludePattern: true,
pattern: "yyyy_MM_dd.log" //文件命名规范
}
],
replaceConsole: true
});
var logger = log4js.getLogger('log_date');
logger.setLevel(log4js.levels.INFO);
8.pm2多进程服务
pm2 是一个带有负载均衡功能的Node应用的进程管理器，把独立代码利用全部的服务器上的所有CPU，并保证进程永远都存活，0秒的重载；
线上服务在运行的时候会出现异常，虽然代码里已经用try catch 来捕获异常，但是还是会有一些情况会导致服务崩溃，pm2开启多进程，可以保证代码运行稳定
9.Redis
只要用于用户预览的时候数据存储，在用户点击预览的时候将保存在redis中，以时间戳和随机6位随机数字为key存储数据，用户可以通过手机扫描二维码访问到页面，pc预览页面可以通过新窗口打开，目前页面预览有效时间设置为20分钟，预览的时候通过key来读取数据数据
10.监听部分：listening
1. 监听包括piwik和sdk，piwik已不再使用。页面滚动手机pv数据、页面到达率数据，点击搜集点击数据，热图数据；
2. 页面编辑状态下，预览状态下不会添加监听代码，发布的页面、ab页面、个性化页面会引入监听代码，
11.打包工具：gulp
- watch监听了模块里的js和css文件，当模块里的js或css做修改时，自动打包压缩到dist目录下
- gulp bulid可以生成打包后的代码，用于部署客户服务器上
12.模板引擎：xtpl
- xtpl是淘宝kissy架构里的模板渲染引擎，介绍:https://github.com/xtemplate/xtemplate/blob/master/docs/tutorial/introduce.md
- 在系统开发之初，我是想用ejs作为渲染模板引擎，由于项目的时间紧迫，我对xtpl比较熟悉些，经过商议还是决定用xtpl。
- xtpl的语法功能并不强，但也是可以满足我们的渲染需求，目前在项目里xtpl运行稳定。
npm包链接：https://www.npmjs.com/package/xtpl
gitbub链接：https://github.com/xtemplate/xtemplate
13.模块（组件）
- 页面是由一个或者多个模块构成的，模块是构成页面基础单位
- 模块js代码基础框架
(function() { //闭包函数自执行
function Mod() { //函数定义 Mod构造函数
this.init.apply(this, arguments);
}
Mod.prototype = { //原型链
init: function(container) {
var self = this;
self._node = $(container); // 模块容器
self.data = self._node.find('.J-dataJson').html(); // 模块数据
self.data = JSON.parse(self.data);
}
};
new Mod("#clickplus-module-box"); //don't modify this line of code
// new一个构造函数
})();
基础框架不允许改动，当页面里有多个相同模块的时候，构造函数就发挥作用了，我会new多个Mod
new Mod("#clickplus-module-1496965951574")
new Mod("#clickplus-module-1496965951575")
.......
后面跟上模块创建的时间戳，保证唯一性，这样就避免了重复写入相同的模块代码，减少页面的代码量
- 模块xtpl
精简代码示例：
当你页面里需要cms返回的模块数据时可以添加textarea的代码
class="main"也是固定的
- 模块样式
精简代码示例：
@r: 64rem;
.area-choose {
min-width: 320px;
width: 640/@r;
margin: 0 auto;
.main {
width: 640/@r;
min-width: 320px;
}
}
@r: 64rem;作为页面适配基础单位
用实际的尺寸除以@r得到适配的rem尺寸，就可以适配各个手机
14.nginx应用
主要做了8080端口的代理，转发到80，设置了cms的
server {
listen 80;
server_name node.clickplus.cn;
server_name cms.clickplus.cn;
server_name cms-test.clickplus.cn;
location / {
proxy_pass http://127.0.0.1:8080;
fastcgi_connect_timeout 60;
fastcgi_send_timeout 180;
fastcgi_read_timeout 180;
fastcgi_buffer_size 128k;
fastcgi_buffers 256 16k;
client_body_buffer_size 4096k;
}
}
15.报表部分
- 先前版本是将报表的渲染处理放在controller.js里的,带来一个很大的问题就是，当切换有效点击或者无效点击、选着日期等操作的时候其实要重新渲染整个页面
- 现在的逻辑是页面只渲染一次，做切换数据的操作时页面不再刷新，只将数据刷新
footSettings.xtpl文件里：
reportClickData、
reportCalculate、
reportForNav、
reportForNavGoods、
reportForGoods
函数对报表的数据做了处理
16.页面适配原理
对font-size进行了重新定义，以rem作为一个单位，64为基数，
!function(e) {
function t() {
var t = n.clientWidth,
r = "}";
!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && t > 1024 && (t = 640, r = ";max-width:" + t + "px;margin-right:auto!important;margin-left:auto!important;}"), e.rem = t / 10, /ZTE U930_TD/.test(navigator.userAgent) && (e.rem = 1.13 * e.rem), /Android\s+4\.4\.4;\s+M351\s/.test(navigator.userAgent) && (e.rem = e.rem / 1.05), i.innerHTML = "html{font-size:" + e.rem + "px!important;}body{font-size:" + 12 * (t / 320) + "px" + r
}
var n = document.documentElement,
i = document.createElement("style");
n.firstElementChild.appendChild(i), e.addEventListener("resize", function() {
t()
}, !1), e.addEventListener("pageshow", function(e) {
e.persisted && t()
}, !1), t()
}(window);
17.调试
- 可以通过webstorm来调试
- 可用node debug index.js 打debugger断点
- 基于Chrome浏览器的调试器 npm install -g node-inspector 导入安装路径到环境变量。 node-inspector 默认情况下node-inspector的端口是8080，可以通过参数--web-port=[port]来设置端口。 node-debug --web-port=8000 index.js启动程序 node --debug-brk
18.环境安装
- 在cms根目录里执行npm install，安装依赖包
- 安装全局pm2模块 sudo npm install -g pm2 用于开启多进程，保证node服务不停止工作，线上环境一点要安装并执行 pm2 start index.js -i 4
- 安装全局gulp模块 sudo npm install -g gulp
- 安装全局nginx sudo npm install -g nginx 用于将8080端口发送到80端口
- 打开sudo gedit /etc/nginx/etc/nginx ，找到http,在里面加上如下代码，server_name 为你本地host设置的127.0.0.1对应的名称 ,将8080的端口请求指向80
server {
listen 80;
server_name node.clickplus.cn;
server_name cms.clickplus.cn;
server_name cms-test.clickplus.cn;
location / {
proxy_pass http://127.0.0.1:8080;
}
}
nginx的buffer设定 开发中可能会发现post请求传输问题net::ERR_INCOMPLETE_CHUNKED_ENCODING 请在server添加buffer设定，并且设置gzip为on;
server {
listen 80;
server_name node.clickplus.cn;
server_name cms.clickplus.cn;
server_name cms-test.clickplus.cn;
location / {
proxy_pass http://127.0.0.1:8080;
fastcgi_connect_timeout 60;
fastcgi_send_timeout 180;
fastcgi_read_timeout 180;
fastcgi_buffer_size 128k;
fastcgi_buffers 256 16k;
client_body_buffer_size 4096k;
}
}
19.数据结构
模块数据以对象数组形式存放在在config里，动态的配置信息存放在模块的config里
1.普通页面数据结构
{
"app_url": null, //页面app链接
"body_foot": null, //用户自定尾部
"body_head": "", //用户自定头部
"cdn_url": "https://huodong.clickplus.cn", //cdn地址，用户域名
"children": null,
"component_num": null,
"config": [ //存放页面模板的数据
{
"id": 546,
"img_path": "http://huodong.clickplus.cn/image/tuwenrequ.jpg",
"title": "图文",
"stick": false,
"basic": 1,
"timeIndex": 1496288530354,
"create_time": 1477459545000,
"device": 0,
"path": "/modules/area-choose-text",
"config": { //动态配置信息
"data": [
{
"wrapHeight": 640,
"wrapWidth": 640,
"image": "http://huodong.clickplus.cn/image/hjhg.jpg",
"iHeight": 640,
"iWidth": 640
}
],
"areaData": []
},
"tenant_id": 3,
"type": 12
}
],
"create_time": 1495789835000,
"custom_body": "\n",
"custom_head": "",
"data_collection_type": 1,
"default_page_id": null,
"description": "adadasddasd",
"device": 0,
"file_name": "zhuxiyu_1028",
"hav_app": 0,
"id": 5228,
"idsite": 31,
"im_position": "0",
"im_text": "",
"is_deleted": null,
"is_group": 0,
"keywords": null,
"pageMainWidth": "auto",
"path": null,
"relation": null,
"release_time": null,
"setting": null,
"share_img": "https://huodong.clickplus.cn/image/1496891043699.png",
"site_type": 1,
"smart_component_setting": 0,
"stat_position": "0",
"stat_text": "",
"status": 1,
"style": "#eeeeee",
"templateSettingItem": null,
"template_file": "index",
"template_id": 0,
"tenant_id": 3,
"tenant_logo": "https://huodong.clickplus.cn/image/1495612416087.jpg",
"thumbnail": "http://huodong.clickplus.cn/file/1496909741687.jpg",
"title": "zhuxiyu_1028",
"type": 0,
"type_name": null,
"update_time": 1496909741000,
"url": "https://huodong.clickplus.cn/html/zhuxiyu_1028.html",
"wx_app_id": "",
"only": "149691787773263078",
"isEdit": true,
"mustDocumentWrite": false,
"flagForPage": "2"
}
2.个性化页面数据结构
{
"config": [ //组件数据
{
"basic": 1,
"config": {
"data": [
{
"image": "http://huodong.clickplus.cn/image/hjhg.jpg",
"wrapHeight": 640,
"wrapWidth": 640,
"iWidth": 640,
"iHeight": 640
}
],
"areaData": []
},
"create_time": 1477459545000,
"device": 0,
"id": 546,
"img_path": "http://huodong.clickplus.cn/image/tuwenrequ.jpg",
"path": "/modules/area-choose-text",
"stick": false,
"tenant_id": 0,
"title": "图文",
"type": 12,
"timeIndex": 1496918752643,
"fromComponent": "component1496918752643",
"fromText": "default1496918752643"
}
],
"id": "4454",
"img_path": "",
"path": "",
"tenant_id": 3,
"title": "",
"style": "#eeeeee",
"company_id": "3",
"isEdit": true,
"template_file": "index",
"device": 0,
"only": "149691875264302242",
"mustDocumentWrite": false,
"flagForPage": "2"
}
参考文献
pm2：https://www.douban.com/note/314200231/
《深入浅出 node.js》作者:朴灵