Question

我要做什么：从HTML输入时间和日期，将这些值与数据库中的列进行比较，然后显示与时间相关的数据＆日期。如果我仅使用时间，则可以使用。但是当我添加有关 date 的代码并尝试将日期格式从yyyy-MM-dd替换为yyyy / MM / dd时，它会出现错误 NullPointerException 。为什么时间具有价值，但 date1 没有价值并变为空。

这是我的代码，谢谢您的帮助。

App Controller.java

package com.example.demo;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import com.example.demo.ProductService;
@Controller
public class AppController {    
    @Autowired
    private ProductService service;     
    @RequestMapping("/ChartLine")
    public String PostForm(@ModelAttribute(value="greeting") Greeting greeting,Model model) {       
            model.addAttribute("greeting", greeting);
            String time = greeting.getTime();
            String date = greeting.getDate();
            String date1 = date.replace('-', '/');      
            List<Object[]> listData = service.listData(time,date1);
            model.addAttribute("listData", listData);
            List<Object[]> listTime = service.listTime(time,date1);
            model.addAttribute("listTime", listTime);       
            return "ChartLine";     
    }   
}

ProductRepository.java

package com.example.demo;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;
import com.example.demo.Product;
@Repository
public interface ProductRepository extends JpaRepository<Product, Long> {
    @Query(value="SELECT tag00 FROM Product WHERE time LIKE ?1% AND date = ?2",nativeQuery =true)
    public List<Object[]> findByTag00(String time, String date1);   
    @Query(value="SELECT time  FROM Product WHERE time LIKE ?1% AND date = ?2",nativeQuery =true)
    public List<Object[]> findByTime(String time, String date1);
}

ProductService.java

package com.example.demo;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.example.demo.Product;
import com.example.demo.ProductRepository;
@Service
@Transactional
public class ProductService {

    @Autowired
    private ProductRepository repo;

    public List<Product> listAll() {
        return repo.findAll();
    }

    public List<Object[]> listData(String time, String date1) {
        return repo.findByTag00(time, date1);
    }

    public List<Object[]> listTime(String time, String date1) {
        return repo.findByTime(time, date1);
    }

    public void save(Product product) {
        repo.save(product);
    }

    public Product get(long id) {
        return repo.findById(id).get();
    }

    public void delete(long id) {
        repo.deleteById(id);
    }

}

Greeting.java

package com.example.demo;
public class Greeting {
    private String time;
    private String date;
    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time=time;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
         this.date=date;
    }
}

Product.java

package com.example.demo;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class Product {
    public int id;
    public float tag00;
    public String date;
    public String time;
    protected Product() {
    }
    protected Product(int id, float tag00, String date, String time) {
        super();
        this.id = id;
        this.tag00 = tag00;
        this.date = date;
        this.time = time;
    }
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public float getTAG00() {
        return tag00;
    }
    public void setTAG00(float tag00) {
        this.tag00 = tag00;
    }
    public String getDate() {
        return date;
    }
    public void setDate(String date) {
        this.date = date;
    }   
    public String getTime() {
        return time;
    }
    public void setTime(String time) {
        this.time = time;
    }
}

