我要实现一个功能,在管理端用富文本编辑后,将数据保存到数据库,然后在移动端用vue形式展示内容,如何保留富文本编辑好的内容,分前后端给我一个代码示例
时间: 2024-02-25 07:52:51 浏览: 97
好的,这里给您提供一份前后端分离的代码示例:
后端Java代码:
```java
@RestController
@RequestMapping("/api")
public class ContentController {
@Autowired
private ContentService contentService;
@PostMapping("/content")
public void saveContent(@RequestBody Content content) {
contentService.save(content);
}
@GetMapping("/content/{id}")
public Content getContent(@PathVariable Long id) {
return contentService.getById(id);
}
}
```
这里使用了Spring Boot框架,通过@RestController注解将类标记为Controller并启用RESTful风格的接口,@RequestMapping注解定义了接口的根路径。@PostMapping注解表示接收POST请求,@RequestBody注解表示请求体中的JSON数据将被映射到Content对象中。
ContentService和Content对象的定义略过,这里假设已经实现了。
前端Vue代码:
```vue
<template>
<div>
<div ref="editor"></div>
<button @click="saveContent">保存</button>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver/theme';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/link';
export default {
name: 'Editor',
data() {
return {
editor: null,
content: '',
}
},
mounted() {
tinymce.init({
selector: this.$refs.editor,
plugins: 'advlist autolink lists link',
toolbar: 'undo redo | bold italic | bullist numlist | link',
height: 500,
setup: (editor) => {
this.editor = editor;
editor.on('change', () => {
this.content = editor.getContent();
});
},
});
},
methods: {
saveContent() {
axios.post('/api/content', {content: this.content})
.then(() => {
alert('保存成功');
}).catch((error) => {
alert('保存失败:' + error.message);
});
}
}
}
</script>
```
这里使用了Vue.js框架和tinymce富文本编辑器。mounted钩子函数中初始化了tinymce编辑器,并使用setup方法监听了编辑器内容的变化,将内容保存到了组件的data中。saveContent方法将保存的内容通过axios.post方法发送到后端的/api/content接口。
当移动端需要展示富文本内容时,可使用Vue.js和v-html指令将内容直接渲染到页面上。例如:
```vue
<template>
<div v-html="content"></div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Content',
data() {
return {
content: '',
}
},
mounted() {
axios.get('/api/content/' + this.$route.params.id)
.then((response) => {
this.content = response.data.content;
}).catch((error) => {
alert('获取内容失败:' + error.message);
});
},
}
</script>
```
这里使用了Vue Router,从URL中获取内容ID参数,并通过axios.get方法从后端的/api/content/{id}接口获取内容。将获取到的内容通过v-html指令渲染到页面上。
阅读全文