AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

111.【金橘社区1.0】（二）

2023-09-24 44
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 111.【金橘社区1.0】

全部文档信息

<!DOCTYPE html>
<html lang="zh" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8"/>
    <title>金橘社区-文章编写</title>
    <link rel="stylesheet" href="{/editor.md/examples/css/style.css" th:href="@{/editor.md/examples/css/style.css/}">
    <link rel="stylesheet" href="/editor.md/css/editormd.css" th:href="@{/editor.md/css/editormd.css}"/>
    <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js" charset="utf-8"></script>
    <script src="Jquery/jquery-3.6.1.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top-search {
            width: 680px;
            height: 45px;
            margin: 30px auto;
        }
        .search-box {
            display: flex;
            position: relative;
        }
        .search-left {
            width: 545px;
            height: 45px;
            border: 2px solid rgb(196, 199, 206);
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            outline-color: rgb(242, 78, 130);
        }
        .icon-xiangji {
            position: absolute;
            right: 150px;
            top: 12px;
            font-size: 24px;
            color: rgb(196, 199, 206);
        }
        .search-right {
            color: #fff;
            font-size: 18px;
            width: 110px;
            height: 49px;
            border: 0px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            background-color: rgb(242, 78, 130);
        }
        #su:hover {
            background: #14dc99;
        }
    </style>
</head>
<body>
<form name="mdEditorForm" method="post">
<div class="top-search" style="margin-top: 13px;">
    <button type="button" class="layui-btn layui-btn-primary1 layui-btn-lg" style="margin-top: 7px;margin-left: -1200px;"
            onclick="document.location.href='MyArticals.html'"><i class="layui-icon layui-icon-return"
                                                                  style="font-size: 20px; color: #1E9FFF;"></i><i
            style="color: #0e0c0d;font-family: 微软雅黑;font-weight: bold" onclick="return confirm('您还未保存,如果直接退出将不会保存数据。您确定直接退出?')">文章管理</i></button>
    <div class="search-box" style="    top: -45px;">
        <input type="text" name="title" class="search-left" placeholder="     请 输 入 文 章 标 题" required
               style="font-size: 20px;font-family: 微软雅黑;font-weight: bold;"
               onkeyup="this.value=this.value.replace(/\s+/g,'')"
        value="【无标题】">
        <span class="iconfont icon-xiangji"></span>
    </div>
    <ul sec:authorize="!isAuthenticated()" class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999">
        <li  class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="/img/login.png" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='login.html'"></a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;" onclick="document.location.href='login.html'">登入</a></dd>
            </dl>
        </li>
    </ul>
    <ul sec:authorize="hasRole('ROLE_A')" class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999">
        <li  class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="/img/user.jpg" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='#'"></a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">个人中心</a></dd>
                <dd><a href="javascript:;" th:href="@{/login.html}">切换账号</a></dd>
                <dd><a href="javascript:;" th:href="@{/logout}">注销</a></dd>
            </dl>
        </li>
    </ul>
    <ul class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999">
        <li sec:authorize="hasRole('ROLE_B')" class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="/img/user2.jpg" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='#'"></a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">个人中心</a></dd>
                <dd><a href="javascript:;" onclick="document.location.href='login.html'">切换账号</a></dd>
                <dd><a href="javascript:;" th:href="@{/logout}">注销</a></dd>
            </dl>
        </li>
    </ul>
</div>
<div id="layout" style="margin-top: -41px;">
    <header>
    </header>
        <div id="test-editormd">
            <textarea style="display:none;" name="content"></textarea>
        </div>
</div>
</form>
<script src="/editor.md/examplesjs/jquery.min.js" th:src="@{/editor.md/examples/js/jquery.min.js}"></script>
<script src="/editor.md/editormd.js" th:src="@{/editor.md/editormd.js}"></script>
<script type="text/javascript">
    var testEditor;
    $(function () {
        $.get('/editor.md/examples/test.md', function (md) {
            testEditor = editormd("test-editormd", {
                width: "100%",
                height: "750px",
                path: '/editor.md/lib/',
                theme: "dark",
                markdown:'#欢迎您来到金橘社区!!',
                // previewTheme: "dark",
                editorTheme: "pastel-on-dark",
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "/article/image/upload",
                toolbarIcons: function () {
                    return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info", "||", "publish"];
                },
                toolbarIconTexts: {
                    publish: "<span bgcolor='gray' style='font-family: 微软雅黑;font-weight: bold;color: #00FF00'>发布</span>"
                },
                toolbarHandlers: {
                    publish: function (cm, icon, cursor, selection) {
                        mdEditorForm.method = "post";
                        mdEditorForm.action = "/article/publish";//提交至服务器的路径
                        mdEditorForm.submit();
                    }
                }
            });
        });
    });
