webapp层｜*.html&*.xml
Posted 接引之书
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webapp层｜*.html&*.xml相关的知识，希望对你有一定的参考价值。
<div class="card">
<!--card-header-->
<div class="card-header">
<h3 class="card-title"><font style="vertical-align: inherit;"><font
style="vertical-align: inherit;">标题</font></font></h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="坍方">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="去掉">
<i class="fas fa-times"></i></button>
</div>
</div>
<!--/.card-header-->
<!--card-body-->
<div class="card-body"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
<form id="id-form">
<input id="method-type" type="hidden" name="_method">
<div class="form-group">
<label for="student-name">学生姓名</label>
<input name="studentName" type="text" class="form-control" id="student-name" placeholder="输入学生姓名">
</div>
<div class="form-group">
<label for="student-grade">学生分数</label>
<input name="studentGrade" type="text" class="form-control" id="student-grade" placeholder="输入学生分数">
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="studentSex" id="student-sex-boy" value="1" checked>
<label class="form-check-label" for="student-sex-boy">男</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="studentSex" id="student-sex-girl" value="0">
<label class="form-check-label" for="student-sex-girl">女</label>
</div>
<div class="form-group">
<button id="from-submit" class="btn btn-block btn-primary btn-lg" type="button">提交</button>
</div>
</form>
</font></font></div>
<!--/.card-body-->
</div>
<div class="card">
<!--card-header-->
<div class="card-header">
<h3 class="card-title">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">标题</font>
</font></h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="坍方"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="去掉"><i class="fas fa-times"></i></button>
</div>
</div>
<!--/.card-header-->
<!-- card-body -->
<div class="card-body">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">
<table id="student-table" class="display" style="width:100%">
<thead>
<tr>
<th>学员姓名</th>
<th>学员性别</th>
<th>学员分数</th>
</tr>
</thead>
<tfoot>
<tr>
<th>学员姓名</th>
<th>学员性别</th>
<th>学员分数</th>
</tr>
</tfoot>
</table>
</font>
</font>
</div>
<!-- /.card-body -->
<!--card-footer-->
<div class="card-footer">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">
<div class="btn-group">
<!-- id的值只能一个,当身份标识;
class可以有很多个,一个样式可以注入多个class,比如下面的按钮;
disabled="true":禁用属性 -->
<button id="delete-button" type="button" disabled="true" class="btn btn-default"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">删除</font></font></button>
<button id="update-button" type="button" disabled="true" class="btn btn-default"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">更新</font></font></button>
<button id="insert-button" type="button" disabled="true" class="btn btn-default"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">新增</font></font></button>
</div>
</font>
</font></div>
<!-- /.card-footer-->
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>AdminLTE 3 | Starter</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<!-- wrapper -->
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item d-none d-sm-inline-block">
<a href="../login" class="nav-link">退出登录</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
<a id="show-username" href="#" class="d-block"></a>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Starter Pages
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Active Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inactive Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Simple Link
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- /.Main Sidebar Container -->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Starter Page</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Starter Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div id="div-table" class="col-lg-6">
</div>
<!-- /.col-md-6 -->
<div id="div-from" class="col-lg-6">
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2019 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>
<!-- /.Main Footer -->
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<font></font>
<font></font>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<font></font>
<script type="text/javascript">
$(function() {
getUser();
});
//获取用户姓名显示在图标旁
function getUser(){
$.ajax({
url:"user",
type:"get",
success:function (result) {
if(result.status == 200){
$(".sidebar").data("user",result.data);
loadTableCard(); //等数据加载完之后再调用这方法(表格),以保证是同一线程下
$("#show-username").text(result.data.user.username); //text:添加文本
}else{
alert(result.message);
}
}
});
}
function loadTableCard(){ //意思是页面div-table加载完之后,再执行initStudentsTable()
$("#div-table").load("../pages/table.html",function(){ //load():是调用另一个线程(异步加载), function():回调函数
initStudentsTable(); //load():方法从服务器加载数据，并把返回的数据放入被选元素中。
bindingButton();
});
}
//绑定按钮
function bindingButton() {
var user = $(".sidebar").data("user");
var powers = user.powers; //通过用户拿到权限
for(var i=0;i<powers.length;i++){ //遍历这个权限数组
if(powers[i] == "com.tanzhou.service.StudentsService.deleteStudentsByIds"){
$("#delete-button").removeAttr("disabled"); //removeAttr("disabled"):删除这禁用属性
}
if(powers[i] == "com.tanzhou.service.StudentsService.insertStudents"){
$("#insert-button").removeAttr("disabled");
}
if(powers[i] == "com.tanzhou.service.StudentsService.updateStudentsById"){
$("#update-button").removeAttr("disabled");
}
}
//绑定删除按钮
$("#delete-button").click(function () {
deleteStudentsByIds();
});
//绑定新增按钮
$("#insert-button").click(function () { //#insert-button:这是新增按钮
$("#div-from").load("../pages/from.html" ,function () { //#div-from;这定义成from.html页面
$("#from-submit").click(function () { //#from-submit:这是提交按钮
insertStudents(); //click:点击
});
});
});
//绑定更新按钮
$("#update-button").click(function () { //#update-button:这是更新按钮
var ids = getIds();
if (ids.length == 1) {
$("#div-from").load("../pages/from.html" ,function () {
echo();
$("#from-submit").click(function () {
updateStudentsById();
});
});
} else {
alert("只能选一个,请从新选择");
}
});
}
//回显
function echo() {
var ids = getIds();
$.ajax({
url: "students/" + ids.toString(),
type: "get",
success:function (result) {
if (result.status == 200) {
var student = result.data;
$("#student-name").attr("value",student.studentName);
$("#student-grade").attr("value",student.studentGrade);
if (student.studentSex == 1) {
$("#student-sex-boy").attr("checked",true);
} else {
$("#student-sex-girl").attr("checked",true);
}
} else {
alert(result.message);
}
}
});
}
//更新=(查询+修改)/更新表中的某一行数据
function updateStudentsById(){
var ids = getIds();
$("#method-type").attr("value","put");
$.ajax({
url: "students/" + ids.toString(),
type: "post",
data: $("#id-form").serialize(), //表单序列化
success:function (result) {
if (result.status == 200) {
alert(result.message);
var table = $('#student-table').DataTable();
$("#div-from").empty();
table.ajax.reload();
} else {
alert(result.message);
}
}
});
}
//新增&提交表单
function insertStudents() {
$.ajax({
url: "students",
type: "post",
data: $("#id-form").serialize(), //Ajax表单发送请求,要序列化
success:function (result) {
if (result.status == 200) {
alert(result.message); //这是弹窗,数据是后台传过来的
var table = $('#student-table').DataTable(); //选中,从新进行加载, / DataTable:数据表
$("#div-from").empty(); //清除div内容,(提交完之后,就让新增框自动移除)
table.ajax.reload(); //用Ajax异步请求,表单从新加载
} else {
alert(result.message);
}
}
});
}
//点击删除
function deleteStudentsByIds() {
var table = $('#student-table').DataTable(); //获取数据表
var resultIds = getIds();
console.log(resultIds);
$.ajax({
url: "students",
type: "post",
data: {
_method : "delete",
ids : resultIds.toString() //数组要转换成toString()格式,才能执行
},
success:function (result) {
if (result.status == 200) {
alert(result.message);
//点击删除之后,不再请求后台而是在前台直接移除 // table.rows('.selected'):这是拿到选中的
//以前的那种删除,高并发肯定是不行的,这里的删除高并发能抗的起
table.rows('.selected').remove().draw();
} else {
alert(result.message);
}
}
});
}
//遍历删除的数组
function getIds() {
var table = $('#student-table').DataTable();
var ids = table.rows('.selected').ids();
var reusltIds = [];
for(var i = 0; i < ids.length; i ++) {
var id = ids[i]
reusltIds.push(id); //遍历出来的每个下标都放在reusltIds这数组里面
}
return reusltIds;
}
//绑定表数据&辨别男女
function initStudentsTable() {
var table = $('#student-table').DataTable({
ajax: {
url: 'students',
dataSrc: 'data'
},
rowId:'id', //为什么刚才table.html表中的数据没有出来,是因为数据没有一一对应上
columns: [
{ "data": "studentName" },
{ "data":"studentSex" },
{ "data": "studentGrade" }
],
columnDefs:[ //自定义规则(辨别男女)
{
"targets":1, //目标的列; 第1列,下标从0开始
"render":function(data,type,row){
return data == "1"?"boy":"girl";
}
}
]
} );
//获取指定表
$('#student-table').on('click', 'tr', function () {
$(this).toggleClass('selected');
});
}
</script>
</body>
</html>
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
<!--字符编码过滤器-->
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<!--forceEncoding = forceRequestEncoding + forceResponseEncoding-->
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--前端控制器-->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring*</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<!--支持RESTful风格-->
<filter>
<filter-name>HiddenHttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HiddenHttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 3 | Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<p class="login-box-msg">欢迎登陆"占位置"系统</p>
<form id="login-form">
<div class="input-group mb-3">
<input name="userNumber" type="text" class="form-control" id="student-name" placeholder="输入账号">
</div>
<div class="input-group mb-3">
<input name="password" type="password" class="form-control" placeholder="输入密码">
</div>
<div class="row">
<!-- /.col -->
<div class="col-12">
<button id="login-button" type="button" class="btn btn-primary btn-block">登陆</button>
</div>
<!-- /.col -->
</div>
</form>
<div class="social-auth-links text-center mb-3">
<p>- OR -</p>
<a href="phone_login.html" class="btn btn-block btn-primary">
<i class="fab fa-facebook mr-2"></i>验证码登录
</a>
</div>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<script type="text/javascript">
$(function () { //文件加载时调用里面这些函数
$("#login-button").click(function () { //只要一点击,就会调用里面的函数
login();
});
});
function login(){
$.ajax({
url:"login", //这里的路径不能带"/",不然会拼接这样"http://localhost:8080/login" , 而不是"http://localhost:8080/ssm/login"
type:"post", //为了保证安全性,通过post带过去
data:$("#login-form").serialize(), //进行初始化
success:function (result) {
if(result.status == 200){ //200状态码代表:成功
window.location.href = "private/starter.html"; //登录成功,页面跳转
}else{
alert(result.message); //这个值(result.message)是LoginController.java传过来的,是进行过构造的
}
}
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 3 | Log in</title>
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font Awesome -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a>
</div>
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
<form id="login-form">
<div class="input-group mb-3">
<input name="phoneNumber" type="text" class="form-control" id="student-name" placeholder="输入手机号">
</div>
<div class="input-group mb-3">
<input name="message" type="text" class="form-control" placeholder="输入验证码">
</div>
<div class="row">
<!-- /.col -->
<div class="col-12">
<button id="message-login" type="button" class="btn btn-primary btn-block">发送验证码</button>
<button id="phone-login-button" type="button" class="btn btn-primary btn-block">登陆</button>
</div>
<!-- /.col -->
</div>
</form>
<div class="social-auth-links text-center mb-3">
<p>- OR -</p>
<a href="login_page.html" class="btn btn-block btn-primary">
<i class="fab fa-facebook mr-2"></i>用户名密码登录
</a>
</div>
<!-- /.social-auth-links -->
</div>
<!--/.login-card-body-->
</div>
<!-- /.login-box -->
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<script type="text/javascript">
$(function(){
getMessage();
phoneLogin();
})
//验证码
function getMessage(){
$("#message-login").click(function () {
$.ajax({
url:"phone-login",
type:"get",
data:$("#login-form").serialize(),
success:function (result) {
if(result.status == 200){
alert(result.message);
}else{
alert(result.message);
}
}
});
});
}
//验证码匹对登录
function phoneLogin(){
$("#phone-login-button").click(function () {
$.ajax({
url:"phone-login",
type:"post",
data:$("#login-form").serialize(),
success:function (result) {
if(result.status == 200){
window.location.href = "private/starter.html"; //登录成功之后,直接跳转
}else{
alert(result.message);
}
}
});
});
}
</script>
</body>
</html>
目录大纲 Directory outline
以上是关于webapp层｜*.html&*.xml的主要内容，如果未能解决你的问题，请参考以下文章
佩特来项目经验小集合___组合查询存储过程，报错 "varchar JBID='' 转换成数据类型 int 时失败"(示例代(代码
转eclipse新建项目，报错“Error: workspaceappcompat_v7 esvalues-v21styles_base.xml No resource found tha(示例代(代