1.新增前端elementUI静态页面构建AddModule
新增按钮
addmodule页面
gitee仓库地址：
addModule新增静态页面构建<template><div class="addModule"><div class="topNav"><el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><spanclass="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-inputclass="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-uploadclass="upload-demo titleLeft"ref="upload"action="":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位idmoduleDto.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=皮皮虾
postman测试成果
6.前端addModule新增恳求--》后端save办法前端-》后端恳求逻辑
恳求发送胜利，数据回显
7.修改/删除module栏目功用开发(1)java后端：更新save办法（兼容insert、update）//5.新增、修改module，将传入的id转为module对象自己public void save(ModuleDto moduleDto){//复造dtoModule 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参数显示“更新模块”，未传入显示“新建模块”）template绑定id
mounted挂载时更新当前title
10.module传参edit办法this.$router.push({name:"routerName",params:{父组件传到子组件的参数}})父组件router传参
编纂时，通过slot-scope传参
11.引入sweetalert2轻提醒官网：https://sweetalert2.github.io/
sweetalert
安拆sweetalert2asus@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>sweetalert2
router-index.js引入router引入sweetalert
import Vue from "vue";import VueRouter from "vue-router";import ElementUI from "element-ui";import axios from "axios";import Swal from "sweetalert2";import Login from "../views/Login";//admin组件import Admin from "../views/Admin";import SiteData from "../views/main/SiteData";import Module from "../views/main/Module";import AddModule from "../views/main/module/AddModule";import ModuleInfo from "../views/main/module/ModuleInfo";import ModuleFile from "../views/main/module/ModuleFile";//公共组件import PageHelper from "../components/PageHelper";import "element-ui/lib/theme-chalk/index.css";Vue.use(VueRouter);Vue.use(ElementUI);//设置装备摆设vue全局变量：肆意组件--》this.$ajax可利用axiosVue.prototype.$axios=axios;Vue.prototype.$Swal=Swal;const routes = [{path: /,name: Login,//component:Login,/*那里可利用redirect施行跳转利用redirect区别，输入肆意途径，途径名:8080/asdasdasd城市更改为:8080/login*/redirect: /login}, {path: /login,component: Login}, {path: /,name: admin,component: Admin,children: [{ //子路由不以斜杠/开头途径path: system/site/data,name:system/site/data,component: SiteData,},{path: business/module/set,name:business/module/set,component: Module,},{path: business/module/add,name: business/module/add,component: AddModule,children:[{path:info,name:info,component:ModuleInfo,},{path:file,name:file,component:ModuleFile,},]}]},{path: /pageHelper,name: PageHelper,component: PageHelper}]const router = new VueRouter({/*后端数据恳求形式：history前端无恳求形式#(难以恳求后端数据)：hash*/mode: history,//vue-router内置变量途径，指向public目次base: process.env.BASE_URL,routes})//抛出路由export default router;module的del办法惹人this.$Swal....前端module中引入confirm提醒框
sweetalert效果
sweetalert2实现删除confirm
实现修改module功用
12.前规矩则校验：判断大小写字母、数字、空格，去空格换-横杠Template开启正则校验template前端实现逻辑
Script的data中放入校验规则validatevalidate正则校验实现逻辑
Data-return中锁定校验对象return的rules锁定template中对象属性
Methods的办法在保留之前停止前端校验引用，那里的$refs引用在点击时传入的formNamesave保留之前挪用validate校验规则
前端校验效果
git仓库地址：当前current提交
评论列表