</script>
</body>
</html>
(2).后端页面

工具类

package com.jsxs.kumquat.utils;
/**
 * @Author Jsxs
 * @Date 2023/4/11 15:50
 * @PackageName:com.jsxs.kumquat.utils
 * @ClassName: FileUtils
 * @Description: TODO
 * @Version 1.0
 */
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
/**
 * 文件上传工具类
 */
public class FileUtils {
    private static final String prePath = System.getProperty("user.dir") + "/src/main/resources/static/upload/";
    /**
     * 上传文件
     * @param file
     * @return 返回文件路径（以相对路径放回）
     */
    public static String uploadFile(MultipartFile file) {
        if(file.isEmpty()) {
            return "";
        }
        // 获取原文件名
        String originFileName = file.getOriginalFilename();
        // 我们通过UUID 来重新重组文件名
        String uid = UUID.randomUUID().toString();
        assert originFileName != null;
        String suffix = originFileName.substring(originFileName.lastIndexOf('.') + 1);
        String path = prePath + uid + "." + suffix;
        String returnPath = "/upload/" + uid + "." + suffix;
        File newFile = new File(path);
        if(newFile.getParentFile() != null && !newFile.getParentFile().exists()) {
            System.out.println("创建目录ing");
            // 上面的 newFile.getParentFile() 已经保证了不为null.
            if(newFile.getParentFile().mkdirs()) {
                System.out.println("创建目录成功");
            }else {
                System.out.println("创建目录失败");
                return "";
            }
        }
        try {
            file.transferTo(newFile);
        } catch (IOException e) {
            e.printStackTrace();
            return "";
        }
        return returnPath;
    }
}

文件上传

package com.jsxs.kumquat.controller;
import com.alibaba.fastjson.JSONObject;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jsxs.kumquat.pojo.CkqnBlog;
import com.jsxs.kumquat.pojo.CkqnUser;
import com.jsxs.kumquat.service.CkqnBlogService;
import com.jsxs.kumquat.utils.FileUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;
import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
import java.util.UUID;
/**
 * <p>
 * 前端控制器
 * </p>
 *
 * @author 吉士先生
 * @since 2023-04-09
 */
