SpringBoot整合BootStrap实战

目录
  • SpringBoot整合BootStarp
    • 1.Pom文件
    • 2.在resource下创建一个l文件路径：statis/webjars
    • 3.将页面放在src/main/webapp/WEB-INF/views下
    • 4.界面添加以下几行
    • 5.application.yml配置文件中
    • 6. Controller
  • 注意
    • 因为我显示的是jsp

SpringBoot整合BootStarp

一开始在将BootStrap整合到项目中时，以为SpringBoot项目和以前的javaWeb一样，直接在页面中引用css,js即可，但是打开界面时，样式效果出不来，后来看了几篇文章以及自己摸索，现将代码展示如下：

1.Pom文件

<properties>
        <webjars-locator>0.32-1</webjars-locator>
        <bootstrap>3.3.7</bootstrap>
        <jquery>3.3.1</jquery>
</properties>

这是需要导入的依赖

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>webjars-locator</artifactId>
    <version>${webjars-locator}</version>
</dependency>

<!-- bootstrap -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>${bootstrap}</version>
</dependency>

<!-- jquery -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>${jquery}</version>
</dependency>

2.在resource下创建一个l文件路径：statis/webjars

3.将页面放在src/main/webapp/WEB-INF/views下

这是我自己新建的,如上所示

4.界面添加以下几行

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css" rel="external nofollow" />

5.application.yml配置文件中

spring:
    mvc:
      view:
        prefix: /WEB-INF/views/ #前缀
         suffix: .jsp   #后缀

6. Controller

@Controller
@RequestMapping(value = "/show")
public class PageController {

    @RequestMapping("/getHelloJsp")
    public String helloJsp(ModelMap map) {
        // 加入一个属性，用来在模板中读取
        // map.addAttribute("name", "wade");
        return "hello";
    }
}

此时启动项目的启动类，输入url:localhost:端口号/show/getHelloJsp 即可正确的显示页面的样式

注意

因为我显示的是jsp

所以你还得提前在pom中添加关于jsp的两个依赖

<dependency>
   <groupId>org.apache.tomcat.embed</groupId>
   <artifactId>tomcat-embed-jasper</artifactId>
   <scope>provided</scope>
</dependency>

<dependency>
     <groupId>javax.servlet.jsp.jstl</groupId>
     <artifactId>jstl-api</artifactId>
     <version>1.2</version>
</dependency>

因为是初学springBoot所以文件路径各方面可能没有按照springBoot的规范来，以后慢慢纠正，如有更好的方式，请不吝赐教。

