Vue实现Markdown

谁践踏了优雅 2023-10-09 22:19 11阅读 0赞

前言：本文将介绍如何使用Vue和SpringBoot实现一个Markdown编辑器，其中Vue用于前端，SpringBoot用于后端，实现数据存储和接口调用。

### 项目背景 ###

Markdown是一种轻量级的标记语言，用于简化文本编辑，最初由John Gruber于2004年创建，随着GitHub等开源平台的兴起，被广泛应用于编写技术博客、文档等场景之中。

Vue是一种流行的JavaScript框架，用于构建交互式的用户界面，在前端开发中被广泛应用。

SpringBoot是一种基于Java语言的开源框架，用于创建微服务、RESTful API等后端应用程序。

本项目将结合Vue和SpringBoot，实现一个Markdown编辑器，旨在探索Vue与SpringBoot在前后端开发中的应用。

### 技术栈 ###

前端：

*  Vue
 *  Vue Router
 *  Vuex
 *  axios
 *  marked
 *  highlight.js

后端：

*  SpringBoot 2.5.1
 *  MyBatis
 *  MySQL

### 功能列表 ###

*  用户注册/登录
 *  Markdown编辑器
 *  支持文档上传、下载
 *  支持文档的增删改查

### 数据库设计 ###

#### 用户表 ####

CREATE TABLE `user` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `username` varchar(16) NOT NULL DEFAULT '',
      `password` varchar(32) NOT NULL DEFAULT '',
      `create_time` datetime NOT NULL,
      `update_time` datetime NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

#### 文档表 ####

CREATE TABLE `document` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `user_id` int(11) NOT NULL,
      `title` varchar(255) NOT NULL DEFAULT '',
      `content` text,
      `create_time` datetime NOT NULL,
      `update_time` datetime NOT NULL,
      PRIMARY KEY (`id`),
      KEY `user_id` (`user_id`),
      CONSTRAINT `document_user` FOREIGN KEY (`user_id`) REFERENCES `user` (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

### 前端实现 ###

前端代码结构如下：

.
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── api
    │   ├── assets
    │   ├── components
    │   ├── router
    │   ├── store
    │   ├── utils
    │   └── views
    ├── .editorconfig
    ├── .eslintrc.js
    ├── .gitignore
    ├── babel.config.js
    ├── package-lock.json
    └── package.json

#### 路由设计 ####

const routes = [
      {
        
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home.vue')
      },
      {
        
        path: '/login',
        name: 'Login',
        component: () => import('@/views/Login.vue')
      },
      {
        
        path: '/register',
        name: 'Register',
        component: () => import('@/views/Register.vue')
      },
      {
        
        path: '/editor',
        name: 'Editor',
        component: () => import('@/views/Editor.vue'),
        meta: {
        
          requireAuth: true
        }
      },
      {
        
        path: '/document/:id',
        name: 'Document',
        component: () => import('@/views/Document.vue'),
        meta: {
        
          requireAuth: true
        }
      },
      {
        
        path: '*',
        name: 'NotFound',
        component: () => import('@/views/NotFound.vue')
      }
    ]

#### 状态管理 ####

采用Vuex进行状态管理，主要存储用户登录信息和文档列表。

#### 组件设计 ####

##### Login（登录） #####

包括用户名和密码的输入框以及登录按钮。

##### Register（注册） #####

包括用户名、密码、确认密码的输入框和注册按钮。

##### Nav（导航栏） #####

包括LOGO、文档列表和个人信息按钮，可跳转到编辑器和个人中心页面。

##### Editor（编辑器） #####

包括文档标题和Markdown编辑器，可保存为草稿或发布为文章。

##### Document（文档详情） #####

展示文档的标题和内容，可进行编辑和删除。

##### NotFound（404页面） #####

展示页面不存在的提示信息。

#### 封装API ####

使用axios封装了后台API，包括用户注册/登录、文档相关操作等。

import axios from 'axios'
    
    const API_BASE_URL = 'http://localhost:8080/api'
    
    export const register = (username, password) =>
      axios.post(`${
          API_BASE_URL}/register`, {
         username, password })
    
    export const login = (username, password) =>
      axios.post(`${
          API_BASE_URL}/login`, {
         username, password })
    
    export const logout = () => axios.post(`${
          API_BASE_URL}/logout`)
    
    export const createDocument = (title, content) =>
      axios.post(`${
          API_BASE_URL}/documents`, {
         title, content })
    
    export const updateDocument = (id, title, content) =>
      axios.put(`${
          API_BASE_URL}/documents/${
          id}`, {
         title, content })
    
    export const deleteDocument = (id) => axios.delete(`${
          API_BASE_URL}/documents/${
          id}`)
    
    export const getDocument = (id) => axios.get(`${
          API_BASE_URL}/documents/${
          id}`)
    
    export const getDocuments = () => axios.get(`${
          API_BASE_URL}/documents`)

#### Markdown解析 ####

使用marked.js和highlight.js解析Markdown文本和代码块，提高用户的阅读体验。

import marked from 'marked'
    import hljs from 'highlight.js/lib/core'
    
    marked.setOptions({
        
      highlight: (code, lang) => {
        
        if (lang && hljs.getLanguage(lang)) {
        
          return hljs.highlight(lang, code).value
        }
        return hljs.highlightAuto(code).value
      }
    })

### 后端实现 ###

后端代码结构如下：

.
    ├── src
    │   ├── main
    │   │   ├── java
    │   │   │   └── com
    │   │   │       └── example
    │   │   │           └── demo
    │   │   │               ├── controller
    │   │   │               ├── dto
    │   │   │               ├── interceptor
    │   │   │               ├── mapper
    │   │   │               ├── model
    │   │   │               ├── security
    │   │   │               ├── service
    │   │   │               ├── util
    │   │   │               └── DemoApplication.java
    │   │   └── resources
    │   │       ├── application-dev.yml
    │   │       ├── application-prod.yml
    │   │       ├── application.yml
    │   │       ├── mapper
    │   │       ├── static
    │   │       ├── templates
    │   │       └── logback-spring.xml
    │   ├── test
    │   │   └── java
    │   │       └── com
    │   │           └── example
    │   │               └── demo
    │   │                   └── DemoApplicationTests.java
    │   ├── .gitignore
    │   ├── mvnw
    │   ├── mvnw.cmd
    │   ├── pom.xml
    │   └── README.md

#### 数据库连接配置 ####

spring:
      datasource:
        url: jdbc:mysql://localhost:3306/demo?useSSL=false&serverTimezone=UTC
        username: root
        password: root
        driver-class-name: com.mysql.cj.jdbc.Driver
    
    mybatis:
      mapper-locations: classpath:mapper/**/*.xml
      type-aliases-package: com.example.demo.model

#### 安全配置 ####

通过Spring Security进行登录验证。

@Configuration
    @EnableWebSecurity
    public class SecurityConfig extends WebSecurityConfigurerAdapter {
        
    
        @Autowired
        private UserDetailsService userDetailsService;
    
        @Override
        protected void configure(HttpSecurity http) throws Exception {
        
            http.csrf().disable()
                    .authorizeRequests()
                    .antMatchers("/api/register", "/api/login").permitAll()
                    .anyRequest().authenticated()
                    .and()
                    .formLogin().loginPage("/api/login").permitAll()
                    .and()
                    .logout().permitAll().logoutUrl("/api/logout").logoutSuccessUrl("/api/login");
        }
    
        @Autowired
        public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        
            auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
        }
    
        @Bean
        public PasswordEncoder passwordEncoder() {
        
            return new BCryptPasswordEncoder();
        }
    }

