java全栈CMS系统vue+element增删+正则校验

作者 : AI资源 本文共7753个字,预计阅读时间需要20分钟 发布时间: 2021-03-22 共10人阅读

1.新增前端elementUI静态页面构建AddModule

java全栈CMS系统vue+element增删+正则校验
images

gitee仓库地址:
https://gitee.com/cevent_OS/yameng-cevent-source-cloudcenter.git

  • addModule新增静态页面构建
<template>
    <div class="addModule">
        <div class="topNav">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle">新增模块</span></el-divider>
        </div>
        <div class="moduleSetNav">
        </div>
        <div class="addContent">
            <router-view></router-view>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                     :label-position="labelPosition">
                <el-form-item label="模块名称" prop="name">
                    <el-input class="inputLine" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="SEO标题" prop="seoTitle">
                    <el-input class="inputLine" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="SEO关键字" prop="seoKeyword">
                    <el-tag class="titleLeft"
                            :key="tag"
                            v-for="tag in dynamicTags"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input
                            class="input-new-tag titleLeft"
                            v-if="inputVisible"
                            v-model="inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm"
                            @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button v-else class="button-new-tag titleLeft" size="small" @click="showInput">+ 新增关键字
                    </el-button>
                </el-form-item>
                <el-form-item label="SEO描述" prop="seo_description">
                    <el-input class="textAreaWidth" type="textarea" v-model="ruleForm.name"></el-input>
                </el-form-item>

                <el-form-item class="" label="模块类型" prop="typeId">
                    <el-cascader class="titleLeft"
                                 v-model="value"
                                 :options="options"
                                 :props="{ expandTrigger: 'hover' }"
                                 @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item label="模块路径" prop="modulePath">
                    <el-input class="inputLine" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="引用模板路径" prop="templatePath">
                    <el-cascader class="titleLeft"
                                 v-model="value"
                                 :options="options"
                                 :props="{ expandTrigger: 'hover' }"
                                 @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item label="引用页内模板路径" prop="subTemplatePath">
                    <el-input class="inputLine" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="是否显示" prop="isNavShow">
                    <el-switch class="titleLeft" v-model="ruleForm.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input class="inputLine" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="图片上传" prop="picList">
                    <el-upload
                            class="upload-demo titleLeft"
                            ref="upload"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                        </el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="模块内容" prop="moduleContent">
                    <el-input class="textAreaWidth" type="textarea" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

2.java后端:公共服务包server-util下生成UU-8位短ID

自增ID的缺陷:

(1)id连续,容易被探测

(2)需要+1次查询,才能得到id的值

(3)分布式存储中,id会出现重复

UUID:根据机器、时间等多个维度生成的32位16进制数,这里封装了8位短ID

package cevent.source.cloudcenter.server.util;/**
 * Created by Cevent on 2021/3/17.
 */

import java.util.UUID;

/**
 * @author cevent
 * @description 8位UUID
 * @date 2021/3/17 21:19
 */
public class UUID8Util {
    /**
     * 短ID是根据将32位ID,转为62进制8位ID,减少存储空间
     * 原理是将UUID转为十进制,再对62取余,也可以再添加2个符号,转为64进制
     */
    public static String[] chars=new String[]{
            //定义id使用的62个数字+字母
            "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n",
            "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
            "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
            "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N",
            "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
    };

    /**
     * 获取短UUID-short
     */
    public static String getShortUUID(){
        StringBuffer shortBuffer=new StringBuffer();
        String uuid=UUID8Util.getUUID();
        for (int i=0;i<8;i++){
            String str=uuid.substring(i*4,i*4+4);
            int x=Integer.parseInt(str,16);
            //对62取余
            shortBuffer.append(chars[x%0x3E]);
        }
        return shortBuffer.toString();
    }

    /**
     * 获取32位UUID
     */
    public static String getUUID(){
        String uuid= UUID.randomUUID().toString();
        //取消"-"符号
        return uuid.replaceAll("-","");
    }

    //测试UUID转化
    public static void main(String[] args) {
        System.out.println(getShortUUID()); //XJH6Kt3h
    }
}

3.java后端:service层新增方法

//5.新增module,将传入的id转为module对象本身
public void save(ModuleDto moduleDto){
    //使用uu8位id
    moduleDto.setUniId(UUID8Util.getShortUUID());
    Module module=new Module();
    BeanUtils.copyProperties(moduleDto,module);
    moduleMapper.insert(module);
}

