基于Java+MySQL实现的新闻网站【100011218】

一、系统设计

1.1 ER图

数据库设计1张表，显示页面的各项内容存储表，对应的ER图如图3-1所示。

图3-1 数据库ER图

1.2 UML类图（Class Diagram）

各类的结构及类之间的关系如图2-5所示：

图2-5 用户功能类图

1.3需求分析

按上图设计实现新闻显示页面，页面所需图片，文字均来自数据库。

二、系统实现

2.1 项目结构

2.2 配置文件

在项目下引入Vue的js包

扫描二维码关注公众号，回复： 15522836 查看本文章

2.2.1 jdbc.properties文件

该配置文件主要是以文件形式保存数据库的驱动类名称，连接数据库的URL地址，访问数据库的用户名及对应的密码，程序运行时会读取该文件相关信息，避免硬编码，当相关信息发生变化时，只需修改配置文件而不用修改源代码，增加程序的可扩展型。

jdbc.username=root
jdbc.password=123456
jdbc.url=jdbc:mysql://47.110.70.107:8081/news?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8
jdbc.className=com.mysql.jdbc.Driver

2.2.2 mybatis-config.xml文件

描述该文件作用，并对里面的配置进行解释

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <settings>
        <setting name="mapUnderscoreToCamelCase" value="true"/>
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    </settings>
    <typeAliases>
        <package name="com.qxx.bean"/>
    </typeAliases>



</configuration>

2.3 实体类News

package com.qxx.bean;

import java.io.Serializable;

public class News implements Serializable {
    private Integer id;//可供查询的id

    private String section;//显示的栏目

    private String href;//各个栏目的连接

    private Integer pid;//各栏目的显示页面父id

    private String showType;//各栏目的显示方式

    private String summary;//显示页面中的概括内容

    private String imgSrc;//页面中的图片资源

    private String artical;//相关的内容存储

    private static final long serialVersionUID = 1L;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getSection() {
        return section;
    }

    public void setSection(String section) {
        this.section = section == null ? null : section.trim();
    }

    public String getHref() {
        return href;
    }

    public void setHref(String href) {
        this.href = href == null ? null : href.trim();
    }

    public Integer getPid() {
        return pid;
    }

    public void setPid(Integer pid) {
        this.pid = pid;
    }

    public String getShowType() {
        return showType;
    }

    public void setShowType(String showType) {
        this.showType = showType == null ? null : showType.trim();
    }

    public String getSummary() {
        return summary;
    }

    public void setSummary(String summary) {
        this.summary = summary == null ? null : summary.trim();
    }

    public String getImgSrc() {
        return imgSrc;
    }

    public void setImgSrc(String imgSrc) {
        this.imgSrc = imgSrc == null ? null : imgSrc.trim();
    }

    public String getArtical() {
        return artical;
    }

    public void setArtical(String artical) {
        this.artical = artical == null ? null : artical.trim();
    }
}

2.4 接口类NewsMapper

package com.qxx.dao;

import com.qxx.bean.News;
import com.qxx.bean.NewsExample;
import java.util.List;
import org.apache.ibatis.annotations.Param;

public interface NewsMapper {
    long countByExample(NewsExample example);

    int deleteByExample(NewsExample example);

    int deleteByPrimaryKey(Integer id);

    int insert(News record);

    int insertSelective(News record);

    List<News> selectByExampleWithBLOBs(NewsExample example);

    List<News> selectByExample(NewsExample example);

    News selectByPrimaryKey(Integer id);

    int updateByExampleSelective(@Param("record") News record, @Param("example") NewsExample example);

    int updateByExampleWithBLOBs(@Param("record") News record, @Param("example") NewsExample example);

    int updateByExample(@Param("record") News record, @Param("example") NewsExample example);

    int updateByPrimaryKeySelective(News record);

    int updateByPrimaryKeyWithBLOBs(News record);

    int updateByPrimaryKey(News record);
}

2.5 服务层NewsService

package com.qxx.service;

import com.qxx.bean.News;
import com.qxx.bean.NewsExample;
import com.qxx.dao.NewsMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Service
public class NewsService {
    @Autowired
    NewsMapper newsMapper;
//从后端读取内容后以List的方式存储，并将List存入同一个map中
    public Map<Integer,Object> getColumns() {
        NewsExample newsExample = new NewsExample();
        NewsExample.Criteria criteria = newsExample.createCriteria();
        criteria.andPidEqualTo(0);
        criteria.andShowTypeEqualTo("0");
        List<News> type0List = newsMapper.selectByExample(newsExample);
        NewsExample newsExample2 = new NewsExample();
        NewsExample.Criteria criteria2 = newsExample2.createCriteria();
        criteria2.andPidEqualTo(0);
        criteria2.andShowTypeEqualTo("-1");
        List<News> typeSpecialList = newsMapper.selectByExample(newsExample2);
        Map<Integer,Object> map = new HashMap<>();
        map.put(0,type0List);
        map.put(-1,typeSpecialList);
        return map;
    }

