前后台分离式开发实践-01-hello_前后台分离开发-CSDN博客

本文链接：https://blog.csdn.net/u011698550/article/details/80642257

写在前面的话

关于前后台分离式开发详细介绍大家可以看各类大神都已经将利弊、好坏进行了说明，这里不再赘述，我会以连载帖子进行分离式开发实践，以代码和运行结果进行说明。简单说下开发模式的变化：

项目立项
需求分析
服务器端设计
服务器端需求分析
数据库设计
接口设计
功能开发
功能测试
前端设计
前端需求分析
效果图（页面设计）
接口设计
功能开发
功能测试
部署运营
迭代更新

前后台分离

前台+后台独立开发，各自完成自己的业务，前台通过ajax进行数据访问，后台通过json进行响应。以下是一个示意图：

实践开发

1、创建前后台项目

前台：f_project，就一个index.html和jquery.js

后台：s_project，使用一个Servlet进行实现数据

2、接口设计

项目	值
url	students
method	GET
data	{id:1001,name:'cxh',sex:'man'}

3、编写后台接口

package com.xxx.my.server;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class StudentServlet
 */
@WebServlet("/students")
public class StudentServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    response.setContentType("application/json;charset=utf-8");
	    // 拼接json数据，这里拼接只有一条记录
	    String students ="{\"id\":\"1001\",\"name\":\"cxh\",\"sex\":\"man\"}";
	    response.getWriter().write(students);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    response.getWriter().append("[psot]Served at: ").append(request.getContextPath());
	}

}

4、编写前台数据读取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>

    <script src="js/jquery-3.2.1.min.js"></script>

</head>
<body>

<script>
$.getJSON("http://localhost:8080/s_project/students",/* 服务器请求地址 */
    function(json){
        $('#mytb')
            .append("<tr>")
            .append("<td>"+json.id+"</td>")
            .append("<td>"+json.name+"</td>")
            .append("<td>"+json.sex+"</td>")
            .append("</tr>")
    }
);
</script>

<table id="mytb" border="1" cellspacing="0" width="200">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>sex</th>
    </tr>
</table>

</body>
</html>