起因

目前妈妈送房采用的是经典的MVC架构，前端模版使用vm，对于即会java又懂前端的人来说，这种方式没有什么不好，反而开发会很快。

但是，现在的互联网是分工协作的，我们现在的方式是前端开发人员负责静态页面样式及交互的开发，后端人员拿到静态页面进行数据的绑定，如果一次能搞定，那当然没什么问题，但是一旦涉及到bug的修改，功能的调整，那就是折磨了。再加上几经人手，前端代码已经丑陋不堪。所以，我萌生出了对项目进行重构并进行前后端分离的想法。为什么要前后端分离，这篇文章讲得不错

刚好最近学习了react，实战中也尝试了下，并且我们的这个项目特别适合做成一个SPA（single page application，单页面应用），所以就决定利用其进行逐步重构。

项目路径规划

因为SPA的代码最后都需要编译打包成一个文件，所以我把我的前端工程跟java工程放在一起，方便文件直接生成到java工程中

project.png

webpack打包路径设置

...
var staticPath = '../../webapp/assets'; // java工程静态文件路径
var viewFilename= '../../webapp/view/main/mmsf/mmsfIndex.vm' // java工程试图文件路径
...
// 文件打包后直接生成到java工程下
    entry: {
      bundle:path.resolve(__dirname, 'app/main.js')
  },
  output: {
    path: path.resolve(__dirname ,staticPath ),
    publicPath: '/',
    filename: '/js/mmsf/[name].js'
  },
...
// 图片
  module: {
    loaders:[
      ...
      { test: /\.(png|jpg)$/, loader: 'file-loader?limit=8192&name=i/mmsf/[name].[ext]'},
    ]
  },
...
// html文件及配置文件处理
plugins: [
    ...
    new CopyWebpackPlugin([
      { from: './app/mmsfIndex.html', to: path.resolve(__dirname, viewFilename) },
      { from: './app/config.js', to: path.resolve(__dirname ,staticPath + '/js/mmsf/config.js') },
    ]),
  ]

如何方便的与后端进行接口联调

前后端分离时，数据交换一般采取http的方式。开发时由于前后端不在同一个域，需要进行一些处理，以解决js跨越的限制。
常见的方法有：

• 浏览器设置（chrome），原来确实是一个最方便的方式，在新版的chrome浏览器上试过，但是没成功
• jsonp的方式，有点麻烦，放弃
• 后端设置http头（Access-Allow-Control-Origin）,本公司后端不会，懒得去求他们，还是自己想办法吧。
• ngix，最后决定用这个

ngix配置

如果我将ngix配置成如下所示：

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        #access_log  logs/host.access.log  main;
        location /api {
                  proxy_connect_timeout   3;  
            proxy_send_timeout      30;  
            proxy_read_timeout      30;
                  #rewrite (.*) site-web-personal/$1 permanent;
                  proxy_set_header   Host    $host;
            proxy_set_header   Remote_Addr    $remote_addr;
            proxy_set_header   X-Real-IP    $remote_addr;
            proxy_set_header   X-Forwarded-For    $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.10.171:8282/api;
        }       
        location / {
                  proxy_connect_timeout   3;  
            proxy_send_timeout      30;  
            proxy_read_timeout      30;
                  #rewrite (.*) site-web-personal/$1 permanent;
                  proxy_set_header   Host    $host;
            proxy_set_header   Remote_Addr    $remote_addr;
            proxy_set_header   X-Real-IP    $remote_addr;
            proxy_set_header   X-Forwarded-For    $proxy_add_x_forwarded_for;
            proxy_pass http://192.168.10.169:8888/;  
        }       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

这样当我访问http://localhost/*时会转发到我本地起的前端调试web服务，当我访问http://localhost/api时会转发到后端接口服务。

但是，我们的后端一开始并没有统一规划，所以也就没有区别接口的url地址和访问页面的url地址。

最后想到的办法是，利用eclipse->server可以给工程配置一个统一的url根目录来解决：

Paste_Image.png

然后ngix配置改成:

...
location /house-web-web {
    proxy_connect_timeout   3;  
    proxy_send_timeout      30;  
    proxy_read_timeout      30;
    #rewrite (.*) site-web-personal/$1 permanent;
    proxy_set_header   Host    $host;
    proxy_set_header   Remote_Addr    $remote_addr;
    proxy_set_header   X-Real-IP    $remote_addr;
    proxy_set_header   X-Forwarded-For    $proxy_add_x_forwarded_for;
    proxy_pass http://192.168.10.171:8282/house-web-web;
}       
...

此时，访问http://localhost/house-web-web的请求会转发给后台接口，当然前端也需要进行配置：

// 上线需要改这两个参数
window.debug = true;

// baseurl
window.apiBase = window.debug ? '/house-web-web' : ''

// 前端路由
window.url = {
    'discoverIndex' : '/discover/index.htm', // 发现首页
    'discoverDetail' :  '/discover/detail.htm', //  发现详情
    'searchIndex' : '/search/index.htm', // 搜索首页
    'searchDetail' : '/search/detail.htm' // 搜索详情
}

// api
 window.api = {
    'discoverIndex': window.apiBase + '/discover/getIndexJson.htm', //发现首页
    'discoverDetail': window.apiBase + '/discover/detailPage.htm', // 发现详情
 }

这样，此时在浏览器中访问http://localhost/#/discover/index.htm则会到本地前端调试的服务，在该页面中访问http://localhost/house-web-web/discover/getIndexJson.htm则会访问后台的接口

前端路由

react的前端路由有两种方式hashHistory和browserHistory
由于开发时webpack-dev-server启动的服务不支持browserHistory，所以开发时用hashHistory，生产上用browserHistory

  <Router history={window.debug ? hashHistory : browserHistory}>
            <Route path="/">
                 <Route path={window.url.discoverIndex} component={DiscoverList}/>
                 <Route path={window.url.discoverDetail} component={DiscoverDetail}/>
                 <Route path={window.url.searchIndex} component={SearchIndex}/>
                  <Route path={window.url.searchDetail} component={SearchDetail}/>
            </Route>
          </Router>

图片处理

图片有点不好弄，因为react中引入图片是相对于工程的路径，而到浏览器中访问时是相对于java静态文件目录的路径，所以这里的处理方式是：

• 对于小图片，统一使用base64格式，这样不仅优化了访问速度，也解决了图片路径问题
• 对于大图片，保证前端图片路径与java静态文件图片路径一致，且图片的访问路径用绝对路径

例子：

background-image: url('/assets/i/mmsf/search-banner.png')

为了确保webpack对图片进行处理，在react中对用到的图片均import

// 这里引入只是为了使webpack将图片拷贝到正确的路径
import bannerElderly from '../../assets/i/mmsf/discover-detail-banner.png'
import iconShare from '../../assets/i/mmsf/icon-share.png'

后端url处理

由于生产上还是需要使用真实路径，所以需要后端进行配合，所有用前端路由的url地址均渲染mmsfIndex.vm

Paste_Image.png

总结

总的下来，实现这一方案，用了很多非主流的方法，也让我知道了做技术只要掌握了原理，是可以根据自己的需要进行变通的。接下来就是逐步把原来的页面都迁移到新项目中来了，可以跟原来丑陋的代码说拜拜咯。
代码地址