Vue实现Markdown

这篇具有很好参考价值的文章主要介绍了Vue实现Markdown。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:本文将介绍如何使用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在前后端开发中的应用及其基本原理。文章来源地址https://www.toymoban.com/news/detail-436913.html

到了这里,关于Vue实现Markdown的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 毕业设计:Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前言

    资源链接:https://download.csdn.net/download/m0_46573428/87796553 前言:毕业设计:Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前言_人工智能技术小白修炼手册的博客-CSDN博客 首页与导航:毕业设计:Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前端:首页与导航栏_人工智

    2024年02月14日
    浏览(48)
  • vue3中使用cherry-markDown步骤

    附cherry-markDown官网及api使用示例 官网:GitHub - Tencent/cherry-markdown: ✨ A Markdown Editor api:Cherry Markdown API 考虑到复用性,我在插件的基础上做了二次封装,步骤如下: 1.下载  npm install cherry-markdown --save 2..先在html中定义一个markDown容器,设置id及样式 3.在js中引入markDown 4.定义需

    2024年02月12日
    浏览(33)
  • 【微信小程序】如何获得自己当前的定位呢?本文利用逆地址解析、uni-app带你实现

    目录 前言 效果展示 一、在腾讯定位服务配置微信小程序JavaScript SDK 二、使用uni-app获取定位的经纬度 三、 逆地址解析,获取精确定位 四、小提示 在浏览器搜索腾讯定位服务,找到官方网站,利用微信或者其他账号注册登录,登录后如下图操作 点进去之后,可以看到如下图

    2024年01月19日
    浏览(87)
  • 如何使用VSCode创建编辑Markdown文件

            前往VSCode的官方网站下载并安装VSCode。VSCode的安装步骤很简单,可以在网上搜索一篇教程并按照教程一步步安装即可。VSCode的官方网站下载位置如下图: 打开VSCode软件 点击软件左侧的扩展按钮,如下图: 然后在搜索框搜索需要安装的插件,点击\\\"Install\\\"按钮,等待

    2024年02月08日
    浏览(35)
  • [零基础]如何在vscode中使用markdown

    markdown是一种文本编辑的语法,个人认为它与word等其他文本编辑工具相比更能够让笔者专注于自己书写的文章的内容而不是格式。使用者可以通过一种代码语法,来完成对所写文章格式的编辑,从而让使用者的手不需要离开键盘就能够完成文章,提高效率和专注度。 markdown对

    2024年02月06日
    浏览(41)
  • 不用微信也可以聊天?教你使用Windows文本文档实现在外随时沟通!

    在现在这个时代,几乎所有人电脑上、手机里都会有两个必不可少的聊天工具,微信和QQ。曾经百花齐放的即时通讯软件,经过这么多年的搏杀,也只剩下鹅厂旗下的产品一家独大。难道我们只能使用这两款聊天软件相互沟通了吗?答案自然是否定的。当然,笔者并不是为了

    2023年04月15日
    浏览(37)
  • Pycharm中如何使用Markdown?只需装这个插件!

    由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被使用来撰写电子书。所以Markdown是一个优秀的

    2024年01月21日
    浏览(50)
  • 1.前言和介绍

    从零学习算法部署-TensorRT篇 杜老师推出的 tensorRT从零起步高性能部署 课程,之前有看过一遍,但是没有做笔记,很多东西也忘了。这次重新撸一遍,顺便记记笔记 本次主要是对课程的内容和所需环境做一个简要的介绍 课程大纲可看下面的思维导图 本课程以 TensorRT 和 PyTor

    2024年02月13日
    浏览(56)
  • WebGL前言——WebGL相关介绍

    第一讲内容主要介绍WebGL技术和相应的硬件基础部分,在初级课程和中级课程的基础上,将技术和硬件基础进行串联,能够对WebGL从产生到消亡有深刻全面的理解。同时还介绍WebGL大家在初级课程和中级课程中的一些常见错误以及错误调试的办法。 先热身一下吧,看个问题:如

    2023年04月08日
    浏览(46)
  • 【RabbitMQ教程】前言 —— 中间件介绍

                                                                       💧 【 R a b b i t M Q 教程】前言——中间件介绍 color{#FF1493}{【RabbitMQ教程】前言 —— 中间件介绍} 【 R abbi tMQ 教程】前言 —— 中间件介绍 💧           🌷 仰望天空,妳

    2024年02月08日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包