Spring Boot前后端分离直接访问静态页+ajax实现动态网页
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实现动态网页的更多相关文章
- 八个开源的 Spring Boot 前后端分离项目,一定要收藏!
八个开源的 Spring Boot 前后端分离项目 最近前后端分离已经在慢慢走进各公司的技术栈,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,我们也非常建议大家学习一下前 ...
- Vue+Spring Boot 前后端分离的商城项目开源啦!
新蜂商城 Vue 移动端版本开源啦! 去年开源新蜂商城项目后,就一直在计划这个项目 Vue 版本的改造,2020 年开始开发并且自己私下一直在测试,之前也有文章介绍过测试过程和存在的问题,修改完成后, ...
- 七个开源的 Spring Boot 前后端分离项目,一定要收藏!
前后端分离已经在慢慢走进各公司的技术栈,根据松哥了解到的消息,不少公司都已经切换到这个技术栈上面了.即使贵司目前没有切换到这个技术栈上面,松哥也非常建议大家学习一下前后端分离开发,以免在公司干了两三年 ...
- 七:Spring Security 前后端分离登录,非法请求直接返回 JSON
Spring Security 前后端分离登录,非法请求直接返回 JSON 解决方案 在 Spring Security 中未获认证的请求默认会重定向到登录页,但是在前后端分离的登录中,这个默认行为则 ...
- 前后端分离,如何在前端项目中动态插入后端API基地址?(in docker)
开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬. 尴尬从何而来 常见的web前后端分离:前后端分开部署,前端项 ...
- spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据
1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...
- Spring Cloud 前后端分离后引起的跨域访问解决方案
背景 Spring Cloud 微服务试点改造,目前在尝试前后端分离. 前台A应用(本机8080端口),通过网管(本机8769端口)调用后台应用B(本机8082端口).应用C发布的http服务.. A ...
- vue + spring boot + spring security 前后端分离 携带 Cookie 登录实现 只写了个登录
最近想弄一下vue 所以就自己给自己找坑入 结果弄的满身是伤 哈哈哈 首先我说下 前后端分离 跨域请求 我在网上找了一些 可是都是针对于 spring boot 的 我自己还有 securi ...
- Spring Security 前后端分离登录,非法请求直接返回 JSON
hello 各位小伙伴,国庆节终于过完啦,松哥也回来啦,今天开始咱们继续发干货! 关于 Spring Security,松哥之前发过多篇文章和大家聊聊这个安全框架的使用: 手把手带你入门 Spring ...
- 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示 blocked by CORS policy
1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...
随机推荐
- 国密SSL证书,为政务数据安全保驾护航
随着数字化转型的加速,政务信息化建设已成为提升政府服务效率和质量的关键.近期,国家相关部门发布了<互联网政务应用安全管理规定>,为政务应用的安全管理提供了明确的规范和要求.该规定自2024 ...
- 人形机器人-强化学习算法-PPO算法的实现细节是否会对算法性能有大的影响.
PPO算法是强化学习算法中目前应用最广的算法,虽然这个算法是2017年发表的,但是至今在整个AI领域下的agent子领域中这个算法都是最主要的强化学习算法(至少目前还没有之一),这个算法尤其在Chat ...
- 高性能计算-openmp-多线程缓存一致性(9)
1. 背景介绍 L1 L2 cache是单核独享,L3是多核共享.如果多线程访问共享一维数组的连续元素,先读入第一个线程的L1 缓存中,其他线程访问缓存不命中需要加载,并且数据的更改后,标记为脏数据, ...
- Chrome控制台中network底部概要参数
概要参数 1.requests => 资源请求总数: 2.transferred => 网络加载资源大小: 3.resources => 页面所有资源总大小(包含网络资源.浏览器缓存 ...
- 用java实现JDBC数据库连接池
这次写数据库连接池主要想解决的还是servlet访问数据库获取数据的稳定性问题,于是便研究了一下,下面来讲一讲如何用java来写一个适合自己用的数据库连接池.这个东西大家并不陌生,通过使用数据连接池我 ...
- NFS服务搭建过程
NFS服务 [1].nfs配置 作用: 解决数据一致性问题 NFS服务程序的配置文件为/etc/exports,需要严格按照共享目录的路径 允许访问的NFS客户端(共享权限参数)格式书写,定义要共享的 ...
- uniapp安卓在线更新版本
实现逻辑 通过获取线上的版本号和app的版本号进行对比 查看是不是最新版 - app版本号小于线上版本号则不是最新版 提示更新 模拟检测更新请求 起一个服务,也就是检测更新的接口 返回值为最新版本号和 ...
- 使用xtrabackup实现mysql定时热备份
1.原理:方案选型 mysqldump是逻辑备份解决方案,备份恢复速度慢,工具获取方便,数据量少推荐 主要用途是导出数据 xtrababckup是物理热备份,速度快,适合大数据量 xtrababcku ...
- ES6 面试题
新增了哪些属性? 新增块级作用域:let.const 新增数据类型:Symbol 表示独一无二的值 新增数据结构: Set,类似数组,所有数据是唯一的: Map,键值对的结合,传统的 Object 只 ...
- 【数据库】【MySQL】创建数据库、数据表、修改数据表字段的一些基本操作
这是一份作业,仅此而已. 代码仅供参考. # 创建数据库yggl_mllt9920 CREATE DATABASE yggl_mllt9920; # 选择数据库 USE yggl_mllt9920; ...