@Controller
@RequestMapping("/article")
public class CkqnBlogController {
    @Resource
    CkqnBlogService ckqnBlogService;
    @Resource
    HttpSession session;
    // 文章上传
    @RequestMapping("/publish")
    public String publishArticle(CkqnBlog article) {
        CkqnUser user = (CkqnUser) session.getAttribute("loginUser");
        // 1.作者信息
        article.setAuthorId(user.getUid());
        article.setAuthorName(user.getUsername());
        article.setAuthorAvatar(user.getAvatar());
        // 2.博客ID
        String replace = UUID.randomUUID().toString().replace("-", "");
        article.setBid(replace);
        if (article.getTitle() == null) {
            System.out.println("标题为空?????????");
        }
        boolean res = ckqnBlogService.save(article);
        if (res) {
            return "tipSuccess";
        }
        return "tipFalse";
    }
    // 图片上传
    @RequestMapping("/image/upload")
    @ResponseBody
    public JSONObject imageUpload(@RequestParam("editormd-image-file") MultipartFile image) {
        JSONObject jsonObject = new JSONObject();
        if (image != null) {
            String path = FileUtils.uploadFile(image);
//            回调给 editor
            System.out.println(path);
            jsonObject.put("url", path);
            jsonObject.put("success", 1);
            jsonObject.put("message", "upload success!");
            return jsonObject;
        }
        jsonObject.put("success", 0);
        jsonObject.put("message", "upload error!");
        return jsonObject;
    }
    //  1.一篇详细文章
    @RequestMapping("/get/{id}")
    public ModelAndView getArticleById(@PathVariable(name = "id") int id) {
        ModelAndView modelAndView = new ModelAndView();
        CkqnBlog article = ckqnBlogService.getById(id);
        modelAndView.setViewName("WriteCenter/article");
        if (article == null) {
            modelAndView.addObject("article", new CkqnBlog());
        }
        modelAndView.addObject("article", article);
        return modelAndView;
    }

2.修改文件

(1).前端页面

需要引入数据

<link rel="stylesheet"  th:href="@{/editor.md/examples/css/style.css/}">
  <link rel="stylesheet"  th:href="@{/editor.md/css/editormd.css}"/>
  <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
  <script th:src="@{/Jquery/jquery-3.6.1.js}"></script>

被修改页面的展示

<div class="col-md-12 mb-3">
      <div id="blog-content">
        <textarea required name="content" th:text="${blog.getContent()}" id="content" style="display:none;" rows="3" class="form-control"> </textarea>
      </div>
    </div>

js

<script th:src="@{/editor.md/examples/js/jquery.min.js}"></script>
<script th:src="@{/editor.md/editormd.js}"></script>
<script type="text/javascript">
  var testEditor;
  $(function() {
    testEditor = editormd("blog-content", {
      width : "100%", //1.
      height : "750px", //2.
      syncScrolling : "single", //3.单页
        path: '/editor.md/lib/', //4.路径
        theme: "dark", //5.黑暗主题
        previewTheme: "gary",
        editorTheme: "pastel-on-dark",
        imageUpload: true, //6.文件上传
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/article/image/upload",  //7.文件上传对象
      onload : function() {
        console.log('onload', this);
      },
        toolbarIcons: function () {
          return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info", "||", "publish"];
        },
        toolbarIconTexts: {  //8. 提交修改的按钮
          publish: "<span bgcolor='gray' style='color: #00FF00;font-weight: bold;font-family: 微软雅黑'>提交修改</span>"
        },
        toolbarHandlers: { //9.修改文章的路径
          publish: function (cm, icon, cursor, selection) {
            mdEditorForm.method = "post";
            mdEditorForm.action = "/article/toupdate";//提交至服务器的路径
            mdEditorForm.submit();
          }
        },
      onfullscreen : function() {
        console.log("onfullscreen");
        document.getElementsByClassName("navbar")[0].style.display="none";
      },
      onfullscreenExit : function() {
        console.log("onfullscreenExit");
        document.getElementsByClassName("navbar")[0].style.display="";
      }
      });
    });
</script>

全部前端

<!DOCTYPE html>
<html lang="zh" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <title>金橘社区-文章修改</title>
  <link rel="stylesheet"  th:href="@{/editor.md/examples/css/style.css/}">
  <link rel="stylesheet"  th:href="@{/editor.md/css/editormd.css}"/>
  <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon"/>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
  <script th:src="@{/Jquery/jquery-3.6.1.js}"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .top-search {
      width: 680px;
      height: 45px;
      margin: 30px auto;
    }
    .search-box {
      display: flex;
      position: relative;
    }
    .search-left {
      width: 545px;
      height: 45px;
      border: 2px solid rgb(196, 199, 206);
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      outline-color: rgb(242, 78, 130);
    }
    .icon-xiangji {
      position: absolute;
      right: 150px;
      top: 12px;
      font-size: 24px;
      color: rgb(196, 199, 206);
    }
    .search-right {
      color: #fff;
      font-size: 18px;
      width: 110px;
      height: 49px;
      border: 0px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      background-color: rgb(242, 78, 130);
    }
    #su:hover {
      background: #14dc99;
    }
  </style>
</head>
<body>
<form name="mdEditorForm" method="post">
  <!-- 隐藏域 uid -->
  <input type="hidden" name="bid" th:value="${blog.getBid()}">
  <div class="top-search" style="margin-top: 13px;">
    <a type="button" class="layui-btn layui-btn-primary1 layui-btn-lg" style="margin-top: 7px;margin-left: -1200px;"
            th:href="@{/MyArticals.html}"><i class="layui-icon layui-icon-return"
                                             style="font-size: 20px; color: #1E9FFF;"></i><i
            style="color: #0e0c0d;font-family: 微软雅黑;font-weight: bold" onclick="return confirm('您还未保存更改数据,如果直接退出将不会保存更改的数据。您确定直接退出?')">文章管理</i></a>
    <div class="search-box" style="    top: -45px;">
