學成在線--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.pswp.cn/news/452272.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/452272.shtml
英文地址，請注明出處：http://en.pswp.cn/news/452272.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

嵌套For循環性能優化

嵌套For循環性能優化

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。1 案例描述某日&#xff0c;在JavaEye上看到一道面試題&#xff0c;題目是這樣的&#xff1a;請對以下的代碼進行優化 Java代碼 for (int …
閱讀更多...
docker-ce安裝

docker-ce安裝

1、安裝 sudo yum -y install docker 2、加入開機自啟systemctl enable docker轉載于:https://www.cnblogs.com/runnerjack/p/8618524.html
閱讀更多...
python-study-17

python-study-17

復習 上節課復習1、什么是模塊模塊是一系列功能的集合體2、為何用模塊拿來&#xff08;內置或第三方的模塊&#xff09;主義&#xff0c;提升開發效率自定義模塊可以讓程序的各部分組件重用模塊內的功能3、如何用模塊大前提&#xff1a;模塊是被執行文件導入使用&#xff0c;模…
閱讀更多...
面向對象方法學的優點

面向對象方法學的優點

1.與人類習慣的思維方法一致面向對象的軟件技術以對象為核心&#xff0c;用這種技術開發出的軟件系統由對象組成。對象是由描述內部狀態表示靜態屬性的數據&#xff0c;以及可以對這些數據施加的操作(對象的動態行為)&#xff0c;封裝在一起所構成的統一體。面向對象的設計方法…
閱讀更多...
如何學好C語言

如何學好C語言

我相信&#xff0c;這可能是很多朋友的問題&#xff0c;我以前也有這樣的感覺&#xff0c;編程編到一定的時候&#xff0c;發現能力到了瓶頸&#xff0c;既不深&#xff0c;也不扎實&#xff0c;半吊子。比如&#xff1a;你長期地使用Java和.NET &#xff0c;這些有虛擬機的語言…
閱讀更多...
學成在線--5.CMS頁面管理開發（修改頁面）

學成在線--5.CMS頁面管理開發（修改頁面）

文章目錄1.修改頁面流程1&#xff09;前端邏輯2&#xff09;后端邏輯2.修改頁面接口定義3.后端開發--Dao4.后端開發--Service5.后端開發--Controller1&#xff09;根據id查詢頁面2&#xff09;保存頁面信息6.前端開發--頁面處理流程7.前端開發--編寫page_edit.vue8.前端開發--配…
閱讀更多...
在樹莓派上播放音頻

在樹莓派上播放音頻

https://blog.csdn.net/qinxiandiqi/article/details/39155593轉載于:https://www.cnblogs.com/Baronboy/p/9206164.html
閱讀更多...
Map四種獲取key和value值的方法，以及對map中的元素排序

Map四種獲取key和value值的方法，以及對map中的元素排序

2019獨角獸企業重金招聘Python工程師標準>>> 獲取map的值主要有四種方法&#xff0c;這四種方法又分為兩類: 一類是調用map.keySet()方法來獲取key和value的值&#xff0c; 另一類則是通過map.entrySet()方法來取值&#xff0c; 兩者的區別在于&#xff0c;前者主要…
閱讀更多...
配置Oracle Instant Client環境

配置Oracle Instant Client環境

1.配置Oracle Instant Client環境 到Oracle官網下載Oracle Instant Client&#xff0c;注意選擇x86平臺&#xff0c;Toad只認32位的Oracle Instant Client。至于版本號&#xff0c;沒有特別要求&#xff0c;版本向下兼容。 桌面上&#xff0c;右鍵點“我的電腦”&#xff0c;選…
閱讀更多...
學成在線--6.CMS頁面管理開發（刪除頁面）

學成在線--6.CMS頁面管理開發（刪除頁面）

