2023-7-14

GUET415

已于 2023-07-15 14:41:30 修改

阅读量38

点赞数 1

分类专栏：实习日志文章标签： java

于 2023-07-14 20:10:46 首次发布

本文链接：https://blog.csdn.net/m0_53286358/article/details/131723347

版权

实习日志专栏收录该内容

16 篇文章 0 订阅

订阅专栏

后端管理

后端管理界面

创建一个弹性布局
样式位于index.css由link导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后端管理界面</title>
    <link rel="stylesheet" href="index02/index02.css">
</head>
<body>
    <!-- 弹性布局 -->
    <div id="wrapper">
        <div id="top">
            top
        </div>
        <div id="main">

            <div id="aside">
               aside 
            </div>
            <div id="article">
                article
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

导入菜单栏

将以下代码放入aside中

<ul class="menu">
                    <li>
                      <a href="#"><i class="fa fa-home"></i>首页</a>
                    </li>
                    <li>
                      <a href="#"><i class="fa fa-user"></i>用户管理</a>
                      <ul class="submenu">
                        <li>
                          <a href="#">用户列表</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#"><i class="fa fa-user-o"></i>角色管理</a>
                      <ul class="submenu">
                        <li>
                          <a href="#">角色列表</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#"><i class="fa fa-bus"></i>权限管理</a>
                      <ul class="submenu">
                        <li>
                          <a href="#">权限列表</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#"><i class="fa fa-book"></i>文章管理</a>
                      <ul class="submenu">
                        <li>
                          <a href="#">文章列表</a>
                        </li>
                        <li>
                          <a href="#">文章分类</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#"><i class="fa fa-user-o"></i>轮播图管理</a>
                      <ul class="submenu">
                        <li>
                          <a href="#">轮播图列表</a>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#"><i class="fa fa-file-zip-o"></i>新闻管理</a>
                      <ul class="submenu">
                        <li>
                          <a href="publishNews.html" target="content">发布新闻</a>
                        </li>
                      </ul>
                    </li>
                  </ul>

样式位于sideBar由link导入
还需要引入Jquery和两个文件夹css和font

    <link rel="stylesheet" href="./index02/css/font-awesome.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

编辑script实现打开菜单和隐藏同级菜单

    <script>
$(function(){
    $(".menu>li a").click(function(){
      $(this).next().toggle(300);
      $(this).parent().siblings().children(".submenu").hide(300);
    })
})
    </script>

效果如下

在这里插入图片描述

在`新闻管理`中的`发布新闻`加入富文本编辑器

在article区域加入iframe浮动窗口，用于装载富文本编辑器publishNews.html

<div id="article">
 <!-- 浮动窗口 iframe在CSS中的作用是允许在网页中嵌入其他网页或内容，并提供了更灵活的页面布局和展示方式。-->
  <iframe src="" frameborder="0" width="100%" height="100%" name="content"></iframe>
 </div>

超链接指向publishNews.html
效果如下

后端框架（`SpringMVC`）融入管理界面

将后端管理界面的代码移动到webapp目录下
配置Tomcat

编辑`发布新闻`界面的内容保存

加入WangEditor
配置UploadController
需要注意upload函数中的\\可能需要改成/

package cn.edu.guet.controller;

import cn.edu.guet.bean.News;
import cn.edu.guet.mapper.NewsMapper;
import cn.edu.guet.mvc.annotation.Controller;
import cn.edu.guet.mvc.annotation.RequestMapping;
import cn.edu.guet.util.DBUtil;
import cn.edu.guet.util.WangEditor;
import com.google.gson.Gson;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.ibatis.session.SqlSession;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

