网站空间代理,徐州做网站软件,自己做的网站可以发布吗,自己做网站用中文为什么是乱码文章目录1.定义新增页面接口1#xff09;在model工程中定义响应模型2#xff09;在api工程中添加接口2.新增页面服务端开发1#xff09;Dao2#xff09;Service3#xff09;Controller3.新增页面前端开发1#xff09;创建page_add.vue2#xff09;配置路由3#xff09;…
文章目录1.定义新增页面接口1在model工程中定义响应模型2在api工程中添加接口2.新增页面服务端开发1Dao2Service3Controller3.新增页面前端开发1创建page_add.vue2配置路由3在page_list.vue中添加“添加页面”的按钮4page_add.vue中添加数据对象5站点及模板数据先使用静态数据6page_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为唯一索引
1Dao
添加新页面之前需要查询一下页面是否在数据库中已经存在。
添加根据页面名称、站点Id、页面webpath查询页面方法此方法用于校验页面是否存在
public interface CmsPageRepository extends MongoRepositoryCmsPage,String {
//根据页面名称、站点id、页面访问路径查询
CmsPage findByPageNameAndSiteIdAndPageWebPath(String pageName,String siteId,String
pageWebPath);若页面在数据库中不存在使用 CmsPageRepository父类MongoRepository提供的save方法进行保存。
2Service
//添加页面
public CmsPageResult add(CmsPage cmsPage){
//校验页面是否存在根据页面名称、站点Id、页面webpath查询
CmsPage cmsPage1 cmsPageRepository.findByPageNameAndSiteIdAndPageWebPath(cmsPage.getPageName(),
cmsPage.getSiteId(), cmsPage.getPageWebPath());
if(cmsPage1null){
cmsPage.setPageId(null);//添加页面主键由spring data 自动生成
cmsPageRepository.save(cmsPage);
//返回结果
CmsPageResult cmsPageResult new CmsPageResult(CommonCode.SUCCESS,cmsPage);
return cmsPageResult;
} r
eturn new CmsPageResult(CommonCode.FAIL,null);
}3Controller
//添加页面
Override
PostMapping(/add)
public CmsPageResult add(RequestBody CmsPage cmsPage) {
return pageService.add(cmsPage);
}3.新增页面前端开发
1创建page_add.vue
使用Element-UI的form组件编写添加表单内容页面效果如下 代码如下
template
divel-form :modelpageForm label-width80px :rulespageFormRules refpageFormel-form-item label所属站点 propsiteIdel-select v-modelpageForm.siteId placeholder请选择站点el-optionv-foritem in siteList:keyitem.siteId:labelitem.siteName:valueitem.siteId/el-option/el-select/el-form-itemel-form-item label选择模版 proptemplateIdel-select v-modelpageForm.templateId placeholder请选择el-optionv-foritem in templateList:keyitem.templateId:labelitem.templateName:valueitem.templateId/el-option/el-select/el-form-itemel-form-item label页面名称 proppageNameel-input v-modelpageForm.pageName auto-completeoff /el-input/el-form-itemel-form-item label别名 proppageAliaseel-input v-modelpageForm.pageAliase auto-completeoff /el-input/el-form-itemel-form-item label访问路径 proppageWebPathel-input v-modelpageForm.pageWebPath auto-completeoff /el-input/el-form-itemel-form-item label物理路径 proppagePhysicalPathel-input v-modelpageForm.pagePhysicalPath auto-completeoff /el-input/el-form-itemel-form-item label类型el-radio-group v-modelpageForm.pageTypeel-radio classradio label0静态/el-radioel-radio classradio label1动态/el-radio/el-radio-group/el-form-itemel-form-item label创建时间el-date-picker typedatetime placeholder创建时间 v-modelpageForm.pageCreateTime/el-date-picker/el-form-item/el-formdiv slotfooter classdialog-footerel-button typeprimary clickaddSubmit 提交/el-buttonel-button typeprimary clickgo_back 返回/el-button/div
/div
/template
script/*编写页面静态部分即model及vm部分。*/import * as cmsApi from ../api/cmsexport 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 classmui‐tab‐item :to{path:/cms/page/add/}
el‐button typeprimary sizesmall新增页面/el‐button
/router‐link说明 router-link是vue提供的路由功能用于在页面生成路由链接最终在html渲染后就是标签 to目标路由地址
4page_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:轮播图
}
]
}6page_add.vue中添加“返回”按钮
进入新增页面后只能通过菜单再次进入页面列表可以在新增页面添加“返回”按钮点击返回按钮返回到页面列表。
page_list.vue 页面“新增页面”按钮带上参数query表示在路由url上带上参数下边需要使用
router‐link classmui‐tab‐item :to{path:/cms/page/add/,query:{
page: this.params.page,
siteId: this.params.siteId}}
el‐button typeprimary sizesmall新增页面/el‐button
/router‐link在page_add.vue上定义返回按钮
el‐button typeprimary clickgo_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?id123 ,/router1?id456 可以通过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 :modelpageForm :rulespageFormRules label‐width80px 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 :modelpageForm :rulespageFormRules label‐width80px refpageFormd ) 执行校验
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、输入页面信息点击“提交”
