jackeytong  

 

 实验小组成员:

(1)唐任峻杰(我负责数据库方面问题处理,界面优化设计,查找项目相关资料)  学号:201731062610

(2)庞斌(他负责后台界面模板的修改,配置部署ueditor等文件,实现增加新闻、删除新闻的业务逻辑) 学号:201731062609

(3)郭昭杰(他负责修改新闻、查询新闻的业务逻辑,相应的jsp界面设计,撰写这篇博客) 学号:201731062608

 

项目码云地址:https://gitee.com/ashes-g/MVC2

 

一、MySQL数据库相关配置

事先在数据库中录入了6条新闻信息

 

 

二、配置富文本编辑器UEditor

 

首先需要进行下载,下载地址:http://ueditor.baidu.com/website/download.html

 

 

下载完成后将压缩包解压并重命名

 

 

 

 

 将解压出的文件复制到项目的web文件夹下

 

将ueditor文件夹下jsp/lib中的jar包复制到WEB-INF下的lib文件夹下,并添加项目依赖

 

 

 

 

 

 

在ueditor文件夹下的jsp/lib路径下的config.json文件夹内配置图片访问路径

 

路径前缀选用tomcat的输出路径

 

 

在嵌入编辑器的jsp页面内要先引入ueditor的js文件

 

下方的红框内的UE.getEditor是将对应区域(“Content”)的文本域转换成编辑器。

 

 

三、实现新闻的增删改查功能

在新闻展示页面,可以进行新闻的增删改查操作

 

 

 新闻展示页面代码(ShowNews.jsp):

复制代码
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/14
  Time: 19:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>新闻管理</title>
    <link rel="stylesheet" type="text/css" href="css/Iframe.css" />
    <link rel="stylesheet" href="utilLib/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<span class="cp_title">新闻内容</span>
<div class="add_cp">
    <a href="AddNews.jsp">+添加新闻</a>
</div>
<div class="table_con">
    <table>
        <tr class="tb_title">
            <td width="10%">ID</td>
            <td width="20%">标题</td>
            <td width="25%">内容</td>
            <td width="10%">作者</td>
            <td width="35%">操作</td>
        </tr>
        <c:forEach var="news" items="${lstNews}" varStatus="status">
            <tr>
                <td width="10%">${news.newsId}</td>
                <td width="20%" style="overflow: hidden;text-overflow: ellipsis">${news.newsTitle}</td>
                <td width="25%" style="overflow: hidden;text-overflow: ellipsis">${news.newsContent} </td>
                <td width="10%">${news.newsAuthor}</td>
                <td width="35%">
                    <a href="QueryNewsServlet?newsid=${news.newsId}" style="margin-left: 10px">查看</a>
                    <a href="UpdateNews.jsp" style="margin-left: 10px">修改</a>
                    <a href="DeleteNewsServlet?newsid=${news.newsId}" style="margin-left: 10px">删除</a>
                </td>
            </tr>
        </c:forEach>
    </table>
</div>
</body>
</html>
复制代码

 

在我们的项目中,新闻的增删改查功能主要由NewsService业务类具体实现

NewsService代码:

复制代码
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

public class NewsService {
    //添加新闻
    public boolean AddNews(News news) throws ClassNotFoundException, SQLException {
        Statement statement;
        Connection conn ;
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306?serverTimezone=GMT&characterEncoding=utf-8","root","Guozhaojie610");
        String sql="insert into new_schema.news (newsID,newsTitle,newsContent,newsAuthor) " +
                "values ('"+news.getNewsId()+"','"+news.getNewsTitle()+"','"+news.getNewsContent()+"','"+news.getNewsAuthor()+"')";
        statement=conn.createStatement();
        int result =statement.executeUpdate(sql);
        if (result>0)return true;
        else return false;
    }

    //删除新闻
    public boolean DeleteNews(int newsId) throws ClassNotFoundException, SQLException {
        Statement statement = null;
        Connection conn ;
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306?serverTimezone=GMT&characterEncoding=utf-8","root","Guozhaojie610");
        String sql= "delete from new_schema.news where newsID="+newsId;
        statement=conn.createStatement();
        int result = statement.executeUpdate(sql);
        if(result>0)return true;
        else return false;

    }

