在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。