    public List<News> getAll() {
        NewsExample newsExample = new NewsExample();
        return newsMapper.selectByExample(newsExample);
    }

    public Map<Integer, Object> getSectionContent(Integer id){
        NewsExample newsExample = new NewsExample();
        NewsExample.Criteria criteria = newsExample.createCriteria();
        criteria.andPidEqualTo(id);
        criteria.andShowTypeEqualTo("1");
        List<News> type1List = newsMapper.selectByExample(newsExample);
        NewsExample newsExample2 = new NewsExample();
        NewsExample.Criteria criteria2 = newsExample2.createCriteria();
        criteria2.andPidEqualTo(id);
        criteria2.andShowTypeEqualTo("2");
        List<News> type2List = newsMapper.selectByExample(newsExample2);
        Map<Integer,Object> map = new HashMap<>();
        map.put(1,type1List);
        map.put(2,type2List);
        return map;
    }
}

2.6 前端页面显示层index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="GB2312">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Title</title>
</head>
<style>
    hr {
        height: 2px;
        border: none;
        border-top: 2px solid darkred;
    }

    .topBtn {
        background: #ffffff;
        color: grey;
        text-align: center;
        width: 110px;
        height: 30px;
        margin-top: -9px;
        border: none;
        font-weight: bold;
        font-size: 19px;
    }

    form {
        border: solid 1px grey;
    }
    a{
        text-decoration: none;
        color: black;
    }
</style>
<body>
<div id="app">
    <hr/>
    <div>
        <button class="topBtn" v-for="item in columnList[0]"  :id="item.id" @click="changeCss($event)">{
   
   {item.section}}</button>
    </div>
    <div>
    <a v-for="item in columnList[-1]" :href="item.href" style="color: darkred;position: absolute;right: 15px;top: 10px;">+<span style="color: grey">{
   
   {item.section}}</span></a>
    </div>

    <form action="" >
        <div style="display: inline-block;" v-for="item in sectionContentList[1]">

            <img :src="item.imgSrc" alt="" style="height: 180px;width: 360px;"/>
            <span style="font-weight:bold;float: right;width: 280px;">{
   
   {item.section}}</span>
            <br/>
            <span style="float: right;width: 280px;margin-top: -150px;padding-top: 5px;">{
   
   {item.summary}}<br/>
            <a style="color:indianred;float: right;width: 280px;"  :href="item.href">[详细]</a>
            </span>
            <br/>

        </div>
        <div >
            <a v-for="item in sectionContentList[2]" :href="item.href" style="display: inline-block;width: 650px;padding-top: 10px;">o&nbsp;{
   
   {item.section}}</a>
        </div>
    </form>
    <!--    <span v-for="item in columnList[0]">{
   
   {item.section}}</span>-->
    <!--    <span v-for="item in sectionContentList[1]">{
   
   {item.section}}</span>-->
</div>
</body>
<script src="static/js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            columnList: [],
            sectionContentList: [],
            id: 1
        },
        methods: {
            getColumns() {
                var that = this;
                axios.get("getColumns.do").then(function (response) {
                        console.log(response.data);
                        that.columnList = response.data.extend.columnList;
                    }
                )
            },
            getContent() {
                var that = this;
                axios.get("getSection.do?id=" + that.id).then(function (response) {
                    that.sectionContentList = response.data.extend.sectionContentList;
                })
            },
//改变按钮显示颜色
            changeCss(e){
                e= e.target;
                var that =this;
                that.id=e.id;
                $(".topBtn").each(function (index,element) {
                    if (that.id==element.id){
                        $(element).css("background","darkred");
                        $(element).css("color","#ffffff");
                    }
                    else{
                        $(element).css("background","#ffffff");
                        $(element).css("color","grey");
                    }
                })
                that.getContent();
            }
        },
        created() {
            this.getColumns();
            this.getContent();
        }
    })
</script>
</html>

三、系统测试

四、系统总结

本次课程设计需要制作一个网页的新闻显示，对我而言还是笔记有难度。首先进行了数据库的设计。然后我找到了官网上对应的页面，并拉取了各个项的链接存入数据库中。在后来的与项目连接上出现了问题，maven的一些文件有问题，导致无法连接，后续将数据库部署与其他同学的服务器后改好了这个问题。其次就是各个地方的布局以及左上角的变色以及显示不同页面方面，也阻塞了许久，在找了其他同学帮忙后，也基本顺利的解决了。

这次课程设计的实现，让我对前后端分离的设计方式有了更多的认识。最主要还是对数据库的重要性，数据库设计的好才能为后续的代码提供更多便利。

♻️ 资源

大小： 1.33MB
➡️ 资源下载：https://download.csdn.net/download/s1t16/87553493
注：如当前文章或代码侵犯了您的权益，请私信作者删除！