    //更新新闻
    public  boolean UpdateNews(News news) throws ClassNotFoundException, SQLException {
        Statement statement = null;
        Connection conn ;
        ResultSet rs;
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306?serverTimezone=GMT&characterEncoding=utf-8","root","Guozhaojie610");
        String sql="update new_schema.news set newsTitle ='"+news.getNewsTitle()+"', newsContent ='"+news.getNewsContent()+"', newsAuthor ='"+news.getNewsAuthor()+"' where newsID="+news.getNewsId();
        statement = conn.createStatement();
        int result = statement.executeUpdate(sql);
        if(result>0)return true;
        else  return false;
    }

    //查询新闻
    public News QueryIndividualNews(int newsID)throws ClassNotFoundException, SQLException {
        Statement statement = null;
        Connection conn;
        ResultSet rs;
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306?serverTimezone=GMT&characterEncoding=utf-8", "root", "Guozhaojie610");
        String sql = "Select * from new_schema.news where newsID=" + newsID;
        statement = conn.createStatement();
        rs = statement.executeQuery(sql);

        News n = new News();
        if (rs.next()) {
            n.setNewsId(rs.getInt("newsID"));
            n.setNewsTitle(rs.getString("newsTitle"));
            n.setNewsAuthor(rs.getString("newsAuthor"));
            n.setNewsContent(rs.getString("newsContent"));
        }
        return n;
    }

    //查询数据库内所有新闻
    public List<News> QueryNews() throws ClassNotFoundException, SQLException {
        Statement statement = null;
        Connection conn ;
        ResultSet rs;
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn = DriverManager.getConnection("jdbc:mysql://localhost:3306?serverTimezone=GMT&characterEncoding=utf-8","root","Guozhaojie610");
        String sql = "Select * from new_schema.news";

        statement=conn.createStatement();
        rs = statement.executeQuery(sql);

        List<News> NewsList = new ArrayList<News>();

        while (rs.next()){
            News n = new News();
            n.setNewsId(rs.getInt("newsID"));
            n.setNewsTitle(rs.getString("newsTitle"));
            n.setNewsAuthor(rs.getString("newsAuthor"));
            n.setNewsContent(rs.getString("newsContent"));
            NewsList.add(n);
        }
        return  NewsList;
    }


}
复制代码

 

 

(1)点击添加新闻,将跳转到添加新闻页面,借助富文本框完成新闻信息的输入

 

 

 

添加新闻页面代码(AddNews.jsp):

复制代码
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/24
  Time: 9:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加新闻</title>
</head>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" >var ue=UE.getEditor('Content');</script>
<body>
<form action="AddNewsServlet" method="post">
    <div><h1 style="margin-left: 450px">新增新闻</h1></div>
    <div><input type="submit" value="提交" style="margin-left: 450px"></div>
    <div>
        <p style="margin-left: 450px">新闻ID</p>
        <input type="text" name="newsid" id="newsid" style="margin-left: 450px" >
    </div>
    <div>
        <p style="margin-left: 450px">新闻标题</p>
        <input type="text" name="title" id="title" style="margin-left: 450px">
    </div>
    <div>
        <p style="margin-left: 450px">新闻作者</p>
        <input type="text" name="author" id="author" style="margin-left: 450px">
    </div>
    <div class="Content">
        <p style="margin-left: 450px">新闻内容</p>
        <textarea id="Content" name="Content"  style="width: 800px; height: 400px; margin: 0 auto;margin-left: 450px"></textarea>
    </div>
</form>
</body>
</html>
复制代码

 

点击提交后,页面将填写的信息转发给AddNewsServlet,AddNewsServlet通过调用NewsService中的AddNews方法将信息录入数据库中,完成新闻的添加

AddNewsServlet代码:

复制代码
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/AddNewsServlet")
public class AddNewsServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        response.setHeader("Context-Type","text/html;charset=utf-8");
        News news =new News();
        news.setNewsId(Integer.valueOf(request.getParameter("newsid")));
        news.setNewsAuthor(request.getParameter("author"));
        news.setNewsContent(request.getParameter("Content"));
        news.setNewsTitle(request.getParameter("title"));
        NewsService newsService=new NewsService();
        try {
            newsService.AddNews(news);
            request.getRequestDispatcher("ShowNewsServlet").forward(request,response);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
}
}
复制代码

 

(2)在新闻展示页面点击某一新闻的删除选项,将启用DeleteNewsServlet,DeleteNewsServlet通过调用NewsService中的DeleteNews方法删除数据库中相应新闻ID的信息

DeleteNewsServlet代码:

复制代码
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/DeleteNewsServlet")
public class DeleteNewsServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        int newsID=Integer.valueOf(request.getParameter("newsid"));
        NewsService newsService=new NewsService();
        try {
            newsService.DeleteNews(newsID);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        request.getRequestDispatcher("ShowNewsServlet").forward(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        doPost(request,response);
    }
}
复制代码

 

(3)在新闻展示页面点击某一新闻的修改选项,将跳转到新闻编辑页面(与新闻添加页面相似),借助富文本框完成新闻信息的修改

编辑新闻页面代码(UpdateNews.jsp):

复制代码
<%--
  Created by IntelliJ IDEA.
  User: 焰烬
  Date: 2020/6/24
  Time: 14:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>编辑新闻</title>
</head>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" >var ue=UE.getEditor('Content');</script>
<body>
<form action="UpdateNewsServlet" method="post">
    <div><h1 style="margin-left: 450px">编辑新闻</h1></div>
    <div><input type="submit" value="提交" style="margin-left: 450px"></div>
    <div>
        <p style="margin-left: 450px">新闻ID</p>
        <input type="text" name="newsid" id="newsid" style="margin-left: 450px" >
    </div>
    <div>
        <p style="margin-left: 450px">新闻标题</p>
        <input type="text" name="title" id="title" style="margin-left: 450px">
    </div>
    <div>
        <p style="margin-left: 450px">新闻作者</p>
        <input type="text" name="author" id="author" style="margin-left: 450px">
    </div>
    <div class="Content">
        <p style="margin-left: 450px">新闻内容</p>
        <textarea id="Content" name="Content"  style="width: 800px; height: 400px; margin: 0 auto;margin-left: 450px"></textarea>
    </div>
</form>
</body>
</html>
复制代码

 

点击提交后,页面将填写的信息转发给UpdateNewsServlet,UpdateNewsServlet通过调用NewsService中的UpdateNews方法修改数据库中相应新闻的信息,完成新闻的修改

UpdateNewsServlet代码:

 

复制代码
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/UpdateNewsServlet")
public class UpdateNewsServlet extends HttpServlet{
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html; charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        response.setHeader("Context-Type", "text/html;charset=utf-8");
        News news = new News();
        news.setNewsId(Integer.valueOf(request.getParameter("newsid")));
        news.setNewsAuthor(request.getParameter("author"));
        news.setNewsContent(request.getParameter("Content"));
        news.setNewsTitle(request.getParameter("title"));
        NewsService newsService = new NewsService();
        try {
            newsService.UpdateNews(news);
            request.getRequestDispatcher("ShowNewsServlet").forward(request, response);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}
复制代码

 

 

(4)在新闻展示页面点击某一新闻的查看选项,将启用QueryNewsServlet,QueryNewsServlet通过调用NewsService中的QueryIndividualNews方法获取对应的新闻实例,并转发给NewsDetail页面,展示相应新闻的所有内容。

QueryNewsServlet代码:

复制代码
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.SQLException;

@WebServlet(urlPatterns = "/QueryNewsServlet")
public class QueryNewsServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        int newsID=Integer.valueOf(request.getParameter("newsid"));
        NewsService newsService=new NewsService();
        try {
            News news=newsService.QueryIndividualNews(newsID);
            request.setAttribute("news",news);
            request.getRequestDispatcher("NewsDetail.jsp").forward(request,response);
        }catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}
复制代码

 

(5)HostNewsServlet负责在新闻总览页面提供每条新闻的索引,点击即可查看其详情

HostNewsServlet代码:

 