ChartLine.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org">

    <div  style="position:relative;left:50px;top:5px;"  > <!-- Position: relative(tuong quan theo left,right,bottom,top), absolute,fixed -->
         <a href="/home">Home</a>    
    </div> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.5.0"></script> <!-- thu vien dung de hien thi gia tri tren bieu do -->

    <div class="container">
        <canvas id="ChartLine"></canvas>
    </div>
    <div class="container">
        <canvas id="myChart" width ="350" height="350"></canvas>
    </div>

    <body>
    <div id ="container">

        <form action="#" th:action="@{/ChartLine}" th:object="${greeting}" method="post">
        Enter a date :<br>
        <select name ="time" th:field="*{time}">
          <option value="00">0h</option>
          <option value="01">1h</option>
          <option value="02">2h</option>
          <option value="03">3h</option>
          <option value="04">4h</option>
          <option value="05">5h</option>
          <option value="06">6h</option>
          <option value="07">7h</option>
          <option value="08">8h</option>
          <option value="09">9h</option>
          <option value="10">10h</option>
          <option value="11">11h</option>
          <option value="12">12h</option>
          <option value="13">13h</option>
          <option value="14">14h</option>
          <option value="15">15h</option>
          <option value="16">16h</option>
          <option value="17">17h</option>
          <option value="18">18h</option>
          <option value="19">19h</option>
          <option value="20">20h</option>
          <option value="21">21h</option>
          <option value="22">22h</option>
          <option value="23">23h</option>
        </select>
        <input type="date"  th:field="*{date}" ><br>
        <input type="submit"> 
        </form>
        <div  th:object = "${greeting}" > 
            <span  th:text = "*{time}" ></span>
            <span  th:text = "*{date}" ></span>
        </div>

        <div id ="content">
        <script th:inline="javascript"> //dung de chay js trong thymeleaf html 

            let myChart = document.getElementById('myChart').getContext('2d');
            // Global Options
            Chart.defaults.global.defaultFontFamily = 'Lato';
            Chart.defaults.global.defaultFontSize = 18;
            Chart.defaults.g
            let massPopChart = new Chart(myChart, {
              type:'line', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
              data:{
                labels:/*[[${listTime}]]*/,
                datasets:[{
                  label:'Temperature',      
                  data:/*[[${listData}]]*/,      
                  backgroundColor:'rgba(255, 99, 132, 0.6)',             
                  fill: false,
                  borderWidth:1,
                  borderColor:'rgba(255, 0, 0, 0.6)', //thay doi mau cho Line
                  hoverBorderWidth:1,
                  hoverBorderColor:'#111',
                  pointRadius: 5
                }]
              },
              options: {      
                  legend : {
                      display: false,
                  },
                  responsive :  true ,
                  maintainAspectRatio: false,         
                  plugins: { //plugin dung de hien thi gia tri len bieu do
                      datalabels: {
                            display: function(context) {
                                return context.dataIndex % 1; 
                            },
                            backgroundColor: function(context) {
                                return context.dataset.backgroundColor;
                            },
                            backgroundColor: 'rgba(255, 255, 255,0)',
                            borderRadius: 2,
                            anchor : 'start',
                            align : 'top',
                            color: 'black',
                            font: {
                                weight: 'bold'
                            },
                            formatter: Math.round
                        }
                    },
                  scales: {//scales dung de cai dat option cho cot X,Y
                      yAxes: [{
                          ticks: {
                              fontColor : 'blue'
                          },
                      }],
                      xAxes: [{
                          ticks: {
                              fontColor: 'blue'
                          },
                      }]
                  }
              }
            });    
            </script>  
        </div>      
    </div>
    </body>
</html>

Home.html

    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="UTF-8" />
      <title>First Demo</title>
      <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
   </head>
   <body>
       <input type="button"  onclick="location.href='/ChartLine'" value="Line Chart" style="position:relative;width:100px"> 
       <br>
       <br>
       <input type="button"  onclick="location.href='/ChartBar'" value="Bar Chart" style="position:relative;width:100px"> 
       <br>
       <br>
       <input type="button"  onclick="location.href='/ChartPie'" value="Pie Chart" style="position:relative;width:100px"> 
   </body>
</html>

Answer 1

与团乐一起工作后，终于发生了这种情况，

这是home.html在他的项目中的内容

   <input type="button"  onclick="location.href='/ChartLine'" value="Line Chart" style="position:relative;width:100px"> 
   <br>
   <br>
   <input type="button"  onclick="location.href='/ChartBar'" value="Bar Chart" style="position:relative;width:100px"> 
   <br>
   <br>
   <input type="button"  onclick="location.href='/ChartPie'" value="Pie Chart" style="position:relative;width:100px">

问题在于何时尝试转到ChartLine.html

onclick =“ location.href ='/ ChartLine'”

上面的代码段被重定向到该页面。

但是在ChatLine.html中，表单操作也是“ / ChartLine”

<form action="#" th:action="@{/ChartLine}" th:object="${greeting}" method="post">

因此，发生的事情是在加载表单之前启动了api调用。然后所有表单字段值都传递为null。

作为解决方案，我们可以将AppController中的RequestMapping更改为以下内容

@RequestMapping("/ReqChartLine")

和另一个请求方法来初始化这样的表单

@RequestMapping("/ChartLine")
public String ChartLineFormView(Model model){
    model.addAttribute("greeting",new Greeting());
    return "ChartLine";
}

和ChrtLine.html将acion组合成

<form action="#" th:action="@{/ReqChartLine}" th:object="${greeting}" method="post">

java.lang.NullPointerException：使用Spring Boot时为null

1 个答案: