使用spring boot，gradle，idea，js，html创建一个小的前后端程序
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创建一个小的前后端程序的更多相关文章
- Spring Boot +Vue 项目实战笔记（二）：前后端结合测试（登录页面开发）
前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...
- Spring boot + mybatis + dubbo + zookeeper + mysql + mybatis-generator 一个小demo
代码的链接地址:https://gitee.com/frostGG/springbooo_dubbo_demo.git 1.项目的目录经构: 介绍: 这一个项目,用的是阿里的dubbo,和zookee ...
- 使用intelliJ创建 spring boot + gradle + mybatis站点
Spring boot作为快速入门是不错的选择,现在似乎没有看到大家写过spring boot + gradle + mybatis在intellij下的入门文章,碰巧.Net同事问到,我想我也可以写 ...
- spring boot + gradle + mybatis
使用intelliJ创建 spring boot + gradle + mybatis站点 Spring boot作为快速入门是不错的选择,现在似乎没有看到大家写过spring boot + gr ...
- Spring boot Gradle项目搭建
Spring boot Gradle项目搭建 使用IDEA创建Gradle工程 操作大致为:File->new->Project->Gradle(在左侧选项栏中) 创 ...
- Spring Boot 揭秘与实战 自己实现一个简单的自动配置模块
文章目录 1. 实战的开端 – Maven搭建 2. 参数的配置 - 属性参数类 3. 真的很简单 - 简单的服务类 4. 自动配置的核心 - 自动配置类 5. spring.factories 不要 ...
- JS怎么创建一个类?
15. JS怎么创建一个类? 方式1 : var obj = new Object(); 方式2 : var obj = {}; 16.JS的typeof返回哪些数据类型? string.number ...
- spring boot 参数传递(spring boot 参数传数 arg0 每一个参数 arg0#{arg0}，arg1 #{arg1})
spring boot 参数传数 arg0 每一个参数 arg0#{arg0},arg1 #{arg1} @Select("select * from sys_user where nam ...
- 在VS中手工创建一个最简单的WPF程序
如果不用VS的WPF项目模板,如何手工创建一个WPF程序呢?我们来模仿WPF模板,创建一个最简单的WPF程序. 第一步:文件——新建——项目——空项目,创建一个空项目. 第二步:添加引用,Presen ...
随机推荐
- 命令行连接mysql服务器时 报Can't connect to local MySQL server through socket 'xxx.sock'错误
本来之前用的好好的mysql服务器,突然就报Can't connect to local MySQL server through socket 'xxx.sock'错误了 遇到该问题思路首先是:检查 ...
- 【面试题】Python高级开发工程师面试题
线上面试题,有空整理答案,欢迎大家回复答案
- Win8应用开发 入门篇（三） UX交互导航模式
导航模式(Windows 应用商店应用) 在本文中 分层模式 画布上导航 顶部应用栏 语义式缩放 相关主题 组织 Windows 应用商店应用中的内容,以便用户可以轻松而直观地进行导航.使用正确的 ...
- Ubuntu 14.04 DNS 配置
最近得到一个比较好用的DNS,每次重启后都修改DNS配置文件 /etc/resolv.conf 重启就会失效 从网上得知 /etc/resolv.conf中的DNS配置是从/etc/resolvcon ...
- Makefile伪目标
https://www.zybuluo.com/lishuhuakai/note/210174 本节我们讨论一个Makefile中的一个重要的特殊目标:伪目标. 伪目标是这样一个目标:它不代表一个真正 ...
- 压力测试工具JMeter入门教程<转>
1.Jmeter 概要描叙 jmeter 是一款专门用于功能测试和压力测试的轻量级测试开发平台.多数情况下是用作压力测试,该测试工具在阿里巴巴有着广泛的使用,估计是不要钱吧,哈哈,功能上来说,整个平台 ...
- PtH(hash传递攻击)原理探秘
背景知识 Windows 横向渗透的两种方式 1.hash传递攻击,通过传递NTLM-Hash,登录机器,简称PtH: 2.ticket传递攻击,通过传递kerberos的ticket,登录机器,简称 ...
- C语言如何产生随机数
1.基本函数 在C语言中取随机数所需要的函数是: int rand(void); void srand(unsigned int n); rand()函数和srand()函数被声明在头文件stdlib ...
- PHP服务器访问优化
常规的优化措施: 磁盘写入,网络安全,证书加密,CPU,内存,DNS解析,数据库优化,页面gzip压缩 PHP gzip压缩打开: 打开php目录下的php.ini文件,找到zlib.output_c ...
- mysql概要（四）order by ，limit ，group by和聚合函数的特点，子查询
1.order by 默认按升序排列(asc/desc),多字段排序 order by 字段 排序方式,字段2 排序方式,..: 在分组排序中,排序是对分组后的结果进行排序,而不是在组中进行排序. s ...