EventtownProject v0.0.0
company_user_manage_center 公司企业管理中心(个人,企业中心)
- 前端构建部分
会唐网目前项目的开发环境为PHP，前后端混杂模式开发，过多的依赖php环境，前后端开发效率不高。前端页面资源不好管理，因此打算分离出来，使用nodeJs及其模块来实现前端自动化构建。 其中使用ejs来实现模板继承、使用pm2来后台管理执行node服务、使用BrowserSync 来自动刷新，使用gulp来打包压缩资源 目前主要解决了以下问题：
- 网页公共部抽离 普通HTML无法抽离头、尾等HTML碎片。为模块的维护带来极大的不便，这里使用express(nodeJs框架)+ ejs模板引擎（其语法和HTML语法一致，无需学习成本）实现了 include 和 layout等功能。 和php语法一致 。
如引入头部：
<% include ../inc/header.html %>那么一个完整的html页面代码看起来是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>大企业-订单列表</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="/css/ht-framework.css" rel="stylesheet">
</head>
<body>
<% include ../inc/inc.ucenter.header.html %>
<div class="u_main clearfix">
<% include ../inc/inc.ucenter.sidebar.html %>
<div class="u_content">
<!--内容区-->
</div>
</div>
<% include ../inc/inc.ucenter.footer.html %>
<script type="text/javascript">
//custom js
</script>
</body>
</html>同时所有的css js image等静态资料的路径全部默认指向了 wwwroot/下。
<link href="/css/ht-framework.css" rel="stylesheet"> //全部相对于wwwroot根目录 同实际环境保持一致- 模拟真实的ajax请求,前后端同步开发，最后联调接口
通过express的route功能，前端可以自定义ajax请求url及响应内容。 如定义一个/testurl的get请求接口：
//routes/user.js
var mydata={
errorno:0,
msg:"请求成功",
data:[1,2,3,4,5,6,7]
}
router.get('/testurl', function(req, res, next) {
//发送自己定义的json串
res.json(myata);
});然后就可以在页面中使用了：
$.getJSON('/testurl',function(data){
console.log(data) // 输出： Object {errorno: 0, msg: "请求成功", data: Array[7]}
})如果想模拟动态的假数据，可以使用mockJs来尽可能还原真实的数据。暂时先不加。看后期需要情况再定。
- 自动刷新、多设备同步
“自动刷新”并不是新的概念，但对关注“可见”的预览效果的前端开发者来说，它非常好用，可以节约很多时间。 试想开着两个显示器，一个手机、一个pad。你在IDE里新写了一小段代码，按下了ctrl+s保存。紧接着另一个显示器、手机和PAD的应用，就即时变成了更新后的效果，多么的酷。
这里选择了集成BrowserSync，因为它不需要浏览器插件，也不用手工添加代码。一句控制台的命令之后，无论是在手机里还是电脑，无论用多少个浏览器（经测试，IE8+及其它），都可以拥有自动刷新的功能。
它使用了服务器的形式（直接或代理）来处理项目文件。默认情况下，访问它的服务器上的网页，可以看到这样的提示签： "Connected to BrowserSync"这说明当前浏览的网页已连接到BrowserSync。查看一下源码，会发现它们都被添加了与BrowserSync有关的一段script 代码，就像LiveReload浏览器插件做的那样。这些代码会在浏览器和BrowserSync的服务器之间建立web socket连接，一旦有监听的文件发生变化，BrowserSync会通知浏览器。 如果发生变化的文件是css，js ，BrowserSync不会刷新整页，而是直接重新请求这个css或js文件，并更新到当前页中，感觉不到页面的刷新。总之速度就是快。同时也可以为测试同时测试多个设备提供便利。
- 性能优化 自动js css image 压缩合并
使用gulp及其插件,实现自动压缩文件，及js加密。减少线上静态资源文件的体积。详情配置见 gulpfile.js。 学习gulp工具 下面是用到的三个插件：
"gulp-clean-css": "^2.0.7",
"gulp-imagemin": "^3.0.1",
"gulp-uglify": "^1.5.3"其它待添加
- 使用less或sass书写样式文件，使用es6或Typescript书写JavaScript，自动编译。
- 文件指纹 自动为文件名添加 MD5 戳。保证模块上线后不受缓存的影响。
自动提交到git版本库 ，发布到CDN， 解放双手 。
如何使用
安装nodeJs https://nodejs.org
通过git clone 复制项目代码到本地
在项目目录执行命令,安装依赖：
全局安装gulp cli
$ npm install --global gulp-cli- 全局安装pm2 用来管理node进程
$ npm install pm2 -g - 根据packeage.json 安装依赖
$ npm install- 开始工作
$ npm start执行后启动nodejs服务，启动自动刷新监控，并打开chrome浏览器，访问项目根目录 http://localhost:3001
html_views 为静态html页面目录
dev_webroot 为js css image源码目录
开发完毕后执行
npm run build会对dev_webroot目录里的js css images 文件夹 压缩，并生成到 webroot目录 供线上使用
详情配置见 gulpfile.js
PHP后台同学可以直接从html_views 目录 拿到已经拆分了头尾的html页面。部署到php的views视图目录即可。
开发机上的预览地址：http://192.168.100.17:3000
8 years ago