学成在线--4.CMS页面管理开发（新增页面）

文章目录

    • 1.定义新增页面接口
      • 1）在model工程中定义响应模型
      • 2）在api工程中添加接口
    • 2.新增页面服务端开发
      • 1）Dao
      • 2）Service
      • 3）Controller
    • 3.新增页面前端开发
      • 1）创建page_add.vue
      • 2）配置路由
      • 3）在page_list.vue中添加“添加页面”的按钮
      • 4）page_add.vue中添加数据对象
      • 5）站点及模板数据（先使用静态数据）
      • 6）page_add.vue中添加“返回”按钮
      • 7）校验表单数据
      • 8）测试
    • 4.Api调用
      • 1）在cms.js中定义page_add方法
      • 2）添加“确认提交”事件
      • 3）测试

1.定义新增页面接口

1）在model工程中定义响应模型

@Data
public class CmsPageResult extends ResponseResult {
CmsPage cmsPage;
public CmsPageResult(ResultCode resultCode,CmsPage cmsPage) {
super(resultCode);
this.cmsPage = cmsPage;}
}

2）在api工程中添加接口

@ApiOperation("添加页面")
public CmsPageResult add(CmsPage cmsPage);

2.新增页面服务端开发

在cms_page集合上创建页面名称、站点Id、页面webpath为唯一索引

1）Dao

添加新页面之前，需要查询一下页面是否在数据库中已经存在。

添加根据页面名称、站点Id、页面webpath查询页面方法，此方法用于校验页面是否存在

public interface CmsPageRepository extends MongoRepository<CmsPage,String> {
//根据页面名称、站点id、页面访问路径查询
CmsPage findByPageNameAndSiteIdAndPageWebPath(String pageName,String siteId,String
pageWebPath);

若页面在数据库中不存在，使用 CmsPageRepository父类MongoRepository提供的save方法进行保存。

2）Service

//添加页面
public CmsPageResult add(CmsPage cmsPage){
//校验页面是否存在，根据页面名称、站点Id、页面webpath查询
CmsPage cmsPage1 = cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(),
cmsPage.getSiteId(), cmsPage.getPageWebPath());
if(cmsPage1==null){
cmsPage.setPageId(null);//添加页面主键由spring data 自动生成
cmsPageRepository.save(cmsPage);
//返回结果
CmsPageResult cmsPageResult = new CmsPageResult(CommonCode.SUCCESS,cmsPage);
return cmsPageResult;
} r
eturn new CmsPageResult(CommonCode.FAIL,null);
}

3）Controller

//添加页面
@Override
@PostMapping("/add")
public CmsPageResult add(@RequestBody CmsPage cmsPage) {
return pageService.add(cmsPage);
}

3.新增页面前端开发

1）创建page_add.vue

使用Element-UI的form组件编写添加表单内容，页面效果如下：
在这里插入图片描述代码如下：
在这里插入图片描述

