专业的JAVA编程教程与资源

网站首页 > java教程 正文

JAVA全栈CMS系统应用summer富文本编辑器，输入框自动索引功能9

temp10 2024-10-29 16:41:21 java教程 16 ℃ 0 评论

1.富文本编辑器summernote，一款基于bootstrap框架的编辑器，自适应屏幕大小，便于多平台开发

官网：https://summernote.org/


JAVA全栈CMS系统应用summer富文本编辑器，输入框自动索引功能9

  • 页面引入cdn连接js、css
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>


2.后端更新大字段mediumText调用的mybatis方法，默认的update不支持大字段更新





3.前端页面addModule更新，mounted初始化富文本，save保存时，获取content内容

<el-form-item label="模块内容" prop="moduleContent">
    <!--<el-input id="moduleContent" class="inputLine" v-model="module.moduleContent"></el-input>-->
    <el-input id="content" v-model="module.moduleContent"></el-input>
</el-form-item>

…….
mounted() {
    console.log(this.message);
    console.log("传入的params：", this.$route.params.module);
    if (this.$route.params.module != null) {
        this.module= {};
        console.log("清空之前的category：",this.category,"清空之前的categoryUniIds：",this.categoryUniIds);
        this.category=[];
        this.categoryUniIds=[];
        console.log("清空之后的category：",this.category,"清空之后的categoryUniIds：",this.categoryUniIds);
        this.module = this.$route.params.module;
        console.log("module根据uniId查询category：",SessionStorage.get("categoryChildrenDtoList"));
        this.module.categoryChildrenDtoList=SessionStorage.get("categoryChildrenDtoList") || {};
        for(let i=0;i<this.module.categoryChildrenDtoList.length;i++){
            this.category.push(this.module.categoryChildrenDtoList[0].categoryUniId);
        }
        console.log("push进入后的category：",this.category);
        this.category=this.category.join('');
        console.log("category数组转字符串：",this.category);
        if(this.category!=null && this.category.length>0){
            this.getCategory(this.category);
        }
        //this.category=JSON.stringify(this.category);
        //console.log("JSON转换后的category：",this.category);

        let optionModule = document.getElementById("optionModule");
        let submitBtn = document.getElementById("submitBtn");
        optionModule.innerHTML = '更新模块表';
        submitBtn.innerHTML = "立即更新";
    }
    //获取session中的moduleId
    let mainModule = SessionStorage.get("mainModule");
    console.log("session传入的mainModule：", mainModule);
    if (mainModule === null ) {
        this.module.parentId = 0;
    }else{
        this.module.parentId = 0;
    }
    //获取分类
    this.getCategorys();
    //1.初始化富文本
    $("#content").summernote({
        focus:true,
        height:300
    })
    //2.获取当前module的富文本内容
    $("#content").summernote('code',this.module.moduleContent);
},
…….
save(formName) {
    let _this = this;
    let responseMsg = '';
    console.log("新增模组：", this.module);
    //前端校验
    this.$refs[formName].validate((valid) => {
        if (valid) {
            //获取富文本内容，存入content
            let content=$("#content").summernote('code');
            console.log("富文本内容：",content);
            this.module.moduleContent=content;

            this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/module/saveMC', this.module)
                .then((response) => {
                    let resp = response.data;
                    responseMsg = response;
                    console.log("响应的正确信息：", responseMsg);
                    console.log("response.data：", resp);

                    if (resp.success) {
                        console.log("保存模块表成功：", resp.responseData);
                        this.$router.push("/business/module/set");
                        //引入全局变量toast提示
                        toast.success("保存成功", "bottom-end");
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: resp.responseMsg,
                            position: "top-right",
                            type: 'warning'
                        });
                    }
                })
        } else {
            console.log('error submit!!');
            this.$notify({
                title: '填写内容错误',
                message: '请按照提示内容填写正确信息',
                position: "top-right",
                type: 'warning'
            });
            return false;
        }
    });

},


4.页面小功能：admin页面时间更新