文章目錄0.刪除用戶邏輯1.刪除頁面接口定義2.后端開發--Dao3.后端開發--Service4.后端開發--controller5.前端開發--page_list.vue添加刪除按鈕6.前端開發--page_list.vue編寫刪除事件7.后端開發--Api方法定義Api方法0.刪除用戶邏輯 1&#xff09;前端邏輯 &#xff08;1&…
閱讀更多...
諾基亞是“不跟隨”還是跟不上？

諾基亞是“不跟隨”還是跟不上？

在Android和iPhone為主流的環境下&#xff0c;諾基亞用“不跟隨”的口號表明自己欲保持個性&#xff0c;但是否也意味著其固步自封&#xff0c;跟不上時代&#xff1f; 5年市值縮水超900億歐元&#xff0c;全球業績連續4個季度虧損&#xff0c;更為可怕的是&#xff0c;被視為…
閱讀更多...
HTTP 協議（詳解）

HTTP 協議（詳解）

HTTP協議簡介&#xff1a;HTTP協議是Hyper Text Transfer Protocol(超文本傳輸協議)的縮寫&#xff0c;是用于萬維網&#xff08;www.world wide web&#xff09;服務器與本地瀏覽器之間傳輸文本的傳輸協議。 http請求協議與相應協議HTTP協議包含瀏覽器發送數據到服務器需要遵循…
閱讀更多...
對象的特點

對象的特點

對象有如下一些基本特點。(1) 以數據為中心。操作圍繞對其數據所需要做的處理來設置&#xff0c;不設置與這些數據無關的操作&#xff0c;而且操作的結果往往與當時所處的狀態 (數據的值)有關。 (2) 對象是主動的。它是進行處理的主體。不能從外部直接加工它的私有數據&a…
閱讀更多...
React Native集成Redux框架講解與應用

React Native集成Redux框架講解與應用

學過React Native的都知道&#xff0c;RN的UI是根據相應組件的state進行render的&#xff0c;而頁面又是由大大小小的組件構成&#xff0c;導致每個組件都必須維護自身的一套狀態&#xff0c;因此當頁面復雜化的時候&#xff0c;管理state會相當吃力的。而redux提供了一套機制來…
閱讀更多...
【筆試記錄】2021/3/10阿里

【筆試記錄】2021/3/10阿里

阿里20210310春招筆試記錄-Python解題 第一題 問題描述&#xff1a; 小偷從出發點按指定方向出發&#xff0c;除非遇到墻或超出城市必須轉方向&#xff0c;不然只能直走。城市大小m*n。輸入描述&#xff1a; 1. 第1行&#xff0c;三個數字m n k&#xff1b;m*n表示城市大小&…
閱讀更多...
Spring mvc中@RequestMapping 6個基本用法小結

Spring mvc中@RequestMapping 6個基本用法小結

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 小結下spring mvc中的RequestMapping的用法。 1&#xff09;最基本的&#xff0c;方法級別上應用&#xff0c;例如&#xff1a; …
閱讀更多...
學成在線--7.CMS頁面管理開發（異常處理）

學成在線--7.CMS頁面管理開發（異常處理）

文章目錄1.異常處理的問題分析2.異常處理流程3.可預知異常處理1.自定義異常類2.異常拋出類3.異常捕獲類4.異常處理測試1&#xff09;定義錯誤代碼2&#xff09;異常處理測試4.不可預知異常處理1.定義異常捕獲方法1&#xff09;異常拋出測試2&#xff09;異常捕獲方法1.異常處理…
閱讀更多...
函數重載與運算符重載

函數重載與運算符重載

有兩種重載&#xff1a;函數重載是指在同一作用域內的若干個參數特征不同的函數可以使用相同的函數名字&#xff1b;運算符重載是指同一個運算符可以施加于不同類型的操作數上面。就是對已有的運算符重新進行定義&#xff0c;賦予其另一種功能&#xff0c;以適應不同的數據類型…
閱讀更多...
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…
閱讀更多...
最新文章

Copyright @ 2022~2023