JAVAEE第五次作业-MVC2 项目实践

JAVAEE第五次作业-MVC2 项目实践

一、任务

1. 应用富文本编辑器UEditor到新闻后台页面

2. 使用MVC model2开发计科院新闻网站，实现新闻的发布，修改，查询等基本功能

二、任务1实验过程

应用富文本编辑器UEditor到新闻后台页面

2.1 下载UEditor jsp版本

官网链接： http://ueditor.baidu.com/website/download.html

2.2 导入后台页面

1. 安装包解压完成后的文件目录

2. 打开index.html预览效果

3. 将整个文件夹拷到idea下的web目录下

4. 把jsp下的lib文件夹里的jar包拷到web-inf下的lib目录

5. 将index.jsp样式复制到EditNews.jsp

注：

• 使用插件时必须引入以下3个文件

• 补全src的相对路径

<script type="text/javascript" charset="utf-8" src=" ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src=" ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src=" lang/zh-cn/zh-cn.js"></script>

引入具体的控件

<script id="editor"type="text/plain"style="height:500px;padding-top: 30px;"></script>

效果如下：

三、任务2实验过程

使用MVC Model2开发计科院新闻网站，实现新闻的发布，修改，查询等基本功能

3.1 MVC Model1 和 2简介

• MVC Model1

在Model1模型出来之前，JSP页面要完成所有的工作，但在javaBean出现之后，它可以完成与数据库的交互、业务逻辑的实现以及向视图层输出的工作 。

• MVC Model2

Model2开发模式就是MVC开发思想的体现。

3.2 编写数据访问层代码

查询语句 （返回查询结果）

private static Connection conn;
private static Statement stmt;

//select
public static ResultSet executeQuery(String SQL) throws SQLException {
    try
    {
        System.out.println("Querying!!!!!!!");

        Connection conn=getConnection();
        Statement stmt=conn.createStatement();
        ResultSet rs=stmt.executeQuery(SQL);

        conn.close();
        stmt.close();

        return rs;
    } catch (SQLException e) {

        e.printStackTrace();
        System.out.println("查询失败！");
        return null;
    }
}

更新语句 （返回是否正确执行）

//insert update delete
public static boolean executeUpdate(String SQL) {
    try {
        conn = getConnection();
        stmt = conn.createStatement();

        int rs = stmt.executeUpdate(SQL);

        //关闭连接
        conn.close();
        stmt.close();

        if (rs > 0)
            return true;
        else
            return false;
    } catch (SQLException e) {
        e.printStackTrace();
        System.out.println("更新失败！");
        return false;
    }
}

3.3 编写新闻页面的删除、发布、修改、查询服务

删除功能

1. NewsService中添加删除服务代码

//删除新闻
public boolean deleteNews(String newID){
    String sql="delete from News where NewID="+newID;
    System.out.println(sql);

    boolean result= SqlHelper.executeUpdate(sql);
    return result;
}

2. Controller中添加DeleteNewsServlet

@WebServlet(urlPatterns = "DeleteNewsServlet")
public class DeleteNewsServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String newsID = request.getParameter("newid");

        NewsService service = new NewsService();
        service.deleteNews(newsID);
        request.getRequestDispatcher("ShowNewsListServlet").forward(request, response);
    }

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

3. 效果实现

删除编号为7的新闻

成功实现删除功能

发布功能

1. NewsService中添加添加新闻服务代码

//发布新闻
public boolean addNews(News news) {
    String sql = "INSERT INTO users.news (NewID, Title, NewsContent, Author, NewsDate) " +
        "VALUES ('"+news.getNewsId()+"', '"+news.getTitle()+"', '"+news.getAuthor()+"', '"+news.getNewsContent()+"', '"+news.getNewsDate()+"');";

    System.out.println(sql);

    boolean result= SqlHelper.executeUpdate(sql);
    return result;
}

2. Controller中添加AddNewsServlet

