前后端对接 |
您所在的位置：网站首页 › 前后端对接会遇到什么问题 › 前后端对接 |
前后端对接
|
前后端对接
接口对接相关注解
接受并处理前端传来的数据
接口对接
在做项目时，前端和后端在项目一开始就要一起讨论接口的写法，需要传什么参数，接收的数据类型等等。确定好了方向，再实现各自的功能将事半功倍。这里我以一对对应的前后端接口为例。 前端接口 后端接口  接下来我们就可以通过写测试类或者用postman来测试请求了： 
相关注解
@CrossOrigin 在前后分离的架构下，跨域问题难免会遇见，比如，站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。 出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。 跨域的体现，在于它的域名不同或者端口不同，但要注意以下的形式为非跨域模式 http://www.example.com/index.html ==> http://www.example.com/login.html@ResponseBody 1、@ResponseBody注解的作用是将controller的方法返回的对象 通过适当的转换器 转换为指定的格式之后，写入到response对象的body区（响应体中），通常用来返回JSON数据或者是XML数据，需要注意的呢，在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，它的效果等同于通过response对象输出指定格式的数据。 这里还要着重强调一下，要通过@ResponseBody 注解 将返回的json字符串放入响应体中，然后在前台js才能拿到json字符串进行解析，如果不加，响应体中就没有放入json字符串，前台自然是拿不到数据的，希望大家别理解错。 2、
@RequestMapping("/login")
@ResponseBody
public User login(User user){
return user;
}
User字段：userName pwd; 那么在前台接收到的数据为：’{“userName”:“xxx”,“pwd”:“xxx”}’ 效果等同于如下代码： @RequestMapping("/login") public void login(User user, HttpServletResponse response){ //通过response对象输出指定格式的数据 response.getWriter.write(JSONObject.fromObject(user).toString()); } @RequestParam 设置前端传来的参数@GetMapping和@RequestMapping @GetMapping用于将HTTP get请求映射到特定处理程序的方法注解 具体来说，@GetMapping是一个组合注解，是@RequestMapping(method = RequestMethod.GET)的缩写。 @PostMapping用于将HTTP post请求映射到特定处理程序的方法注解 具体来说，@PostMapping是一个组合注解，是@RequestMapping(method = RequestMethod.POST)的缩写 接受并处理前端传来的数据 接受http请求数据并返回字符串的工具类 public class HttpRequest { /** * 向指定URL发送GET方法的请求 * * @param url * 发送请求的URL * @param param * 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。 * @return URL 所代表远程资源的响应结果 */ public static String sendGet(String url, String param) { String result = ""; BufferedReader in = null; try { String urlNameString = url + "?" + param; URL realUrl = new URL(urlNameString); // 打开和URL之间的连接 URLConnection connection = realUrl.openConnection(); // 设置通用的请求属性 connection.setRequestProperty("accept", "*/*"); connection.setRequestProperty("connection", "Keep-Alive"); connection.setRequestProperty("Content-Type","application/json;charset=UTF-8"); connection.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)"); // 建立实际的连接 connection.connect(); // 获取所有响应头字段 Map map = connection.getHeaderFields(); // 遍历所有的响应头字段 // for (String key : map.keySet()) { // System.out.println(key + "--->" + map.get(key)); // } // 定义 BufferedReader输入流来读取URL的响应 in = new BufferedReader(new InputStreamReader( connection.getInputStream(), StandardCharsets.UTF_8)); String line; while ((line = in.readLine()) != null) { result += line; } } catch (Exception e) { System.out.println("发送GET请求出现异常！" + e); e.printStackTrace(); } // 使用finally块来关闭输入流 finally { try { if (in != null) { in.close(); } } catch (Exception e2) { e2.printStackTrace(); } } return result; } /** * 向指定 URL 发送POST方法的请求 * * @param url * 发送请求的 URL * @param param * 请求参数，请求参数应该是 name1=value1&name2=value2 的形式。 * @return 所代表远程资源的响应结果 */ public static String sendPost(String url, String param) { PrintWriter out = null; BufferedReader in = null; String result = ""; try { URL realUrl = new URL(url); // 打开和URL之间的连接 URLConnection conn = realUrl.openConnection(); // 设置通用的请求属性 conn.setRequestProperty("accept", "*/*"); conn.setRequestProperty("connection", "Keep-Alive"); conn.setRequestProperty("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)"); // 发送POST请求必须设置如下两行 conn.setDoOutput(true); conn.setDoInput(true); // 获取URLConnection对象对应的输出流 out = new PrintWriter(conn.getOutputStream()); // 发送请求参数 out.print(param); // flush输出流的缓冲 out.flush(); // 定义BufferedReader输入流来读取URL的响应 in = new BufferedReader( new InputStreamReader(conn.getInputStream())); String line; while ((line = in.readLine()) != null) { result += line; } } catch (Exception e) { System.out.println("发送 POST 请求出现异常！" + e); e.printStackTrace(); } //使用finally块来关闭输出流、输入流 finally { try { if (out != null) { out.close(); } if (in != null) { in.close(); } } catch (IOException ex) { ex.printStackTrace(); } } return result; } public static void main(String[] args) { //发送 GET 请求 String s=HttpRequest.sendGet("http://10.1.161.130:6080/arcgis/rest/services/QSCY/MapServer", "f=pjson"); System.out.println(s); } } 处理得到的数据，因为数据源时一个Json页面，所以转成Json格式操作，这里只记录了其中一个取数据节点操作。 String param = "f=pjson"; String resultString = HttpRequest.sendGet(mapService, param); JSONObject resultJson = JSONObject.parseObject(resultString); for (Map.Entry entry:resultJson.entrySet()) { if(entry.getKey().equals("layers")){ return resultJson.getJSONArray("layers"); //获取节点为layers的数据并转换为Json数组 } }tips：我们传给前端数据时可以把数据统一封装成一个类 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |