IDEA中创建spring boot 步骤,配置及模态窗口操作

1，配置pom.xml的依赖包

<thymeleaf.version>3.0.6.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
``<dependency>

<groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>1.1.1</version>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.23</version>
    </dependency>
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>5.0.0</version>
    </dependency>

    <!--热启动-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>

<!--热启动-->
                <configuration>
                    <fork>true</fork>
                </configuration>

2，配置application.properties（连接数据库信息，连接池）

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/bootstrap_test
spring.datasource.username=root
spring.datasource.password=123456

# 下面为连接池的补充设置，应用到上面所有数据源中
# 初始化大小，最小，最大
spring.datasource.initialSize=5
spring.datasource.minIdle=5
spring.datasource.maxActive=20
# 配置获取连接等待超时的时间
spring.datasource.maxWait=60000
# 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒
spring.datasource.timeBetweenEvictionRunsMillis=60000
# 配置一个连接在池中最小生存的时间，单位是毫秒
spring.datasource.minEvictableIdleTimeMillis=300000
spring.datasource.validationQuery=SELECT 1 FROM DUAL
spring.datasource.testWhileIdle=true
spring.datasource.testOnBorrow=false
spring.datasource.testOnReturn=false
# 打开PSCache，并且指定每个连接上PSCache的大小
spring.datasource.poolPreparedStatements=true
spring.datasource.maxPoolPreparedStatementPerConnectionSize=20
# 配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
spring.datasource.filters=stat,wall,log4j
# 通过connectProperties属性来打开mergeSql功能；慢SQL记录
spring.datasource.connectionProperties=druid.stat.mergeSql=true;druid.stat.slowSqlMillis=5000
# 合并多个DruidDataSource的监控数据
#spring.datasource.useGlobalDataSourceStat=true
########################################################
### Java Persistence Api
########################################################
spring.jpa.database=MYSQL
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update

3，创建包，（分层）（略，，，）
4，dao层的配置（可以用JPA，也可以用Mybatis）
（1）JPA
建一个接口，继承JpaRepository<>(泛型)
jpa已提供一定的规范
如果hql满足不了需要，也可以自定义hql语句。
（2）Mybaties

(类似这种写法)

   @Select("select * from user")
    List<User> selectUser();

5，Entity实体类的新建

（如果主键是string类型，生成策略是UUID，则strategy = “uuid”）

    @Entity

    @Id
    @GeneratedValue(generator = "Generator")
    @GenericGenerator(name="Generator", strategy = "native" )
    private int Uid;


    @Column(name="uname")
    private String uname = "";

6，contriller层
调用业务层，注意路径就好
7，模态窗口操作
关于模态窗口在Bootstrap官方文档下载就可以
弹出模态框
按钮的data-target属性必须与对应的模态窗的id值对应

 <button type="button" class="btn btn-primary"  th:value="${user.uid}"  onclick="edit(this)" data-toggle="modal" data-target="#exampleModal">
                    修改
                </button>




<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">用户注册</h4>
            </div>

            <div class="modal-body">
                <form>
                <div class="form-group">
                    <label for="username" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="hidden" name="uid" id="uid" >

                        <input type="text" class="form-control" name="username" id="username" placeholder="Username" style="width: 200px">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" name="password" id="password" placeholder="Password" style="width: 200px">
                    </div>
                </div>

                <div class="form-group">
                    <label for="address" class="col-sm-2 control-label">地址</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="address" id="address" placeholder="address" style="width: 200px">
                    </div>
                </div>
                <!--<div class="form-group">
                    <label for="birthday" class="col-sm-2 control-label">生日</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="birthday" id="birthday" placeholder="birthday" style="width: 200px">
                    </div>
                </div>-->
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="update()">确认修改</button>
                <button type="button" class="btn btn-primary" onclick="add()">保存</button>
            </div>
        </div>
    </div>
</div>

增加时的后台

function add() {

    var username = $("#username").val();
    var password = $("#password").val();
    var address = $("#address").val();
    var birthday = $("#birthday").val();
    console.log(username);
    console.log(password);
    console.log(address);
    console.log(birthday);
    $("#exampleModal").modal('hide');
    var url="/insertUser";
    var data = {"username":username,"password":password,"address":address,"birthday":birthday};
    $.ajax({
        url:url,
        data:data,
        type:"POST",
        dataType:"json",
        success:function(data){

        }

    });

}

修改时的数据回现

function edit(o) {
    var uid= $(o).val();

    $.post("/findUserById",{"uid":uid},function(user){
        $("#uid").val(uid);
        $("#username").val(user.username);
        $("#password").val(user.password);
        $("#address").val(user.address);
    });

}