前后台分离式开发实践-01-hello

• 写在前面的话

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

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

• 前后台分离

前台+后台独立开发，各自完成自己的业务，前台通过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、编写前台数据读取

    
    

    







    
        
        
        
    
id
name
sex

5、将两个项目都运行在同一个tomcat服务器中，启动tomcat服务器

 

6、测试结果

    地址：localhost:8080/f_project/index.html

源码下载：https://download.csdn.net/download/u011698550/10470602