1：配置build.gradle,添加依赖等

buildscript {

    repositories {

        mavenCentral()

    }

    dependencies {

        classpath('org.springframework.boot:spring-boot-gradle-plugin:1.5.9.RELEASE')

    }

}

group "com.li"

version "1.0-SNAPSHOT"

apply plugin: "java"                           //java 插件

apply plugin: "org.springframework.boot"   //spring boot 插件

apply plugin: "io.spring.dependency-management"

apply plugin: "application"   //应用

//mainClassName = "Main.Application"

sourceCompatibility = 1.8

repositories {

    mavenCentral()

}

dependencies {

    compile("org.springframework.boot:spring-boot-starter-web",

            "org.springframework.boot:spring-boot-starter-activemq",

            "org.springframework.boot:spring-boot-starter-test",

            "org.springframework.boot:spring-boot-starter-cache",

            "org.springframework.boot:spring-boot-devtools")

    runtime ("org.apache.tomcat.embed:tomcat-embed-jasper")

    testCompile group: 'junit', name: 'junit', version: '4.12'

}

2：配置application.properties,  因为只用到前端控制器，也可以不配置任何内容

# 配置启动端口号

#server.port=8080

# 配置返回视图的前缀和后缀

#spring.mvc.view.prefix=/html/

#spring.mvc.view.suffix=.html

3：创建后台映射

package com.li.controller;

import com.li.pojo.Order;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;

import java.util.List;

@Controller

public class LoginController {

    @RequestMapping("/orderTest")

    @ResponseBody

    public List order(String orderNo,String sortFiled) {

        List list=new ArrayList();

        Order order=new Order();

        order.setHotelName("name");

        order.setHotelSeq("123");

        list.add(order);

        return list;

    }

}

4：pojo类Order.java

package com.li.pojo;

public class Order {

    public String hotelSeq;

    public String getHotelSeq() {

        return hotelSeq;

    }

    public void setHotelSeq(String hotelSeq) {

        this.hotelSeq = hotelSeq;

    }

    public String getHotelName() {

        return hotelName;

    }

    public void setHotelName(String hotelName) {

        this.hotelName = hotelName;

    }

    public String hotelName;

}

5:springboot启动类

package com.li;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

public class SpringBootHtmlApplication {

    public static void main(String[] args){

        SpringApplication.run(SpringBootHtmlApplication.class, args);

    }

}

6：创建前台html页面

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>xx信息查询</title>

</head>

<body>

<div class="main pusher">

    <form class="ui form vertical segment form-search">

        <img src="/yujinxiang.jpg"  alt="上海鲜花港 - 郁金香" />  <!--加载图片-->

        <div class="fields">

            <div class="sixCl wide field js_query_seq">

                <label>订单号</label>

                <input type="text" maxlength="50" name="orderNo" id="orderNo" placeholder="">

            </div>

            <!--https://blog.csdn.net/dreamweaver_zhou/article/details/79203297-->

            <div class="sixCl wide field js_query_btype">

                <label>排序字段</label>

                <select name="sortFiled" id="sortFiled">

                    <option value="order_no">订单号</option>

                </select>

            </div>

            <div>

                <label></label>

                <input type="button" value="搜索" id="btSearch" class="ui right floated positive button btn-search"/>

            </div>

        </div>

    </form>

    <div class="table-container">

        <table class="ui nine column table celled table-result" id="table-result">

            <thead>

            <tr>

                <th>hotelSeq</th>

                <th>酒店名称</th>

            </tr>

            </thead>

            <tbody id="tbody-result">

            </tbody>

        </table>

    </div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.js"></script>

<script type="text/javascript" src="./js/cheatorder.js"></script>

<!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>-->

</div>

</body>

</html>

7：js代码

$(function() {

    $('#btSearch').click(function () {

        var orderNo = $('#orderNo').val();

        var sortFiled = $('#sortFiled').val();

        var tbody=window.document.getElementById("tbody-result");

        $.ajax({

            type: "post",

            dataType: "json",

            url: "/orderTest",

            data: {

                orderNo: orderNo,

                sortFiled: sortFiled

            },

            success: function (msg) {    //请求成功之后的操作

//                if (msg.ret) {

                    var str = "";

//                    var data = msg.data;

                    var data1=msg[0];

//                    for (i in data) {

                        str += "<tr>" +

                        "<td>" + data1.hotelSeq + "</td>" +

                        "<td>" + data1.hotelName + "</td>" +

                        "</tr>";

//                    }

                    tbody.innerHTML = str;

//                }

            },

            error: function () {

                alert("查询失败")

            }

        });

    });

});

8：开启服务，浏览器访问

http://localhost:8080/order.html

出现

9：输入订单号，点击搜索，搜索到结果，前台显示

10:项目结构图

