基于JSP+JavaBean+Servlet+MySQL技术实现简易全国主要城市天气实时情况查询网站。

sakura momoko

已于 2024-06-20 16:57:52 修改

阅读量990

点赞数 38

文章标签： java mysql 开发语言

于 2024-06-20 16:47:06 首次发布

本文链接：https://blog.csdn.net/qq_65907715/article/details/139836307

版权

一、项目背景

随着人们生活水平的不断提高，天气情况对于日常生活的影响越来越大。为了满足人们对天气信息的实施需求，一个能够实时查询全国主要城市天气情况的网站就显得尤其重要。这样一个网站可以帮助用户快速了解全国主要城市天气状况，为他们出行、生活和工作提供一个合理安排。此外，通过这个网站，用户可以获取较为全面的天气数据，便于了解气象趋势，进项相应的防范和应对措施。因此建立一个基于jsp的全国主要城市天气实时情况查询的网站具有很高的实用价值和市场前景。

二、项目需求分析

功能需求：

1.展示页面实时查询：用户可以实时查询全国各省会城市、直辖市、港澳台的天气情况，包括温度、风向、风速和天气现象的气象数据。

2.在管理页面中，对于展示页面的数据进行添加、修改、删除。

技术需求：

1.网站实现技术为JSP技术，主要利用了JSP\JavaBean\Servlet技术。

2.数据库技术：使用MySQL数据库来管理天气数据。

三、项目详细设计

1.系统的设计框图：

关键技术点：

（1）展示页面的关键技术点：Java数据库连接（JDBC）与MySQL数据库进行交互、数据库的设计、样式和布局。

（2）管理页面的关键技术点：

①servlet根据请求调用JavaBean处理业务，在JavaBean连接数据库取出数据（其中数据来源是写了一个脚本文件从百度天气接口取出数据放入数据库中），然后将结果返回servlet，在servlet中将结果保存到请求对象中，再由servlet将数据转发到jsp。

②引入 jQuery 库，使用 JavaScript 处理前端的交互逻辑。

③动态表单和事件处理：在表格中使用动态生成的输入框，用户可以修改各个字段的值。通过 JavaScript 事件处理，获取用户修改后的值，并通过 AJAX 请求将修改提交到服务器。

④天气接口获取数据并写入数据库

⑤数据库的设计

方案实现：

（1）展示页面：

数据库设计：首先，在数据库中创建了一个名为 weather_data 的表，用于存储城市的天气信息。表包含字段：id (主键，城市编码), city (城市名称), weather (天气现象), wind_dir (风向), wind_class (风力), temp (最高气温)。

JSP页面 (index.jsp,show.jsp)：index.jsp页面展示查询功能，show.jsp展示查询城市的天气结果。

show.jsp实现：首先页面加载时，获取当前日期并格式化。使用内联样式和外部样式表美化页面背景。嵌套脚本程序，在页面上方展示城市天气信息的表格，连接到 MySQL 数据库，执行查询语句获取特定城市的天气数据，遍历查询结果，输出表格中的每一行，显示城市、天气现象、风向、风力和最高气温等信息。

管理页面：

JavaBean类（InforBean）：用于封装天气信息，这个类拥有私有属性以及相应的公共构造方法和访问方法（get和set）。

JavaBean类（Dao）：用于连接数据库实现查询和更新功能。

Servlet类（ServletManage）：编写了一个 Servlet 类 ServletManage 用于处理用户的 GET 请求。在 doGet 方法中，调用Dao中的查询方法，返回的结果数据存储在一个 List<InforBean> 中，然后转发带数据的request到目标manage.jsp页面，主要用的是MVC模式。

Servlet类（ServletUpdate）：编写了一个 Servlet 类 ServletUpdate 用于处理用户的 GE 请求。在 doGet 方法中，设置响应的内容类型为JSON格式，确保前端能够正确解析服务器返回的数据。获取请求参数，包括城市id (id)、城市名称 (city)、天气现象 (weather)、风向 (wind_dir)、风力 (wind_class)、气温 (temp)。调用Dao中的更新方法，更新数据库。

天气接口（WeatherApi）:通过调用百度天气接口，将返回的数据（Json格式）用fastjson转换为java的Map对象，并写入到数据库

四、项目运行部分关键代码

1.BaiduRespBean.java

package api.finalexam;

public class BaiduRespBean {
    CLocation location;
    CNow now;

    public CLocation getLocation() {
        return location;
    }

    public void setLocation(CLocation location) {
        this.location = location;
    }

