Spring Boot前后端分离直接访问静态页+ajax实现动态网页。

  一般java里面Spring Boot项目的静态资源resources/下面有两个文件夹和一个配置文件,分别是static/目录,templates/目录,application.properties配置文件。

static/目录是用来放置纯静态资源,比如js,css,html,图片,视频,音频等;

static/目录是放置页面模板,springboot访问template依靠thymeleaf模板,并且spring.thymeleaf.enabled=true才行。

这里我不想用thymeleaf模板,前后端分离直接访问静态页+ajax实现动态网页。那么我可以将.html页面直接放到static/目录下然后通过Controller访问。

示例:

package com.xxh.demo.account;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView; import java.util.ArrayList; @Controller
@RequestMapping("/account")
public class login {
/* 请求响应返回字符串 */
@RequestMapping("/hello")
@ResponseBody
public String world() {
System.out.println("/account/hello > return String Hello world!");
return "Hello world!";
}
/* 请求响应返回JSON数据 */
@RequestMapping("/hello2")
@ResponseBody
public ArrayList world2() {
System.out.println("/account/hello2 > return json data.");
ArrayList al = new ArrayList<String>();
al.add("曹操");
al.add("刘备");
al.add("孙权");
return al;
}
/* 请求响应返回/static/下的静态页面(需要在 .properties中添加:spring.mvc.static-path-pattern=/static/** ) */
@RequestMapping("/")
public String index() {
System.out.println("/account/ > /static/index.html");
return "/static/index.html";
} /* 请求响应返回/templates/下的静态页面响应404,无法直接访问 */
@RequestMapping("/index")
public String index2() {
System.out.println("/account/index > /templates/index.html");
return "/templates/index.html";
} /* 用ModelAndView也可以返回/static/下的静态页面(需要在 .properties中添加:spring.mvc.static-path-pattern=/static/** ) */
@RequestMapping("/login")
public ModelAndView login() {
System.out.println("/account/login > login.html");
ArrayList al = new ArrayList<String>();
al.add("曹操");
al.add("刘备");
al.add("孙权"); ModelAndView mv = new ModelAndView();
mv.setViewName("/static/index.html"); // 这是视图名称 或 路径/视图名称
mv.addObject("myEntity", al); // 请求返回实体变量名及实体对象
return mv;
}
}

