14. 开发电影评论功能

600 字约 2 分钟读完1501 次阅读更新于 2026/5/3

筛选短评和长评的分页数据

在 sql 这里加一个 type 的条件和 filmId 条件

在前端页面这里加一个 type 的参数和filmId 参数

富文本

官网

https://www.wangeditor.com/

安装

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

引入

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, ref, shallowRef} from "vue";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

初始化（表单中）

wangEditor 5 富文本字段可以直接和form中的字段使用v-model进行绑定

<el-form-item label="项目介绍" prop="content">
  <div style="border: 1px solid #ccc; width: 100%">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :mode="mode"
    />
    <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="data.form.comment"
        :mode="mode"
      	:defaultConfig="editorConfig"
        @onCreated="handleCreated"
    />
  </div>
</el-form-item>

/* wangEditor5 初始化开始 */
const baseUrl = import.meta.env.VITE_BASE_URL
const editorRef = shallowRef()  // 编辑器实例，必须用 shallowRef
const mode = 'default' 
const editorConfig = { MENU_CONF: {} }
// 图片上传配置
editorConfig.MENU_CONF['uploadImage'] = {
  server: baseUrl + '/files/wang/upload',  // 服务端图片上传接口
  fieldName: 'file'  // 服务端图片上传接口参数
}
// 组件销毁时，也及时销毁编辑器，否则可能会造成内存泄漏
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
// 记录 editor 实例，重要！
const handleCreated = (editor) => {
  editorRef.value = editor 
}
/* wangEditor5 初始化结束 */

从外面引入的图片无法显示怎么办？

在 index.html 里面加一个标签即可

<meta name="referrer" content="never">

本节课源码