vue+springboot读取git的markdown文件并展示

news2024/9/22 11:24:39

前言

最近,在研究一个如何将我们git项目的MARKDOWN文档获取到,并且可以展示到界面通过检索查到,于是经过几天的摸索,成功的研究了出来

本次前端vue使用的是Markdown-it

Markdown-it 是一个用于解析和渲染 Markdown 标记语言的 JavaScript 库。
它采用模块化的设计,提供了灵活的配置选项和丰富的插件系统,使开发者可以根据自己的需要定制 Markdown 的解析和渲染过程。

使用 Markdown-it,你可以将 Markdown 文本解析为 HTML 输出,并且可以根据需要添加功能、扩展语法或修改解析行为

后端springboot使用JGit

JGit 是一个开源的 Java 实现的 Git 客户端库,它允许开发者在 Java 程序中直接操作 Git 仓库。

JGit 提供了一些核心的 API,使开发者可以使用 Java 代码来访问和操作 Git 仓库,例如创建仓库、提交变更、分支管理、标签管理、克隆远程仓库等。它提供了对 Git 分布式版本控制系统的完整支持,能够满足日常的代码版本管理需求。

但是我们这里单纯只是将其获取git的文件进行展示markdown,因此并用不上

准备工作

前端

在前端,
我使用了element-ui前端框架写页面
使用Markdown-it 进行解析markdown
使用axios连接了前后端
因此,需要安装如上依赖,指令如下:

npm i element-ui
npm i markdown-it
npm i axios

后端

因后端为springboot项目,需要安装springboot的依赖,这里不多赘述,主要是需要安装JGit的依赖

<dependency>
    <groupId>org.eclipse.jgit</groupId>
       <artifactId>org.eclipse.jgit</artifactId>
    <version>5.9.0.202009080501-r</version>
</dependency>

效果演示

那么,在说如何做之前,先介绍一下我做出来的效果吧

首先,我建立了一个git仓库 ,专门用于获取到markdown文件

在这里插入图片描述

为了程序能够获取到文件,我在data文件夹下放了四个markdown文件,并且在程序指定只获取data下的markdown文件

  • 无数据时,前端界面显示如下
    在这里插入图片描述

当什么关键字都不输入,检索全部markdown文件

在这里插入图片描述
此时展示文件

此时随便点击列表的一个文件查看

在这里插入图片描述

切换另一个
在这里插入图片描述
在这里插入图片描述

以上,我们能够发现,它能够把我们的markdown的表格,图片以及表情正确的显示出来,并且样式排版也过得去,当然,这个是可以自己调整的

多提一句,我有做一个简单的检索关键字的逻辑,逻辑如下:

  1. 什么关键字不输入的时候,检索指定文件夹下所有markdown
  2. 当输入关键字,检索文件名,如果包含关键字,则把文件路径加入集合列表
  3. 当文件名不包含关键字,判断文件内容是否包含关键字,包含也把对应文件路径加入列表

前端代码逻辑

界面部分

