前后端分离实践

 

1.背景    

由于在最近的一个项目中，我们团队成员中有前端开发人员，后端开发人员。为了加快项目的进度，使得前后端同步开发。所以就敲定这个项目使用前后端分离的架构。

2.大致流程

前后端分离架构的大致流程：前端HTML页面使用ajax调用后端Restful api 接口，后端应用服务器前端页面使用json格式的数据进行交互。

3.具体实践

前后端开发人员如何

协作

1. 在后端开发人员设计好数据库之后。首先前后端的开发人员要进行沟通和交流。后端开发人员要定下接口的规范和数据格式。比如：请求成功时返回什么格式的数据，请求失败时返回什么格式的数据。

2. 然后由后端开发人员写接口（部分，或者是全部）文档，让前端开发人员可以开展他们的工作，也就是可以做到前后端人员同步开发。这里我建议是先写部分接口文档，这样前端工作就可以更快的开展。

3.当接口文档里面的数据需要修改的时候，需要前后端两边的开发人员都做出相应的修改。

4.接口文档示例：

{
    "status": 0,
    "msg": "登录成功！",
    "data": {
        "employee": {
            "id": 12,
            "name": "小网",
            "stoId": 1
        },
    },
    "success": true
}

服务器配置

服务器是使用web服务器和一个应用服务器。

原因：由于是前后端分离的架构，所以需要一个Web服务器来做请求接口的转发。

web服务器：这里我选择开源的Nginx服务器作为中间服务器来做请求的转发。因为Nginx是可以支持高并发连接，内存消耗少，还支持后续应用服务器的扩展，也可以做负载均衡。

应用服务器：由于后端使用的是SSM+Shiro的框架，所以使用Tomcat作为应用服务器。

Nginx服务器的配置示例（只做参考）：

server {
        listen       80;
        server_name  [服务器公网ip地址];
#静态页面
	location ~ .*\.(htm|html)$ {
#要部署的静态页面所在的文件夹
	    root /usr/local/aaa_html/X-admin;
            index index.html;
            #转发任何请求到 index.html
	}
	location ~ \.(images|javascript|js|css|flash|media|static)$ {
            root /usr/local/aaa_html/X-admin;
            #过期30天，静态文件不怎么更新，过期可以设大一点，如果频繁更新，则可以设置得小一点。
            expires 5m;
        }
	location ~ /(images|fonts|js|lib)/{
		root /usr/local/aaa_html/X-admin;	
	}
#请求转发
    location / {
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' '*';
		add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
	}
	location /maven-web {
			add_header 'Access-Control-Allow-Origin' $http_origin;
			add_header 'Access-Control-Allow-Credentials' 'true';
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			add_header 'Access-Control-Allow-Headers' 'DNT,web-token,authorization,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
			add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
                       if ($request_method = 'OPTIONS') {
                                add_header 'Access-Control-Max-Age' 1728000;
                                add_header 'Access-Control-Allow-Origin' '*';
				add_header 'Access-Control-Allow-Headers' 'DNT,web-token,authorization,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                                add_header 'Content-Type' 'text/plain; charset=utf-8';
                                add_header 'Content-Length' 0;
                                return 204;
                        }

		proxy_pass http://127.0.0.1:8080;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_connect_timeout 5;
	}
	location /xxxxx/ {
		proxy_pass http://localhost:63342;
	}
  
    }

注意：

1." location /maven-web " 中的maven要改为自己部署在tomcat中war包的名字。

2." location /xxxxx/ "是配置在前端项目和后端项目不在同一个服务器上，也就是为了前端开发人员在自己浏览器上测试才不会遇到跨域的问题。

3.由于前后端分离，所以浏览器在请求的时候会有CORS跨域的问题。当添加自定义的头部的时候，是复杂请求，所以浏览器会先发一个OPTIONS的请求。所以需要配置 “ $request_method = "OPTIONS" ”，如上所示。

4.把前端页面部署在服务器上，参考上面代码中的静态页面配置。

5..负载均衡的情况大家可以去查一下具体如何配置。

如何把前端页面，后端项目部署在服务器

在前端页面，后端的服务全部完成后。部署到自己的服务器上，使用以上nginx的配置，把配置中的：" add_header 'Access-Control-Allow-Origin' '*';  " 的  “  *  ” 都改为自己的服务器ip地址。以防止别人恶意攻击。

最后

在前后端分离的实践中，我觉得最重要的就是前后端开发人员的沟通和交流，前后端的开发人员沟通好了，可以避免很多不必要的麻烦和矛盾。

注：笔者是第一次进行前后端分离的实践，不足之处，还望提醒见谅，顺便提醒一下笔者更改不足之处。