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. linux开启快捷键,牛逼的狠~

    vim env_show #!/bin/bash echo '-----------A------------- XXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXX ...

  2. getExplorerInfo:获取浏览器信息

    function getExplorerInfo() { let t = navigator.userAgent.toLowerCase(); return 0 <= t.indexOf(&qu ...

  3. 关于Requests交互超时的处理方式

    拿 https://aes.cryptohack.org/ecb_oracle 这道题来做示范. 由于这个链接的本地服务器在外国,因此我们很容易就会连接超时. 如下一个脚本: import reque ...

  4. ThreeJs-01开发环境搭建

    写在前面,好久不见各位,之前一段时间因为一些事情有点忙,但从未停止学习的脚步,也屯了很多笔记,会在未来的时间慢慢发出来,从今天开始一起进入WebGis,threeJs目前大前端发展的一个方向开始学习, ...

  5. php 异步并行后续--兼容FPM使用的组件

    上次给人推荐了这篇文章,关于PHP异步并行的文章,之后有人评论问这个组件能不能给fpm用,我测试了一下发现不行,于是又找到一个可以给fpm用的http请求组件. 安装很简单,就这样  composer ...

  6. vivo 企业云盘服务端实现简介

    作者:来自 vivo 互联网存储团队- Cheng Zhi 本文将介绍企业云盘的基本功能以及服务端实现. 一.背景 vivo 企业云盘是一个企业级文件数据管理服务,解决办公数据的存储.共享.审计等文件 ...

  7. 无快不破,在本地 docker 运行 IDEA 里面的项目?

    目录 前言 Docker Compose 1. Docker Compose是什么? 2. Docker Compose 的具体步骤 3. 如何在IDEA项目里面使用Docker Compose 启动 ...

  8. docker 下载镜像配置

    现在docker 安装镜像的时候,会发现下载不了镜像. 有网友提供了一些可用的镜像,亲测可用. { "registry-mirrors": [ "https://dock ...

  9. Python版本与Jupyter记录

    最近使用Python的时候,遇到一个版本问题.我本地安装的Python版本是3.8.0,在使用match...case...语法时,提示如下报错: 查询之后,才知晓3.8.0还没有match语法,ma ...

  10. 获取Map中选择的要素

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...