毕设项目之打通前后端更新静态图数据

一·搭建Spring Boot后台程序框架

      在Spring Boot项目中，构建一个标准的MVC（Model-View-Controller）架构是非常常见的。在view模块的view目录下创建以下子模块：bean、conf、controller和mapper。通常view模块是用来存放前端视图文件的，如JSP、Thymeleaf模板等，而不是后端组件。后端组件，如bean、conf、controller和mapper，通常会放在主应用目录或其他逻辑模块下。

各模块功能解释

1. bean：
   • 存放Java Bean，也就是模型类（Model），用于封装数据。这些类通常用于表示数据库中的表或DTO（Data Transfer Objects）。
2. conf：
   • 存放配置类，这些类使用@Configuration注解，并可能使用@Bean注解来定义Spring容器管理的Bean。这些配置类可以用来配置Spring Boot应用的各种组件。
3. controller：
   • 存放控制器类，这些是处理HTTP请求的类。控制器类使用@RestController或@Controller注解，并映射到特定的URL路径。
4. mapper：
   • 如果你的项目使用MyBatis作为ORM框架，mapper目录将存放与数据库交互的Mapper接口。这些接口定义了数据库操作的方法，并通过MyBatis映射到SQL语句。

实现：

src/  
├── main/  
│   ├── java/  
│   │   └── com/yourcompany/yourproject/  
│   │       ├── bean/             # 存放Java Bean（模型类）  
│   │       ├── conf/             # 存放配置类，如@Configuration类  
│   │       ├── controller/       # 存放控制器类，处理请求和响应  
│   │       ├── mapper/           # 存放MyBatis的Mapper接口（如果使用MyBatis）  
│   │       ├── service/          # 存放业务逻辑服务类（可选）  
│   │       └── YourApplication.java # Spring Boot启动类  
│   └── resources/  
│       ├── application.properties # 应用配置文件  
│       ├── static/               # 存放静态资源，如CSS、JS、图片等  
│       └── templates/            # 存放前端模板文件，如Thymeleaf模板  
└── test/  
    └── java/  
        └── com/yourcompany/yourproject/  
            # 存放测试类

二.编写controller用于接收前端数据请求

controller目录下创建ViewController，用户接收前端数据请求：ViewController.java

package org.zn.view.controller;  
  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RestController;  
  
/**  
 * 用来接收前端数据请求的controller  
 */  
//=@Controller+@ResponseBody表示该类是springboot的一个controller，且返回的数据为JSON格式  
@RestController  
@RequestMapping("/view")  
public class ViewController {  
  
    @RequestMapping("/getAreaData")  
    public void getAreaData(){  
        System.out.println("接收前端发起的JSON数据请求，后续需要查询mysql将数据返回");  
    }  
  
}

三.修改前端接口调用后端Controller

目的：通过前端调用后端数据请求

1.运行ViewApplication,启动springboot

2.访问端口 ，再次刷新浏览器，再次参看
localhost:8080/view/getAreaData

3.查看控制台的日志是否有输出，再次刷新浏览器，再次参看控制台

说明接口调用成功！

4.在前端的JS文件添加接口代码

//前端调用后端接口  
    $.getJSON('http://localhost:8080/view/getAreaData', function (data) {  
        myChart.setOption({  
            series:[{  
                data: data.data  
            }]  
        })  
    });  

5.测试前端能否调用后端接口。
（1）重启动ViewApplication
（2）打开前端可视化大屏
（3）查看Spring Boot 控制台日志

说明前端调用后端成功！

四、编写Result类和ViewMapper

1,创建Result类和ViewMapper

Result.java

package org.zn.view.bean;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * 封装响应给前端数据的Javabean（@RestController）会自动将其转换为JSON，前端要求改JSON必须要有data字段
 */

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {

    private Object data;
    private Integer code;
    private String message;

    public static Result success(Object data) {
        Result result = new Result();
        result.setCode(200);
        result.setMessage("success");
        result.setData(data);
        return result;
    }

    public static Result fail() {
        Result result = new Result();
        result.setCode(500);
        result.setMessage("fail");
        result.setData(null);
        return result;

    }

}

ViewMapper.java

package org.zn.view.mapper;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Component;

import java.util.List;
import java.util.Map;
import java.util.Objects;

@Mapper
@Component  // idea高版本不会警告错误，可省略
public interface ViewMapper {
    @Select("select * from table")
    List<Map<String, Objects>> getAreaData();
}

五、导入测试数据，并测试前后端接口调用

1.导入测试数据，找到 mysql数据库中region_total.sql，修改

package org.zn.view.mapper;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Component;

import java.util.List;
import java.util.Map;
import java.util.Objects;

@Mapper
@Component  // idea高版本不会警告错误，可省略
public interface ViewMapper {
    @Select("select * from region_total")
    List<Map<String, Objects>> getAreaData();
}

2.修改 ViewController 文件

package org.zn.view.controller;  
  
import org.lh.view.bean.Result;  
import org.lh.view.mapper.ViewMapper;  
import org.springframework.beans.factory.annotation.Autowired;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RestController;  
  
import java.util.List;  
import java.util.Map;  
import java.util.Objects;  
  
/**  
 * 用来接收前端数据请求的controller  
 */  
//=@Controller+@ResponseBody表示该类是springboot的一个controller，且返回的数据为JSON格式  
@RestController  
@RequestMapping("/view")  
public class ViewController {  
  
    @Autowired  
    private ViewMapper viewMapper;  
    @RequestMapping("/getAreaData")  
    public Result getAreaData(){  
        System.out.println("接收前端发起的JSON数据请求，后续需要查询mysql将数据返回");  
        List<Map<String, Objects>> data = viewMapper.getAreaData();  
        Result result = Result.success(data);  
        return result;   
          
}  
  
}

3.启动 ViewApplication,出现报错说明代码地址书写错误

问题好像出现在我数据可连接错了，修改为正确的数据库后，正常显示。

 这里说明一下具体打通前后端导入数据的框架和过程

框架：

流程：

1.在前端index.js文件中做一个申请：

  //前端调用后端接口--人口地区分布getRegionData---region_total
    $.getJSON('http://localhost:8080/view/getRegionData', function (data) {
        console.log(data);//将接过打印出来，看看是否获取数据成功
        let arr = data.data;
        // console.log(arr);
        // console.log(arr[0].total)
        // console.log(arr[0].region)

        pieChart1.setOption({
            series:[{
                data: data.data
            }]
        });
    }); 



//前端调用后端接口--年龄结构分析getAgeData---age_info
    $.getJSON('http://localhost:8080/view/getAgeData', function (data) {
        console.log(data);
        histogramChart.setOption({
            series:[{
                data: data.data
            }]
        })
    });

 

 2.在viewController.java中写前后端的接口。

 //人口地区分布getRegionData--region_total
    @RequestMapping("/getRegionData")
    public Result getRegionData() {
        System.out.println("接收前端发起的JSON数据请求，后续需要查询mysql将数据返回");
        List<Map<String, Objects>> data = viewMapper.getRegionData();
        Result result = Result.success(data);
        return result;

    }

3.在viewMapper.java中写select语句查询需要目标表中的具体数据。

 //人口地区分布getRegionData---region_total
    @Select("select name,value from region_total")
    List<Map<String, Objects>> getRegionData();

4.最后运行viewApplication启动SpringBoot即可。

启动成功。

5.结果展示：可以看到数据被答印出来了 ，数据在可视化大屏上有正常显示。

总结：通过JDBC完成前后端的连接和数据的导入，各大屏的其他具体数据数据也用此法导入即可。