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


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

    一、任务

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

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

    二、任务1实验过程

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

    2.1 下载UEditor jsp版本

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

    1592873671113

    2.2 导入后台页面

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

    1592873910401

    1. 打开index.html预览效果

    1592873997249

    1. 将整个文件夹拷到idea下的web目录下
    1592874242827
    1. 把jsp下的lib文件夹里的jar包拷到web-inf下的lib目录

    1592874285292

    1. 将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>
    

    效果如下:

    1592880078633

    三、任务2实验过程

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

    3.1 MVC Model1 和 2简介

    • MVC Model1
    1592887914354

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

    • MVC Model2

    1592888006545

    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;
    }
    
    1. 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);
        }
    }
    
    1. 效果实现

    删除编号为7的新闻

    1592903434426

    1592903455270

    成功实现删除功能

    发布功能

    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;
    }
    
    1. 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);
        }
    }
    
    1. 效果实现

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

    1592903515575

    跳转到新闻管理表单

    1592903556497

    点写完内容点击更新

    1592903667005

    成功添加新闻

    1592903693584

    修改功能

    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;
    }
    
    
    1. 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();
            }
        }
    }
    
    
    1. 效果实现

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

    1592903748676

    修改部分内容

    1592903787233

    成功完成修改

    1592903804328

    查询功能

    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;
    }
    
    
    1. 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);
        }
    }
    
    
    1. 新闻详细界面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>
    
    
    1. 效果实现

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

    1592903835397

    效果如下:

    1592903858292

    3.4 模拟计科院官网

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

    跳转后页面

    四、码云地址

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

    1592904013599

  • 相关阅读:
    windows环境python2.7安装MySQLdb
    查找文件中除了注释以外的中文
    python2的reload模块
    虚拟机网络连接NAT模式,本地用Xshell连接
    PHP中逻辑运算符的高效用法---&&和||
    mysql 的 alter table 操作性能小提示
    MySQL优化指南
    UTF-8的BOM含义
    MySQL中 指定字段排序函数field()的用法
    MySQL PROFILE 跟踪语句各阶段性能开销
  • 原文地址:https://www.cnblogs.com/jason5689/p/13183298.html
Copyright © 2020-2023  润新知