复制代码
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet(urlPatterns = "/HostNewsServlet")
public class HostNewsServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        NewsService newsService=new NewsService();
        try {
            List<News> lstNews=newsService.QueryNews();

            for (News s:lstNews
            ) {
                System.out.println(s.getNewsTitle());
            }
            request.setAttribute("lstNews",lstNews);
            request.getRequestDispatcher("Hostpage_News.jsp").forward(request,response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}
复制代码

 

 

 

新闻展示页面代码(NewsDetail.jsp):

复制代码
<%--
  Created by IntelliJ IDEA.
  User: 焰烬
  Date: 2020/6/24
  Time: 14:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新闻详情</title>
</head>
<body>
<header>
    <div class="logo">
        <a href="http://localhost:8080/login_war_exploded/login.html">管理员登录</a>
        <div class="logo_search">
            <div class="search_txt">
                <input type="text" placeholder="请输入关键字搜索">
                <div class="search_img"></div>
            </div>
        </div>
    </div>
    <ul>
        <li>网站首页</li><li>学院概况</li><li>本科生教育</li><li>研究生教育</li><li>科学研究</li>
        <li>学生工作</li><li>招生工作</li><li>实验中心</li><li>党建之窗</li><li>抗击疫情</li>
    </ul>
    <img src="images/colonavirus.jpg">
</header>
<!--中部-->
<main>
    <div class="main_left">
        <ul>
            <li>分类</li>
            <li>团队</li>
            <li>平台</li>
            <li>成果</li>
        </ul>
        <div class="search">
            <div class="search_head">站内搜索</div>
            <input type="text" placeholder="请输入关键词进行搜索">
        </div>
    </div>
    <div class="main_right">
        <div class="ID" name="ID">新闻ID:${news.newsId}</div>
        <div class="title" name="title">${news.newsTitle}</div>
        <div class="newscontent" name="newscontent">${news.newsContent}</div>
        <div class="author" name="author">作者:${news.newsAuthor}</div>
    </div>
</main>

<!--底部-->
<footer>
    <div class="swpu">Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</div>
</footer>
</body>
<style>
    /*头部*/
    header{
        width: 970px;
        height: 370px;
        margin: 0 auto;
    }
    .logo{
        width: 970px;
        height: 110px;
        background: url("images/top-bg.jpg");
    }
    .logo a{
        float: left;
    }
    .logo_search .search_txt{
        width: 280px;
        height: 35px;
        float: right;
        margin-top: 37px;
    }
    .logo_search input{
        width: 237px;
        height: 30px;
    }
    .search_img{
        width: 35px;
        height: 35px;
        float: right;
    }
    header ul{
        width: 970px;
        height: 35px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #0c89ff;
    }
    header li{
        width: 97px;
        float: left;
        text-align: center;
        line-height: 35px;
    }
    header img{
        width: 970px;
        height: 225px;
        background-color: #2a6496;
    }
    /*中部*/
    main{
        width: 950px;
        height: 1000px;
        margin: 0 auto;
        padding: 10px;
    }
    .main_left{
        width: 200px;
        height: 400px;
        float: left;
        margin-right: 10px;
    }
    .main_left li{
        width: 200px;
        font-size: 16px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        margin-left: -40px;
        list-style: none;
    }
    .search_head{
        width: 200px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
        background-color: #DDDDDD;
    }
    .search input{
        width: 195px;
        height: 40px;
    }
    .main_right{
        width: 740px;
        height: 1000px;
        float: left;
    }
    .title{
        width: 740px;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        margin-top: 20px;
    }
    .newscontent{
        text-indent: 2em;
        width: 740px;
        margin: 40px 0;
    }
    .author{
        width: 740px;
        text-align: center;
    }
    .writedate{
        float: right;
        margin-top: 40px;
    }

    /*底部*/
    footer{
        width: 100%;
        height: 80px;
        background-color: #2a6496;
    }
    .swpu{
        width: 400px;
        height: 80px;
        margin: 0 auto;
        line-height: 80px;
        font-size: 13px;
        color: white;
    }
</style>
复制代码

 

 网站首页代码(index.html):

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻管理后台</title>

<link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tendina.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

</head>
<body>
    <!--顶部-->
    <div class="top">
            <div style="float: left"><span style="font-size: 16px;line-height: 45px;padding-left: 20px;color: #fff">西南石油大学新闻管理处</h1></span></div>
            <div id="ad_setting" class="ad_setting">
                <a class="ad_setting_a" href="javascript:; ">..@qq.com</a>
                <ul class="dropdown-menu-uu" style="display: none" id="ad_setting_ul">
                    <li class="ad_setting_ul_li"> <a href="javascript:;"><i class="icon-user glyph-icon"></i>个人中心</a> </li>
                    <li class="ad_setting_ul_li"> <a href="javascript:;"><i class="icon-cog glyph-icon"></i>设置</a> </li>
                    <li class="ad_setting_ul_li"> <a href="javascript:;"><i class="icon-signout glyph-icon"></i> <span class="font-bold">退出</span> </a> </li>
                </ul>
                <img class="use_xl" src="images/right_menu.png" />
            </div>
    </div>
    <!--顶部结束-->
    <!--菜单-->
    <div class="left-menu">
        <ul id="menu">
            <li class="menu-list">
               <a style="cursor:pointer" class="firsta"><i  class="glyph-icon xlcd"></i>新闻服务<s class="sz"></s></a>
                <ul>
                    <li><a href="HostNewsServlet" target="menuFrame"><i class="glyph-icon icon-chevron-right2"></i>新闻总览</a></li>
                    <li><a href="ShowNewsServlet" target="menuFrame"><i class="glyph-icon icon-chevron-right2"></i>新闻管理</a></li>
  
                </ul>
            </li>
            
        </ul>
    </div>
    
    <!--首页内容-->
    <div id="right-content" class="right-content">
        <div class="content">
            <div id="page_content">
                <div class="hd">
                    <ul>
                        <li><a href=""><img src="images/nktoplogo1.jpg" alt=""/></a> </li>
                    </ul>
                </div>
                <div class="bd">
                    <ul>
                        <li><a href=""><img src="images/5.jpg" style="margin-left: 180px" /></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
复制代码

 

 新闻总览页面代码(Hostpage_News.jsp):

复制代码
<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2020/6/24
  Time: 0:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>新闻</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/publice.css">

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/superslide.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".mainmenu dl").hide();
            $("li.mainmenu").hover(function () {
                $(this).find("dl").stop(true, true);
                $(this).find("dl").slideDown();
            }, function () {
                $(this).find("dl").stop(true, true);
                $(this).find("dl").slideUp();
            });
        })
    </script>
