第五次作业——MVC2项目实践

实验小组成员:

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

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

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

 

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

 

一、MySQL数据库相关配置

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

第五次作业——MVC2项目实践_第1张图片

 

 

二、配置富文本编辑器UEditor

 

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

第五次作业——MVC2项目实践_第2张图片

 

 

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

 

第五次作业——MVC2项目实践_第3张图片

 

 

 

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

第五次作业——MVC2项目实践_第4张图片

 

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

第五次作业——MVC2项目实践_第5张图片第五次作业——MVC2项目实践_第6张图片

 

 

 第五次作业——MVC2项目实践_第7张图片

 

 

 

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

第五次作业——MVC2项目实践_第8张图片

 

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

 

 

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

第五次作业——MVC2项目实践_第9张图片

 

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

 

 

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

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

第五次作业——MVC2项目实践_第10张图片

 

 

 新闻展示页面代码(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"%>



    
    新闻管理
    
    


新闻内容

ID 标题 内容 作者 操作
${news.newsId} ${news.newsTitle} ${news.newsContent} ${news.newsAuthor} 查看 修改 删除
复制代码

 

在我们的项目中,新闻的增删改查功能主要由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 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 NewsList = new ArrayList();

        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)点击添加新闻,将跳转到添加新闻页面,借助富文本框完成新闻信息的输入

第五次作业——MVC2项目实践_第11张图片

 

 

 

添加新闻页面代码(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" %>


    添加新闻






新增新闻

新闻ID

新闻标题

新闻作者

新闻内容

复制代码

 

点击提交后,页面将填写的信息转发给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" %>


    编辑新闻






编辑新闻

新闻ID

新闻标题

新闻作者

新闻内容

复制代码

 

点击提交后,页面将填写的信息转发给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 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" %>


    新闻详情


  • 网站首页
  • 学院概况
  • 本科生教育
  • 研究生教育
  • 科学研究
  • 学生工作
  • 招生工作
  • 实验中心
  • 党建之窗
  • 抗击疫情
  • 分类
  • 团队
  • 平台
  • 成果
新闻ID:${news.newsId}
${news.newsTitle}
${news.newsContent}
作者:${news.newsAuthor}
Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院
复制代码

 

 网站首页代码(index.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" %>


    新闻
    
    

    
    
    
    






新闻列表

Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院

复制代码

 

 

四、最终效果展示

 

 (一)登录页面

 

 

 

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

 

 

 

 

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

 

 

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

第五次作业——MVC2项目实践_第12张图片

 

 

 

 

 (五)添加新闻

第五次作业——MVC2项目实践_第13张图片

 

 

 第五次作业——MVC2项目实践_第14张图片

 

 

 (六)删除新闻

删除了6号、7号新闻

第五次作业——MVC2项目实践_第15张图片

 

 

 

 (七)修改新闻

第五次作业——MVC2项目实践_第16张图片

 

 

 第五次作业——MVC2项目实践_第17张图片

 

 

 (八)查看新闻

查看1号新闻详细内容

你可能感兴趣的:(第五次作业——MVC2项目实践)