<!--      标题-->
      <input type="text" name="title" class="search-left" placeholder="     请 输 入 文 章 标 题" required
             style="font-size: 20px;font-family: 微软雅黑;font-weight: bold;"
             onkeyup="this.value=this.value.replace(/\s+/g,'')"
             th:value="${blog.title}">
      <span class="iconfont icon-xiangji"></span>
    </div>
    <ul class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999">
      <li sec:authorize="!isAuthenticated()" class="layui-nav-item" lay-unselect="">
        <a href="javascript:;"><img src="/img/login.png" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='login.html'"></a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;" onclick="document.location.href='login.html'">登入</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav" lay-bar="disabled" style="width: 40px; height: 0px;margin-left: 863px;margin-top: -100px;z-index: 9999">
      <li sec:authorize="isAuthenticated()" class="layui-nav-item" lay-unselect="">
        <a href="javascript:;"><img src="/img/user.jpg" tppabs="http://t.cn/RCzsdCq" class="layui-nav-img" onclick="document.location.href='#'"></a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">个人中心</a></dd>
          <dd><a href="javascript:;" th:href="@{/login.html}">切换账号</a></dd>
          <dd><a href="javascript:;" th:href="@{/logout}">注销</a></dd>
        </dl>
      </li>
    </ul>
  </div>
  <div id="layout" style="margin-top: -41px;">
    <header>
    </header>
    <div class="col-md-12 mb-3">
      <div id="blog-content">
        <textarea required name="content" th:text="${blog.getContent()}" id="content" style="display:none;" rows="3" class="form-control"> </textarea>
      </div>
    </div>
  </div>
  </div>
</form>
<script th:src="@{/editor.md/examples/js/jquery.min.js}"></script>
<script th:src="@{/editor.md/editormd.js}"></script>
<script type="text/javascript">
  var testEditor;
  $(function() {
    testEditor = editormd("blog-content", {
      width : "100%",
      height : "750px",
      syncScrolling : "single",
        path: '/editor.md/lib/',
        theme: "dark",
        previewTheme: "gary",
        editorTheme: "pastel-on-dark",
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/article/image/upload",
      onload : function() {
        console.log('onload', this);
      },
        toolbarIcons: function () {
          return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info", "||", "publish"];
        },
        toolbarIconTexts: {
          publish: "<span bgcolor='gray' style='color: #00FF00;font-weight: bold;font-family: 微软雅黑'>提交修改</span>"
        },
        toolbarHandlers: {
          publish: function (cm, icon, cursor, selection) {
            mdEditorForm.method = "post";
            mdEditorForm.action = "/article/toupdate";//提交至服务器的路径
            mdEditorForm.submit();
          }
        },
      onfullscreen : function() {
        console.log("onfullscreen");
        document.getElementsByClassName("navbar")[0].style.display="none";
      },
      onfullscreenExit : function() {
        console.log("onfullscreenExit");
        document.getElementsByClassName("navbar")[0].style.display="";
      }
      });
    });
</script>
</body>
</html>
文章标签：
前端开发
JavaScript
吉士先生
目录
相关文章
吉士先生
|
前端开发
111.【金橘社区1.0】（六）
111.【金橘社区1.0】
吉士先生
57 0
吉士先生
|
前端开发
111.【金橘社区1.0】（五）
111.【金橘社区1.0】
吉士先生
70 0
笨笨小乌龟
|
4月前
|
Linux 开发者
Linux底层驱动社区饮水机系统详解
在Linux驱动开发中，入门时通常会关注驱动程序的三大核心步骤：入口函数、出口函数和声明许可证。这些步骤构成了驱动程序的基本结构，是驱动与内核交互的基础。下面是对这三个步骤的简要说明：
笨笨小乌龟
42 0
吉士先生
|
前端开发 JavaScript Java
111.【金橘社区1.0】（一）
111.【金橘社区1.0】
吉士先生
110 0
111.【金橘社区1.0】（一）
吉士先生
|
SQL JavaScript 前端开发
111.【金橘社区1.0】（四）
111.【金橘社区1.0】
吉士先生
45 0
编程指南针
|
6月前
|
SQL 前端开发 NoSQL
IT社区|网络社区平台|基于SpringBoot的IT社区平台
IT社区|网络社区平台|基于SpringBoot的IT社区平台
编程指南针
71 0
猫头虎
|
Linux 持续交付 开发者
开源项目的社区建设与管理
开源项目的社区建设与管理
猫头虎
247 0
开源项目的社区建设与管理
吉士先生
|
前端开发
111.【金橘社区1.0】（三）
111.【金橘社区1.0】
吉士先生
39 0
acc8226
|
数据安全/隐私保护 Docker 容器
JetLinks 社区版安装
JetLinks 社区版安装
acc8226
550 0
六月的雨在钉钉
|
开发者
我和社区的2022
简述我和社区一路走来的点点滴滴
六月的雨在钉钉
333 0
我和社区的2022