前言
在前两篇博客中，后台已经搭建完毕，现在需要设计一下前端页面
webapp下的项目结构图
创建ftl文件夹，导入css和js
因为我们在后台的视图解析器中，设置了页面解析器，跳转路径为/ftl/*.ftl，所以需要ftl文件夹，以便识别。
css和js的资源我会上传。
list.ftl
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
<link rel="stylesheet" href="/ftl/css/laypage.css">
<script src="/ftl/js/vue/vue.min.js"></script>
<script src="/ftl/js/jquery/jquery.min.js"></script>
<script src="/ftl/js/laypage/laypage.js" charset="utf-8"></script>
<script src="/ftl/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<div id="app" class="container">
<form class="form-inline bg-warning" role="form">
查询条件：
<div class="form-group">
<label class="sr-only" for="username">用户名称</label>
<input type="text" class="form-control" id="username" placeholder="用户名称">
</div>
<div class="form-group">
<label class="sr-only" for="userage">用户年龄</label>
<input type="text" class="form-control" id="userage" placeholder="用户年龄">
</div>
<button type="button" id="findUser" class="btn bg-primary ">查询用户</button>
<button type="button" id="addUserBtn" class="btn btn-danger">增加用户</button>
</form>
<div class="table-responsive">
<table class="table">
<thead>
<tr class="success">
<td>用户</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr class="active" v-for="(item,index) in result">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<a href="#" @click="editEvent(item.id)">修改</a>
<a href="#" @click="delEvent(item.id)">删除</a>
</td>
</tr>
</tbody>
<tr>
<td colspan="3">
<div id="pagenav"></div>
</td>
</tr>
</table>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
result: []
}
});
//查询用户数据
var getUserPageList = function (curr) {
$.ajax({
type: "post",
dataType: "json",
url: "/user/getPage.do",
data: {
pageNum: curr || 1,
pageSize: 5,
name: $("#username").val(),
age:$("#userage").val()
},
success: function (msg) {
app.result = msg.page;
//分页效果
laypage({
cont: 'pagenav',
pages: msg.totalPage,
skin: '#DB7093',
first: '第一页',
last: '最后一页',
curr: curr || 1,
jump: function (obj, first) {
if (!first) {
//点击跳页触发函数本身,并床底当前页的页码
getUserPageList(obj.curr);
}
}
});
}
});
}
getUserPageList();
$("#findUser").click(function () {
getUserPageList();
});
$("#addUserBtn").click(function (){
layer.open({
type: 2,
title: '增加用户',
fix: false,
maxmin: true,
shadeClose: true,
area: ['1100px', '600px'],
content: '/ftl/add.html',
end: function () {
getUserPageList();
}
});
});
var editEvent = function (id) {
layer.open({
type: 2,
title: '编辑用户',
fix: false,
maxmin: true,
shadeClose: true,
area: ['1100px', '600px'],
content: '/user/editPage.do?id=' + id,
end: function () {
getUserPageList();
}
});
}
var delEvent = function (uid) {
layer.confirm("确认删除吗?",
{
btn: ['残忍删除', '容我想想']
},
function () {
$.ajax({
type: "get",
dataType: "json",
url: "/user/delUser.do",
data: {
id: uid
},
success: function () {
getUserPageList();
layer.msg("删除成功", {icon: 6})
}
})
},
function () {
}
);
}
</script>
</body>
</html> edit.ftl
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/ftl/css/bootstrap.min.css">
<script src="/ftl/js/jquery/jquery.min.js"></script>
<script src="/ftl/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="/ftl/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<style>
input.error {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<form id="addUserForm">
<br/>
<div class="form-group">
<label for="username">用户名称：</label>
<input type="text" class="form-control" id="username" name="username" value="${data.name}"
placeholder="输入名称">
</div>
<div class="form-group">
<label for="userage">用户年龄：</label>
<input type="text" class="form-control" id="userage" name="userage" value="${data.age}" placeholder="输入年龄">
</div>
<div class="form-group">
<button type="button" id="saveBtn" class="btn btn-success">修改</button>
<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
</div>
</form>
</div>
<script>
var updateUser = function () {
if (!check().form()) {
return;
}
$.ajax({
type: "post",
dataType: "json",
url: "/user/updateUser.do",
data: {
"id":${data.id},
"name": $("#username").val(),
"age": $("#userage").val()
},
success: function (msg) {
console.log("msg=-=-----" + msg)
$("#cancelBtn").click();
}
/*,
error: function (XmlHttpRequest, textStatus, errorThrown) {
console.log("textStatus=====" + textStatus);
}*/
})
}
$("#saveBtn").click(function () {
updateUser();
})
$("#cancelBtn").click(function () {
var index = parent.layer.getFrameIndex(window.name);
parent.getUserPageList();
parent.layer.close(index);
});
function check() {
return $("#addUserForm").validate({
rules: {
username: {
required: true
},
userage: {
required: true
}
},
message: {
username: {
required: ""
},
userage: {
required: ""
}
}
});
}
</script>
</body>
</html>add.html
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<style>
input.error {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<form id="addUserForm">
<br/>
<div class="form-group">
<label for="username">用户名称：</label>
<input type="text" class="form-control" id="username" name="username" placeholder="输入名称">
</div>
<div class="form-group">
<label for="userage">用户年龄：</label>
<input type="text" class="form-control" id="userage" name="userage" placeholder="输入年龄">
</div>
<div class="form-group">
<button type="button" id="saveBtn" class="btn btn-success">提交</button>
<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
</div>
</form>
</div>
<script>
var addUser = function () {
if (!check().form()) {
return;
}
$.ajax({
type: "post",
dataType: "json",
url: "/user/add.do",
data: {
"name": $("#username").val(),
"age": $("#userage").val()
},
success: function (msg) {
console.log("msg=-=-----" + msg)
$("#cancelBtn").click();
}
/*,
error: function (XmlHttpRequest, textStatus, errorThrown) {
console.log("textStatus=====" + textStatus);
}*/
})
}
$("#saveBtn").click(function () {
addUser();
})
$("#cancelBtn").click(function () {
var index = parent.layer.getFrameIndex(window.name);
parent.getUserPageList();
parent.layer.close(index);
});
function check() {
return $("#addUserForm").validate({
rules: {
username: {
required: true
},
userage: {
required: true
}
},
message: {
username: {
required: ""
},
userage: {
required: ""
}
}
});
}
</script>
</body>
</html>大部分都是套用了组件，我们需要关注的仅仅是ajax传入后台数据的参数名和参数类型，以及页面显示后台数据的参数名和参数值。