新闻管理系统——首页实现

ღ冷风20°C᭄ꦿ࿐

已于 2022-03-16 17:46:41 修改

阅读量3.4k

点赞数 11

文章标签： java spring boot intellij-idea html

于 2022-03-16 15:32:32 首次发布

本文链接：https://blog.csdn.net/weixin_50241387/article/details/123526699

版权

目录

1、左侧新闻分类列表

①首先查询列表的话一般都是分页查询，需要引入分页插件

②国内新闻分类列表(分类查询新闻信息)

③编写业务逻辑代码——定义service接口

④编写接口实现类

⑤编写控制器代码

⑦效果图

2、新闻标题——获取首页的新闻列表信息

①在NewsMapper.xml映射文件中进行编写sql语句

②编写dao数据库访问层代码，添加关于查询新闻列表的抽象方法，通过mybatis框架跟sql语句关联起来

④控制器代码——加入从mybatis-plus中实现的通用方法来获取列表信息

⑤效果图

1、左侧新闻分类列表

①首先查询列表的话一般都是分页查询，需要引入分页插件

配置类：MybatisPlusConfig.java

package com.gec.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class MyBatisPlusConfig {

    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //分页插件
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

②国内新闻分类列表(分类查询新闻信息)

其实质是按照新闻分类来查询新闻列表信息，用sql语句去编写根据新闻分类的编号去查询出具体的新闻信息。

NewsMapper.java

package com.gec.newsproject.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.gec.newsproject.entity.News;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

public interface NewsMapper extends BaseMapper<News> {

    @Select("select * from news where ntid = #{topicId} order by ncreateDate desc limit ${number}")
    List<News> getNewsListByTopicId(@Param("topicId") int topicId, @Param("number") int number);
}

③编写业务逻辑代码——定义service接口

NewsService.java

package com.gec.newsproject.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.gec.newsproject.entity.News;

import java.util.List;

public interface NewsService extends IService<News> {

    /**
     * 通过新闻分类来获取新闻
     * @param topicId
     * @param number
     * @return
     */
    public List<News> getNewsListByTopicId(int topicId,int number);
}

④编写接口实现类

NewsServicelmpl.java

package com.gec.newsproject.service.impl;


import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.gec.newsproject.dao.NewsMapper;
import com.gec.newsproject.entity.News;
import com.gec.newsproject.service.NewsService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Transactional
@Service
public class NewsServiceImpl extends ServiceImpl<NewsMapper, News> implements NewsService {

    @Override
    public List<News> getNewsListByTopicId(int topicId, int number) {
        return  baseMapper.getNewsListByTopicId(topicId,number);
    }
}

⑤编写控制器代码

HelloController.java

package com.gec.newsproject.controller;

import com.gec.newsproject.entity.News;
import com.gec.newsproject.service.NewsService;
import com.gec.newsproject.vo.NewsQueryVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
public class HomeController {

    @Autowired
    NewsService newsService;

    @RequestMapping(value = {"/","/index.html","/home.html"})
    public String index(Model model, NewsQueryVo newsQueryVo){
        //先查询出来左侧的分类标题
        List<News> newsList1 = newsService.getNewsListByTopicId(1, 6);
        List<News> newsList2 = newsService.getNewsListByTopicId(2, 6);
        List<News> newsList3 = newsService.getNewsListByTopicId(3, 6);
        model.addAttribute("newsList1",newsList1);
        model.addAttribute("newsList2",newsList2);
        model.addAttribute("newsList3",newsList3);
        return "index";
    }
}

⑥修改前面编写的index.html，在首页加入新闻列表信息

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新闻管理系统</title>
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div id="header">
    <div id="top_login">
        <form method="post" th:action="@{/users/login}" th:if="${session.loginUser==null}">
            <label> 登录名 </label>
            <input type="text" name="userName" id="uname" value="" class="login_input"/>
            <label> 密&#160;&#160;码 </label>
            <input type="password" name="password" id="upwd" value="" class="login_input"/>
            <input type="submit" class="login_sub" value="登录"/>
            <label id="error"></label>
            <img src="/images/friend_logo.gif" alt="Google" id="friend_logo"/>
        </form>
        <p th:if="${session.loginUser!=null}">
            <span>欢迎您：[[${session.loginUser.uname}]]</span>
            <a th:href="@{/news/manager}">进入控制台</a>
            <a href="/users/logout">退出</a>
        </p>
    </div>
    <div id="nav">
        <div id="logo"><img src="/images/logo.jpg" alt="新闻中国"/></div>
        <div id="a_b01"><img src="/images/a_b01.gif" alt="" style="margin-top: 12px;"/></div>
    </div>
</div>
<!-- 页面主体区域 -->
<div id="container">
    <!-- 左侧分类栏 -->
    <div class="sidebar">
        <h1><img src="/images/title_1.gif" alt="国内新闻"/></h1>
        <div class="side_list">
            <ul>
                <li th:each="news : ${newsList1}"><a th:href="@{/news/detail/}+${news.nid}"><b> [[${news.ntitle}]] </b></a></li>
            </ul>
        </div>
        <h1><img src="/images/title_2.gif" alt="国际新闻"/></h1>
        <div class="side_list">
            <ul>
                <li th:each="news : ${newsList2}"><a th:href="@{/news/detail/}+${news.nid}"><b> [[${news.ntitle}]] </b></a></li>
            </ul>
        </div>
        <h1><img src="/images/title_3.gif" alt="娱乐新闻"/></h1>
        <div class="side_list">
            <ul>
                <li th:each="news : ${newsList3}"><a th:href="@{/news/detail/}+${news.nid}"><b> [[${news.ntitle}]] </b></a></li>
            </ul>
        </div>
    </div>
    <!-- 主体区域 -->



        <div class="picnews">
            <ul>
                <li><a href="#"><img src="/images/Picture1.jpg" width="249" alt=""/> </a><a href="#">幻想中穿越时空</a></li>
                <li><a href="#"><img src="/images/Picture2.jpg" width="249" alt=""/> </a><a href="#">国庆多变的发型</a></li>
                <li><a href="#"><img src="/images/Picture3.jpg" width="249" alt=""/> </a><a href="#">新技术照亮都市</a></li>
                <li><a href="#"><img src="/images/Picture4.jpg" width="249" alt=""/> </a><a href="#">群星闪耀红地毯</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 底部 -->
<div th:insert="common/common::index-bottom"></div>
</body>
</html>

⑦效果图

2、新闻标题——获取首页的新闻列表信息

①在NewsMapper.xml映射文件中进行编写sql语句

NewsMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.gec.newsproject.dao.NewsMapper">

    <!-- 通用查询映射结果 -->
    <resultMap id="BaseResultMap" type="com.gec.newsproject.entity.News">
        <id column="nid" property="nid" />
        <result column="ntid" property="ntid" />
        <result column="ntitle" property="ntitle" />
        <result column="nauthor" property="nauthor" />
        <result column="ncreateDate" property="ncreateDate" />
        <result column="npicPath" property="npicPath" />
        <result column="ncontent" property="ncontent" />
        <result column="nmodifyDate" property="nmodifyDate" />
        <result column="nsummary" property="nsummary" />
    </resultMap>

    <!-- 通用查询结果列 -->
    <sql id="Base_Column_List">
        nid, ntid, ntitle, nauthor, ncreateDate, npicPath, ncontent, nmodifyDate, nsummary
    </sql>

    <select id="getNewsListByPage" resultType="com.gec.newsproject.entity.News">
        select * from news
        <where>
            <if test="news!=null and news.ntid!=null">
                and ntid = #{news.ntid}
            </if>
        </where>
        order by ncreateDate desc
    </select>

</mapper>

②编写dao数据库访问层代码，添加关于查询新闻列表的抽象方法，通过mybatis框架跟sql语句关联起来

NewsMapper.java

package com.gec.newsproject.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.gec.newsproject.entity.News;
import com.gec.newsproject.vo.NewsQueryVo;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface NewsMapper extends BaseMapper<News> {

    //分类查询新闻信息
    @Select("select * from news where ntid = #{topicId} order by ncreateDate desc limit ${number}")
    List<News> getNewsListByTopicId(@Param("topicId") int topicId, @Param("number") int number);

    //分页查询新闻列表
    IPage<News> getNewsListByPage(@Param("page")IPage<News> page, @Param("news")NewsQueryVo newsQueryVo);
}

③service业务层代码

NewsService.java

package com.gec.newsproject.service;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.IService;
import com.gec.newsproject.entity.News;
import com.gec.newsproject.vo.NewsQueryVo;

import java.util.List;

public interface NewsService extends IService<News> {

    /**
     * 通过新闻分类来获取新闻
     * @param topicId
     * @param number
     * @return
     */
    public List<News> getNewsListByTopicId(int topicId,int number);

    /**
     * 分页查询新闻列表
     * @param page
     * @param newsQueryVo
     * @return
     */
    IPage<News> getNewsListByPage(IPage<News> page, NewsQueryVo newsQueryVo);
}

④编写service实现类

NewsServiceImpl.java

package com.gec.newsproject.service.impl;


import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.gec.newsproject.dao.NewsMapper;
import com.gec.newsproject.entity.News;
import com.gec.newsproject.service.NewsService;
import com.gec.newsproject.vo.NewsQueryVo;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Transactional
@Service
public class NewsServiceImpl extends ServiceImpl<NewsMapper, News> implements NewsService {

    @Override
    public List<News> getNewsListByTopicId(int topicId, int number) {
        return  baseMapper.getNewsListByTopicId(topicId,number);
    }

    @Override
    public IPage<News> getNewsListByPage(IPage<News> page, NewsQueryVo newsQueryVo) {
        return baseMapper.getNewsListByPage(page,newsQueryVo);
    }
}

⑤控制器代码

HomeController.java

package com.gec.newsproject.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.gec.newsproject.entity.News;
import com.gec.newsproject.service.NewsService;
import com.gec.newsproject.vo.NewsQueryVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
public class HomeController {

    @Autowired
    NewsService newsService;

    @RequestMapping(value = {"/","/index.html","/home.html"})
    public String index(Model model, NewsQueryVo newsQueryVo){
        //先查询出来左侧的分类标题
        List<News> newsList1 = newsService.getNewsListByTopicId(1, 6);
        List<News> newsList2 = newsService.getNewsListByTopicId(2, 6);
        List<News> newsList3 = newsService.getNewsListByTopicId(3, 6);
        model.addAttribute("newsList1",newsList1);
        model.addAttribute("newsList2",newsList2);
        model.addAttribute("newsList3",newsList3);

        //创建分页查询对象 帮助分页查询信息
        //设置页码和分页的 数量
        IPage<News> page = new Page<>(newsQueryVo.getPageNo(),newsQueryVo.getPageSize());
        page = newsService.getNewsListByPage(page, newsQueryVo);
        model.addAttribute("page",page);
        //设置分页信息参数
        model.addAttribute("newVo",newsQueryVo);
        return "index";
    }
}

⑥修改html页面信息

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新闻管理系统</title>
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div id="header">
    <div id="top_login">
        <form method="post" th:action="@{/users/login}" th:if="${session.loginUser==null}">
            <label> 登录名 </label>
            <input type="text" name="userName" id="uname" value="" class="login_input"/>
            <label> 密&#160;&#160;码 </label>
            <input type="password" name="password" id="upwd" value="" class="login_input"/>
            <input type="submit" class="login_sub" value="登录"/>
            <label id="error"></label>
            <img src="/images/friend_logo.gif" alt="Google" id="friend_logo"/>
        </form>
        <p th:if="${session.loginUser!=null}">
            <span>欢迎您：[[${session.loginUser.uname}]]</span>
            <a th:href="@{/news/manager}">进入控制台</a>
            <a href="/users/logout">退出</a>
        </p>
    </div>
    <div id="nav">
        <div id="logo"><img src="/images/logo.jpg" alt="新闻中国"/></div>
        <div id="a_b01"><img src="/images/a_b01.gif" alt="" style="margin-top: 12px;"/></div>
    </div>
</div>
<!-- 页面主体区域 -->
<div id="container">
    <!-- 左侧分类栏 -->
    <div class="sidebar">
        <h1><img src="/images/title_1.gif" alt="国内新闻"/></h1>
        <div class="side_list">
            <ul>
                <li th:each="news : ${newsList1}"><a th:href="@{/news/detail/}+${news.nid}"><b> [[${news.ntitle}]] </b></a></li>
            </ul>
        </div>
        <h1><img src="/images/title_2.gif" alt="国际新闻"/></h1>
        <div class="side_list">
            <ul>
                <li th:each="news : ${newsList2}"><a th:href="@{/news/detail/}+${news.nid}"><b> [[${news.ntitle}]] </b></a></li>
            </ul>
        </div>
        <h1><img src="/images/title_3.gif" alt="娱乐新闻"/></h1>
        <div class="side_list">
            <ul>
                <li th:each="news : ${newsList3}"><a th:href="@{/news/detail/}+${news.nid}"><b> [[${news.ntitle}]] </b></a></li>
            </ul>
        </div>
    </div>
    <!-- 主体区域 -->
    <div class="main">
        <div class="class_type"><img src="/images/class_type.gif" alt="新闻中心"/></div>
        <div class="content">
            <ul class="class_date">
                <li id='class_month'>
                    <a href='/' th:href="@{/index.html}"><b> 全部 </b></a>
                    <a href='#' th:href="@{/index.html(ntid=${topic.tid})}" th:each="topic : ${topicList}"><b> [[${topic.tname}]] </b></a>
                </li>
            </ul>
            <ul class="classlist" th:if="${page.getRecords().size()>0}">
                <li th:each="news : ${page.getRecords()}">
                    <a  th:href="@{/news/detail/}+${news.nid}"> [[${news.ntitle}]] </a>
                    <span th:text="${#dates.format(news.ncreateDate,'yyyy-MM-dd HH:mm:ss')}">2021-02-03 14:20:30</span>
                </li>
                <p align="right">
                    当前页数:[<span th:text="${page.current}">1</span>/<span th:text="${page.pages}">2</span>]&nbsp;
                    <span th:if="${page.current>1}" >
                        <a th:href="@{/index.html(pageNo=1,ntid=${newVo.ntid})}">首页</a>
                        <a th:href="@{/index.html(pageNo=${page.current - 1},ntid=${newVo.ntid})}">上一页</a>
                    </span>
                    <span th:if="${page.current<=1}" >
                        首页&nbsp;
                        上一页&nbsp;
                    </span>
                    <span th:if="${page.current<page.pages}">
                        <a th:href="@{/index.html(pageNo=${page.current + 1},ntid=${newVo.ntid})}">下一页</a>
                        <a th:href="@{/index.html(pageNo=${page.pages},ntid=${newVo.ntid})}">末页</a>
                    </span>
                    <span th:if="${page.current>=page.pages}">
                        下一页&nbsp;
                        末页&nbsp;
                    </span>
                </p>
            </ul>
            <p style="text-align: center;font-size: 18px;margin-top: 20px;" th:if="${page.getRecords().size()==0}">
                暂无数据
            </p>
        </div>
        <div class="picnews">
            <ul>
                <li><a href="#"><img src="/images/Picture1.jpg" width="249" alt=""/> </a><a href="#">幻想中穿越时空</a></li>
                <li><a href="#"><img src="/images/Picture2.jpg" width="249" alt=""/> </a><a href="#">国庆多变的发型</a></li>
                <li><a href="#"><img src="/images/Picture3.jpg" width="249" alt=""/> </a><a href="#">新技术照亮都市</a></li>
                <li><a href="#"><img src="/images/Picture4.jpg" width="249" alt=""/> </a><a href="#">群星闪耀红地毯</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 底部 -->
<div th:insert="common/common::index-bottom"></div>
</body>
</html>

⑦效果图

3、新闻分类——分页查询新闻列表

①dao层

TopicMapper.java

package com.gec.newsproject.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.gec.newsproject.entity.Topic;

public interface TopicMapper extends BaseMapper<Topic> {
}

②service接口

TopicService.java

package com.gec.newsproject.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.gec.newsproject.entity.Topic;

public interface TopicService extends IService<Topic> {
}

③service实现类

TopicServiceImpl.java

package com.gec.newsproject.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.gec.newsproject.dao.TopicMapper;
import com.gec.newsproject.entity.Topic;
import com.gec.newsproject.service.TopicService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

@Service
@Transactional
public class TopicServiceImpl extends ServiceImpl<TopicMapper, Topic> implements TopicService {
}

④控制器代码——加入从mybatis-plus中实现的通用方法来获取列表信息

HomeController.java

package com.gec.newsproject.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.gec.newsproject.entity.News;
import com.gec.newsproject.entity.Topic;
import com.gec.newsproject.service.NewsService;
import com.gec.newsproject.service.TopicService;
import com.gec.newsproject.vo.NewsQueryVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
public class HomeController {

    @Autowired
    NewsService newsService;

    @Autowired
    TopicService topicService;

    @RequestMapping(value = {"/","/index.html","/home.html"})
    public String index(Model model, NewsQueryVo newsQueryVo){
        //先查询出来左侧的分类标题
        List<News> newsList1 = newsService.getNewsListByTopicId(1, 6);
        List<News> newsList2 = newsService.getNewsListByTopicId(2, 6);
        List<News> newsList3 = newsService.getNewsListByTopicId(3, 6);
        //将数据存入模型中
        model.addAttribute("newsList1",newsList1);
        model.addAttribute("newsList2",newsList2);
        model.addAttribute("newsList3",newsList3);

        //查询出所有分类信息
        List<Topic> topicList = topicService.list();
        model.addAttribute("topicList",topicList);

        //创建分页查询对象 帮助分页查询信息
        //设置页码和分页的 数量
        IPage<News> page = new Page<>(newsQueryVo.getPageNo(),newsQueryVo.getPageSize());
        page = newsService.getNewsListByPage(page, newsQueryVo);
        model.addAttribute("page",page);
        //设置分页信息参数
        model.addAttribute("newVo",newsQueryVo);
        return "index";
    }
}