</head>
<body style="position: relative">
<div class="topWrap clearfix">
    <div style="width:100%;height:112px;background:url(images/top-bg.jpg) no-repeat center top">
        <div style="float: right; margin-right: 500px;">
            <a href="TEST.html">
                <h3>登录</h3>
            </a>
        </div>
        <div class="topDiv">
            <div class="topR fr">
                <div class="topR_t fr" style="color:#fff;"></div>
                <div class="Search">
                    <form action="">
                        <input type="hidden">
                        <input type="hidden">
                        <input type="hidden">
                        <input type="text" value="请输入关键字搜索" class="search_text"/>
                        <div class="fdj fr">
                            <input type="button" class="button pngFix" value="" style="cursor: hand;margin-right: 100px">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!--nav-->
<div class="navWrap  clearfix" style="width: 974px">
    <div class="nav">
        <ul>
            <li>
                <a class="link" href="">网站首页</a>

            </li>
            <li class="mainmenu">
                <a class="link" href="">学院概况</a>
                <!--如果是导航字数很多,则加上 class="chang",否则去掉即可-->
                <dl>
                    <dd><a href="">学院简介</a></dd>
                    <dd><a href="">学院领导</a></dd>
                    <dd><a href="">组织机构</a></dd>
                </dl>
            </li>
            <li class="mainmenu">
                <a class="link" href="">本科生教育</a>
                <!--如果是导航字数很多,则加上 class="chang",否则去掉即可-->
                <dl>
                    <dd><a href="">专业设置</a></dd>
                    <dd><a href="">对外人才合作培养项目</a></dd>
                    <dd><a href="">考试信息</a></dd>
                    <dd><a href="">选课重修信息</a></dd>
                    <dd><a href="">通知公告</a></dd>
                    <dd><a href="">资料下载</a></dd>
                    <dd><a href="">公选课教师视频</a></dd>
                    <dd><a href="">教学项目</a></dd>
                    <dd><a href="">教学获奖</a></dd>
                    <dd><a href="">教学大纲</a></dd>
                </dl>
            </li>
            <li class="mainmenu">
                <a class="link" href="">研究生教育</a>
                <!--如果是导航字数很多,则加上 class="chang",否则去掉即可-->
                <dl>
                    <dd><a href="">招生简章</a></dd>
                    <dd><a href="">计算机科学与技术一级学科</a></dd>
                    <dd><a href="">软件工程一级学科</a></dd>
                    <dd><a href="">网络空间安全一级学科</a></dd>
                    <dd><a href="">研究生导师</a></dd>
                    <dd><a href="">研究生奖助体系</a></dd>
                    <dd><a href="">通知公告</a></dd>
                    <dd><a href="">资料下载</a></dd>
                </dl>
            </li>
            <li class="mainmenu">
                <a class="link" href="">科学研究</a>
                <!--如果是导航字数很多,则加上 class="chang",否则去掉即可-->
                <dl>
                    <dd><a href="">科研团队</a></dd>
                    <dd><a href="">科研平台</a></dd>
                    <dd><a href="">科研成果</a></dd>
                </dl>
            </li>
            <li class="mainmenu">
                <a class="link" href="">学生工作</a>
                <!--如果是导航字数很多,则加上 class="chang",否则去掉即可-->
                <dl>
                    <dd><a href="">工作动态</a></dd>
                    <dd><a href="">通知公告</a></dd>
                    <dd><a href="">课外创新实践</a></dd>
                    <dd><a href="">毕业生就业</a></dd>
                    <dd><a href="">心灵之窗</a></dd>
                    <dd><a href="">青春风采</a></dd>
                    <dd><a href="">资料下载</a></dd>
                </dl>
            </li>
            <li class="mainmenu">
                <a class="link" href="">招生工作</a>
                <!--如果是导航字数很多,则加上 class="chang",否则去掉即可-->
                <dl>
                    <dd><a href="">学院介绍</a></dd>
                    <dd><a href="">毕业生就业去向</a></dd>
                    <dd><a href="">优秀毕业生简介</a></dd>
                    <dd><a href="">教师获奖</a></dd>
                    <dd><a href="">学生获奖</a></dd>
                    <dd><a href="">精英校友介绍</a></dd>
                    <dd><a href="">招生工作宣传报道</a></dd>
                </dl>
            </li>
            <li class="mainmenu">
                <a class="link" href="">实验中心</a>
                <!--如果是导航字数很多,则加上 class="chang",否则去掉即可-->
                <dl>
                    <dd><a href="">中心简介</a></dd>
                    <dd><a href="">实验分室</a></dd>
                    <dd><a href="">规章制度</a></dd>
                    <dd><a href="">资料下载</a></dd>
                    <dd><a href="swpu.edu.cn">开放预约</a></dd>
                </dl>
            </li>
            <li class="mainmenu">
                <a class="link">党建之窗</a>
                <!--如果是导航字 class="chang",否则去掉即可-->
                <dl>
                    <dd><a href="">党建动态</a></dd>
                    <dd><a href="">学习园地</a></dd>
                    <dd><a href="">党务政务公开</a></dd>
                    <dd><a href="">资料下载</a></dd>
                </dl>
            </li>
            <li class="mainmenu">
                <a class="link" href="" style="font-weight:bold;font-style:italic;color:#fa6a7d">抗击疫情</a>
            </li>
        </ul>
    </div>