<template>
    <div>
        <el-page-header content="MarkDown展示"/>
        <el-input v-model="searchKey" placeholder="检索问题" style="position: relative;;width: 70%;left: 0%"></el-input>
        <el-button @click="searchProblem" type="primary" plain style="margin: 10px;">检索</el-button>
        <el-card>
            <el-table :data="searchData" style="width: 100%;font-size: 20px; max-height: 500px; overflow-y: auto;background-color: white;">
                    <el-table-column type="index" label="序号">
                    </el-table-column>
                    <el-table-column label="列表项">
                        <template slot-scope="scope">
                        <span>{{ changePathName(scope.row )}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="primary" size="medium" @click="findMarkDown(scope.row)" style="font-size: 24px;">查看</el-button>
                            </div>
                        
                        </template>
                    </el-table-column>
                </el-table>
        </el-card>
        <!-- 展示区 -->
        <el-card style="position: relative;width: 100%;overflow-x: auto;" header="MarkDown处理文档">
            <div style="position: relative;">
              <el-card style="background-color:rgb(255, 253, 245);padding: 32px;" v-if="htmlContent">
                <div v-html="htmlContent" class="v-md-header"></div>
              </el-card>
              <el-card style="background-color:rgb(255, 253, 245);padding: 32px;" v-else>
                <div style="position: absolute;left:46.5%;text-align: center;line-height: 0px;font-weight: bold;">请检索并查看文档</div>
              </el-card>
            </div>
        </el-card>
    </div>
  </template>

JavaScript逻辑

<script>
// 封装的axios调用后端的方法,如需要则按照自己的项目调用修改即可
  import {searchProblem,findMarkDownBypath} from "../ajax/api"
  import MarkdownIt from 'markdown-it';
  export default {
    name: "MarkDown",
    data() {
      return {
        searchKey: "",
        searchData: [], // 检索到的问题列表
        markdownText: '', // 加载好图片的Markdown文本
        markdownRenderer: null, // 解析markdown渲染器定义
        htmlContent: '', // 解析为html
      }
    },
    mounted() {
    this.markdownRenderer = new MarkdownIt();
  },
    methods: {
    // 检索文件
      searchProblem() {
        searchProblem(this.searchKey).then(res => {
            console.log("检索数据:",res);
            this.searchData = res.data.data; // 赋值检索数据,注意这里的res.data.data请根据自己实际回参更改获取参数
            this.markdownText = ""; // 每次检索清空markdown显示文档内容
            this.htmlContent = ""; // 每次检索清空markdown显示文档内容
        })
      },
      // 根据文件路径查找markdown文件
      findMarkDown(path) {
        console.log("path:",path);
        findMarkDownBypath(path).then(res => {
            console.log("markdown内容:",res);
            this.markdownText = res.data.data;
            this.htmlContent = this.markdownRenderer.render(this.markdownText);
            console.log(this.htmlContent);
        })
      },
     // 处理字符串,回传的参数实际为:data/学生成绩系统前端.md,将字符串进行截取
     changePathName(str) {
        if (str) {
            var lastIndex = str.lastIndexOf('/');
            var result = str.substring(lastIndex + 1);
            return result.replace('.md','');
        }
        return str;
     }
    }
  }
  </script>

在以上,后端传递的路径实际为:

[
    "data/README.en.md",
    "data/README.md",
    "data/学生成绩系统前端.md",
    "data/网上购药商城.md"
]

因此为了美观和直观展示,我是有做字符处理的,详情参考如何代码

此外,我后端获取到的markdown的内容实际数据为:

# search_markdown_data

#### Description
用于检索markdown的数据来源

#### Software Architecture
Software architecture description

#### Installation

1.  xxxx
2.  xxxx
3.  xxxx

#### Instructions

1.  xxxx
2.  xxxx
3.  xxxx

#### Contribution

1.  Fork the repository
2.  Create Feat_xxx branch
3.  Commit your code
4.  Create Pull Request


#### Gitee Feature

1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
4.  The most valuable open source project [GVP](https://gitee.com/gvp)
5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

我的代码中,使用markdown-it创建渲染器,将如上数据转换为:

<h1>search_markdown_data</h1>
<h4>Description</h4>
<p>用于检索markdown的数据来源</p>
<h4>Software Architecture</h4>
<p>Software architecture description</p>
<h4>Installation</h4>
<ol>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
</ol>
<h4>Instructions</h4>
<ol>
<li>xxxx</li>
<li>xxxx</li>
<li>xxxx</li>
</ol>
<h4>Contribution</h4>
<ol>
<li>Fork the repository</li>
<li>Create Feat_xxx branch</li>
<li>Commit your code</li>
<li>Create Pull Request</li>
</ol>
<h4>Gitee Feature</h4>
<ol>
<li>You can use Readme_XXX.md to support different languages, such as Readme_en.md, Readme_zh.md</li>
<li>Gitee blog <a href="https://blog.gitee.com">blog.gitee.com</a></li>
<li>Explore open source project <a href="https://gitee.com/explore">https://gitee.com/explore</a></li>
<li>The most valuable open source project <a href="https://gitee.com/gvp">GVP</a></li>
<li>The manual of Gitee <a href="https://gitee.com/help">https://gitee.com/help</a></li>
<li>The most popular members  <a href="https://gitee.com/gitee-stars/">https://gitee.com/gitee-stars/</a></li>
</ol>

实际为html的数据,因此,我们就可以在界面使用vue的v-html展示markdown的内容

css样式

以上我们知道它会将数据转为html的数据,因此,就可以使用css样式调整,以下为我的css样式,供参考:

h1 {
    color: #ff0000;
  }
  
  p {
    font-size: 16px;
    line-height: 1.5;
  }
  
  .v-md-header {
    text-align: left !important;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid black;
    padding: 8px;
  }
  
  th {
    background-color: #f2f2f2; /* 设置表头的背景颜色 */
  }
  
  tr:nth-child(even) {
    background-color: #dddddd; /* 设置偶数行的背景颜色 */
  }
  
  tr:hover {
    background-color: #f5f5f5; /* 设置鼠标悬停时的背景颜色 */
  }
  h1,h2,h3,h4,h5{
    border-bottom: 1px #d8d6d6 solid;
  }
  img{
    width: 80%;
  }

后端代码逻辑

先说下我的查询的方法,JGIT我尝试了很久,都只能通过先克隆到本地,再读取的方式,于是放弃了研究如何使用JGIT在线读取文件的方式,也许后面我可能研究的出来。

同样,为了保证每次都是最新的文档,我采用了判断是否已经克隆下来了,如果克隆了则更新代码,没有克隆则克隆,来保证每次都是最新代码

在正式执行前,我们需要先定义好需要的参数

// 解析markdown图片正则
    private static final String MARKDOWN_IMAGE_PATTERN = "(!\\[[^\\]]*\\])\\(([^\\)]+)\\)";
// 需要克隆git到本机的路径
    private final String LOCAL_PATH = "E:\\git\\markdown";
// 需要获取markdown的git链接
    private final String GIT_PATH = "https://gitee.com/spring-in-huangxian-county/search_markdown_data.git";
// 需要获取的git分支
    private final String GIT_BRANCH = "master";
// 需要抓取的Git内指定文件夹的markdown
    private final String MARK_DOWN_PATH = "data";
// 当前后端项目的位置,该目的是为了能够找到正确的文件路径
    private final String PROJECT_PATH = "F:\\gitee\\search_markdown_end";

查询

controller层

    @GetMapping("/searchProblem")
    public ResultVO<List<String>> searchMarkdown(@RequestParam("searchKey") String searchKey)
        throws Exception {
        // 获取Git仓库中的Markdown文档列表
        try {
            List<String> markdownFiles = new MarkDownService().getGitDataFilePath();
            List<String> results = new ArrayList<>();
            if (StringUtils.isEmpty(searchKey)) {
                results.addAll(markdownFiles);
            } else {
                for (String path:markdownFiles) {
                    // 如果标题包含检索关键字加入列表
                    if (path.contains(searchKey)) {
                        results.add(path);
                    } else {
                        // 判断具体内容是否包含关键字,是则加入列表
                        if (new MarkDownService().isContainSearchKeyForContent(searchKey,path)) {
                            results.add(path);
                        }
                    }
                }
            }
            return new ResultVO<>(0,"OK",results);
        }catch (Exception e) {
            return new ResultVO<>(1,e.getMessage());
        }
    }

ResultVO为封装的响应体,如有兴趣可参考我之前文章
MarkDownService为service层文件名

service层

克隆和拉取git的方式读取文件,获取文件路径

    // 克隆和拉取git的方式读取文件
    public List<String> getGitDataFilePath() throws Exception {
        File localPath = new File(LOCAL_PATH);
        String remoteUrl = GIT_PATH;
        String branchName =GIT_BRANCH; // 或者其他分支名称
        String folderPath = MARK_DOWN_PATH; // data文件夹的路径
        List<String> markDownFilePathList = new ArrayList<>();

        Repository repository;
        if (localPath.exists()) {
            repository = openLocalRepository(localPath);
            pullLatestChanges(repository);
        } else {
            repository = cloneRepository(localPath, remoteUrl);
        }

        try (Git git = new Git(repository)) {

            Iterable<RevCommit> commits = git.log().add(repository.resolve(branchName)).call();
            RevCommit commit = commits.iterator().next();
            try (RevWalk revWalk = new RevWalk(repository)) {
                RevTree tree = revWalk.parseTree(commit.getTree());
                try (TreeWalk treeWalk = new TreeWalk(repository)) {
                    treeWalk.addTree(tree);
                    treeWalk.setRecursive(true);
                    while (treeWalk.next()) {
                        if (treeWalk.getPathString().startsWith(folderPath) && treeWalk.getPathString().endsWith(".md")) {
                            System.out.println("Found markdown file: " + treeWalk.getPathString());
                            // 这里可以根据需要进行具体的处理,比如读取文件内容等
                            markDownFilePathList.add(treeWalk.getPathString());
                        }
                    }
                }
            }
        } catch (IOException | GitAPIException e) {
            e.printStackTrace();
        }
        return markDownFilePathList;
    }

打开本地git

    // 打开本地git项目
    private Repository openLocalRepository(File localPath) throws IOException {
        System.out.println("Opening existing repository...");
        Git git = Git.open(localPath);
        return git.getRepository();
    }

克隆代码

    // 克隆git
    private Repository cloneRepository(File localPath, String remoteUrl) throws GitAPIException {
        System.out.println("Cloning repository...");
        Git git = Git.cloneRepository()
            .setURI(remoteUrl)
            .setDirectory(localPath)
            .call();
        return git.getRepository();
    }

拉取最新代码

    //拉取git最新代码
    private void pullLatestChanges(Repository repository) throws GitAPIException {
        System.out.println("Pulling latest changes...");
        Git git = new Git(repository);
        PullCommand pull = git.pull().setTimeout(30);
        pull.call();
    }

检查文件内容是否包含关键字

    /**
     * @param searchKey 检索关键字
     * @param path markdown文本路径
     * @desc 通过关键字和路径找到指定markdown文件是否内容包含关键字
     * */
    public Boolean isContainSearchKeyForContent(String searchKey,String path) {
        Boolean containFlag = false;
        String content ="";
        try {
            content =  findMarkDownBypathNoWithImage(path);
        }catch (Exception e) {
            System.out.println("获取markdown文本失败:"+e.getMessage());
        }
        if (content.contains(searchKey)) {
            containFlag = true;
        }
        return containFlag;
    }

要判断文件内容是否包含关键字,不需要将文件图片进行解析,直接获取文件内容

    public String findMarkDownBypathNoWithImage(String filePath) throws Exception{
        String localPath = LOCAL_PATH;
        String markDownContent = "";
        if (filePath.endsWith(".md")) {
            File markdownFile = new File(localPath, filePath);
            try (Scanner scanner = new Scanner(markdownFile)) {
                StringBuilder contentBuilder = new StringBuilder();
                while (scanner.hasNextLine()) {
                    contentBuilder.append(scanner.nextLine()).append("\n");
                }
                markDownContent = contentBuilder.toString();
                System.out.println("Markdown file content:\n" + markDownContent);
            } catch (IOException e) {
                throw new Exception(e.getMessage());
            }
        }
        return markDownContent;
    }

根据路径获取文件

以下为会解析图片的方式进行获取文件

controller层

    @GetMapping("findMarkDownBypath")
    public ResultVO<String> findMarkDownBypath(@RequestParam("path")String path) throws Exception {
        try {
            return new ResultVO<>(new MarkDownService().findMarkDownBypathWithImage(path));
        }catch (Exception e) {
            return new ResultVO<>(1,e.getMessage());
        }
    }

service层

    public String findMarkDownBypathWithImage(String filePath) throws Exception{
        String localPath = LOCAL_PATH;
        String markDownContent = "";
        if (filePath.endsWith(".md")) {
            File markdownFile = new File(localPath, filePath);
            try (Scanner scanner = new Scanner(markdownFile)) {
                StringBuilder contentBuilder = new StringBuilder();
                while (scanner.hasNextLine()) {
                    contentBuilder.append(scanner.nextLine()).append("\n");
                }
                String markdownContent = contentBuilder.toString();
                markDownContent = loadImages(markdownContent,filePath);
                // 在这里得到了具体的markdown文件内容
                System.out.println("Markdown file content:\n" + markdownContent);
            } catch (IOException e) {
                throw new Exception(e.getMessage());
            }
        }
        return markDownContent;
    }

解析图片

    public  String loadImages(String markdownContent, String markdownFilePath) {
        Pattern pattern = Pattern.compile(MARKDOWN_IMAGE_PATTERN);
        Matcher matcher = pattern.matcher(markdownContent);
        String localPath = LOCAL_PATH;
        StringBuffer sb = new StringBuffer();
        while (matcher.find()) {
            String originalImageTag = matcher.group(0);
            String altText = matcher.group(1);
            String imagePath = matcher.group(2);
            try {
                String absoluteImagePath = getAbsoluteImagePath(imagePath, markdownFilePath);
                absoluteImagePath = absoluteImagePath.replace(PROJECT_PATH,localPath);
                String imageData = loadImage(absoluteImagePath);
                String transformedImageTag = "![Image](" + imageData + ")";
                matcher.appendReplacement(sb, transformedImageTag);
            } catch (IOException e) {
                // 图像加载出错,可以根据实际需求进行处理
                e.printStackTrace();
            }
        }
        matcher.appendTail(sb);

        return sb.toString();
    }

    public static String loadImage(String imagePath) throws IOException {
        File imageFile = new File(imagePath);

        // 读取图像文件的字节数组
        byte[] imageData = FileUtils.readFileToByteArray(imageFile);

        // 将字节数组转换为Base64编码字符串
        String base64ImageData = java.util.Base64.getEncoder().encodeToString(imageData);

        return "data:image/png;base64," + base64ImageData;
    }
    public static String getAbsoluteImagePath(String imagePath, String markdownFilePath) {
        File markdownFile = new File(markdownFilePath);
        String markdownDirectory = markdownFile.getParent();
        String absoluteImagePath = new File(markdownDirectory, imagePath).getAbsolutePath();
        return absoluteImagePath;
    }

依赖

为了防止出现依赖可能缺失的情况,可参考我的项目的maven

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.2.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.hxc.common</groupId>
    <artifactId>CommonBack</artifactId>
    <version>1.0</version>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <mysql.version>5.1.47</mysql.version>
        <druid.version>1.1.16</druid.version>
        <log4j2.version>2.17.0</log4j2.version>
        <mybatis.spring.boot.version>1.3.0</mybatis.spring.boot.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.2.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.16.18</version>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.8</version>
        </dependency>
<!--        swagger-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
            <exclusions>
                <exclusion>
                    <groupId>io.swagger</groupId>
                    <artifactId>swagger-annotations</artifactId>
                </exclusion>
                <exclusion>
                    <groupId>io.swagger</groupId>
                    <artifactId>swagger-models</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>io.swagger</groupId>
            <artifactId>swagger-annotations</artifactId>
            <version>1.5.21</version>
        </dependency>
        <dependency>
            <groupId>io.swagger</groupId>
            <artifactId>swagger-models</artifactId>
            <version>1.5.21</version>
        </dependency>
        <!--        swagger的ui-->
        <dependency>
            <groupId>com.github.xiaoymin</groupId>
            <artifactId>swagger-bootstrap-ui</artifactId>
            <version>1.9.6</version>
        </dependency>
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpmime</artifactId>
            <version>4.5</version>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.9</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-mail</artifactId>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
            <version>2.8.5</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.76</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>${mybatis.spring.boot.version}</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>${druid.version}</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql.version}</version>
        </dependency>
        <!-- pagehelper -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-core</artifactId>
            <version>2.15.0</version>
        </dependency>
        <!--    文件处理-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
        <!--   POI excel处理依赖     -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.9</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.9</version>
        </dependency>
        <!--   工具类     -->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.8</version>
        </dependency>
<!--        <dependency>-->
<!--            <groupId>org.eclipse.jgit</groupId>-->
<!--            <artifactId>org.eclipse.jgit</artifactId>-->
<!--            <version>4.4.1.201607150455-r</version>-->
<!--        </dependency>-->
        <dependency>
            <groupId>org.eclipse.jgit</groupId>
            <artifactId>org.eclipse.jgit</artifactId>
            <version>5.9.0.202009080501-r</version>
        </dependency>
    </dependencies>


    <build>
        <finalName>common_end</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-jar-plugin</artifactId>
                <version>3.1.0</version>
                <configuration>
                    <archive>
                        <manifest>
                            <addClasspath>true</addClasspath>
                            <mainClass>com.hxc.common.MarkDownApplication</mainClass>
                            <classpathPrefix>libs/</classpathPrefix>
                        </manifest>
                    </archive>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>3.1.0</version>
                <executions>
                    <execution>
                        <id>copy-dependencies</id>
                        <phase>package</phase>
                        <goals>
                            <goal>copy-dependencies</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${project.build.directory}/libs</outputDirectory>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <!--跳过junit-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
                <configuration>
                    <skip>true</skip>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

git

以下为我实现读取git的markdown的项目,可供参考

前端

后端

结语

以上为我实现vue+springboot读取git的markdown文件并展示的过程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1249363.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

虹科Pico汽车示波器 | 汽车免拆检修 | 2011款瑞麒M1车发动机起动困难、加速无力

一、故障现象 一辆2011款瑞麒M1车&#xff0c;搭载SQR317F发动机&#xff0c;累计行驶里程约为10.4万km。该车因发动机起动困难、抖动、动力不足、热机易熄火等故障进厂维修。用故障检测仪检测&#xff0c;发动机控制单元&#xff08;ECU&#xff09;中存储有故障代码“P0340相…

C#/.NET/.NET Core推荐学习书籍(已分类)

前言 古人云&#xff1a;“书中自有黄金屋&#xff0c;书中自有颜如玉”&#xff0c;说明了书籍的重要性。作为程序员&#xff0c;我们需要不断学习以提升自己的核心竞争力。以下是一些优秀的C#/.NET/.NET Core相关学习书籍&#xff0c;值得.NET开发者们学习和专研。书籍已分类…

Vue3框架中让table合计居中对齐

第一步&#xff1a;给它加一个类名 center-table 如下&#xff1a; <el-table:data"datas.shows"max-height"600px"show-summarystripeborderstyle"width: 100%":header-cell-style"{ textAlign: center }":cell-style"{ text…

java - 选择排序

一、什么是选择排序 选择排序&#xff08;Selection sort&#xff09;是一种简单直观的排序算法。它的基本思想是每次从待排序的元素中选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其放到已排序序列的末尾&#xff0c;直到所有元素排序完成。 具体步骤如下&…

LemMinX-Maven:帮助在eclipse中更方便地编辑maven的pom文件

LemMinX-Maven&#xff1a;https://github.com/eclipse/lemminx-maven LemMinX-Maven可以帮助我们在eclipse中更方便地编辑maven工程的pom.xml文件&#xff0c;例如补全、提示等。不用单独安装&#xff0c;因为在安装maven eclipse插件的时候已经自动安装了&#xff1a; 例…

第97步 深度学习图像目标检测:RetinaNet建模

基于WIN10的64位系统演示 一、写在前面 本期开始&#xff0c;我们继续学习深度学习图像目标检测系列&#xff0c;RetinaNet模型。 二、RetinaNet简介 RetinaNet 是由 Facebook AI Research (FAIR) 的研究人员在 2017 年提出的一种目标检测模型。它是一种单阶段&#xff08;o…

【Linux基础】Linux常见指令总结及周边小知识

前言 Linux系统编程的学习我们将要开始了&#xff0c;学习它我们不得不谈谈它的版本发布是怎样的&#xff0c;谈它的版本发布就不得不说说unix。下面是unix发展史是我在百度百科了解的 Unix发展史 UNIX系统是一个分时系统。最早的UNIX系统于1970年问世。此前&#xff0c;只有…

两年功能五年自动化测试面试经验分享

最近有机会做一些面试工作&#xff0c;主要负责面试软件测试人员招聘的技术面试。 之前一直是应聘者的角色&#xff0c;经历了不少次的面试之后&#xff0c;多少也积累一点面试的经验&#xff0c;现在发生了角色转变。初次的面试就碰到个工作年限比我长的&#xff0c;也没有时…

ubuntu22.04 arrch64版操作系统编译zlmediakit

脚本 系统没有cmake&#xff0c;需要通过apt先进行下载&#xff0c;下面的脚本已经包含了 # 安装依赖 gcc-c.x86_64 这个不加的话会有问题 sudo yum -y install gcc gcc-c libssl-dev libsdl-dev libavcodec-dev libavutil-dev ffmpeg git openssl-devel gcc-c.x86_64 ca…

R语言如何实现多元线性回归

输入数据 先把数据用excel保存为csv格式放在”我的文档”文件夹 打开R软件,不用新建,直接写 回归计算 求三个平方和 置信区间(95%)

springboot 返回problem+json

spring所有配置都在WebMvcAutoConfiguration中 其中有 ProblemDetailsExceptionHandler 容器中的一个组件 -ControllerAdvice用来集中处理异常的 -点进ResponseEntityExceptionHandler 包含这些异常&#xff0c;如果出现以下异常&#xff0c;会被springboot支持以RFC 7807规…

2022年03月 Scratch(三级)真题解析#中国电子学会#全国青少年软件编程等级考试

Scratch等级考试(1~4级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 以下四个选项中,运行哪个积木块,可能得到523这个数值? A: B: C: D: 答案:B 四个选项都遵循统一的公式:随机数ⅹ10+3=523,因此可以得出随

Redis-主从与哨兵架构

Jedis使用 Jedis连接代码示例&#xff1a; 1、引入依赖 <dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.9.0</version> </dependency> 2、访问代码 public class JedisSingleTe…

Modown主题v8.12 安装教程和主题下载

亲测」Modown主题v8.12学习版 上传好主题选择该主题就好了设置 设置好的首页 内容页&#xff1a; WordPress主题Modown和WordPress插件Erphpdown想必正在使用WordPress程序建站的站长都非常熟悉&#xff0c;因为这两款应用在WordPress站长圈子里还是比较知名的&#xff0c;所以…

LangChain 9 模型Model I/O 聊天提示词ChatPromptTemplate, 少量样本提示词FewShotPrompt

LangChain系列文章 LangChain 实现给动物取名字&#xff0c;LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储&#xff0c;读取YouTube的视频文本搜索I…

百度 文心一言 sdk 试用

JMaven Central: com.baidu.aip:java-sdk (sonatype.com) Java sdk地址如上&#xff1a; 文心一言开发者 文心一言 (baidu.com) ERNIE Bot SDK https://yiyan.baidu.com/developer/doc#Fllzznonw ERNIE Bot SDK提供便捷易用的接口&#xff0c;可以调用文心一言的能力&#…

1553B板卡详解

个人博客地址: https://cxx001.gitee.io 简介 1553b板卡主要应用于航天航空工业领域&#xff0c;它的数据传输结构有点类似集中分布式服务器的设计&#xff0c;分为BC、RT、BM三类部件&#xff0c;BC有且仅有1个&#xff0c;类似我们的master管理服务节点&#xff0c;RT有0~32…

LangChain(0.0.339)官方文档二:LCEL

文章目录 一、LangChain Expression Language (LCEL)1.1 LCEL简介1.2 Runnable1.2.1 Runnable方法1.2.2 Runnable组合方式1.2.3 修改行为 1.3 输入输出模式1.3.1 前置知识&#xff1a;Pydantic1.3.2 Input Schema1.3.3 Output Schema 1.4 同步调用1.4.1 Invoke1.4.2 Stream1.4.…

超分辨率重建

意义 客观世界的场景含有丰富多彩的信息&#xff0c;但是由于受到硬件设备的成像条件和成像方式的限制&#xff0c;难以获得原始场景中的所有信息。而且&#xff0c;硬件设备分辨率的限制会不可避免地使图像丢失某些高频细节信息。在当今信息迅猛发展的时代&#xff0c;在卫星…

io.lettuce.core.RedisCommandExecutionException

io.lettuce.core.RedisCommandExecutionException: ERR invalid password ERR invalid password-CSDN博客 io.lettuce.core.RedisCommandExecutionException /** Copyright 2011-2022 the original author or authors.** Licensed under the Apache License, Version 2.0 (the…