2023-7-15

将数据库中的news表数据显示到前端的HTML中

1. 建立page.html用于显示数据
   
2. 使用Jquery的 $.getJSON()函数发送请求获取数据

  <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function (){
            $.getJSON("http://localhost:8080/viewNews.do", {
                "id":1
            },(newsData)=>{
                console.log("新闻数据：",newsData)
            })
        })
    </script>

3. 在后端新增一个NewsController

package cn.edu.guet.controller;

import cn.edu.guet.bean.News;
import cn.edu.guet.bean.NewsExample;
import cn.edu.guet.common.ResponseData;
import cn.edu.guet.mapper.NewsMapper;
import cn.edu.guet.mvc.annotation.Controller;
import cn.edu.guet.mvc.annotation.RequestMapping;
import cn.edu.guet.util.DBUtil;
import org.apache.ibatis.session.SqlSession;

import java.util.List;

@Controller
public class NewsController {

    @RequestMapping("/viewNews")
    public ResponseData viewNews(Integer id){
        SqlSession sqlSession= DBUtil.getSqlSession();
        NewsMapper newsMapper=sqlSession.getMapper(NewsMapper.class);
//        News news= newsMapper.selectByPrimaryKey(id);
        NewsExample newsExample=new NewsExample();
        newsExample.createCriteria().andIdEqualTo(id);
        News news=newsMapper.selectByExample(newsExample).get(0);
        return ResponseData.ok(news);
    }
    }

4. 在新闻管理下新增查看新闻，并将页面显示指向page.html

<li> <a href="page.html" target="content">查看新闻</a></li>

5. 网页已经可以拿到数据
   
6. 将数据显示到news区域`

    <script>
        $(document).ready(function (){
            $.getJSON("http://localhost:8080/viewNews.do", {
                "id":1
            },(newsData)=>{
                console.log("新闻数据：",newsData)
                // 将数据显示在前端页面上
                let news=document.getElementById("news");
                news.innerHTML=newsData.data.content;
            })
        })
    </script>

效果如下：

数据库中的数据如下

直接用网页对news中的content数据进行显示

效果如下

结合仿-桂电官网

需要将内容显示到“桂电要闻”

事先向数据库存入三条数据

在NewsController中添加listImportantNews函数

由于仿-桂电官网有许多模块，因此，内容也有很多类型。所以news表中增加了type用于区分，listImportantNews就是用于查找不同类型的数据。

在GUET2.0.html中引用Jquery

使用$.getJSON从数据库拿到数据显示在“桂电要闻区域”。在<script></script>区域插入

$(function () {
    $.getJSON("http://localhost:8080/listImportantNews.do", function (data) {
        console.log("桂电要闻：", data);
        // 写获取图片的正则表达式
        var reg=new RegExp("(<img\\s.*?/>)");
        data.data.map(news=>{
            reg.exec(news.content)
            var $1=RegExp.$1;
            console.log("图片元素+++：",$1);
            //给超链接添加点击事件
            var impA=$("<a>");
            $(impA).click(function(){
            //将ID传过去
            localStorage.setItem("currentId",news.id);
            });
            impA.attr("href","page.html").html($1);
            $(".news-img").append(impA);
        })
    })
})

效果如下：

点击跳转

• 先把该新闻的ID预先存起来
  点击之后控制台的情况：

• 跳转到page.html
  

• 在page.html中获取到ID
  

• 根据ID拿到数据显示到page.html
  方法同最开始的一样，最终效果如下：（界面有待优化）