    public CNow getNow() {
        return now;
    }

    public void setNow(CNow now) {
        this.now = now;
    }
}

class CLocation{
    String country; // 国家
    String province; // 省份
    String city; // 城市

    public String getCountry() {
        return country;
    }

    public void setCountry(String country) {
        this.country = country;
    }

    public String getProvince() {
        return province;
    }

    public void setProvince(String province) {
        this.province = province;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }
}

class CNow{
    String text; //天气现象
    Integer temp; //气温
    String wind_class; //风力
    String wind_dir; //风向
    String uptime; //更新时间 20231010151500

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public String getWind_class() {
        return wind_class;
    }

    public void setWind_class(String wind_class) {
        this.wind_class = wind_class;
    }

    public String getWind_dir() {
        return wind_dir;
    }

    public void setWind_dir(String wind_dir) {
        this.wind_dir = wind_dir;
    }

    public String getUptime() {
        return uptime;
    }

    public void setUptime(String uptime) {
        this.uptime = uptime;
    }

    public Integer getTemp() {
        return temp;
    }

    public void setTemp(Integer temp) {
        this.temp = temp;
    }
}

2.WeatherApi.java

package api.finalexam;

import com.alibaba.fastjson.JSONObject;
import server.finalexam.Dao;
import server.finalexam.InformBean;

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;
import java.time.Duration;
import java.util.HashMap;
import java.util.Map;

public class WeatherApi {
    // 全局HttpClient:
    private static HttpClient httpClient = HttpClient.newBuilder().build();

    // 全国主要城市区域编码
    private static Map<Integer, String> districtMap = new HashMap<>();
    static {
        districtMap.put(110100, "北京市");
        districtMap.put(120100, "天津市");districtMap.put(130100, "石家庄市");districtMap.put(140100, "太原市");
        districtMap.put(150100, "呼和浩特市");districtMap.put(210100, "沈阳市");districtMap.put(220100, "长春市");
        districtMap.put(230100, "哈尔滨市");districtMap.put(310100, "上海市");districtMap.put(320100, "南京市");
        districtMap.put(330100, "杭州市");districtMap.put(340100, "合肥市");districtMap.put(350100, "福州市");
        districtMap.put(360100, "南昌市");districtMap.put(370100, "济南市");districtMap.put(410100, "郑州市");
        districtMap.put(420100, "武汉市");districtMap.put(430100, "长沙市");districtMap.put(440100, "广州市");
        districtMap.put(450100, "南宁市");districtMap.put(460100, "海口市");districtMap.put(500100, "重庆市");
        districtMap.put(510100, "成都市");districtMap.put(520100, "贵阳市");districtMap.put(530100, "昆明市");
        districtMap.put(540100, "拉萨市");districtMap.put(610100, "西安市");districtMap.put(620100, "兰州市");
        districtMap.put(630100, "西宁市");districtMap.put(640100, "银川市");districtMap.put(650100, "乌鲁木齐市");
        districtMap.put(810101, "香港");districtMap.put(820010, "澳门");districtMap.put(710113, "台北市");
    }

    public static <JSONObject> void main(String[] args) throws Exception {
        // 调用疫情接口url 这是一个http Get请求
        String url = "https://api.map.baidu.com/weather/v1/?data_type=now&ak=bbLF0RxX5aRwUXxhkBuvGXpkvi3rWIzg&district_id=";

        // 遍历主要城市区域编码，获取天气实况
        for (Map.Entry<Integer,String> item : districtMap.entrySet()) {
            Integer district_id = item.getKey(); // 城市区域编码

            String resp = httpGet(url + district_id);

            // 返回的是一个字符串 json格式。用fastjson转换为java的Map对象
            // 需要对照百度天气的接口文档里描述的返回结果json结构来写代码
            JSONObject jsonObject = JSONObject.parseObject(resp, JSONObject.class);

            //根据返回json数据格式，先判断是否返回了错误信息
            Integer resp_status = jsonObject.getInteger("status");
            if ( resp_status != 0 ) {
                throw new RuntimeException(jsonObject.getString("message"));
            }

            //没有出错，将json格式中的result转换为我们自己的javabean
            BaiduRespBean baidu_resp = jsonObject.getJSONObject("result").toJavaObject(BaiduRespBean.class);
            System.out.println(jsonObject);

            Dao.update(new InformBean(
                    district_id,
                    baidu_resp.getLocation().getCity(), //城市
                    baidu_resp.getNow().getText(), //天气现象
                    baidu_resp.getNow().getWind_dir(), //风向
                    baidu_resp.getNow().getWind_class(), //风力
                    baidu_resp.getNow().getTemp(), //气温
                    baidu_resp.getNow().getUptime() //更新时间
            ));
        }

    }

