第一个web项目（续）后端与前端交互

这里是不断发芽的山有木兮，此文章是在第一个web项目之后做的一些变动
同样的源码可以在github查看，附上链接Github-web

1、用 web 的url的key传送两个参数，后端打印出来

一个web项目不能单单是只能在后端输出。
如果我们想像以前天气接口请求天气一样请求数据呢？该如何做呢？
我们先在doGet方法中添加一些东西

String citykey = request.getParameter("citykey");
//get 获取，paramiter 参数
System.out.println(citykey);

读取前面发送的key就是在其后面加问好然后在输入一些值，模板：

http://localhost:8080/Web_war/web.html?citykey=123456&password=123

在这里对应后面输入问号，在传入参数，后台就可以打印出来（这里我吧web改成了web.html)

其实不该也是一样

2、okhttp 调用天气 api 获取天气 json

接下来我们以天气接口为例，后端调用api

下面是一个天气接口（成都）

http://wthrcdn.etouch.cn/weather_mini?citykey=101270101

再举几个例子，下面几个城市的citykey代码如下：（其他可以自行百度）

北京:101010100
朝阳:101010300
顺义:101010400

下载一个postman，点击下载
其他工具比如Apifox（国产）
postman不需注册，双击exe文件多打开几次就会出现这个界面

将天气的api输入


点击右上角的复制按钮复制下来，准备直接放到代码中
在项目中新建一个WeatherServlet

此时web.xml多了一行WeatherServlet

在下面添加servletmapping

    <servlet-mapping>
        <servlet-name>WeatherServlet</servlet-name>
        <url-pattern>/getWeater.do</url-pattern>
    </servlet-mapping>

然后在WeatherServlet.java的doget中添加一句话，测试

 System.out.println("获取天气");

打印成功，测试表示没有问题

然后调用request，传递citykey测试，再将postman中生成的代码复制进去，但是发现报红，说明缺少依赖，我们用的是okhttp3，百度搜索以下

添加依赖

    <dependency>
      <groupId>com.squareup.okhttp3</groupId>
      <artifactId>okhttp</artifactId>
      <version>4.9.3</version>
    </dependency>

获取到的代码需要稍微改造一下，因为很多不需要的，另外citykey也不能写死

改造后的代码

        //postman复制粘贴后发现报红
        //需要 添加依赖 百度搜索 maven okhttp
        OkHttpClient client = new OkHttpClient().newBuilder()
                .build();
//        MediaType mediaType = MediaType.parse("text/plain");
//        RequestBody body = RequestBody.create(mediaType, "");
        //重复了，有冲突
        Request okRequest = new Request.Builder()
                .url("http://wthrcdn.etouch.cn/weather_mini?citykey="+citykey)
                //修改url不能写死
//                .url("http://wthrcdn.etouch.cn/weather_mini?citykey=101270101")
//                .method("GET", body)
                .build();
        Response okResponse = client.newCall(okRequest).execute();
        System.out.println(okResponse.body().string());

然后重启服务
在浏览器中输入citykey，此处我用的是成都的citykey

http://localhost:8080/Web_war/getWeather.do?citykey=101270101

至此，已经能够通过api获取天气的json

3、Servlet 返回 json 数据给前端

可见我们的数据只能在后台显示出来，如何才能发送到前端呢？

再在WeatherServlet.java中继续修改代码，让服务器做出响应

        //响应:天气接口返回json数据到前端
        response.setContentType("application/json;charset=UTF-8");
        //此处是写的内容类型取决于tomcat中的配置的类型
        PrintWriter out = response.getWriter();
        out.print(okResponse.body().string(