前言

在上篇文章中我们利用了路由传参实现了多页面跳转，利用线程池查询数据库，通过观察数据库拿到后端返回的数据将其展示在页面上。当点击数据时跳转到详情页面。

一， 开发详情页面

经过前面多篇文章的练习，相信开发详情页面对于大家来说是手到擒来。无非就是以下几步：

• 开发页面布局
• 向后端发送请求
• 后端在数据库中查找
• 在后端路由中经过校验将数据返回给前端
• 前端将返回的数据放到新的对象中

在这里代码就不再给出，掌握这些步骤是我们开发项目的基本要求，如果不能独立实现效果，请点击顶置链接回炉重造。

实现效果如下：

二， 富文本

首先给编辑按键edit绑定点击事件，使其能跳转到编辑页面/notePublish

 <van-icon name="edit" @click="goNotePublish" />
 
 const goNotePublish = () => {
    router.push('/notePublish')
}

富文本组件Vue-Quill

Vue-Quill 是一个基于 Vue 3 和 Quill 的富文本编辑器组件。Vue-Quill 作为 Vue 组件的形式封装了 Quill，使得在 Vue 应用中使用富文本编辑功能变得更加简单和直接。

• 点击其查看富文本的官方文档

vueup.github.io/vue-quill/

• 下载依赖

npm install @vueup/vue-quill@latest --save

• 引入 QuillEditor 和样式

import { QuillEditor } from '@vueup/vue-quill' 
import '@vueup/vue-quill/dist/vue-quill.snow.css';

• 使用引入的 QuillEditor ，你可以在文档中选择你喜欢的主题

     <QuillEditor theme="snow" placeholder="输入日记内容">

• 引入组件成功后显示如下

二，开发富文本编辑器

清楚开发需求

接下来需要做的是开发我们的简易富文本，首先思考我们需要构造哪些区域？

1. 文本编辑区域，我们已经通过引入组件成功实现
2. 主体区域，在这儿里应该包含文章标题，上传图片和选择日记分类的功能
3. 发布日记的按钮，点击按钮本篇日记内容被添加到对应分类，页面跳转到对应分类

分析清楚后我们先可以创造他们的空集

const state = reactive({
    content: '',
    title: '',
    img: [],
    sortShow: false,
    note_type: '美食'
})

接下来我们一一实现功能

开发主体区域

1. 标题区域 使用我们引入的vant库中的input框 van-field ，绑定state中的title，使用label和placeholder 提示用户输入

2. 上传图片

利用Vant组件库中的 Uploader 实现图片上传功能

• :after-read="afterRead" 获取到对应的 file 对象。
• maxCount="1"限制最大上传数量
• 使用 插槽 #input 装载自定义的内容

<template #input> 在这里的具体作用是允许开发者在 <van-field> 组件的输入部分插入自定义的内容，特别是 <van-uploader> 组件，以实现图片上传的功能

3. 选择分类

引入Vant 反馈组件中的ActionSheet ，

  <!-- 主体区域 -->
        <div class="note-wrap">
            <!-- 写标题 -->
            <div class="note-cell">
                <van-field v-model="state.title" label="标题" placeholder="请输入标题" />
            </div>
            <!-- 上传图片 -->
            <div class="note-cell">
                <!-- <input type="file" /> -->
                <van-field label="上传图片">
                    <template #input>
                        <van-uploader v-model="state.img" :after-read="afterRead" maxCount="1" />
                    </template>
                </van-field>
            </div>
            <!-- 选择分类 -->
            <div class="note-cell">
                <div class="sort" @click="state.sortShow = true">
                    <span>选择分类</span>
                    <span>{{ state.note_type }} <van-icon name="arrow" /></span>
                </div>
                <van-action-sheet v-model:show="state.sortShow" :actions="actions" @select="onSelect" />
            </div>
        </div>

当点击分类栏时将提供可选项，我们需要先将可选项给出然后实现选择功能

const actions = [
    { name: '美食' },
    { name: '旅行' },
    { name: '恋爱' },
    { name: '学习' },
    { name: '吵架' }
];

const onSelect = (item) => {
    state.sortShow = false
    state.note_type = item.name
}

通过v-model:show="state.sortShow"控制布尔值，当点击分类栏时可选项目将出现，再点击可选项消失。

发布按钮

使用Vant组件库中的button，当点击按钮时日记发布，同时会跳转回首页

 <div class="btn">
    <van-button type="primary" block @click="notePublish">发布日记</van-button>
</div>

最后实现的效果：

三，实现笔记添加功能

富文本开发完毕，接下来点击发布按钮后文本和图片等等都需要被添加到对应的分类中，说了这么多，其实 无非就是前端发送请求，后端检验后将该内容插入到数据库中，在前面的篇章中我们已经反反复复的手敲了这些操作，在这里我给出前端需要进行的操作

const notePublish = () => {
    const date = new Date()
    axios.post('/note-publish', {
        title: state.title,
        note_type: state.note_type,
        head_img: state.img.length ? state.img[0].content : '',
        note_content: state.content,
        nickname: JSON.parse(localStorage.getItem('userInfo')).nickname,
        user_id: JSON.parse(localStorage.getItem('userInfo')).id,
        c_time: `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`

    }).then(res => {
        console.log(res);

        showSuccessToast('成功文案');
        router.push({
            path: '/noteClass'
        })
    })
}

接下来需要你在后端校验请求，将前端传过来的数据插入到数据库中

如果你能成功实现功能，那么恭喜你！这是你成功开发的第一个全栈项目！

小计

在本篇文章中我们利用 Vue-Quill和 Vant 实现了富文本编辑器的开发，最后将编辑的信息成功插入到数据库中实现了能够记笔记的核心功能。

全栈开发项目——NOTEBOOK系列在这里就要和您说再见了，作为面向小白的vue-node.js基础项目，如果您能做到独立开发到这种程度，那么我想您已经完全告别了小白之列。如果该系列文章对您有帮助的话，我感到万分荣幸；同时如果您对文章中有任何误解或是文章有任何讲解不对之处请您指出，我将动态的关注您的留言。

最后，愿诸位道友在未来的日子里，技术日益精进，身体康健，万事顺遂 ！