#### 数据库映射 ####

使用MyBatis进行数据库映射。

@Mapper
    public interface UserMapper {
        
    
        @Insert("INSERT INTO user(username, password, create_time, update_time) " +
                "VALUES(#{username}, #{password}, #{createTime}, #{updateTime})")
        @Options(useGeneratedKeys = true, keyProperty = "id")
        int insert(User user);
    
        @Select("SELECT * FROM user WHERE username = #{username}")
        User findByUsername(String username);
    }
    
    @Mapper
    public interface DocumentMapper {
        
    
        @Insert("INSERT INTO document(user_id, title, content, create_time, update_time) " +
                "VALUES(#{userId}, #{title}, #{content}, #{createTime}, #{updateTime})")
        @Options(useGeneratedKeys = true, keyProperty = "id")
        int insert(Document document);
    
        @Update("UPDATE document SET title = #{title}, content = #{content}, update_time = #{updateTime} WHERE id = #{id}")
        int update(Document document);
    
        @Delete("DELETE FROM document WHERE id = #{id}")
        int delete(int id);
    
        @Select("SELECT * FROM document WHERE id = #{id}")
        Document findById(int id);
    
        @Select("SELECT * FROM document WHERE user_id = #{userId}")
        List<Document> findByUserId(int userId);
    }

#### RESTful API ####

后端提供了以下API接口：

*  /register（POST）：注册新用户
 *  /login（POST）：用户登录
 *  /logout（POST）：用户退出登录
 *  /documents（POST）：创建新文档
 *  /documents/:id（PUT）：更新文档
 *  /documents/:id（DELETE）：删除文档
 *  /documents/:id（GET）：获取指定ID文档
 *  /documents（GET）：获取所有文档

### 总结 ###

本文介绍了如何使用Vue和SpringBoot实现一个Markdown编辑器，涉及了前后端开发中的状态管理、路由设计、API封装、Markdown解析和数据库映射等方面内容。通过本项目，读者可以掌握Vue和SpringBoot在前后端开发中的应用及其基本原理。