SpringBoot项目实战(40)--Beetl网页开发在控制层使用通用方法映射前端不同路径的网页

        在SpringBoot中使用Beetl做前端页面,后端如何使用Controller映射前端不同的页面,不需要为每个前端页面单独增加控制层方法?

       因为前端页面比较多,每个前端页面对应一个独立Controller方法也是不现实的,总不能每增加一个前端页面就开发一个控制层的方法。

        我们可以在控制层实现两个方法,一个是网站主目录的,一个是含子目录的,比如http://www.xxx.com/index 这种是没有子目录的,另外有多级子目录的,比如http://www.xxx.com/video/index。

       对于没有子目录的,就是网站项目根目录的页面,采用下面的方式实现:

    @GetMapping("{pageName}")public String toHome(@PathVariable String pageName, Model model) {return "cms/site/wenhua/"+pageName+".html";//返回页面名}

      对于有子目录的,采用下面的方式实现:

    @GetMapping("{path}/{pageName}")public String toSub(@PathVariable String path,@PathVariable String pageName, Model model) {return "cms/site/wenhua/"+path+"/"+pageName+".html";//返回页面名}

 完整的代码:

package org.openjweb.cms.controller;import io.swagger.annotations.Api;
import lombok.extern.slf4j.Slf4j;
import org.openjweb.cms.service.CmsInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;@Api(tags = "内容管理-前端查询")
@Slf4j
@Controller
@RequestMapping("/front") //public class CmsInfoController {//测试地址: http://localhost:8001/front/index@Autowiredprivate CmsInfoService cmsInfoService;@RequestMapping(value="/index")public String index( Model model) {return "cms/site/wenhua/index.html";//返回页面名}//http://localhost:8001/front/index@GetMapping("{pageName}")public String toHome(@PathVariable String pageName, Model model) {return "cms/site/wenhua/"+pageName+".html";//返回页面名}//http://localhost:8001/front/mobile2/newmobileList@GetMapping("{path}/{pageName}")public String toSub(@PathVariable String path,@PathVariable String pageName, Model model) {return "cms/site/wenhua/"+path+"/"+pageName+".html";//返回页面名}}

        在上面的代码中,首页使用http://localhost:8001/front/index,这个对应的toHome方法,页面对应D:\tmp\beetl\templates\cms\site\wenhua\index.html,toHome方法只有一个{pageName}变量,映射D:\tmp\beetl\templates\cms\site\wenhua目录下的页面。

        子目录下的映射使用toSub,其中{path}对应的是路径,{pageName}对应的是网页,http://localhost:8001/front/mobile2/newmobileList 对应D:\tmp\beetl\templates\cms\site\wenhua\mobile2目录下的newmobileList.html,按照这种实现方法,我们仅需要toHome和toSub两个方法就可以映射网站各种路径的网页。下面是http://localhost:8001/front/mobile2/newmobileList 页面的效果:

下面是newMobileList.html页面部分代码,主要是展示下css、js、image静态资源的路径的写法:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta content="telephone=yes" name="format-detection" /><!--<meta http-equiv="Cache-Control:max-age=600"/>--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta HTTP-EQUIV="pragma" CONTENT="no-cache"><meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache,must-revalidate"><meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"><meta HTTP-EQUIV="expires" CONTENT="0"><title>中国文化网</title><meta name="keywords" content="中国文化网"><meta name="description" content="中国文化网"><link rel="stylesheet" type="text/css" href="/cms/site/wenhua/mobile2/css/reset.css" /><link href="/cms/site/wenhua/mobile2/css/newmobile_commom.css" rel="stylesheet" type="text/css" /><!--<link href="/portal/site/wenhua/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" />--><link href="/cms/site/wenhua/mobile2/css/newmobile.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="/cms/site/wenhua/mobile2/css/swiper.min.css" /><script src="/cms/site/wenhua/mobile2/js/jquery.1.7.2.min.js" type="text/javascript" charset="utf-8"></script><script src="/cms/site/wenhua/mobile2/js/buju.js" type="text/javascript" charset="utf-8"></script><script src="/cms/site/wenhua/mobile2/js/swiper.min.js" type="text/javascript"></script><script src="/cms/site/wenhua/js/common.js" type="text/javascript"></script><!--组件依赖css begin--><link rel="stylesheet" type="text/css" href="/cms/site/wenhua/css/widget/navigator/navigator.css" /><link rel="stylesheet" type="text/css" href="/cms/site/wenhua/css/widget/navigator/navigator.iscroll.css" /><link rel="stylesheet" type="text/css" href="/cms/site/wenhua/css/widget/navigator/navigator.default.css" /><!--皮肤文件,若不使用该皮肤,可以不加载--><link rel="stylesheet" type="text/css" href="/cms/site/wenhua/css/widget/navigator/navigator.iscroll.default.css" /></head><body><div class="masking"></div><div class="maskingShare"><div class="shareType box"><div class="one"><img src="/cms/site/wenhua/mobile2/img/share1.png" /><p>转发链接</p></div>......

        那么现在有一个问题,我们为什么不使用VUE作为前端页面呢?主要是因为我们在使用Beetl页面时,可以把后台的文字内容通过html元素的形式展示出来,而不是通过脚本的方式,通过脚本的方式虽然可以呈现html内容,但是对于搜索引擎不友好,不利于网站的推广。所以在做内容类的网站的时候,可采用beetl,对于管理后台,可以考虑采用VUE。

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

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

相关文章

【自动化测试】—— Appium安装配置保姆教程(图文详解)

目录 一. 环境准备 二. JDK安装 1. 下载JDK 2. 安装JDK 3. 配置环境 4. 验证安装 三. Android SDK安装 1. 下载Android SDK 2. 安装Android SDK 3. 安装工具 4. 配置环境 5. 验证安装 四. NodeJS安装 1. 下载NodeJS 2. 安装NodeJS 3. 验证安装 4. 安装淘宝镜像…

Oracle 终止正在执行的SQL

目录 一. 背景二. 操作简介三. 投入数据四. 效果展示 一. 背景 项目中要求进行性能测试&#xff0c;需要向指定的表中投入几百万条数据。 在数据投入的过程中发现投入的数据不对&#xff0c;需要紧急停止SQL的执行。 二. 操作简介 &#x1f449;需要DBA权限&#x1f448; ⏹…

【SH】Xiaomi9刷Windows10系统研发记录 、手机刷Windows系统教程、小米9重装win10系统

文章目录 参考资料云盘资料软硬件环境手机解锁刷机驱动绑定账号和设备解锁手机 Mindows工具箱安装工具箱和修复下载下载安卓和woa资源包第三方Recovery 一键安装Windows准备工作创建分区安装系统 效果展示Windows和Android一键互换Win切换安卓安卓切换Win 删除分区 参考资料 解…

MWORKS 2025a 直播回顾 | 第二期:M语言计算环境重磅更新

MWORKS.Syslab首次推出时已实现基于Julia语言的科学计算环境&#xff0c;尽管如此&#xff0c;仍有大量工程师团队坚持使用M语言相关软件。除了使用习惯和学习语言等问题&#xff0c;更深层的原因在于大量历史代码资产复用的问题。为了解决这一关键问题&#xff0c;同元软控在后…

晨辉面试抽签和评分管理系统之八:随机编排考生的面试批次(以教师资格考试面试为例)

晨辉面试抽签和评分管理系统&#xff08;下载地址:www.chenhuisoft.cn&#xff09;是公务员招录面试、教师资格考试面试、企业招录面试等各类面试通用的考生编排、考生入场抽签、候考室倒计时管理、面试考官抽签、面试评分记录和成绩核算的面试全流程信息化管理软件。提供了考生…

专用小软件,完全免费,非常丝滑

今天给大家介绍一个专门将PDF数电发票合并打印的软件&#xff0c;这个软件可以批量操作&#xff0c;完全免费没有任何的广告。 电子发票专用批量打印工具 免费批量使用 软件无需安装&#xff0c;解压之后双击这个图标就能直接使用了。 点击右上角的加号&#xff0c;选中需要打…

《leetcode-runner》如何手搓一个debug调试器——架构

本文主要聚焦leetcode-runner对于debug功能的整体设计&#xff0c;并讲述设计原因以及存在的难点 设计引入 让我们来思考一下&#xff0c;一个最简单的调试器需要哪些内容 首先&#xff0c;它能够接受用户的输入 其次&#xff0c;它能够读懂用户想让调试器干嘛&#xff0c;…

【0x005B】HCI_Write_Default_Erroneous_Data_Reporting命令详解

目录 一、命令概述 二、命令格式及参数 2.1. HCI_Write_Default_Erroneous_Data_Reporting命令格式 2.2. Erroneous_Data_Reporting 三、生成事件及参数 3.1. HCI_Command_Complete事件 3.2. 状态码(Status) 四、命令执行流程 4.1. 命令发起阶段(主机端) 4.2. 命…

uniapp 小程序 textarea 层级穿透,聚焦光标位置错误怎么办?

前言 在开发微信小程序时&#xff0c;使用 textarea 组件可能会遇到一些棘手的问题。最近我在使用 uniapp 开发微信小程序时&#xff0c;就遇到了两个非常令人头疼的问题&#xff1a; 层级穿透&#xff1a;由于 textarea 是原生组件&#xff0c;任何元素都无法遮盖住它。当其…

Kotlin 快速上手指南:从安装 IntelliJ IDEA 到编写第一个程序

文章目录 什么是kotlinIntelliJ IDEA安装 IntelliJ IDEA创建 Kotlin 项目运行 Kotlin 程序更改进入后默认打开上一次项目的设置打开 IntelliJ IDEA进入设置:重新启动 IntelliJ IDEA:快速学习Kotlin变量声明类型推断条件表达式定义函数单表达式函数when 表达式when 语句的基本…

Docker 部署 Typecho

1. 官网 https://typecho.org/插件 & 主题 https://github.com/typecho-fans/plugins https://typechx.com/ https://typecho.work/2. 通过 compose 文件安装 github官网&#xff1a; https://github.com/typecho/Dockerfile 新建一个目录&#xff0c;存放 typecho 的相…

2025/1/12 复习JS

我乞求你别再虚度光阴 ▶ 空心 --------------------------------------------------------------------------------------------------------------------------------- 摘自哔哩哔哩听课笔记。 01 上篇&#xff1a;核心语法 1.基于页面效果的操作 <!DOCTYPE html>…

【初识扫盲】厚尾分布

厚尾分布&#xff08;Fat-tailed distribution&#xff09;是一种概率分布&#xff0c;其尾部比正态分布更“厚”&#xff0c;即尾部的概率密度更大&#xff0c;极端值出现的概率更高。 一、厚尾分布的特征 尾部概率大 在正态分布中&#xff0c;极端值&#xff08;如距离均值很…

机组存储系统

局部性 理论 程序执行&#xff0c;会不均匀访问主存&#xff0c;有些被频繁访问&#xff0c;有些很少被访问 时间局部性 被用到指令&#xff0c;不久可能又被用到 产生原因是大量循环操作 空间局部性 某个数据和指令被使用&#xff0c;附近数据也可能使用 主要原因是顺序存…

Transformer创新模型!Transformer+BO-SVR多变量回归预测,添加气泡图、散点密度图(Matlab)

Transformer创新模型&#xff01;TransformerBO-SVR多变量回归预测&#xff0c;添加气泡图、散点密度图&#xff08;Matlab&#xff09; 目录 Transformer创新模型&#xff01;TransformerBO-SVR多变量回归预测&#xff0c;添加气泡图、散点密度图&#xff08;Matlab&#xff0…

31_搭建Redis分片集群

Redis的主从复制模式和哨兵模式可以解决高可用、高并发读的问题。但是依然有两个问题没有解决:海量数据存储问题、高并发写的问题。由于数据量过大,单个master复制集难以承担,因此需要对多个复制集进行集群,形成水平扩展每个复制集只负责存储整个数据集的一部分,这就是Red…

ASP.NET Core - 日志记录系统(二)

ASP.NET Core - 日志记录系统&#xff08;二&#xff09; 2.4 日志提供程序2.4.1 内置日志提供程序2.4.2 源码解析 本篇接着上一篇 ASP.NET Core - 日志记录系统(一) 往下讲&#xff0c;所以目录不是从 1 开始的。 2.4 日志提供程序 2.4.1 内置日志提供程序 ASP.NET Core 包括…

nginx的可视化配置工具nginxWebUI的使用

文章目录 1、nginx简介2、nginxWebUI2.1、技术解读2.2、开源版和专业版之间的区别2.3、功能解读 3、安装与使用3.1、下载镜像3.2、查看镜像3.3、启动容器3.4、使用 4、总结 1、nginx简介 Nginx 是一个高效的 HTTP 服务器和反向代理&#xff0c;它擅长处理静态资源、负载均衡和…

【C++】IO 流

文章目录 &#x1f449;C 语言的输入与输出&#x1f448;&#x1f449;流是什么&#x1f448;&#x1f449;C IO 流&#x1f448;C 标准 IO 流C 和 C 语言的输入格式问题C 的多次输入内置类型和自定义类型的转换日期的多次输入C 文件 IO 流文本文件和二进制文件的读写 &#x1…