SSM框架实战小项目：打造高效用户管理系统 day3
前言
在前两篇博客中，后台已经搭建完毕，现在需要设计一下前端页面
webapp下的项目结构图
创建ftl文件夹，导入css和js
因为我们在后台的视图解析器中，设置了页面解析器，跳转路径为/ftl/*.ftl，所以需要ftl文件夹，以便识别。
css和js的资源我会上传。
list.ftl
<!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
<!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
<!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传入后台数据的参数名和参数类型，以及页面显示后台数据的参数名和参数值。