+spring bootstrap
2016-09-19 11:17:38 tangruyi1992 阅读数 328

原文出自http://www.yihaomen.com/article/java/302.htm


无意在老外的网站上发现了这个东西, 本身提供的例子是有错误的, 我下载下来之后修改了一下, 能成功运行了虽然只是一个demo, 麻雀虽小五脏俱全. 这个例子主要体现一下东西:

1. mybatis 与 spring MVC集成
2. 利用了 mybatis 注解做查询(一般都是用xml配置的,因为mybatis 使用配置更强大)
3. 结合了 bootstrap 的css布局和js相关的东西,貌似支持移动设备, 响应式布局.
4. 与数据库结合,利用了一个学生表来做例子怎么操作数据库



至于 mybatis 与 spring MVC  的集成,可以参看我以前记录的博客: mybatis 教程 , 这个例子的另外一个特点是利用 mybatis 注解来实现的,其实注解的使用在mybatis 项目中并不多见,原因是到目前为止有很多东西是注解是无法完成的,仍然需要XML配置文件来协助才能完成,但对于这个简单的例子来说足够了,参考如下配置;
程序代码 程序代码

package com.yihaomen.elizabetht.mappers;

import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Options;
import org.apache.ibatis.annotations.Select;

import com.yihaomen.elizabetht.model.Student;

public interface StudentMapper {
    @Insert("Insert INTO student(userName, password, firstName,"
            + "lastName, dateOfBirth, emailAddress) VALUES"
            + "(#{userName},#{password}, #{firstName}, #{lastName},"
            + "#{dateOfBirth}, #{emailAddress})")
    @Options(useGeneratedKeys=true, keyProperty="id", flushCache=true, keyColumn="id")
    public void insertStudent(Student student);
        
    @Select("Select USERNAME as userName, PASSWORD as password, "
            + "FIRSTNAME as firstName, LASTNAME as lastName, "
            + "DATEOFBIRTH as dateOfBirth, EMAILADDRESS as emailAddress "
            + "FROM student Where userName = #{userName}")
    public Student getStudentByUserName(String userName);


}


这里注解的 @Select 就相当于在 XML 里面配置的 Select 语句. 作用是一样的。习惯这种写法的可以参考, 另外注意:需要在spring 配置文件中加入如下配置:
程序代码 程序代码

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    <property name="basePackage" value="com.yihaomen.elizabetht.mappers" />
</bean>


配置这里之后,注解的 类才能与spring ,mybatis  集成起来, 这是重点.

与bootstrap 结合,bootstrap 是一个界面框架解决方案,而且已经被UI界广泛接受,做出来的界面自动支持响应式布局, 对现在移动设备如此多的今天是个好事情, 看一个注册界面的UI.


在工程中与 bootstrap 结合的方式:



作为项目程序需要的 数据库表的脚本如下:
程序代码 程序代码

Create TABLE `student` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `dateOfBirth` datetime NOT NULL,
  `emailAddress` varchar(255) NOT NULL,
  `firstName` varchar(255) NOT NULL,
  `lastName` varchar(255) NOT NULL,
  `password` varchar(8) NOT NULL,
  `userName` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
)

2018-11-24 15:01:37 weixin_34187862 阅读数 2

前置环境
基于jpa/mybatis、thymeleaf

环境搭建
引入bootstrap中的资源文件,css和js

关键页面代码

  1. 目录结构
    spring boot集成bootstrap
    2.footer.html和header.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Bootstrap</title>
    </head>
    <body>
    
    <footer class="blog-footer" data-th-fragment="footer">
    <p>Welcome to XXX</a></p>
    
    <script src="../../js/jquery-3.1.1.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    </footer>
    </body>
    </html>

header.html

<!DOCTYPE html>
<html lang="en" data-th-fragment="header">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap in action</title>

    <!-- Bootstrap core CSS -->
    <link href="../../css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles -->
    <link href="../../css/blog.css" rel="stylesheet">
</head>
<body>
    <div class="blog-masthead">
        <div class="container">
        <div class="row" >
            <h1>Bootstrap</h1>

            <nav class="nav blog-nav">
              <a class="nav-link active" href="/users">首页</a>
            </nav>
        </div>
        </div><!-- /.container -->
    </div>
</body>
</html>

3.引用
spring boot集成bootstrap

<!DOCTYPE html>
<html xmlns:th="http://×××w.thymeleaf.org"
    xmlns:layout="http://×××w.ultraq.net.nz/thymeleaf/layout">