<div class="navTopItem">
    <li class="el-icon-paperclip"></li>
    <span class="loginInfo">欢迎 cevent 登录</span>
    <span class="currentTime">{{currentTimes}}</span>
</div>

……..

data() {
    return {
        message: '这里是登录页首页',
        activeIndex: '1',
        activeIndex2: '1',
        url: "/imgs/logo300-1.png",
        isCollapse: false,
        opensNav: [],
        activeValue: '',
        openedMenu: ["0", "1", "2", "3", "4"],
        currentTimes:'',
    }
},

……..

mounted() {
    let now='';
    let timeInterval=setInterval(()=>{
        now=Tool.dateFormat("yyyy-MM-dd hh:mm:ss");
        this.currentTimes=now;
    },1000);
  • tool工具类：日期格式化
//4.增加日期格式化方法
    dateFormat:function (format,date) {
        let result;
        if(!date){
            date=new Date();
        }
        const option={
            "y+":date.getFullYear().toString(),
            "M+":(date.getMonth()+1).toString(), //月份需要加1
            "d+":date.getDate().toString(), //day为一周的第几天，date为一个月的第几天
            "h+":date.getHours().toString(),
            "m+":date.getMinutes().toString(),
            "s+":date.getSeconds().toString()
        };
        for(let i in option){
            result=new RegExp("("+i+")").exec(format);
            if(result){
                format=format.replace(result[1],(result[1].length==1)?(option[i]):(option[i].padStart(result[1].length,"0")));
            }
        }
        return format;
    },

5.后端数据排序更新sortDto

public class SortDto {
    private String uniId;
    private int currentSort;
    private int newSort;

    public String getUniId() {
        return uniId;
    }

    public void setUniId(String uniId) {
        this.uniId = uniId;
    }

    public int getCurrentSort() {
        return currentSort;
    }

    public void setCurrentSort(int currentSort) {
        this.currentSort = currentSort;
    }

    public int getNewSort() {
        return newSort;
    }

    public void setNewSort(int newSort) {
        this.newSort = newSort;
    }

    @Override
    public String toString() {
        final StringBuffer sb = new StringBuffer("SortDto{");
        sb.append("uniId='").append(uniId).append('\'');
        sb.append(", currentSort=").append(currentSort);
        sb.append(", newSort=").append(newSort);
        sb.append('}');
        return sb.toString();
    }
}

6.service新增排序方法

//10.排序方法
@Transactional
public void sort(SortDto sortDto){
    //修改当前记录的排序值
    commonModuleMapper.updateSort(sortDto);
    //排序值变大，排序区间new-old值-1
    if(sortDto.getNewSort()>sortDto.getCurrentSort()){
        commonModuleMapper.moveSortForward(sortDto);
    }
    //排序值变小，排序区间值+1
    if(sortDto.getNewSort()<sortDto.getCurrentSort()){
        commonModuleMapper.moveSortBackward(sortDto);
    }
}

7.commonModuleMapper新增排序接口

//6.更新排序
int updateSort(SortDto sortDto);

//7.newSort>currentSort，new→current区间的排序-1，current=new，删除之前的current
int moveSortForward(SortDto sortDto);
//8.newSort<currentSort, new→current区间的排序+1，current=new，删除之前的current
int moveSortBackward(SortDto sortDto);

8.commonModuleMapper新增排序sql

<!--更新排序-->
<update id="updateSort" parameterType="cevent.source.cloudcenter.server.dto.SortDto">
    update cevent_module set `sort`=#{newSort} where uni_id=#{uniId}
</update>
<!--new>current，new→current区间排序各-1 ，new=current，删除之前的sort,<![CDATA[ ...避免符号报错 ]]>-->
<update id="moveSortForward" parameterType="cevent.source.cloudcenter.server.dto.SortDto">
    <![CDATA[
    update cevent_module set `sort`=(`sort`-1) where `sort`<=#{newSort} and `sort`>=#{currentSort}
    ]]>
</update>
<!--new<current，new→current区间排序各+1，new=current，删除之前的sort-->
<update id="moveSortBackward" parameterType="cevent.source.cloudcenter.server.dto.SortDto">
    <![CDATA[
    update cevent_module set `sort`=(`sort`+1) where `sort`>=#{newSort} and `sort`<=#{currentSort}
    ]]>
</update>

9.controller调用sort排序

//更新排序
@RequestMapping("/sort")
public ResponseDataDto sort(@RequestBody SortDto sortDto){
    LOG.info("传入的sortDto：{}",sortDto);
    ResponseDataDto responseData=new ResponseDataDto();
    moduleService.sort(sortDto);
    return responseData;
}


10.员工管理表生成

  • 建表sql
# 11.员工管理表
DROP TABLE IF EXISTS `employee`;
CREATE TABLE `employee`(
	`uni_id` CHAR(8) NOT NULL DEFAULT '' COMMENT '唯一ID',
	`name` VARCHAR(50) NOT NULL COMMENT '姓名',
	`nick_name` VARCHAR(50) COMMENT '昵称',
	`login_name` VARCHAR(255) COMMENT '登录名',
	`password` VARCHAR(255) COMMENT '密码',
	`dep_id` CHAR(8) COMMENT '部门ID',
	`position` VARCHAR(50) COMMENT '职位',
	`icon` VARCHAR(255) COMMENT '头像',
	`motto` VARCHAR(255) COMMENT '座右铭',
	`intro` VARCHAR(1000) COMMENT '简介',
	`file_id` CHAR(8) COMMENT '关联文件ID',
	`create_time` datetime(3) DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime(3) DEFAULT NULL COMMENT '修改时间',
	PRIMARY KEY (`uni_id`)
)ENGINE=INNODB DEFAULT charset=utf8mb4 COMMENT='员工管理表';
  • mybatis-generator自动生成



  • 更新module表，加入employee_id字段
## 增加employee_id关联
ALTER TABLE `cevent_module` ADD COLUMN (`employee_id` CHAR(8) COMMENT '员工|employee.id');

11.module页面加载员工信息



elementUI标签应用-Autocomplete自动匹配标签



addModule页面回显员工数据

mounted() {
    this.empList = SessionStorage.get(EMP_ALL);
    console.log(this.message);
    console.log("传入的params：", this.$route.params.module);
    if (this.$route.params.module != null) {
        this.module= {};
        console.log("清空之前的category：",this.category,"清空之前的categoryUniIds：",this.categoryUniIds);
        this.category=[];
        this.categoryUniIds=[];
        console.log("清空之后的category：",this.category,"清空之后的categoryUniIds：",this.categoryUniIds);
        this.module = this.$route.params.module;
        //更新员工姓名回显
        for (let i=0;i<this.empList.length;i++){
            if(this.empList[i].uniId===this.module.employeeId){
                this.emp=this.empList[i].name;
            }
        }
        console.log("module根据uniId查询category：",SessionStorage.get(MODULE_CATEGORY_CHILDREN));
        this.module.categoryChildrenDtoList=SessionStorage.get(MODULE_CATEGORY_CHILDREN) || {};
        for(let i=0;i<this.module.categoryChildrenDtoList.length;i++){
            this.category.push(this.module.categoryChildrenDtoList[0].categoryUniId);
        }
        console.log("push进入后的category：",this.category);
        this.category=this.category.join('');
        console.log("category数组转字符串：",this.category);
        if(this.category!=null && this.category.length>0){
            this.getCategory(this.category);
        }
        //this.category=JSON.stringify(this.category);
        //console.log("JSON转换后的category：",this.category);

        let optionModule = document.getElementById("optionModule");
        let submitBtn = document.getElementById("submitBtn");
        optionModule.innerHTML = '更新模块表';
        submitBtn.innerHTML = "立即更新";
    }


gitee提交，源码开放，长期维护，欢迎fork，关注，mark，点赞，收藏，转发

gitee地址：

https://gitee.com/cevent_OS/yameng-cevent-source-cloudcenter.git

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表