    static String httpGet(String url) throws Exception {
        HttpRequest request = HttpRequest.newBuilder(new URI(url))
                // 设置Header:
                .header("User-Agent", "Java HttpClient").header("Accept", "*/*")
                // 设置超时:
                .timeout(Duration.ofSeconds(5))
                // 设置版本:
                .version(HttpClient.Version.HTTP_2).build();
        HttpResponse<String> response = httpClient.send(request, HttpResponse.BodyHandlers.ofString());
        return response.body();
    }
}

3.index.jsp

<%@ page import="java.util.List" %>
<%@ page import="server.finalexam.InformBean" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title style="color: #333; text-align: center;">城市天气信息</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-size:cover;
      background-image: url("/img/tianqi.jpg");
    }
    button {
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
    }
    button:hover {
      background-color: #007bff;
    }

  </style>
  <!-- 引入 Bootstrap 样式 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

</head>
<body>
<a href="manage">
  <button class="btn btn-primary">点击跳转到管理页面</button>
</a>
<div>
  <a target="_blank" href="https://weather.lenovo.com.cn/#/now?source_type=2&amp;area_code=2256" class="n-weather">
    <span>彭山区 </span>
  </a>
</div>
<div class="container mt-3">
  <h2>全国主要城市天气实时情况</h2>

  <!-- 下拉菜单 -->
  <form method="get" action="show.jsp">
    <label for="city">选择城市：</label>
    <select name="city" id="city" class="form-control">
      <option value="" disabled selected>请选择城市</option>
      <option value="北京市">北京市</option>
      <option value="上海市">上海市</option>
      <option value="天津市">天津市</option>
      <option value="石家庄市">石家庄市</option>
      <option value="太原市">太原市</option>
      <option value="呼和浩特市">呼和浩特市</option>
      <option value="沈阳市">沈阳市</option>
      <option value="长春市">长春市</option>
      <option value="哈尔滨市">哈尔滨市</option>
      <option value="南京市">南京市</option>
      <option value="杭州市">杭州市</option>
      <option value="合肥市">合肥市</option>
      <option value="福州市">福州市</option>
      <option value="南昌市">南昌市</option>
      <option value="济南市">济南市</option>
      <option value="郑州市">郑州市</option>
      <option value="武汉市">武汉市</option>
      <option value="长沙市">长沙市</option>
      <option value="广州市">广州市</option>
      <option value="南宁市">南宁市</option>
      <option value="海口市">海口市</option>
      <option value="重庆市">重庆市</option>
      <option value="成都市">成都市</option>
      <option value="贵阳市">贵阳市</option>
      <option value="拉萨市">拉萨市</option>
      <option value="西安市">西安市</option>
      <option value="兰州市">兰州市</option>
      <option value="西宁市">西宁市</option>
      <option value="银川市">银川市</option>
      <option value="乌鲁木齐市">乌鲁木齐市</option>
      <option value="台北市">台北市</option>
      <option value="香港">香港</option>
      <option value="澳门">澳门</option>

      <!-- 添加其他城市选项 -->
    </select>
    <!-- 添加按钮 -->
    <button type="submit" class="btn btn-primary mt-2">获取天气信息</button>
  </form>
</div>

<!-- 引入 Bootstrap JS 及 Popper.js -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</body>
</html>

五、项目运行效果截图

1.首页

2.管理页面

3.WeatherApi查询到的天气数据写入数据库

六、源码下载加我wx交流

七、点赞收藏评论

看完觉得有用的话希望你能点赞收藏评论！！！感谢！！！

sakura momoko

关注

38
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
基于JSP+JavaBean+Servlet+MySQL技术实现简易全国主要城市天气实时情况查询网站。

随着人们生活水平的不断提高，天气情况对于日常生活的影响越来越大。为了满足人们对天气信息的实施需求，一个能够实时查询全国主要城市天气情况的网站就显得尤其重要。这样一个网站可以帮助用户快速了解全国主要城市天气状况，为他们出行、生活和工作提供一个合理安排。此外，通过这个网站，用户可以获取较为全面的天气数据，便于了解气象趋势，进项相应的防范和应对措施。因此建立一个基于jsp的全国主要城市天气实时情况查询的网站具有很高的实用价值和市场前景。
复制链接

扫一扫