从0开始边做边学，用vue和python做一个博客，非规范化项目，怎么简单怎么弄，跑的起来有啥毛病解决啥毛病（三）

md-editor安装配置使用

安装这个编辑器到项目中

npm install md-editor-v3

之后在页面中引入

import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

定义一个内容变量

const text = ref('Hello Editor!');

在模版中写上这个标签

<MdEditor v-model="text" />

之后就可以看到页面中显示出来这个编辑器了

更多细节功能可以看官网文档md-editor-v3
对于展示页面的话 就不需要这个编辑框了，只需要内容和目录，根据文档内容应该改成这个样子

import {MdPreview, MdCatalog} from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';

const state = reactive({
  text: '',
  id: 'my-editor',
});

const scrollElement = document.documentElement;

然后中把内容预览组件和目录的组件放上去

<template>
<MdPreview :modelValue="state.text" :id="state.id"/>
<MdCatalog :editorId="state.id" :scrollElement="scrollElement"/>
</template>

然后就是界面相关的样式内容自己调整吧，现在的页面应该就可以正常显示文章内容咯

但是现在还没有做后端的接口设计，所以怎么让前端也能模拟调用接口返回数据呢，这个时候就有一个叫做mock.js的东西了。

Mock.js模拟请求接口

页面设计完了，但是没有后端，没有数据接口怎么办，那就模拟一下吧，这个mock.js就是通过拦截axios的请求，然后模拟出来数据返回给前端调用。好处就是不用同时管后端开发，先设计前端页面和所需字段后，开发后端的时候更好的设计每个接口和数据表。

mock.js 安装

# 安装
npm install mockjs

创建一个mock的文件夹，里面创建一个index.js文件来放置mock的模拟接口和数据内容
我们先写一个测试数据就像下面这样

import Mock from 'mockjs';

Mock.mock('/test', 'get', {

  message: 'Mock.js 加载成功！',
  data: Mock.mock({
    'items|5': [{ id: '@id', name: '@name', age: '@integer(20,50)' }],
  }),
});

然后在main.js中把这个mock数据导入进去才可以正常使用。
main.js中加上这个

import('./mock')

如果之后仅在开发模式加载的话再加个开发环境判断导入，我这暂时没用，毕竟不是多磨复杂的项目，现在的配置还是不好用的因为之前axios请求的时候，做了一个vite.config.js的代理配置，这个代理配置会导致mock不能有效拦截请求，所以这个部分需要注释掉，等到什么时候后端调用接口的时候再恢复回来。

mock.js安装后搞个数据测试下

之后在页面中请求这个test，就会得到相应的模拟数据了。

然后我们现在做的是文章详情页，那么就需要设计一下文章详情需要返回的相应的内容和结构了。
首先定义一下请求的路径和返回的内容大概就这样

然后页面进行请求

然后就可以了

具体其他高级玩法就等着之后碰到啥再查啥就完事，因为也不需要模拟数据，只要能给我拦截请求做出我想要的格式，方便之后切换后端接口，怎么方便怎么来。