希望能给大家一个参考吧，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Springboot和bootstrap实现shiro权限控制配置过程

    最近在开发一个项目,需要写一个后管系统,Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.使用方便. 在开发的过程中,遇到这样一个场景:针对超级管理员,我希望他拥有删除等高级别的操作,但是对于低级别的普通管理员我只是希望他拥有查看和编辑的权限.这就需要

  • springboot整合jquery和bootstrap框架过程图解

    这篇文章主要介绍了springboot整合jquery和bootstrap框架过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.4.1</version> </dependency>

  • SpringMVC+bootstrap table实例详解

    SpringMVC+bootstrap table实例详解

    bootstrap-table下载地址:https://github.com/wenzhixin/bootstrap-table/ 先来看一张效果图: 下载下来后,需要导入的css:由于需要bootstrap的支持,所以需要导入bootstrap的css <!-- Bootstrap --> <link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external no

  • Springboot+Bootstrap实现增删改查实战

    Springboot+Bootstrap实现增删改查实战

    说明 最近有朋友问我有没有Springboot+Bootstrap实现增删改查的DEMO,当时没有,现在他来了! 实现效果 代码地址 https://gitee.com/indexman/bootstrap_curd 水平一般能力有限,觉得有用的朋友给我来个一键三连或捐助:) 软件架构 前端:bootstrap4.5+thymeleaf+分页插件 后端:spring boot+mybatisPlus 数据库:mysql 核心功能代码 前端 <!DOCTYPE html> <html xm

  • SpringBoot整合BootStrap实战

    SpringBoot整合BootStrap实战

    目录 SpringBoot整合BootStarp 1.Pom文件 2.在resource下创建一个l文件路径:statis/webjars 3.将页面放在src/main/webapp/WEB-INF/views下 4.界面添加以下几行 5.application.yml配置文件中 6. Controller 注意 因为我显示的是jsp SpringBoot整合BootStarp 一开始在将BootStrap整合到项目中时,以为SpringBoot项目和以前的javaWeb一样,直接在页面中引用

  • springboot整合过滤器实战步骤

    springboot整合过滤器实战步骤

    目录 一.普通的接口访问 二.增加一个过滤器 1.自定义过滤器 2.注册到容器 3.演示一下效果: 三.增加两个过滤器 下面先建立一个MVC的基本请求接口,如下: 一.普通的接口访问 如上,先新增一个testController. 先用postman测试一下通不通. 结果是通的,准备工作完成. 二.增加一个过滤器 下面增加一个过滤器来实现一个接口拦截并处理token校验的模拟. 简单处理,有如下两个步骤. 1.自定义过滤器 package com.example.demo_filter_inte

  • SpringBoot整合RabbitMQ实战教程附死信交换机

    目录 前言 环境 配置 配置文件 业务消费者 死信消费者 测试 前言 使用springboot,实现以下功能,有两个队列1.2,往里面发送消息,如果处理失败发生异常,可以重试3次,重试3次均失败,那么就将消息发送到死信队列进行统一处理,例如记录数据库.报警等完整demo项目代码https://gitee.com/daenmax/rabbit-mq-demo 环境 Windows10,IDEA,otp_win64_25.0,rabbitmq-server-3.10.41.双击C:\Program

  • SpringBoot整合RabbitMQ的5种模式实战

    SpringBoot整合RabbitMQ的5种模式实战

    目录 一.环境准备 二.简单模式 三.工作队列模式 四.广播模式(Fanout) 五.直连模式(Direct) 六.通配符模式(Topic) 一.环境准备 1.pom依赖 <!-- 父工程依赖 --> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version&g

  • SpringBoot整合RabbitMQ及生产全场景高级特性实战

    目录 摘要 整合 依赖与配置 生产者配置消息队列规则 生产者发布消息 消费者监听消息 摘要 整合场景含 topic 工作模式(通过 routingKey 可满足简单/工作队列/发布订阅/路由等四种工作模式)和 confirm(消息确认).return(消息返回).basicAck(消息签收).basicNack(拒绝签收).DLX(Dead Letter Exchange死信队列)实现延时/定时任务等. 整合 依赖与配置 以下内容消费者同生产者 <parent> <groupId>

  • SpringBoot整合数据库访问层的实战

    SpringBoot整合数据库访问层的实战

    目录 一.springboot整合使用JdbcTemplate 1.pom依赖 2.application.yml新增配置 3.建表sql 4.UserService 5.浏览器访问 二.整合mybatis框架查询 1.pom依赖 2.实体类UserEntity 3.UserMapper接口 4.UserService 5.app启动 三.整合mybatis框架插入 1.UserMapper添加insertUser 2.UserService添加insertUserMybatis 一.sprin

  • SpringBoot 整合 Spring-Session 实现分布式会话项目实战

    SpringBoot 整合 Spring-Session 实现分布式会话项目实战

    目录 一.配置及开发 二.测试 三.Spring-Session 的缺点 文章参考: Spring 提供了处理分布式会话的解决方案:Spring-Session.Spring-Session 提供了对Redis.MongoDB.MySQL 等常用存储的支持,Spring-Session 提供与 HttpSession 的透明整合,这意味着开发人员可以使用 Spring-Session 支持的实现方式,切换 HttpSession 至 Spring-Session.本文采用 Redis 作为第三方

  • Springboot整合Socket实现单点发送,广播群发,1对1,1对多实战

    Springboot整合Socket实现单点发送,广播群发,1对1,1对多实战

    目录 本篇内容: 功能场景点: ① pom引入核心依赖 ② yml加上配置项 ③ 创建socket配置加载类 MySocketConfig.java ④创建消息实体 MyMessage.java ⑤创建 socket handler 负责记录客户端 连接.下线 ⑥ 封装的socket 小函数 ⑦写1个接口,模拟场景,前端页面调用后端接口,做消息推送 前端简单页面 群发,所有人都能收到 场景2,局部群发,部分人群都能收到 最后一个场景,也就是单点推送,指定某个人收到 本篇内容: 后端 + 前端简单

  • springboot整合mybatis实现多表查询的实战记录

    springboot整合mybatis实现多表查询的实战记录

    目录 什么是mybatis 1.一对一查询(例一个用户一个账户) 1.1.实体类 1.2.数据库表 1.3.持久层接口 2.一对多查询(例一个用户对应多个账户) 2.1.实体类 2.2.数据库表 2.3.持久层接口 3.总结 4.多对多的查询(例一个用户多个角色) 4.1.实体类 4.2.数据库表 4.3.持久层接口 5.多对一(一个用户对应多个老师) 5.1 实体类 5.2.数据库表 5.3.持久层接口 总结 什么是mybatis (1)Mybatis 是一个半 ORM(对象关系映射)框架,它

随机推荐