4.java后端:business控制层实现

//5.新增,流方式需要加@RequestBody
@RequestMapping("/save")
public ModuleDto save(@RequestBody ModuleDto moduleDto){
    LOG.info("传入的module DTO:{}",moduleDto);
    moduleService.save(moduleDto);
    return moduleDto;
}

5.postman测试

http请求:{{source-cloudcenter}}
/business/admin/module/save?uniId=88888&name=皮皮虾

images

6.前端addModule新增请求--》后端save方法

images

images

7.修改/删除module栏目功能开发

  • (1)java后端:更新save方法(兼容insert、update)
//5.新增、修改module,将传入的id转为module对象本身
public void save(ModuleDto moduleDto){
    //复制dto
    Module module= DuplicateUtil.copy(moduleDto,Module.class);
    if(StringUtils.isEmpty(moduleDto.getUniId())){
        this.insert(module);
    }else{
        this.update(module);
    }

}

//向外暴露dto,不暴露实体类:插入数据
private void insert(Module module){
    module.setUniId(UUID8Util.getShortUUID());
    if(module.getParentId()==null){
        module.setParentId(0);
    }
    if(module.getTypeId()==null){
        module.setTypeId(0);
    }
    try {
        Date now =new Date();
        String date=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(now);
        long time=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").parse(date).getTime();
        int timeInt=(int)(time/1000);
        module.setCreateTime(now);
        module.setUpdateTime(now);
        module.setiCreateTime(timeInt);
        module.setiUpdateTime(timeInt);
    } catch (ParseException e) {
        e.printStackTrace();
    }
    moduleMapper.insert(module);
}

//更新模块
private void update(Module module){
    moduleMapper.updateByPrimaryKey(module);
}

//删除模块
public void delete(String uniId){
    ModuleExample moduleExample=new ModuleExample();
    moduleMapper.deleteByPrimaryKey(uniId);
}

8.java后端:business-更新controller方法

//5.新增,流方式传参,加入@RequestBody
@PostMapping("/save")
public ResponseDataDto save(@RequestBody ModuleDto moduleDto){
    LOG.info("传入的module DTO:{}",moduleDto);
    ResponseDataDto responseData=new ResponseDataDto();
    moduleService.save(moduleDto);
    responseData.setResponseData(moduleDto);
    return responseData;
}

/** 指定请求的格式为Delete
 * 6.删除模块,如果为多个参数,就定义多个/{param}/{param}
 */
@DeleteMapping("/del/{uniId}")
public ResponseDataDto del(@PathVariable String uniId){
    LOG.info("传入的module uniId:{}",uniId);
    ResponseDataDto responseData=new ResponseDataDto();
    moduleService.delete(uniId);
    return responseData;
}

9.addModule更新title标题(传入module参数显示“更新模块”,未传入显示“新建模块”)

images

images

10.module传参edit方法this.$router.push({name:"routerName",params:{父组件传到子组件的参数}})

images

images

11.引入sweetalert2轻提示

官网:
https://sweetalert2.github.io/

  • 安装sweetalert2
asus@LAPTOP-CQRDCFKL MINGW64 /d/DEV_CODE/Intelligy_idead_code/spring/springcloud/yameng-cevent-source-cloudcenter/cevent-source-cloudcenter/cevent-ymcms-admin (master)

npm install sweetalert2 安装

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ sweetalert2@10.15.6

added 1 package from 7 contributors in 9.129s

64 packages are looking for funding

run `npm fund` for details

  • CDN引用 <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
郑重声明:
1. 本站所有内容均由互联网收集整理、网友上传,仅供大家参考、学习,不存在任何商业目的与商业用途。
2. 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
3.AI资源提供网络空间。如发现该作品上传人有侵权行为请及时与我们联系。
4. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
5. AI资源不提供任何技术支持及安装服务,并且不保证所有资源都完整可用,下单前请确定自己是否有能力安装。
6. 如有链接无法下载、失效或广告,请联系管理员处理!
7. 源码属于可复制的产品,所有购买的源码无任何理由退款!

AI资源 » java全栈CMS系统vue+element增删+正则校验

提供最优质的资源集合

立即查看 了解详情