@WebServlet(urlPatterns = "/AddNewsServlet")
public class AddNewsServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        News news = new News();

        news.setNewsId(request.getParameter("newsID"));
        news.setAuthor(request.getParameter("newsAuthor"));
        news.setTitle(request.getParameter("newsTitle"));
        news.setNewsDate(request.getParameter("newsDate"));
        news.setNewsContent(request.getParameter("editorValue"));

        NewsService service = new NewsService();
        service.addNews(news);

        request.getRequestDispatcher("ShowNewsListServlet").forward(request, response);
    }

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

        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        request.getRequestDispatcher("AddNews.jsp").forward(request, response);
    }
}

3. 效果实现

添加新闻，点击左上方按钮即可

跳转到新闻管理表单

点写完内容点击更新

成功添加新闻

修改功能

1. NewsService中添加修改新闻服务代码

//修改新闻
public boolean updateNews(News news){
    System.out.println(news.getNewsContent()+"content!!!!!!!");
    String sql="UPDATE news SET " +
        "Title = '"+news.getTitle()+"', NewsContent = '"+news.getNewsContent()+"', Author = '"+news.getAuthor()+"', NewsDate = '"+news.getNewsDate()+"'" +
        "WHERE NewID = '"+news.getNewsId()+"'";
    System.out.println(sql);
    boolean result= SqlHelper.executeUpdate(sql);
    return result;
}

2. Controller中添EditNewsServlet

@WebServlet(urlPatterns = "/EditNewsServlet")
public class EditNewsServlet 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 {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        String newsID = request.getParameter("newid");
        NewsService service= new NewsService();

        try {
            News news=service.GetNews(newsID);
            request.setAttribute("news", news);
//            request.setAttribute("editorValue",news.getNewsContent());

            request.getRequestDispatcher("EditNews.jsp").forward(request,response);

        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
}

3. 效果实现

点击编辑按钮开始修改新闻内容

修改部分内容

成功完成修改

查询功能

1. NewsService中添加查询新闻服务代码

//获取当前某条新闻的news对象
public News GetNews(String newID) throws SQLException {
    String sql="Select * from news where NewID="+newID;
    ResultSet rs;
    rs= SqlHelper.executeQuery(sql);

    News  news=new News();
    if (rs.next()){
        System.out.println("rssssssss!");
        news.setNewsId(rs.getString("NewID"));
        news.setTitle(rs.getString("Title"));
        news.setNewsContent(rs.getString("NewsContent"));
        news.setAuthor(rs.getString("Author"));
        news.setNewsDate(rs.getString("NewsDate"));
    }
    return news;
}

2. Controller中添ViewNewsServlet

@WebServlet(urlPatterns = "/ViewNewsServlet")
public class ViewNewsServlet 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 {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html; charset=UTF-8");

        String newsID = request.getParameter("newid");
        System.out.println(newsID);

        News news = null;
        NewsService service = new NewsService();
        try {
            news = service.GetNews(newsID);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        System.out.println(news.getNewsId());
        System.out.println(news.getNewsContent());
        System.out.println(news.getNewsDate());
        System.out.println(news.getAuthor());

        request.setAttribute("news", news);
        //转发到content.jsp
        request.getRequestDispatcher("NewsContent.jsp").forward(request, response);
    }
}

3. 新闻详细界面NewsContent.jsp设计

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
    <title>新闻页面</title>
    <style type="text/css">
        *{
            padding:0;margin:30px}
        body{
            font:14px/24px "宋体";
            color:#000}
        h2{
            font:normal 22px/35px "黑体";
            color:#000;
            text-align:center;}
        .one{
            font-size:12px;
            text-align:center}
        p{
            text-indent:2em;}
        .blue{
            color:#00C}
        .gray{
            color:#666}
    </style>
</head>
<body>


<h2>${news.title }</h2>
<p class="one gray">时间:<em>${news.newsDate}</em>&nbsp;来源:<em>西南石油大学计科院</em> 作者:<em>${news.author }</em></p>
<hr/>

<p>${news.newsContent }</p>

</body>
</html>

4. 效果实现

点击查看新闻即可跳转到新闻详细界面中

效果如下：

3.4 模拟计科院官网

由于只是简单测试，所以只在图片新闻板块添加了超链接跳转。

跳转后页面

四、码云地址

码云地址: https://gitee.com/Jason98/JavaEE-Course