</div>
<!--banner-->
<div class="vsb-box" style="height: 200px">
    <div class="vsb-container a">
        <div class="vsb-space bannerWrap clearfix">
            <div class="banner_one">
                <div id="slideBox" class="slideBox">
                    <div class="hd">
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                    <div class="bd">
                        <ul>
                            <li><a href=""><img src="images/welcome.jpg" /></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                jQuery(".slideBox").slide({ mainCell: ".bd ul", autoPlay: false });
            </script>
        </div>
    </div>
</div>
<!--container-->
<div class="vsb-box">
    <div class="vsb-container container clearfix" style="height: 400px">
        <div style="width: 974px" class="vsb-space new_inforBox new_inforBoxa new_inforBoxa1 fl">
            <div class="dynamic dynamicf">
                <h2>新闻列表</h2><span><a href=""><img src=""></a></span>
            </div>
            <div class="newBox newBoxe">
                <div class="new_list new_listd" style="height: 300px">
                    <ul class="dynamic_list dynamic_listh">
                        <c:forEach var="news" items="${lstNews}" >
                            <li>
                                <a href="QueryNewsServlet?newsid=${news.newsId}" target="_blank">
                                    <em>${news.newsTitle}</em>
                                </a>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--foot-->
    <div class="footWrap clearfix">
        <div class="footDiv_one">
            <div class="foot_one">
                <p>
                <div>Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</div>
                </p>
            </div>
        </div>
    </div>
</div>
<script>
</script>
</body>
</html>
复制代码

 

 

四、最终效果展示

 

 (一)登录页面

 

 

 

 (二)登录成功后进入首页

 

 

 

 

 (三)进入新闻总览页面,可点击任意一条新闻查看其详情

 

 

 (四)进入新闻管理页面,可进行新闻的增删改查操作

 

 

 

 

 (五)添加新闻

 

 

 

 

 

 (六)删除新闻

删除了6号、7号新闻

 

 

 

 (七)修改新闻

 

 

 

 

 

 (八)查看新闻

查看1号新闻详细内容

posted on 2020-06-24 19:00  jackeytong  阅读(138)  评论(0编辑  收藏  举报