使用spring boot，gradle，idea，js，html创建一个小的前后端程序的更多相关文章

  1. Spring Boot +Vue 项目实战笔记（二）：前后端结合测试（登录页面开发）

    前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...

  2. Spring boot + mybatis + dubbo + zookeeper + mysql + mybatis-generator 一个小demo

    代码的链接地址:https://gitee.com/frostGG/springbooo_dubbo_demo.git 1.项目的目录经构: 介绍: 这一个项目,用的是阿里的dubbo,和zookee ...

  3. 使用intelliJ创建 spring boot + gradle + mybatis站点

    Spring boot作为快速入门是不错的选择,现在似乎没有看到大家写过spring boot + gradle + mybatis在intellij下的入门文章,碰巧.Net同事问到,我想我也可以写 ...

  4. spring boot + gradle + mybatis

    使用intelliJ创建 spring boot + gradle + mybatis站点   Spring boot作为快速入门是不错的选择,现在似乎没有看到大家写过spring boot + gr ...

  5. Spring boot Gradle项目搭建

    Spring boot Gradle项目搭建 使用IDEA创建Gradle工程     操作大致为:File->new->Project->Gradle(在左侧选项栏中)     创 ...

  6. Spring Boot 揭秘与实战 自己实现一个简单的自动配置模块

    文章目录 1. 实战的开端 – Maven搭建 2. 参数的配置 - 属性参数类 3. 真的很简单 - 简单的服务类 4. 自动配置的核心 - 自动配置类 5. spring.factories 不要 ...

  7. JS怎么创建一个类?

    15. JS怎么创建一个类? 方式1 : var obj = new Object(); 方式2 : var obj = {}; 16.JS的typeof返回哪些数据类型? string.number ...

  8. spring boot 参数传递(spring boot 参数传数 arg0 每一个参数 arg0#{arg0}，arg1 #{arg1})

    spring boot 参数传数 arg0 每一个参数 arg0#{arg0},arg1  #{arg1} @Select("select * from sys_user where nam ...

  9. 在VS中手工创建一个最简单的WPF程序

    如果不用VS的WPF项目模板,如何手工创建一个WPF程序呢?我们来模仿WPF模板,创建一个最简单的WPF程序. 第一步:文件——新建——项目——空项目,创建一个空项目. 第二步:添加引用,Presen ...

随机推荐

  1. 启用PAE后虚拟地址到物理地址的转换

      34 注册:2013-10 帖子:2013 精华:34 --> [原创]启用PAE后虚拟地址到物理地址的转换 安于此生 2013-11-3 20:54 16073 由常规的两级页表转换得不到 ...

  2. Bypassing PatchGuard on Windows x64

    [说明] 1.  本文是意译,加之本人英文水平有限.windows底层技术属菜鸟级别,本文与原文存在一定误差,请多包涵. 2.  由于内容较多,从word拷贝过来排版就乱了.故你也可以下载附件. 3. ...

  3. sklearn算法库的顶层设计

    sklearn监督学习的各个模块 neighbors近邻算法,svm支持向量机,kernal_ridge核岭回归,discriminant_analysis判别分析,linear_model广义线性模 ...

  4. 【python3】 django2.0 加载css 、js 、img 等静态文件

    python : 3.6.4 django : 2.0 1 文件目录  /var/www/mysite 2 nginx配置: server { listen ; #暴露给外部访问的端口 server_ ...

  5. 金蝶KIS问题解决汇总

    1.帐套结转时,提示t_subsys插入重复键 解决: I.删除索引  alter table t_subsys drop constraint pk_subsys  II.t_rp_initial表 ...

  6. html2canvas - 实现网页截图(+下载截图) 功能

    实现:html2canvas + canvas.toDataURL 首先,引入依赖插件: import { html2canvas } from './html2canvas'; html2canva ...

  7. aws.s3的 upload 和putObject有什么区别

    相同点:上传或新增一个object : <template> <div class="page"> <!-- 参考:https://blog.csdn ...

  8. 【咸鱼教程】TextureMerger1.6.6 二：Sprite Sheet的制作和使用

    Sprite Sheet主要用于将零碎的小图合并成一张整图.减少加载图片时http的请求次数. 1 打开TextureMerger,选择Sprite Sheet 2  添加纹理(未创建项目时,会先弹出 ...

  9. 【JSP】JSP的介绍和基本原理

    JSP简介 JSP的核心实质是Servlet技术.JSP是后来添加的基于Servlet的一种扩展技术.但二者在使用上有不同的方向. 由于Servlet实质是一个Java类,因此非常适合用来处理业务逻辑 ...

  10. iOS8跳转到系统设置页

    版权声明:本文为博主原创文章,未经博主允许不得转载. 大家都知道,在iOS5.0时时可以跳转到系统的设置页的.但是在5.1之后就不可以了. 刚才研究了下这个问题,发现只有iOS8可以跳转到系统设置里自 ...