<template>
<div><el-form   :model="pageForm" label-width="80px" :rules="pageFormRules" ref="pageForm"><el-form-item label="所属站点" prop="siteId"><el-select v-model="pageForm.siteId" placeholder="请选择站点"><el-optionv-for="item in siteList":key="item.siteId":label="item.siteName":value="item.siteId"></el-option></el-select></el-form-item><el-form-item label="选择模版" prop="templateId"><el-select v-model="pageForm.templateId" placeholder="请选择"><el-optionv-for="item in templateList":key="item.templateId":label="item.templateName":value="item.templateId"></el-option></el-select></el-form-item><el-form-item label="页面名称" prop="pageName"><el-input v-model="pageForm.pageName" auto-complete="off" ></el-input></el-form-item><el-form-item label="别名" prop="pageAliase"><el-input v-model="pageForm.pageAliase" auto-complete="off" ></el-input></el-form-item><el-form-item label="访问路径" prop="pageWebPath"><el-input v-model="pageForm.pageWebPath" auto-complete="off" ></el-input></el-form-item><el-form-item label="物理路径" prop="pagePhysicalPath"><el-input v-model="pageForm.pagePhysicalPath" auto-complete="off" ></el-input></el-form-item><el-form-item label="类型"><el-radio-group v-model="pageForm.pageType"><el-radio class="radio" label="0">静态</el-radio><el-radio class="radio" label="1">动态</el-radio></el-radio-group></el-form-item><el-form-item label="创建时间"><el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.pageCreateTime"></el-date-picker></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="addSubmit" >提交</el-button><el-button type="primary" @click="go_back" >返回</el-button></div>
</div>
</template>
<script>/*编写页面静态部分，即model及vm部分。*/import * as cmsApi from '../api/cms'export default {data() {return {siteList:[],templateList:[],pageForm:{siteId:'',templateId:'',pageName: '',pageAliase: '',pageWebPath: '',pageParameter:'',pagePhysicalPath:'',pageType:'',pageCreateTime: new Date()},pageFormRules: {siteId:[{required: true, message: '请选择站点', trigger: 'blur'}],templateId:[{required: true, message: '请选择模版', trigger: 'blur'}],pageName: [{required: true, message: '请输入页面名称', trigger: 'blur'}],pageWebPath: [{required: true, message: '请输入访问路径', trigger: 'blur'}],pagePhysicalPath: [{required: true, message: '请输入物理路径', trigger: 'blur'}]}}},methods:{addSubmit:function(){this.$refs['pageForm'].validate((valid) => {if (valid) {//表单校验成功//确认提示this.$confirm('您确认提交吗?', '提示', { }).then(() => {//调用page_add方法请求服务端的新增页面接口cmsApi.page_add(this.pageForm).then(res=>{//解析服务端响应内容if(res.success){/*this.$message({message: '提交成功',type: 'success'})*/this.$message.success("提交成功")//将表单清空this.$refs['pageForm'].resetFields();}else if(res.message){this.$message.error(res.message)}else{this.$message.error("提交失败")}});})}});},//返回go_back:function () {this.$router.push({path:'/cms/page/list',query:{page:this.$route.query.page,//取出路由中的参数siteId:this.$route.query.siteId}})}},created(){//初始化站点列表this.siteList = [{siteId:'5a751fab6abb5044e0d19ea1',siteName:'门户主站'},{siteId:'102',siteName:'测试站'}]//模板列表this.templateList = [{templateId:'5a962b52b00ffc514038faf7',templateName:'首页'},{templateId:'5a962bf8b00ffc514038fafa',templateName:'轮播图'}]}}
</script>
<style>/*编写页面样式，不是必须*/
</style>

2）配置路由

在cms模块的路由文件中配置“添加页面”的路由，由于“添加页面”不需要显示为一个菜单，这里hidden设置为true隐藏菜单
在这里插入图片描述

3）在page_list.vue中添加“添加页面”的按钮

实际情况是用户进入页面查询列表，点击“新增页面”按钮进入新增页面窗口，在查询按钮的旁边添加：

<router‐link class="mui‐tab‐item" :to="{path:'/cms/page/add/'}">
<el‐button type="primary" size="small">新增页面</el‐button>
</router‐link>

说明：
router-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是标签
to：目标路由地址

4）page_add.vue中添加数据对象

data(){
return {
//站点列表
siteList:[],
//模版列表
templateList:[],
//新增界面数据
pageForm: {
siteId:'',
templateId:'',
pageName: '',
pageAliase: '',
pageWebPath: '',
pageParameter:'',
pagePhysicalPath:'',
pageType:'',
pageCreateTime: new Date()
}
}
},
methods:{
addSubmit(){
alert("提交")
}
}

5）站点及模板数据（先使用静态数据）

在created钩子方法中定义，created是在html渲染之前执行，这里推荐使用created。

created:function(){
//初始化站点列表
this.siteList = [
{
siteId:'5a751fab6abb5044e0d19ea1',
siteName:'门户主站'
},
{
siteId:'102',
siteName:'测试站'
}
] /
/模板列表
this.templateList = [
{
templateId:'5a962b52b00ffc514038faf7',
templateName:'首页'
},
{
templateId:'5a962bf8b00ffc514038fafa',
templateName:'轮播图'
}
]
}

6）page_add.vue中添加“返回”按钮

进入新增页面后只能通过菜单再次进入页面列表，可以在新增页面添加“返回”按钮，点击返回按钮返回到页面列表。

page_list.vue 页面“新增页面”按钮带上参数，query表示在路由url上带上参数（下边需要使用）

<router‐link class="mui‐tab‐item" :to="{path:'/cms/page/add/',query:{
page: this.params.page,
siteId: this.params.siteId}}">
<el‐button type="primary" size="small">新增页面</el‐button>
</router‐link>

在page_add.vue上定义返回按钮

<el‐button type="primary" @click="go_back" >返回</el‐button>

在page_add.vue上定义返回方法

go_back(){
this.$router.push({
path: '/cms/page/list', query: {
page: this.$route.query.page,
siteId:this.$route.query.siteId
}
})
}

说明：this. $route.query 表示取出路由上的参数列表，有两个取路由参数的方法：

a、通过在路由上添加key/value串使用this.$route.query来取参数，例如：/router1?id=123 ,/router1?id=456
可以通过this. $ route.query.id获取参数id的值。

b、通过将参数作为路由一部分进行传参数使用this.$route.params来获取，例如：定义的路由为/router1/:id ，请
求/router1/123时可以通过this. $ route.params.id来获取，此种情况用this.$route.query.id是拿不到的。

进入查询列表，从url中获取页码和站点id并赋值给数据模型对象，从而实现页面回显

created() {
//从路由上获取参数
this.params.page = Number.parseInt(this.$route.query.page||1);
this.params.siteId = this.$route.query.siteId||'';

小技巧：使用 ||返回第一个有效值

7）校验表单数据

Element-UI的Form组件提供表单校验的方法：
a) 在form属性上配置rules（表单验证规则）

<el‐form :model="pageForm" :rules="pageFormRules" label‐width="80px" >

b) 在数据模型中配置校验规则：

pageFormRules: {
siteId:[
{required: true, message: '请选择站点', trigger: 'blur'}
],
templateId:[
{required: true, message: '请选择模版', trigger: 'blur'}
],
pageName: [
{required: true, message: '请输入页面名称', trigger: 'blur'}
],
pageWebPath: [
{required: true, message: '请输入访问路径', trigger: 'blur'}
],
pagePhysicalPath: [
{required: true, message: '请输入物理路径', trigger: 'blur'}
]
}

c ) 点击提交按钮触发校验,在form表单上添加 ref属性（ref=“pageForm”）在校验时引用此表单对象

<
el‐form :model="pageForm" :rules="pageFormRules" label‐width="80px" ref="pageForm">

d ) 执行校验

this.$refs.pageForm.validate((valid) => {
if (valid) {
alert('提交');
} else {
alert('校验失败');
return false;
}
})

8）测试

在这里插入图片描述

4.Api调用

1）在cms.js中定义page_add方法

/*页面添加*/
export const page_add = params => {
return http.requestPost(apiUrl+'/cms/page/add',params)
}

2）添加“确认提交”事件

本功能使用到两个UI组件：
1、使用element-ui的message-box组件弹出确认提交窗口

this.$confirm('确认提交吗？', '提示', {}).then(() => {｝）

2、使用 message组件提示操作结果

this.$message({
message: '提交成功',
type: 'success'
})

完整的代码如下：

addSubmit(){
this.$refs.pageForm.validate((valid) => {
if (valid) {
this.$confirm('确认提交吗？', '提示', {}).then(() => {
cmsApi.page_add(this.pageForm).then((res) => {
console.log(res);
if(res.success){
this.$message({
message: '提交成功',
type: 'success'
});
this.$refs['pageForm'].resetFields();
}else{
this.$message.error('提交失败');
}
});
});
}
});
}

3）测试

1、进入页面列表页面
在这里插入图片描述
2、点击“增加页面”按钮
在这里插入图片描述3、输入页面信息点击“提交”

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/452272.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

嵌套For循环性能优化

嵌套For循环性能优化

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。1 案例描述某日&#xff0c;在JavaEye上看到一道面试题&#xff0c;题目是这样的&#xff1a;请对以下的代码进行优化 Java代码 for (int …
阅读更多...
python-study-17

python-study-17

复习 上节课复习1、什么是模块模块是一系列功能的集合体2、为何用模块拿来&#xff08;内置或第三方的模块&#xff09;主义&#xff0c;提升开发效率自定义模块可以让程序的各部分组件重用模块内的功能3、如何用模块大前提&#xff1a;模块是被执行文件导入使用&#xff0c;模…
阅读更多...
学成在线--5.CMS页面管理开发（修改页面）

学成在线--5.CMS页面管理开发（修改页面）

文章目录1.修改页面流程1&#xff09;前端逻辑2&#xff09;后端逻辑2.修改页面接口定义3.后端开发--Dao4.后端开发--Service5.后端开发--Controller1&#xff09;根据id查询页面2&#xff09;保存页面信息6.前端开发--页面处理流程7.前端开发--编写page_edit.vue8.前端开发--配…
阅读更多...
Map四种获取key和value值的方法，以及对map中的元素排序

Map四种获取key和value值的方法，以及对map中的元素排序

2019独角兽企业重金招聘Python工程师标准>>> 获取map的值主要有四种方法&#xff0c;这四种方法又分为两类: 一类是调用map.keySet()方法来获取key和value的值&#xff0c; 另一类则是通过map.entrySet()方法来取值&#xff0c; 两者的区别在于&#xff0c;前者主要…
阅读更多...
HTTP 协议（详解）

HTTP 协议（详解）

HTTP协议简介&#xff1a;HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写&#xff0c;是用于万维网&#xff08;www.world wide web&#xff09;服务器与本地浏览器之间传输文本的传输协议。 http请求协议与相应协议HTTP协议包含浏览器发送数据到服务器需要遵循…
阅读更多...
React Native集成Redux框架讲解与应用

React Native集成Redux框架讲解与应用

学过React Native的都知道&#xff0c;RN的UI是根据相应组件的state进行render的&#xff0c;而页面又是由大大小小的组件构成&#xff0c;导致每个组件都必须维护自身的一套状态&#xff0c;因此当页面复杂化的时候&#xff0c;管理state会相当吃力的。而redux提供了一套机制来…
阅读更多...
学成在线--7.CMS页面管理开发（异常处理）

学成在线--7.CMS页面管理开发（异常处理）

文章目录1.异常处理的问题分析2.异常处理流程3.可预知异常处理1.自定义异常类2.异常抛出类3.异常捕获类4.异常处理测试1&#xff09;定义错误代码2&#xff09;异常处理测试4.不可预知异常处理1.定义异常捕获方法1&#xff09;异常抛出测试2&#xff09;异常捕获方法1.异常处理…
阅读更多...
Django(6)

Django(6)

为什么不用_set related_name和related_query_name的区别related_name将成为相关对象的属性&#xff0c;允许您使用外键对模型进行“倒退”。例如&#xff0c;如果ModelA有像下面这样的字段&#xff0c;那么model_b ForeignKeyField(ModelB, related_namemodel_as)这将使您能够…
阅读更多...
P5 RV1126编码测试Demo

P5 RV1126编码测试Demo

目录 前言 01 测试Demo大致流程图 02 代码分析 2.1 VI设备初始化 2.2 使能通道 —— RK_MPI_VI_EnableChn 2.3 VI 和 VENC绑定 2.4 创建 编码线程 前言 从本章开始我们将要学习嵌入式音视频的学习了 &#xff0c;使用的瑞芯微的开发板 &#x1f3ac; 个人主页&#xff1a…
阅读更多...
MP算法和OMP算法及其思想

MP算法和OMP算法及其思想

主要介绍MP(Matching Pursuits)算法和OMP(Orthogonal Matching Pursuit)算法[1]&#xff0c;这两个算法虽然在90年代初就提出来了&#xff0c;但作为经典的算法&#xff0c;国内文献(可能有我没有搜索到)都仅描述了算法步骤和简单的应用&#xff0c;并未对其进行详尽的分析&…
阅读更多...
SpringMVC详细示例实战教程

SpringMVC详细示例实战教程

一、SpringMVC基础入门&#xff0c;创建一个HelloWorld程序 1.首先&#xff0c;导入SpringMVC需要的jar包。 2.添加Web.xml配置文件中关于SpringMVC的配置 123456789101112131415<!--configure the setting of springmvcDispatcherServlet and configure the mapping-->&…
阅读更多...
学成在线--8.Freemarker入门教程

学成在线--8.Freemarker入门教程

文章目录1.FreeMarker介绍1&#xff09;常用的java模板引擎还有哪些&#xff1f;2&#xff09;freemarker是一个用Java开发的模板引擎3&#xff09;模板数据模型输出2.FreeMarker快速入门1&#xff09;创建测试工程2&#xff09;配置文件3&#xff09;创建模型类4&#xff09;创…
阅读更多...
if...elif...else...fi和case...esac的脚本条件判断式

if...elif...else...fi和case...esac的脚本条件判断式

注意1&#xff1a; if 表达式和case 表达式的区别及什么时候使用哪个要有明确的区分&#xff1f; 『 if .... then .... fi 』对于变量的判断是以『比对』的方式来分辨的&#xff0c; 如果符合状态就进行某些行为&#xff0c;并且透过较多层次 (就是elif ) 的方式来进行多个变量…
阅读更多...
安卓自定义View进阶-分类与流程

安卓自定义View进阶-分类与流程

自定义View绘制流程函数调用链(简化版) 一.自定义View分类 我将自定义View分为了两类(sloop个人分类法&#xff0c;非官方)&#xff1a; 1.自定义ViewGroup 自定义ViewGroup一般是利用现有的组件根据特定的布局方式来组成新的组件&#xff0c;大多继承自ViewGroup或各种Layout&…
阅读更多...
【笔试记录】2021/3/13美团

【笔试记录】2021/3/13美团

2021/3/13美团笔试 1.旋转二维数组 m, n map(int, input().split()) a [] for _ in range(m):a.append(list(map(int, input().split()))) for j in range(n):for k in range(m):print(a[k][j], end )print(end\n)输入输出 2.找出输入字符串中的所有数字 s input() n …
阅读更多...
学成在线--9.页面静态化

学成在线--9.页面静态化

文章目录一.页面静态化流程二.数据模型1.轮播图DataUrl接口1&#xff09;需求分析2&#xff09;接口定义3&#xff09;Dao4&#xff09;Service5&#xff09;Controller6&#xff09;测试2.远程请求接口1&#xff09;添加依赖2&#xff09;配置RestTemplate3&#xff09;测试Re…
阅读更多...
数据库MySQL/mariadb知识点——日志记录(2)二进制日志

数据库MySQL/mariadb知识点——日志记录(2)二进制日志

二进制日志 记录已提交事务导致数据改变或潜在导致数据改变的SQL语句&#xff0c;通过“重放”日志文件中的事件来生成数据副本&#xff0c;不依赖存储引擎类型。 开启二进制日志&#xff0c;默认是关闭的&#xff0c;二进制日志和数据分开存放 开启记录二进制文件的功能&#…
阅读更多...
【面试记录】Python常见面试200题及答案总结

【面试记录】Python常见面试200题及答案总结

Python常见面试200题及答案总结 /待完善/ 1. 列出5个常用python标准库&#xff1f; os&#xff1a;提供了不少与操作系统相关联的函数&#xff0c;提供了一种可移植的使用操作系统功能的方法。使用os模块中提供的接口&#xff0c;可实现跨平台访问。但是&#xff0c;并不是所…
阅读更多...
Linux负载均衡软件LVS之一（概念篇）

Linux负载均衡软件LVS之一（概念篇）

2019独角兽企业重金招聘Python工程师标准>>> 一、 LVS简介 LVS是Linux Virtual Server的简称&#xff0c;也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目&#xff0c;它的官方站点是www.linuxvirtualserver.org。现在LVS已经是 Linux标准内核的一部分…
阅读更多...
学成在线--10.页面预览

学成在线--10.页面预览

文章目录一.需求分析二. 搭建环境1.在cms服务中集成freemarker&#xff1a;2.在application.yml配置freemarker三.Service四.Controller五.页面预览测试-- 配置Nginx代理六.页面预览测试-- 添加“页面预览”链接一.需求分析 页面在发布前增加页面预览的步骤&#xff0c;方便用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023