山大软院创新项目实训（三）

这段时间我利用v-md-editor，实现了日志的增删改查，给用户提供一个实用的写日志的平台。

一、v-md-editor介绍

v-md-editor是基于 Vue 开发的 markdown 编辑器组件，具有以下特点：

• 高度可定制化
• 高度可扩展性
• 支持自定义主题包
• 提供开箱即用的主题包
• 提供多个组件。可按需使用。

基于上述原因，我决定选择v-md-editor进行日志界面的开发。

1.vue3中引入（main.js）

import { createApp } from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-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';

VMdEditor.use(githubTheme, {
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdEditor);

2.前端使用

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

3.界面展示

左侧是编辑区，右边是效果预览区，默认导航栏包含多种编辑功能。

二、功能实现

• 日志增删改查

数据库字段设计：

1.新增日志

// 新增或者更新
    @ApiOperation("新增或者编辑博客，编辑时不返回time（）")
    @PostMapping
    public Result save(@RequestBody Blog blog) {
        if(blog.getId()==null){//新增的时候初始化time和user
            blog.setTime(DateUtil.now());
        }
        blogService.saveOrUpdate(blog);
        return Result.success();
    }

这里利用DateUtil.now()将发布时间自动设成当前时间，暂时不管编辑时间；

2.删除日志

 @DeleteMapping("/{id}")
    public Result delete(@PathVariable Integer id) {
        blogService.removeById(id);
        return Result.success();
    }

后端接口根据日志id来删除指定行；

前端做了一些限制：

<div class="pd-10" style="font-size: 20px; color: #3F5EFB; cursor: pointer">{{ blog.name }}</div>
      <div style="font-size: 14px; margin-top: 10px">
        <el-icon><UserFilled /></el-icon> <span>{{ blog.user }}</span>
        <el-icon style="margin-left: 14px"><Clock /></el-icon> <span>{{ blog.time }}</span>
        <el-button  v-if="blog.uid===user.id" style="margin-left: 50px" @click="edi">编辑博客</el-button>
        <el-button type="danger" v-if="blog.uid===user.id"  @click="dele">删除博客</el-button>
      </div>

通过v-if="blog.uid===user.id"操作，只有发布者本人才可以进行编辑、删除操作，其他人将按钮设为不可见：

3.编辑日志

编辑和新增在后端调用的是同样的接口，只不过前端需要加载曾编辑过的信息；

根据文章的id进行查找，返回数据给blog[]，前端v-model再进行绑定即可。

data() {
    return {
      id: this.$route.query.id,
  },
load() {
      request.get("/blog/" + this.id).then(res => {
        this.blog = res.data
      })
  },

4.查找日志

用户可根据标题或用户名进行模糊查找。

前端给出文章标题（name）、作者名（username），后端将查询到的数据按照时间降序排列后再返回前端。

前端vue：

<div style="margin: 10px 0">
      <el-input size="small" style="width: 300px" placeholder="请输入名称" :prefix-icon="Search" v-model="name"></el-input>
      <el-input size="small" style="width: 300px" placeholder="请输入作者" :prefix-icon="Search" v-model="username"></el-input>
      <el-button class="ml-5" type="primary" @click="loads" size="small">搜索</el-button>
      <el-button type="warning" @click="reset" size="small">重置</el-button>
    </div>

搜索调用：

//查询
    loads() {
      request.get("/blog/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
          user:this.username
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })

    },

后端API：

 @ApiOperation("博客菜单栏查询：根据文章标题name或者发布人username进行查询")
    @GetMapping("/page")
    public Result findPage(@RequestParam String name,
                           @RequestParam String user,
                           @RequestParam Integer pageNum,
                                @RequestParam Integer pageSize) {
        QueryWrapper<Blog> queryWrapper = new QueryWrapper<>();
        queryWrapper.like("user",user);
        queryWrapper.orderByDesc("time");//根据time降序输出
        if (StrUtil.isNotBlank(name)) {
            queryWrapper.like("name", name);
        }
        return Result.success(blogService.page(new Page<>(pageNum, pageSize), queryWrapper));
    }

.like匹配，模糊查询。

 

日志预览：

用户发表后的日志需要设成只读模式，这里用的是v-md-editor提供的预览组件；

引入：

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.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';

VMdPreview.use(githubTheme, {
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdPreview);

使用：

<template>
  <v-md-preview :text="text"></v-md-preview>
</template>

前端显示：