springboot接收前端ajax请求并调用聚合数据接口获取数据

举个栗子,比如说调用聚合数据的微信精选接口获得微信新闻数据,前端使用ajax,请求访问springboot程序,boot再请求聚合数据接口,拿到返回结果集并在页面显示出来,按钮可以切换新闻,就像这样子:
springboot接收前端ajax请求并调用聚合数据接口获取数据_第1张图片
由此看出,咱使用了bootstrap萌萌的圆角按钮,证明你得引入jq和bootstrap~
回归正题,我们先看文档,参考聚合数据:微信精选
为了简化参数,咱只传入一个页数,留作切换,大家可以根据需要进行参数的传递。
从页面开始(bootstrap风格~):


然后,就要想到,页面加载的时候发起一个ajax,请求到新闻数据,而后,每单击一次切换则切换新闻,因此,需要将ajax放入一个方法中:

var req_wepick = "http://你服务器的IP或域名:boot程序端口号/wepick";   //微信精选 参数page 页数
var we_index = 1;  //从第一条开始
$(function(){
	getWeNews();	//页面加载获取新闻
});
// 微信精选切换获得新闻
$('#change_we').click(function(){
	we_index += 1;	//获得下一条新闻
	getWeNews();
});
function getWeNews(){
$.ajax({
    	type: 'get',
    	url: req_wepick +"?page="+ we_index,
    	success: function(data){	// 微信精选  
    		$('#we_title').text(data.result.list[0].source);
    		$('#we_desc').text(data.result.list[0].title);
    		$('#we_mark').text(data.result.list[0].mark);
    		$('#we_read').attr("href",data.result.list[0].url);
    		$('#we_img').attr("src",data.result.list[0].firstImg);
      		console.log(data);
    	},
    	error: function(data){}
	});
}

然后就是后端服务接收请求并实现从接口获取数据了;项目简便使用,咱是先不考虑安全因素,直接交由控制器实现:

//02005.微信精选  https://www.juhe.cn/docs/api/id/147
    @ResponseBody   //响应写到body中
    @CrossOrigin   //跨域支持
    @GetMapping(value = "wepick")
    public Map getWeChatPick(@RequestParam("page") int page) throws Exception{
        EncryptUtil des = new EncryptUtil(API.ENCRYPT_KEY, "utf-8");  // 这句是我接口的加密,可忽略
        Map req_param = new HashMap();   // 请求参数
        req_param.put("key", des.deCode(API.JUHE_WEIXIN_KEY));  // 你的聚合数据key
        req_param.put("ps", 1); // 每页条数
        req_param.put("pno", page); // 页数
        req_param.put("dtype","json");
        String res = NetTool.getNetData("http://v.juhe.cn/weixin/query", req_param, "GET");   // 这个是封装的一个请求方法,具体见下面
        JSONObject obj = JSONObject.parseObject(res);
        Map map = obj.getInnerMap();
        return map;
    }
    // 网络相关工具类,参考官方修改------------------
    import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import java.util.Map;

/**
 * 网络连接相关工具类
 */
public class NetTool {
    public static final String userAgent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36";
    public static final int DEF_CONN_TIMEOUT = 30000;
    public static final int DEF_READ_TIMEOUT = 30000;
    public static final String DEF_CHATSET = "UTF-8";

    /**
     * 创建Http连接并调用接口数据
     */
    public static String getNetData(String strUrl, Map param, String method) throws Exception{
        HttpURLConnection conn = null;
        BufferedReader reader = null;
        String res = null;
        try {
            StringBuffer sb = new StringBuffer();
            if(null == method || "GET".equals(method)){
                strUrl = strUrl + "?" + urlEncode(param);
            }
            URL url = new URL(strUrl);
            conn = (HttpURLConnection) url.openConnection();
            if(null == method || "GET".equals(method)){
                conn.setRequestMethod("GET");
            }else{
                conn.setRequestMethod("POST");
                conn.setDoOutput(true);
            }
            conn.setRequestProperty("User-agent",userAgent);
            conn.setUseCaches(false);
            conn.setConnectTimeout(DEF_CONN_TIMEOUT);
            conn.setReadTimeout(DEF_READ_TIMEOUT);
            conn.setInstanceFollowRedirects(false);
            conn.connect();
            if (null != param && "POST".equals(method)){
                try {
                    DataOutputStream dos =new DataOutputStream(conn.getOutputStream());
                    dos.writeBytes(urlEncode(param));
                } catch (Exception e){
                    e.printStackTrace();
                }
            }
            InputStream is = conn.getInputStream();
            reader = new BufferedReader(new InputStreamReader(is, DEF_CHATSET));
            String strRead = null;
            while (null != (strRead = reader.readLine())){
                sb.append(strRead);
            }
            res = sb.toString();
        }catch (IOException e){
            e.printStackTrace();
        }finally {
            if (null != reader){
                reader.close();
            }
            if (null != conn){
                conn.disconnect();
            }
        }
        return res;
    }

    /**
     * 转码
     */
    public static String urlEncode(Mapdata){
        StringBuilder sb = new StringBuilder();
        for (Map.Entry i : data.entrySet()) {
            try {
                sb.append(i.getKey()).append("=").append(URLEncoder.encode(i.getValue()+"","UTF-8")).append("&");
            } catch (UnsupportedEncodingException e){
                e.printStackTrace();
            }
        }
        return sb.toString();
    }
}

OK,就这么些了,大家有什么看法,欢迎留言。

你可能感兴趣的:(java,js)