Node iTrip PC酒店前后端分离重构（Express+E

原先的iTrip网站是用jsp开发的，每次改个小小的需求，哪怕是一个小小的样式，也调的很恼火，还需要麻烦后端小哥帮我调试。 吃够了jsp的苦，在我的观念中，能不用jsp就不用了，这次酒店改版需求，准备用node分离出来，这样后端小哥就阔以给我提供接口就妥妥哒了。

目录结构###

• 项目生成，使用express-generator
  1. 全局安装npm install express-generator -g
  2. express [你的项目名称]
  3. npm start 就阔以启动node服务
• 改造
  1. 用ejs替换默认使用的jade模板，npm i ejs --save
  app.engine('.html', ejs.__express);
  app.set('view engine', 'html');
  2. 修改静态资源为static下的dist
  app.use(express.static(path.join(__dirname, 'static/dist')));
  3. 将路由踢出来放在routes中，并在app.js中引用
  require('./routes')(app);
  route下index.js内容
  module.exports = function(app){
  app.use('/hotel', require('./hotel'));
  app.use('/', require('./home'));
  }
  4.mod/config
  module.exports = {
  hostname: "",
  apiServer,//内网
  activityServer: ,
  path:,//页面跳转地址 || 数据访问接口地址
  pic:,//图片地址
  ugly:false,//压缩代码 加上hash值
  publicPath://打包静态资源路径
  }
  5.mod/request http.request封装 用到了promise.all执行多个操作，避免多个回调函数的嵌套（eventproxy可控制并发）
  Promise.all(fetchPageUrl) .then(function(Pages) {
  console.log("sucess")
  callback && callback(Pages);
  }).catch(function(e){
  console.log("error")
  error && error(e);
  })
• 静态资源
  静态资源在static目录。
  dist是经过webpack编译后的输出目录
  src是是开发目录
  webpack.config.js webpack的配置文件，使用webpack编译静态资源使用到的插件
  1.编译ES6语法的babel
  2. extract-text-webpack-plugin css单独打包
  new ExtractTextPlugin("assets/css/[name]"+hash+".css")
  3. glob 拆分文件路径
  var getEntry = function(url,cut) {
  var entry = {};
  glob.sync(url).forEach(function (name) {
  var key = "",value = "";
  var str = name.split(cut)[1];
  key = str.substring(1,str.lastIndexOf('.'));
  value = __dirname + name.substring(1);
  if(key != "" && key.indexOf(".") == -1 ){
  entry[key] = value;
  }
  });
  return entry;
  }
  4.html-webpack-plugin 单独打包html

使用的技术栈###

1. express
2. ejs
3. webpack
4. es6

遗留问题###

1. 在webpack.config.js中输入设置publicPath设置为<%=conf.publicPath%> 这样自动编译的js和css路径前可以带着<%=conf.publicPath%> 根据发布不同环境就能设置publicPath，但是CSS中的图片资源本人意愿想保持相对路径，然后也会加上<%=conf.publicPath%>，然后傻白甜css并不认识这个是什么，但是publicPath不能设置多个。目前解决办法是在将config.js中的publicPath配置成线上cdn的域名访问路径， 用ugly来判断，当ugly为true时，将静态资源CSS和js打包，已经将publicPath设置成线上环境。当ugly为false是，就是准备来发预发布环境或者测试环境的，不需要打包压缩静态资源也不用考虑缓存，但是问题又来了，这样预发布测试完成后需要发布线上，还需要我本地手动的将ugly改成true打包，总是感觉好不科学啊。
2. node访问的是java的接口，两个都放在一个服务器上，在node中获取数据使用域名的方式，就需要经过域名解析找到服务器，相当于出去绕了一圈发现就在一个地方，浪费资源，目前的做法是请求数据的时候直接使用内网IP，在请求的header中将HOST改成需要的域名，但是这样的局限性是没有做负载均衡。知识不够用啦_(≧▽≦)/

后期会继续改进问题

该文章仅仅是记录自己开发的一个过程，以下是参照学习的网址，谢谢这些同学的热心分享，给了我很大的启发
[feeiluuo的博客+express+webpack+react搭建项目]