前后端分离例子，解析存储链表信息的 json数据

一. 项目描述

一个简单的demo，主要是用来实现 “告别jsp” 这个功能，前端代码中不含有任何java代码，实现前后端的分离。

二. 具体实现

Servlet做后台，提供一个获得存储User信息的链表，然后在这个链表处理成json数据类型，提供给前端开发者使用。

注：此处的Servlet可以用其他框架爱替代，为了简单，此处使用Servlet就可以了。

---

1. 前端代码  特别关注解析的代码

    
    
    
    
    



 


    

    
所有航班
    
    

    
 
        
编号
        
起点站
        
终点站
        
价格
        
时间
        
余量
    
    
    

    
    

	
	
	

2. Servlet代码

package cn.smileyan.servlet;

import java.io.IOException;
import java.util.LinkedList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import cn.smileyan.domain.Airline;

/**
 * Servlet implementation class HelloServlet
 */
public class HelloServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		LinkedList list=new LinkedList();
		for(int i=0; i<7; i++) {
			Airline airline=new Airline();
			airline.setAl_id(i+1);
			airline.setAl_price(1000*i);
			airline.setAl_t_number(i);
			airline.setE_address("China");
			airline.setE_time("201808250810");
			airline.setS_address("America");
			airline.setS_time("201808240810");
			list.add(airline);
		}

		Gson son = new Gson();
		StringBuilder stringBuilder = new StringBuilder();
		// 字符串处理
		short i;
		for (i=0; i

3. 实体类

package cn.smileyan.domain;

public class Airline {
    private int al_id;
    private String s_address;
    private String e_address;
    private String s_time;
    private String e_time;
    public String getE_time() {
		return e_time;
	}

	public void setE_time(String e_time) {
		this.e_time = e_time;
	}

	private double al_price;
    private int al_t_number;

    public int getAl_id() {
        return al_id;
    }

    public void setAl_id(int al_id) {
        this.al_id = al_id;
    }

    public String getS_address() {
        return s_address;
    }

    public void setS_address(String s_address) {
        this.s_address = s_address;
    }

    public String getE_address() {
        return e_address;
    }

    public void setE_address(String e_address) {
        this.e_address = e_address;
    }

    public String getS_time() {
        return s_time;
    }

    public void setS_time(String s_time) {
        this.s_time = s_time;
    }

    public int getAl_t_number() {
        return al_t_number;
    }

    public void setAl_t_number(int al_t_number) {
        this.al_t_number = al_t_number;
    }

    public double getAl_price() {
        return al_price;
    }

    public void setAl_price(double al_price) {
        this.al_price = al_price;
    }
}

4. web.xml配置

  Archetype Created Web Application
  
  	HelloServlet
  	HelloServlet
  	
  	cn.smileyan.servlet.HelloServlet
  
  
  	HelloServlet
  	/HelloServlet
  

运行结果描述，当直接访问HelloServlet的时候，会看到json数据

{"al_id":1,"s_address":"America","e_address":"China","s_time":"201808240810","e_time":"201808250810","al_price":0.0,"al_t_number":0},
{"al_id":2,"s_address":"America","e_address":"China","s_time":"201808240810","e_time":"201808250810","al_price":1000.0,"al_t_number":1},
{"al_id":3,"s_address":"America","e_address":"China","s_time":"201808240810","e_time":"201808250810","al_price":2000.0,"al_t_number":2},
{"al_id":4,"s_address":"America","e_address":"China","s_time":"201808240810","e_time":"201808250810","al_price":3000.0,"al_t_number":3},
{"al_id":5,"s_address":"America","e_address":"China","s_time":"201808240810","e_time":"201808250810","al_price":4000.0,"al_t_number":4},
{"al_id":6,"s_address":"America","e_address":"China","s_time":"201808240810","e_time":"201808250810","al_price":5000.0,"al_t_number":5},
{"al_id":7,"s_address":"America","e_address":"China","s_time":"201808240810","e_time":"201808250810","al_price":6000.0,"al_t_number":6}

当直接访问index.html就可以看到前端界面。

总结，总而言之就是在后台将数据格式化处理（为了方便前端解析，所有json数据之间添加一个逗号），前端解析起来也简单很多，并且这种ajax方式给人体验也很好，前后端的可维护性增强。