关于引入MD编辑器的前后端方案

Vue-md-editor

  早上看了很多不同的编辑器，最后选择了这个比较简单便捷的v-md-editor
  使用方法很简单，具体请看我的这篇博客关于博客内置MD文本编辑器
  如果遇到报错，也许这里可以帮到你关于vue-md-editor引入codemirror报错

前端方面

  main.js方面，阿新选择了暴力引入

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import store from './store';
import localSave from "@/plugins/localSave";

import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';
// 引入使用主题的样式
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import VMdPreview from '@kangc/v-md-editor/lib/preview';

let app = createApp(App)

VMdEditor.Codemirror = Codemirror
VMdEditor.use(githubTheme, {
    Hljs: hljs,
})
VMdPreview.use(githubTheme, {
    Hljs: hljs,
})

app.use(VMdPreview)
app.use(VMdEditor)

app.use(store)
app.use(router)
app.use(localSave)
app.use(ElementPlus)

app.mount('#app')

  引入之后即可直接使用，现在需要考虑的是文章存储在数据库的形式，后续我们需要查询同一类目下的所有文章，并且文章编辑与创建的时间、作者、标题等都需要保存起来，所以在引入编辑器之后我们就要开始着手article数据表的设计，如下是我的对象：

  data(){
    return{
      Article:{
        id:null,
        title:'test',
        text:'',
        author:null,
        label:'test play'
      }
    }
  },

  提交时前给author指定目前登录的用户名即可，后端会处理time，id采取自增策略

后端方面

  表结构如下：

create table article
(
id     int auto_increment
    primary key,
title  varchar(50) not null,
text   text        not null,
author varchar(20) not null,
label  tinytext    not null,
time   datetime    not null
);

  这里需要注意的是pojo文件对应的Article的time数据类型应是LocalDateTime,否则在更改数据时会报错，其次label的使用方式应为“多个标签集中”如："标签1 标签2"，以某种符号连接起来（这里使用空格）

@Data
public class Article {

    @TableId(type = IdType.AUTO)
    private Integer id;
    private String title;
    private String text;
    private String author;
    private String label;
    private LocalDateTime time;

}

  @Data可以帮助我们快速建立实体类，修改也很方便，下面是测试用的controller：

@RestController
@RequestMapping("/article")
public class articleController {

    @Autowired
    private ArticleService articleService;

    @PostMapping
    public R<Article> test(@RequestBody Article s){
        s.setTime(LocalDateTime.now());
        articleService.save(s);
        return R.success(s);
    }

}

  到此为止，有关个人博客的比较棘手的问题已经解决一半了，在前端的布局与路由调整之后，下面的重点就是评论区、后台管理，主题与背景图等需要审美的东西，就在本项目开源后留给各位小伙伴了