@Controller
public class UploadController {
    @RequestMapping("/upload")
    public WangEditor upload(HttpServletRequest request, HttpServletResponse response) {
        String dir = System.getProperty("user.dir");
        dir = dir.substring(0, dir.lastIndexOf("\\"));
        String uri = request.getRequestURI();
        int index = uri.lastIndexOf("\\");
        uri = uri.substring(index + 1);
        Gson gson = new Gson();
        String realPath = dir + "\\webapps\\upload";
        System.out.println("实际路径：" + realPath);
        // 检查输入请求是否为multipart表单数据。
        boolean isMultipart = ServletFileUpload.isMultipartContent(request);
        if (isMultipart == true) {
            // 为该请求创建一个DiskFileItemFactory对象，通过它来解析请求。执行解析后，所有的表单项目都保存在一个List中。
            FileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            List<FileItem> items = null;
            try {
                items = upload.parseRequest(request);
            } catch (FileUploadException e) {
                e.printStackTrace();
            }
            Iterator<FileItem> itr = items.iterator();
            // String filePath=System.getProperty("user.dir")+ File.separator;
            while (itr.hasNext()) {
                FileItem item = (FileItem) itr.next();
                // 检查当前项目是普通表单项目还是上传文件。
                // 如果是普通表单项目，显示表单内容。
                if (item.isFormField()) {
                    String fieldName = item.getFieldName();
                    String value = item.getString();
                    if (fieldName.equals("id")) {
                    } else if (fieldName.equals("title")) {
                    }
                } else {// 如果是上传文件，显示文件名。
                    File fullFile = new File(item.getName());
                    File savedFile = new File(realPath + "\\", fullFile.getName());
                    try {
                        item.write(savedFile);

                        response.setContentType("application/json;utf-8");
                        PrintWriter out = response.getWriter();
                        String url = "http://localhost:8080/upload/" + fullFile.getName();
                        System.out.println("图片URL：" + url);
                        //把图片url存入数据库
                        String[] strs = {url};
                        WangEditor editor = new WangEditor(strs);
                        System.out.println(gson.toJson(editor));
                        out.print(gson.toJson(editor));
                        out.close();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }
        } else {
            System.out.print("the enctype must be multipart/form-data");
        }
        return null;
    }


    @RequestMapping("/saveNews")
    public void saveNews(HttpServletRequest request) {
        try {
            request.setCharacterEncoding("UTF-8");
            String newsContent = request.getParameter("mytxtIntro");
            System.out.println("富文本内容：" + newsContent);
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
    }

}

配置publishNews.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/wangEditor.min.js"></script>
</head>
<body>
<form method="post" action="saveNews.do">
    <div>
        <br><br><br>
        <div id="intro" class="TextContent"></div>
        <textarea style="display: none" name="mytxtIntro" id="txtIntro"></textarea>
        <input class="btn btn-primary" id="sub" type="submit" value="确认提交">
    </div>
</form>
</body>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#intro');
    //    获取隐藏控件<textarea>的id，用于显示内容，也方便后台获取内容
    var $text1 = $('#txtIntro');
    editor.config.onchange = function (html) {
        $text1.val(html);
    }
    //    设置上传本地图片到服务器
    editor.config.uploadImgServer = 'upload.do';

    editor.create();
    $text1.val(editor.txt.html());// 初始化 textarea 的值
</script>
</html>

效果

在这里插入图片描述

将要发布的内容存入数据库

新建表news
对富文本内容newsContent进行处理

//读取富文本内容，存入数据库
            News news=new News();
            String newsTitle="";

            //正则表达式
            String rex="<h1\\s.*>(.*)</h1>|<h1>(.*)</h1>";
            Matcher matcher= Pattern.compile(rex).matcher(newsContent);
            while ((matcher.find())){
               newsTitle=matcher.group(1);
            }
            System.out.println("新闻标题" + newsTitle);
            news.setTitle(newsTitle);

            newsContent=newsContent.replaceAll("<h1>.*<hr/>","");
            System.out.println("去掉标题后的内容"+newsContent);
            news.setContent(newsContent);

            news.setCreateTime(new Date(System.currentTimeMillis()));
            System.out.println("当前时间" + news.getCreateTime());

            //获取链接进行插入操作
            SqlSession sqlSession=DBUtil.getSqlSession();
            NewsMapper newsMapper=sqlSession.getMapper(NewsMapper.class);
            newsMapper.insert(news);
            sqlSession.commit();

在这里插入图片描述

GUET415

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2023-7-14

后端管理后端管理界面创建一个弹性布局样式位于index.css由link导入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>后端管理界面</title>
复制链接

扫一扫