SpringBoot跳转HTML页面
前言
最终想要的结果：
一、配置pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
二、配置application.properties文件
#Controller跳转到html页面配置
spring.thymeleaf.prefix=classpath:/templates/
三、创建存放html以及js、css的文件夹
涉及到的css以及js，可在评论区留言我发给您，太长了这里放不下
admin.css
amazeui.min.css
font-awesome.min.css
Site.css
zy.all.css
zy.form.css
zy.layout.css
zy.menu.css
zy.pageRecord.css
zy.table.css
zy.tabs.css
_layout.js
jquery-1.7.2.min.js
jquery.SuperSlide.source.js
Jqueryplugs.js
authToExamineList.html
页面中引入css和js需要注意，在static下的文件，直接引用即可，例如：<link rel="stylesheet" href="/css/Site.css" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主播认证审核</title>
<link rel="stylesheet" href="/css/Site.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/amazeui.min.css" />
<link rel="stylesheet" href="/css/admin.css" />
<link rel="stylesheet" href="/css/zy.all.css" />
<link rel="stylesheet" href="/css/zy.form.css" />
<link rel="stylesheet" href="/css/zy.layout.css" />
<link rel="stylesheet" href="/css/zy.menu.css" />
<link rel="stylesheet" href="/css/zy.pageRecord.css" />
<link rel="stylesheet" href="/css/zy.table.css" />
<link rel="stylesheet" href="/css/zy.tabs.css" />
</head>
<body>
<div class="dvcontent">
<div>
<!--tab start-->
<div class="tabs" style="margin: 30px;">
<div class="hd">
<ul>
<li class="on"
style="box-sizing: initial; -webkit-box-sizing: initial;">入库记录</li>
<!-- <li class=""
style="box-sizing: initial; -webkit-box-sizing: initial;">商品入库</li> -->
</ul>
</div>
<div class="bd">
<ul style="display: block; padding: 20px;">
<li>
<!--分页显示角色信息 start-->
<div id="dv1">
<table class="table" id="tbRecord">
<thead>
<tr>
<th>编号</th>
<th>商品名称</th>
<th>商品分类</th>
<th>入库数量</th>
<th>入库日期</th>
<th>编辑</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr style="background-color: rgb(255, 255, 255);">
<td>1</td>
<td>商品1</td>
<td>肉类</td>
<td>1000</td>
<td>2012-12-10</td>
<td class="edit"><button onclick="btn_edit(1)">
<i class="icon-edit bigger-120"></i>编辑
</button></td>
<td class="delete"><button onclick="btn_delete(1)">
<i class="icon-trash bigger-120"></i>删除
</button></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>1</td>
<td>商品1</td>
<td>肉类</td>
<td>1000</td>
<td>2012-12-10</td>
<td class="edit"><button onclick="btn_edit(1)">
<i class="icon-edit bigger-120"></i>编辑
</button></td>
<td class="delete"><button onclick="btn_delete(1)">
<i class="icon-trash bigger-120"></i>删除
</button></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>1</td>
<td>商品1</td>
<td>肉类</td>
<td>1000</td>
<td>2012-12-10</td>
<td class="edit"><button onclick="btn_edit(1)">
<i class="icon-edit bigger-120"></i>编辑
</button></td>
<td class="delete"><button onclick="btn_delete(1)">
<i class="icon-trash bigger-120"></i>删除
</button></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>1</td>
<td>商品1</td>
<td>肉类</td>
<td>1000</td>
<td>2012-12-10</td>
<td class="edit"><button onclick="btn_edit(1)">
<i class="icon-edit bigger-120"></i>编辑
</button></td>
<td class="delete"><button onclick="btn_delete(1)">
<i class="icon-trash bigger-120"></i>删除
</button></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>1</td>
<td>商品1</td>
<td>肉类</td>
<td>1000</td>
<td>2012-12-10</td>
<td class="edit"><button onclick="btn_edit(1)">
<i class="icon-edit bigger-120"></i>编辑
</button></td>
<td class="delete"><button onclick="btn_delete(1)">
<i class="icon-trash bigger-120"></i>删除
</button></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>1</td>
<td>商品1</td>
<td>肉类</td>
<td>1000</td>
<td>2012-12-10</td>
<td class="edit"><button onclick="btn_edit(1)">
<i class="icon-edit bigger-120"></i>编辑
</button></td>
<td class="delete"><button onclick="btn_delete(1)">
<i class="icon-trash bigger-120"></i>删除
</button></td>
</tr>
<tr>
<td>1</td>
<td>商品1</td>
<td>肉类</td>
<td>1000</td>
<td>2012-12-10</td>
<td class="edit"><button onclick="btn_edit(1)">
<i class="icon-edit bigger-120"></i>编辑
</button></td>
<td class="delete"><button onclick="btn_delete(1)">
<i class="icon-trash bigger-120"></i>删除
</button></td>
</tr>
<tr style="background-color: rgb(255, 255, 255);">
<td>1</td>
<td>商品1</td>
<td>肉类</td>
<td>1000</td>
<td>2012-12-10</td>
<td class="edit"><button onclick="btn_edit(1)">
<i class="icon-edit bigger-120"></i>编辑
</button></td>
<td class="delete"><button onclick="btn_delete(1)">
<i class="icon-trash bigger-120"></i>删除
</button></td>
</tr>
</tbody>
</table>
</div> <!--分页显示角色信息 end-->
</li>
</ul>
<ul class="theme-popbod dform" style="display: none;">
<div class="am-cf admin-main" style="padding-top: 0px;">
<!-- content start -->
<div class="am-cf admin-main" style="padding-top: 0px;">
<!-- content start -->
<div class="admin-content">
<div class="admin-content-body">
<div class="am-g">
<div class="am-u-sm-12 am-u-md-4 am-u-md-push-8"></div>
<div class="am-u-sm-12 am-u-md-8 am-u-md-pull-4"
style="padding-top: 30px;">
<form class="am-form am-form-horizontal"
<!-- action="http://demo.mxyhn.xyz:8020/cssthemes6/1.17ZF04/user/addUser1Submit.action" -->
method="post">
<div class="am-form-group">
<label for="user-email" class="am-u-sm-3 am-form-label">
分类</label>
<div class="am-u-sm-9">
<select name="groupId" required="">
<option value="">请选择分类</option>
</select> <small>分类</small>
</div>
</div>
<div class="am-form-group">
<label for="user-email" class="am-u-sm-3 am-form-label">
商品名称</label>
<div class="am-u-sm-9">
<select name="groupId" required="">
<option value="">请选择商品</option>
</select> <small>商品</small>
</div>
</div>
<div class="am-form-group">
<label for="name" class="am-u-sm-3 am-form-label">
数量</label>
<div class="am-u-sm-9">
<input type="text" id="name" required="" placeholder="数量"
name="name"> <small>数量</small>
</div>
</div>
<div class="am-form-group">
<label for="user-intro" class="am-u-sm-3 am-form-label">
备注</label>
<div class="am-u-sm-9">
<textarea class="" rows="5" id="user-intro" name="remark"
placeholder="输入备注"></textarea>
<small>250字以内...</small>
</div>
</div>
<div class="am-form-group">
<div class="am-u-sm-9 am-u-sm-push-3">
<input type="submit" class="am-btn am-btn-success"
value="添加分类">
</div>
</div>
</form>
</div>
</div>
</div>
<!-- content end -->
</div>
<!--添加 end-->
<!--end-->
</div>
</div>
</ul>
</div>
</div>
<!--tab end-->
</div>
<script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/js/Jqueryplugs.js" type="text/javascript"></script>
<script src="/js/_layout.js"></script>
<script src="/js/jquery.SuperSlide.source.js"></script>
<script>
var num = 1;
$(function() {
$(".tabs").slide({
trigger : "click"
});
});
var btn_save = function() {
var pid = $("#RawMaterialsTypePageId option:selected").val();
var name = $("#RawMaterialsTypeName").val();
var desc = $("#RawMaterialsTypeDescription").val();
var ramark = $("#Ramark").val();
$.ajax({
type : "post",
url : "/RawMaterialsType/AddRawMaterialsType",
data : {
name : name,
pid : pid,
desc : desc,
ramark : ramark
},
success : function(data) {
if (data > 0) {
$.jq_Alert({
message : "添加成功",
btnOktext : "确认",
dialogModal : true,
btnOkClick : function() {
//$("#RawMaterialsTypeName").val("");
//$("#RawMaterialsTypeDescription").val("");
//$("#Ramark").val("");
//page1();
location.reload();
}
});
}
}
});
alert(t);
}
var btn_edit = function(id) {
$.jq_Panel({
url : "/RawMaterialsType/EditRawMaterialsType?id=" + id,
title : "编辑分类",
dialogModal : true,
iframeWidth : 500,
iframeHeight : 400
});
}
var btn_delete = function(id) {
$.jq_Confirm({
message : "您确定要删除吗?",
btnOkClick : function() {
}
});
}
</script>
</div>
</body>
</html>
四、创建Controller类
@Controller
@RequestMapping("/authToExamine")
public class AuthToExamineController {
@RequestMapping("/authToExamineList")
public String authToExamineList(){
return "authToExamineList";
//return "index";
}
}
五、测试
输入您的接口地址：我的为http://localhost:8888/authToExamine/authToExamineList
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
