技术标签: java
富文本是个啥呢。富文本就是一个编辑器。比如一个网站有时候需要新闻、还有博客等东西的撰写就需要一个富文本编辑器。然后这里介绍的编辑器是wangEditor。
官网是www.wangeditor.com
官网上有详细的使用教程。
首先就是安装这个编辑器啦,据官网上的提示:
打开我们的项目,在命令行中输入这个命令进行安装:
这里我们先去写后台的东西,然后再在前台来进行编辑器的引入。
我们先创建一个新闻表来装数据:
然后去后台entity实体包中写上news的实体类:
package com.why.demo.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;
import java.util.Date;
@TableName("news")
@Data
public class News {
@TableId(type = IdType.AUTO) //Mp的语法,让这个id自然顺序自增,而不是用雪花算法乱生成
private Integer id;
private String title;
private String content;
private String author;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
//@JsonFormat是springboot内部集成的一个json格式转换工具,这里是将时间格式转换
//pattern是用来转换日期格式的,年月日、时分秒,timezone是设置时区,"GMT+8"是东八区
private Date time;
}
再去写一个NewsMapper:
package com.why.demo.controller;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.why.demo.common.Result;
import com.why.demo.entity.Book;
import com.why.demo.entity.News;
import com.why.demo.mapper.BookMapper;
import com.why.demo.mapper.NewsMapper;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.Date;
@RestController //返回json格式字符串的注解
@RequestMapping("/news")
public class NewsController {
//理论上应该用三层架构,controller调用service,service调用dao的,这里图方便就直接在controller调了
@Resource
NewsMapper newsMapper;
//新增新闻
@PostMapping
//@RequestBody就是把前台传过来的json数据转换成Java对象
public Result save(@RequestBody News news){
news.setTime(new Date()); //为插入新闻实体时设置时间(它会自动转格式)
newsMapper.insert(news);
return Result.success();
}
//删除新闻,根据id删除
@DeleteMapping("/{id}")
//@PathVariable就是把前台通过{id}占位符传过来的数据解析成Long类型的id值
public Result delete(@PathVariable Long id){
newsMapper.deleteById(id);
return Result.success();
}
//更新新闻,即访问/user即可
@PutMapping
//@RequestBody就是把前台传过来的json数据转换成Java对象
public Result update(@RequestBody News news){
newsMapper.updateById(news);
return Result.success();
}
//查询新闻,用Get命令,且是分页查询
/**
* 分页查询,需要前台传过来三个参数,@RequestParm注解就是解析参数用的,如果不加后面的defaultValue设置
* 默认的话,则请求时必须携带三个参数,不然就会报404错误
* 第一个参数pageNum就是当前页的页码
* 第二个参数pageSize就是每页多少条数据
* 第三个参数search就是查询的关键字
* @param pageNum
* @param pageSize
* @param search
* @return
*/
@GetMapping
public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
@RequestParam(defaultValue = "") String search){
//下面这些操作都是Mp提供的,不懂的就需要自己去了解学习了
//分页模糊查询,结果放在Result里面直接返回出去
return Result.success(newsMapper.selectPage(new Page<>(pageNum, pageSize),Wrappers.<News>lambdaQuery().like(News::getTitle,search)));
}
}
然后后台这样就写完了,接下来我们去写前台的页面。
在views下面写一个News:
其中有一段有点经典,我截图如下:
这一段解释了怎么从当前页面中获取user对象并将其赋值给当前表单。
News.vue中内容如下:
<template>
<!--padding设置一点内边距-->
<div style="padding: 10px">
<!--功能区域-->
<div style="margin: 10px 0">
<el-button type="primary" @click="add">新增</el-button>
<el-button type="primary">导入</el-button>
<el-button type="primary">导出</el-button>
</div>
<!--搜索区域-->
<div style="margin: 10px 0">
<el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable/>
<el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
</div>
<!--后面的width可以不写,浏览器会自适应
stripe是斑马纹效果-->
<el-table :data="tableData" border stripe style="width: 100%">
<!--sortable让日期排序-->
<el-table-column prop="id" label="ID" sortable/>
<el-table-column prop="title" label="标题"/>
<el-table-column prop="author" label="作者"/>
<el-table-column prop="time" label="时间" />
<el-table-column fixed="right" label="操作">
<template #default="scope">
<el-button size="mini" @click="details(scope.row)">详情</el-button>
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
<!--弹出消息确认框-->
<el-popconfirm
confirm-button-text="是的,没错"
cancel-button-text="妈的,我再想想"
icon="el-icon-info"
icon-color="red"
title="确定删除吗?" @confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button size="mini" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页功能区域-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage4"
:page-sizes="[5,10,20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
<!--弹窗输入用户信息-->
<el-dialog v-model="dialogVisible" title="提示" width="50%">
<!--定义表单在这个弹出框内以收集新增的用户信息-->
<el-form :model="form" label-width="120px">
<el-form-item label="标题">
<el-input v-model="form.title" style="width: 50%"></el-input>
</el-form-item>
<div id="div1"> </div>
<!--<el-form-item label="内容">-->
<!--<el-input v-model="form.content" style="width: 80%"></el-input>-->
<!--</el-form-item>-->
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
<!--这个弹窗用来展示detail里的content文本内容-->
<el-dialog v-model="vis" title="详情" width="50%">
<el-card>
<div v-html="detail.content" style="min-height: 100px">
</div>
</el-card>
</el-dialog>
</div>
</template>
<script>
import E from 'wangeditor'
import request from "../utils/request";
let editor; //全局创建wangEditor对象
export default {
name: 'News',
components: {
},
data() {
return {
form: {
},
dialogVisible: false,
search: '',
//当前页
currentPage4: 1,
pageSize: 10,
total: 0,
tableData: [
],
vis:false, //定义弹窗开启关闭
detail:{
} //接收行对象
}
},
//表示在页面被加载的时候,在这个方法里面的方法就全部调用
created() {
this.load()
},
methods: {
//传一个行对象过来
details(row){
this.detail = row;
//串传完对象之后,打开弹窗进行展示
this.vis = true;
},
fileUploadSuccess(res){
console.log(res)
this.form.cover = res.data
},
//查询方法
load(){
request.get("/news",{
params: {
pageNum: this.currentPage4,
pageSize: this.pageSize,
search: this.search
}
}).then(res => {
console.log(res)
this.tableData = res.data.records
this.total = res.data.total
})
},
add(){
this.dialogVisible = true;
//清空表单域
this.form = {
};
//关联弹框里面的div中,给wangEditor对象赋值
this.$nextTick(()=>{
editor = new E('#div1')
//配置服务端接口
editor.config.uploadImgServer = 'http://localhost:9090/files/editor/upload'
editor.config.uploadFileName = "file"
editor.create();
})
},
save(){
this.form.content = editor.txt.html(); //获取编辑器里面的值然后赋值到实体当中
//得到这个单页面应用(vue是单页面应用)之前在login页面保存下来的user对象
let userStr = sessionStorage.getItem("user") || "{}"
//将userStr(其原来是json格式字符串)转成一个对象
let user = JSON.parse(userStr);
if(this.form.id){
//更新操作
request.put("/news",this.form).then(res => {
console.log(res)
if(res.code == '0'){
//element给我们提供了一个可以供显示的结果的东西,如下
this.$messageBox({
type: "success",
message: "更新成功"
})
}else{
//element给我们提供了一个可以供显示的结果的东西,如下
this.$messageBox({
type: "error",
message: res.msg
})
}
})
this.load() //每一次更新后都自动刷新表格
this.dialogVisible = false //关闭弹窗
}else{
//新增操作
//将得到的user对象中的nickName属性赋值给当前表单中的author属性
this.form.author = user.nickName;
request.post("/news",this.form).then(res => {
console.log(res)
if (res.code == '0') {
//element给我们提供了一个可以供显示的结果的东西,如下
this.$messageBox({
type: "success",
message: "新增成功"
})
} else {
//element给我们提供了一个可以供显示的结果的东西,如下
this.$messageBox({
type: "error",
message: res.msg
})
}
this.load() //每次新增完都自动刷新表格
this.dialogVisible = false //关闭弹窗
}
)}
},
handleEdit(row){
this.form = JSON.parse(JSON.stringify(row))
this.dialogVisible = true
this.$nextTick(()=>{
editor = new E('#div1')
editor.create();
editor.txt.html(row.content)
})
},
handleDelete(id){
console.log(id)
request.delete("/news/"+id).then(res =>{
if (res.code == '0') {
//element给我们提供了一个可以供显示的结果的东西,如下
this.$messageBox({
type: "success",
message: "删除成功"
})
} else {
//element给我们提供了一个可以供显示的结果的东西,如下
this.$messageBox({
type: "error",
message: res.msg
})
}
this.load() //删除之后重新加载表格的数据
})
},
handleSizeChange(pageSize){
// 改变当前每页的数据条数时触发
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum){
// 改变当前页码时触发
this.currentPage4 = pageNum
this.load()
}
}
}
</script>
访问点击编辑和新增:
集成完毕。
文章浏览阅读1.3k次。当存在dmgr能够正确管理webserver,但是又不能成功的传输 生成的plugins插件时,从一下方面检查: 1. 传教的webserver不能控制时,请检查用户名是否与远程的IHS中插件中的配置文件是否一致,路径: /was/IHS/Plugin/config/文件夹名称 2. 检查配置的httpd.conf文件是否能打开,打不开再检查远程服务器_ihs plugin
文章浏览阅读1.6k次。AES:aes是基于数据块的加密方式,也就是说,每次处理的数据时一块(16字节),当数据不是16字节的倍数时填充,这就是所谓的分组密码(区别于基于比特位的流密码),16字节是分组长度分组加密的几种模式:ECB:是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文。CBC:是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再..._cffb ecb
文章浏览阅读3.1k次。最近工程需要使用下拉刷新,但是使用网上流传的各种版本均有或多或少的bug,或者效果不完美的地方。在使用QQ的时候,在消息列表界面的下拉刷新,个人感觉效果比较棒,就做了一个高仿版,效果与QQ的基本保持一致,下面是代码实现,有不足支持,欢迎指正。_android仿qq浏览器刷新
文章浏览阅读986次。修改图像时报错:0x00007FFB930E7788 处(位于 Project1.exe 中)有未经处理的异常: Microsoft C++ 异常: cv::Exception,位于内存位置 0x000000E69A8FE160 处。但是最终也可以运行源代码:#include<opencv2/opencv.hpp>#include<iostream>#i..._cvtcolor(currentframe, currentframe, cv_bgr2gray); 0x00007ff9e863cf19 处(位
文章浏览阅读1.5w次,点赞2次,收藏2次。Carl + 空格:切换输入法caps lock:中英文切换shift + 字母:大写字母F1:回主页F3:返回F2 + 左右键(alt键 + tab):程序间切换alt + z:撤销当我们忘记快捷键时,可在任意程序中常按alt键,会显示属于该程序的快捷键。注意 ->| 键为Tab键..._罗技k580键盘按键功能图解
文章浏览阅读806次。1.XML这是一个xml的格式的示例:<?xml version="1.0" encoding="UTF-8"?><books> <book id="1001"> <name>book1</name> <info>这是第1本书的简介!</info> </book> <book id="1002"> <name>b_xml json报文格式样例
文章浏览阅读325次。作者 | Vt来源 |juejin.im/post/5e61a454e51d4526f071e1df序-碎碎叨叨在家办公的第N周,也不知道笔者工位上的键盘和显示器有没有想我,不知道会不会..._redis实现分布式锁
文章浏览阅读130次。js基础:JavaScript小技巧制作的跑马灯效果以下是我们所制作的跑马灯效果的源程序<html><head><script language="JavaScript"><!-- Hidevar scrtxt="这儿的讯息可以改为你要告诉别人的话 "+"或是注意事项 ...";var lentxt=scrtxt.length;var width=100;var pos=1-w...
文章浏览阅读95次。为什么80%的码农都做不了架构师?>>> ..._platform,shared,media,releasekey签名区别
文章浏览阅读159次。在非常多团队的引流,或业务操作中,基本上都需要使用安卓的大神级xposed框架,这段时间,我们团队买来了一批新的红米9.0以上系统,基本上都都是基于7.0以上系统,基本上都不能够获得Root的su权限,即便是有一些能但很是麻烦,甚至也有获得Root的su权限后重启设备就恢复无Root状态的情况出现,很是头疼的一件事,导致无能正常激活xposed框架,从而非常多模块也就无能正常应用。下午刚好翻阅了..._红米九a怎么弄非root
文章浏览阅读689次。ChatGPT 成功背后的技术原因及其对生命科学领域的启发。简而言之,ChatGPT 不仅是自然语言理解领域的一项技术进步,会引发新一轮信息服务和内容生成领域的商业潮流,同时,其背后基于海量数据的深度生成技术,以及基于人类反馈的强化学习技术,是更长远的进步动力,会促进生命科学等领域的长足发展。我们会再迎来一次 AI 技术进步和产业落地的浪潮。_chatgpt技术的出现,重塑了科技圈的格局并引发全球关注。请你谈谈这项技术对人
文章浏览阅读9.2k次,点赞4次,收藏28次。 1.关键字查找:(用于筛选,或者已知问题查找)1.1由现象快速查找定位经验主义,通过以往大量log的分析经验, 熟悉已知的fail log。比如CameraApp Crash log: force stopping com.asus.cameraCamera HAL/daemon crash:backtrace:其他fail/error 1.2查找log中关键字常..._在测试过程中对log怎么进行分析