同时,要想static下的静态文件能被访问,需要在application.properties配置文件里面添加:spring.mvc.static-path-pattern=/static/**

# 应用名称
spring.application.name=demo
# 应用服务 WEB 访问端口
server.port=8080 # 允许/static/下的静态资源被访问,否则404错误
spring.mvc.static-path-pattern=/static/**

页面结构:

访问效果:

上一篇:idea创建一个入门Spring Boot项目(controller层)使用Maven代码管理

下一篇:Java一个入门级MVC基于Spring Boot项目

【完】

Spring Boot前后端分离直接访问静态页+ajax实现动态网页的更多相关文章

  1. 八个开源的 Spring Boot 前后端分离项目,一定要收藏!

    八个开源的 Spring Boot 前后端分离项目 最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前 ...

  2. Vue+Spring Boot 前后端分离的商城项目开源啦!

    新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成后, ...

  3. 七个开源的 Spring Boot 前后端分离项目,一定要收藏!

    前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年 ...

  4. 七:Spring Security 前后端分离登录,非法请求直接返回 JSON

    Spring Security 前后端分离登录,非法请求直接返回 JSON 解决方案 在 Spring Security 中未获认证的请求默认会重定向到登录页,但是在前后端分离的登录中,这个默认行为则 ...

  5. 前后端分离,如何在前端项目中动态插入后端API基地址?(in docker)

    开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬. 尴尬从何而来 常见的web前后端分离:前后端分开部署,前端项 ...

  6. spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据

    1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...

  7. Spring Cloud 前后端分离后引起的跨域访问解决方案

    背景 Spring Cloud 微服务试点改造,目前在尝试前后端分离. 前台A应用(本机8080端口),通过网管(本机8769端口)调用后台应用B(本机8082端口).应用C发布的http服务.. A ...

  8. vue + spring boot + spring security 前后端分离 携带 Cookie 登录实现 只写了个登录

    最近想弄一下vue 所以就自己给自己找坑入   结果弄的满身是伤 哈哈哈 首先我说下 前后端分离  跨域请求  我在网上找了一些  可是都是针对于 spring boot 的 我自己还有 securi ...

  9. Spring Security 前后端分离登录,非法请求直接返回 JSON

    hello 各位小伙伴,国庆节终于过完啦,松哥也回来啦,今天开始咱们继续发干货! 关于 Spring Security,松哥之前发过多篇文章和大家聊聊这个安全框架的使用: 手把手带你入门 Spring ...

  10. 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示 blocked by CORS policy

    1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...

随机推荐

  1. 循环中拼接String不同方法性能耗时对比

    对比背景 Java中最常用的拼接字符串方法就是 + 或 +=,使用上简单方便.但如果拼接数量比较大,例如在循环中拼接字符串,可能会有性能问题: 测试数据 循环100000次进行String拼接,对比+ ...

  2. 程序员如何借势AI提高自己:从高效工作到技能升级的全面指南

    又是一年1024,时光荏苒,转眼又到了这个特别的日子.坦白说,这篇文章我其实并不太想写,因为我并没有通过AI找到普适于程序员群体的高效赚钱秘籍.然而,反思过去的工作,我发现利用AI的确让我在工作中变得 ...

  3. 配置NVIDIA Container Runtime和容器运行GPUStack教程

    GPUStack 是一个设计用于运行大模型的开源 GPU 集群管理器,提供私有部署的大模型服务,支持大语言模型.Embedding 文本嵌入模型.Reranker 重排序模型.Vision 多模态模型 ...

  4. 20241120 校内模拟赛 T3 题解

    题目描述 给定一个数列 \(A\),数列的元素取值范围为 \([1,m]\). 请计算有多少个非空子区间满足以下条件:该区间内每个元素的出现次数都相同(没有出现的元素视为出现 \(0\) 次). 例如 ...

  5. 【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片?

    引言 最近有不少开发者向我们咨询,像体测.赛事等应用场景中,需要保存运动过程的图像,如何将相机抽取的RGBA帧图像解析成.jpg或.png格式的图像?今天我们就为您介绍相应的解决方案. 一.RGBA图 ...

  6. 使用 MySQL Shell 获取 MySQL 诊断信息(译)

    收集全面的诊断信息可能会让人望而却步.知道要运行哪些查询以获取所需数据更像是一种艺术形式,而非其他什么.幸运的是,对于那些不太擅长艺术的人来说,MySQL Shell 使得获取这些信息变得更加容易.让 ...

  7. jquery加购物车功能

    如下图所示: 点击加入购物车,由下到上出现此弹窗,点击close关闭弹窗. $(".addCar").on("click", function() { var ...

  8. 关于elementUI的table报错RangeErr Maximum call stack size exceeded

    项目中需要做一个功能,在表格中如果存在二级列表,点击箭头之后请求后台接口,展开显示二级列表的内容.点击箭头拿到了数据,但是后台会报错如下图,且数据展示不出来 上网查了下,意思是堆栈溢出,这个提示让我十 ...

  9. 调度系统之Airflow

    一.Airflow简介 Airflow 是一个使用 Python 语言编写的 Data Pipeline 调度和监控工作流的平台. Airflow 是通过 DAG(Directed acyclic g ...

  10. MySQL底层概述—6.索引原理

    大纲 1.索引原理 2.二叉查找树 3.平衡二叉树(AVL树) 4.红黑树 5.B-Tree 6.B+Tree 7.Hash索引 8.聚簇索引与非聚簇索引 1.索引原理 索引会在数据文件中(ibd文件 ...