搜富文本数据如何存入到数据库当中
想要的效果，点击标题能够提交数据：
这里能够存入到数据库当中：
解决方法是看资料，第一步先定义数据模型
实战篇-81_大事件_添加文章_接口调用_哔哩哔哩_bilibili
第二步：先定义好数据模型
第三步：参考文章管理接口编写内容
第四步：添加文章数据接口
第五步：接口自己之前编写的不一样，应该要编写成这样
第六步：按照接口的名字进行导入
第七步组件进行导入
相关资料后端接口资料：
content类
package worldtolingyidianke.file.bean; import lombok.Data; @Data public class Content { private Integer id;//主键ID private String title;//分类别名 private String content;//文章内容 }
Controller层
package worldtolingyidianke.file.controller; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import worldtolingyidianke.file.bean.Content; import worldtolingyidianke.file.bean.Result; import worldtolingyidianke.file.service.CategoryService; import worldtolingyidianke.file.service.ContentService; import javax.servlet.http.HttpServletResponse; @RestController @RequestMapping("/content") @CrossOrigin public class ContentController { @Autowired private ContentService contentService; @PostMapping("/article") // public Result<String> list(){ // return Result.success("所有的文章数据"); // } public Result content(@RequestBody Content content){ // 调用方法，添加 contentService.content(content); return Result.success(); } }
ContentMapper的资料
package worldtolingyidianke.file.mappers; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Mapper; import worldtolingyidianke.file.bean.Content; @Mapper public interface ContentMapper { // 根据用户名进行添加， @Insert("insert into content(title,content)" + " values(#{title},#{content})") void add(Content content); }
impl的类：
package worldtolingyidianke.file.service.impl; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import worldtolingyidianke.file.bean.Content; import worldtolingyidianke.file.mappers.ContentMapper; import worldtolingyidianke.file.service.ContentService; @Service public class ContentServiceImpl implements ContentService { @Autowired private ContentMapper contentMapper; @Override public void content(Content content){ contentMapper.add(content); } }
contentSerivce
package worldtolingyidianke.file.service; import worldtolingyidianke.file.bean.Content; public interface ContentService { void content(Content content); }
前端组件：
<template> <div class="editorContainer"> <el-form ref="ruleFormRef" style="max-width: 900px" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon> <el-form-item label="标题" prop="name"> <el-input v-model="articleData.title" /> </el-form-item> <div class="editorContent"> <div class="leftcontentContainer">内容</div> <div class="editor"> <quill-editor content-type='html' v-model:content='articleData.content' :options='options' @blur='editorBlur($event)' /> <!-- <quill-editor content-type='html' :content='content' :options='options' @blur='editorBlur($event)' /> --> <!-- <quill-editor content-type='html' :content='content' :options='options' @blur='editorBlur($event)' /> --> </div> </div> <div class="mb-4"> <el-button round>保存</el-button> <el-button type="primary" round @click="addArticle">提交</el-button> </div> </el-form> </div> </template> <script setup> import { ref } from 'vue'; import { contentService } from '@/api/content.js' import { ElMessage } from 'element-plus'; const articleData = ref({ title: '', content: '' }) const addArticle = async () => { let result = await contentService(articleData.value); ElMessage.success(result.msg ? result.msg : '添加成功') } // let content = ref("<p> 初始内容。。。</p>"); let options = { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色 [{ align: [] }], // 对齐方式 [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 [{ font: [] }], // 字体种类 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ direction: 'ltl' }], // 文本方向 [{ direction: 'rtl' }], // 文本方向 [{ indent: '-1' }, { indent: '+1' }], // 缩进 [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表 [{ script: 'sub' }, { script: 'super' }], // 上标/下标 ['blockquote', 'code-block'], // 引用 代码块 ['clean'], // 清除文本格式 ['link', 'image', 'video'], // 链接、图片、视频 ], }, }; </script> <script> </script> <style lang="less"> .demo-ruleForm { margin: 0 auto; } .div span { text-align: left; } .editorContent { display: flex; } .editorContainer { margin-top: 15px; } .leftcontentContainer { margin-right: 9px; } .editor { width: 857px; margin-bottom: 60px; } .ql-container { height: 400px; } .demo-ruleForm { width: 1000px; } .mb-4 button { margin: 0 0 0 760px; } </style>
until的工具类
import axios from "axios"; import { ElMessage } from "element-plus"; const baseURL = '/api'; const instance = axios.create({ baseURL: baseURL }); import { useTokenStore } from '@/stores/token.js' //添加请求拦截器 instance.interceptors.request.use( (config) => { //请求前的回调 //添加token const tokenStore = useTokenStore(); //判断有没有token if (tokenStore.token) { config.headers.Authorization = tokenStore.token } return config; }, (err) => { //请求错误的回调 Promise.reject(err) } ) instance.interceptors.response.use( result => { // 判断业务状态代码 if (result.data.code === 0) { return result.data; } // 操作失败 // alert(result.data.msg ? result.data.msg : '服务异常') ElMessage.error(result.data.msg ? result.data.msg : '服务异常') return Promise.reject(result.data) }, err => { alert('服务异常'); return Promise.reject(err); } ) // 导出axios自定义函数 export default instance
contentAPI的接口
// 导入request.js工具 import request from '@/utils/request.js' // 提供调用注册接口的函数 export const contentService = (articleData) => { // 借助于ContentService完成传递 return request.post('/content/article', articleData) }