<head th:replace="~{fragments/header :: header}">
</head>
<body>

    <div class="container">
        <div class="row">

            <h2 th:text="${userModel.title}">Welcome
                to XXX</h2>

        </div><!-- /.row -->

        <div class="row">
            <p>
                <a class="btn btn-primary" href="/users/form.html" role="button">创建用户</a>
            </p>
        </div><!-- /.row -->

        <div class="row">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>Age</td>
                        <td>Name</td>
                    </tr>
                </thead>
                <tbody>
                    <tr th:if="${userModel.userList.size()} eq 0">
                        <td colspan="3">没有用户信息!!</td>
                    </tr>
                    <tr th:each="user : ${userModel.userList}">
                        <td th:text="${user.id}">111</td>
                        <td th:text="${user.age}">111</td>
                        <td><a href="view.html" th:href="@{'/users/' + ${user.id}}"
                            th:text="${user.name}">XXX</a></td>
                    </tr>
                </tbody>
            </table>
        </div><!-- /.row -->
    </div><!-- /.container -->
    <div th:replace="~{fragments/footer :: footer}">...</div>
</body>
</html>

4.运行效果
spring boot集成bootstrap

转载于:https://blog.51cto.com/mazongfei/2321468

2018-09-06 23:44:37 nangeali 阅读数 4261

添加依赖

webjars
https://www.webjars.org/

<!--引入bootstrap-->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.0.0</version>
</dependency>

查看依赖
这里写图片描述
页面引用

<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">

这里写图片描述

优点

当项目名称,改变时
不需要修改,引用资源的路径地址

Spring boot
自动的添加,项目名的地址路径
这里写图片描述

2017-09-03 14:45:10 YHJ1997 阅读数 4716
Spring新手项目||图书管理系统
一.
本图书管理系统基于spring,spring mvc,数据库为mysql。前端使用了Bootstrap。 非常适合学习spring的新手。
二.功能概述
该系统实现读者和管理员登陆,图书的增删改查,读者的增删改查,借还图书,密码修改,卡号挂失,超期提醒等的功能。
三.数据库
本系统共有六张数据表。admin为管理员表,book_info为图书信息表,class_info为分类信息表,lend_list为借还信息表,reader_card为读者证表,reader_info为读者信息表。
四.项目预览






五.源码
本项目源码及数据库文件已上传到我的github,有需要的同学请自行下载。
链接:https://github.com/withstars/Books-Management-System

                            
2018-10-28 19:57:43 panchang199266 阅读数 881

(一)Bootstrap上下文简介
  Bootstrap 上下文是Spring Cloud新引入的,与传统的Spring 上下文相同,系 ConfigurableApplicationContext 实例,由 BootstrapApplicationListener 在监听 ApplicationEnvironmentPreparedEvent 时创建。

  要想理解Bootstrap 上下文,首先得了解Spring 事件/监听器(ApplicationEvent/ApplicationListener)模式。关于Spring 事件/监听器模式案例参见Spring Cloud背景知识之Spring 事件/监听器模式

  了解了Spring 事件/监听器模式,再来看看Spring boot中该模式的应用:
  SpringApplication 是Spring Boot 引导启动类,与 Spring 上下文、事件、监听器以及环境等组件关系紧密,其中提供了控制Spring Boot应用特征的行为方法。

  Spring Boot 上下文:

  • 非Web应用:AnnotationConfigApplicationContext
  • Web应用:AnnotationConfigEmbeddedWebApplicationContext

  Spring Boot 事件触发器:EventPublishingRunListener
  Spring Boot 应用运行监听器:SpringApplicationRunListener

Bootstrap和AngularJS整合Spring boot

阅读数 2614

一 项目介绍使用BootStrap制作导航,使用AnglularJS实现导航切换页面路由功能,并演示AngularJS通过$http服务和Spring Boot提供的REST服务,最后演示用指令封装jQuery UI的日期选择器二 实战1 新建Spring Boot项目,依赖如下:&lt;dependency&gt;&lt;groupId&gt;org.springfr...

博文 来自: chengqiuming

Bootstrap File Upload与Spring MVC

阅读数 175

今天写文件上传的功能,Bootstrapfileupload非常符合我的心意。但是我配置完之后总是有错:文件不能上传到Controller中。找遍了大半个百度,也不知道引入了多少无关变量。总算找到了问题的所在。spring在处理文件上传时,首先会判断客户端发过来的请求是不是文件类型的。表单的encype就是用于告诉spring的。

博文 来自: qq_20312383

spring bootstrap table 表格创建

阅读数 288

前台表格插件多种样,以前用过datatable以及gridtable,这次想要尝试一个新的,就选择了bootstraptable,主要是界面定了想要用bootstrap设计界面,所以就选择了这个,bootstraptable官网为http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/,里面对表格各种问题都有详细描述。好了,不多...

博文 来自: dongyang1124

spring mvc + bootstrap实例项目搭建

阅读数 435

采用springmvc+bootstrapJS搭建的一个实现简单登录功能的实例

博文 来自: weshty_joy

spring boot 中的application和 bootstrap

阅读数 11566

application和bootstrap配置的问题

博文 来自: jdhanhua
没有更多推荐了,返回首页