Maven云笔记之后台首页及查询
首页我们从Layui经典模块化前端框架www.layui.com上使用一个后台模板并进行了简单的修改
layui使用方法：
1、首先从官网下载框架并放到src/main文件夹下
2、将我们模板中css和js的路径换成我们框架下的资源
后台页面的效果基本就大功告成了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">威职云笔记</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- <li class="layui-nav-item"><a href="">控制台</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">用户</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系统</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
<dd><a href="">授权管理</a></dd>
</dl>
</li> -->
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
贤心
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>
<dd><a href="">安全设置</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">退了</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">笔记本管理</a>
<dl class="layui-nav-child">
<dd><a href="notebook.html" target="myframe">笔记本管理</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">笔记管理</a>
<dl class="layui-nav-child">
<dd><a href="register.html" target="myframe">笔记管理</a></dd>
<dd><a href="javascript:;">列表二</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">笔记回收站</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">回收笔记</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<iframe id="myframe" name="myframe" frameborder="0" style="width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0"></iframe>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
Copyright © 2018 威海职业学院 威海市技术学院
</div>
</div>
<script src="./layui/layui.js" charset="utf-8"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d214947968792b839fd669a4decaaffc";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
js
layui.use(['laypage', 'layer', 'table','jquery'], function(){
var laypage = layui.laypage //分页
,layer = layui.layer //弹层
,table = layui.table //表格
,$=layui.jquery //jquery
//执行一个 table 实例
table.render({
elem: '#demo'
,url: 'notebook/getnotebook.do' //数据接口
,title: '笔记本表'
,page: true //开启分页
,toolbar: 'true' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
,totalRow: true //开启合计行
,parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.state==1?0:-1, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.data.count, //解析数据长度
"data": res.data.list //解析数据列表
};
}
,cols: [[ //表头
{type: 'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID',hide:'true'}
,{field: 'name', title: '笔记本名称'}
,{field: 'addtime', title: '添加时间',templet:'<div>{{layui.util.toDateString(d.addtime)}}</div>'}
,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
]]
});
//监听行工具事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'del'){
layer.confirm('真的删除吗？', function(index){
//obj.del(); //删除对应行（tr）的DOM结构
var sendData={"id":data.id};
$.ajax({
type:"get",
url:"notebook/deletenotebook.do",
data:sendData,
datatype:"json",
success:function(msg){
if(msg.state==1){
//说明删除成功
layer.msg(msg.message);
//重新刷新表格
table.reload('demo', {
page: {
curr: 1 //重新从第 1 页开始
}
}); //只重载数据
}else{
//删除失败
layer.msg(msg.message);
}
},
error:function(msg){
alert("通信失败");
}
});
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){
layer.open({
area: ['500px', '300px'],
shadeClose:true,
anim: 1,
type: 2,
content: 'notebook_edit.html?id='+data.id,
cancel: function(index, layero){
table.reload('demo', {
page: {
curr: 1 //重新从第 1 页开始
}
}); //只重载数据
layer.close(index)
/*if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
layer.close(index)
}*/
return false;
}
});
}
});
//分页
laypage.render({
elem: 'pageDemo' //分页容器的id
,count: 100 //总页数
,skin: '#1E9FFF' //自定义选中色值
//,skip: true //开启跳页
,jump: function(obj, first){
if(!first){
layer.msg('第'+ obj.curr +'页', {offset: 'b'});
}
}
});
$('#addnotebook').on("click",function(){
layer.open({
area: ['500px', '300px'],
shadeClose:true,
anim: 1,
type: 2,
content: 'notebook_add.html',//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
cancel: function(index, layero){
table.reload('demo', {
page: {
curr: 1 //重新从第 1 页开始
}
}); //只重载数据
layer.close(index)
/*if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
layer.close(index)
}*/
return false;
}
});
});
});
再写一个在空白处显示内容的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>笔记本管理</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
</style>
</head>
<body>
<button id="addnotebook" type="button" class="layui-btn layui-btn-normal">添加</button>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="./layui/layui.js"></script>
<script src="./js/notebook.js"></script>
</body>
</html>
之后点击笔记本管理进行笔记本查询
首先就是封装我们的Notebook类
package com.whc.noteserver.entity;
import java.io.Serializable;
public class NoteBook implements Serializable{
private static final long serialVersionUID = -1884502868921125599L;
public static int DELETE_YES=1;
public static int DELETE_NO=0;
private String id; //id
private String name;//笔记本名称
private long addtime;//添加时间
private int isdelete;//是否删除标志，0-未删除，1-删除
private String userid;//关联用户表的id
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public long getAddtime() {
return addtime;
}
public void setAddtime(long addtime) {
this.addtime = addtime;
}
public int getIsdelete() {
return isdelete;
}
public void setIsdelete(int isdelete) {
this.isdelete = isdelete;
}
public String getUserid() {
return userid;
}
public void setUserid(String userid) {
this.userid = userid;
}
@Override
public String toString() {
return "NoteBook [id=" + id + ", name=" + name + ", addtime=" + addtime + ", isdelete=" + isdelete + ", userid="
+ userid + "]";
}
}
然后是我们的service层的接口
package com.whc.noteserver.service;
import java.util.HashMap;
import java.util.List;
import com.whc.noteserver.entity.NoteBook;
import com.whc.noteserver.param.NoteBookParam;
public interface NoteBookService {
public int getCount();
/**
* 获取笔记本信息
* @return
*/
public List<NoteBook> getNoteBook(NoteBookParam param);
}
接着使我们serviceimpl层
package com.whc.noteserver.serviceimpl;
import java.util.HashMap;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.whc.noteserver.dao.NoteBookDao;
import com.whc.noteserver.entity.NoteBook;
import com.whc.noteserver.param.NoteBookParam;
import com.whc.noteserver.service.NoteBookService;
@Service
public class NoteBookImpl implements NoteBookService{
@Autowired
NoteBookDao noteBookDao;
public int getCount() {
return noteBookDao.getCount();
}
/**
* 获取笔记本信息
* @return
*/
public List<NoteBook> getNoteBook(NoteBookParam param) {
return noteBookDao.getNoteBook(param);
}
}
之后是我们我们的Dao层
package com.whc.noteserver.dao;
import java.util.HashMap;
import java.util.List;
import com.whc.noteserver.entity.NoteBook;
import com.whc.noteserver.param.NoteBookParam;
public interface NoteBookDao {
/**
* 获取记录数
* @return
*/
public int getCount();
/**
* 获取笔记本信息
* @return
*/
public List<NoteBook> getNoteBook(NoteBookParam param);
}
接下就是我们mapper中的查询语句
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper SYSTEM "http://ibatis.apache.org/dtd/ibatis-3-mapper.dtd" PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN">
-<mapper namespace="com.whc.noteserver.dao.NoteBookDao">
<select resultType="Integer" id="getCount">select count(*) from note_t_notebooks where isdelete=0 </select>
<select resultType="com.whc.noteserver.entity.NoteBook" id="getNoteBook">select id,name,addtime,isdelete,userid from note_t_notebooks where isdelete=0 order by addtime desc limit #{page},#{limit} </select>
</mapper>
最后是我们的控制controller层
package com.whc.noteserver.controller;
import java.util.HashMap;
import java.util.List;
import java.util.UUID;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.whc.noteserver.entity.NoteBook;
import com.whc.noteserver.param.NoteBookParam;
import com.whc.noteserver.result.LayPage;
import com.whc.noteserver.service.NoteBookService;
import com.whc.noteserver.util.JsonResult;
@Controller //注解，组件扫描加入到spring容器中
@RequestMapping("/notebook") //类controller的映射路径
public class NoteBookController {
@Autowired
NoteBookService noteBookService;
/**
* 获取笔记本信息
* @return
*/
@RequestMapping("/getnotebook")
@ResponseBody
public JsonResult getNoteBook(NoteBookParam param) {
param.setPage((param.getPage()-1)*param.getLimit());
//System.out.println("page:"+page+" limit:"+limit);
List<NoteBook> list=noteBookService.getNoteBook(param);
int count = noteBookService.getCount();
//构建一个对象
LayPage lp = new LayPage();
lp.setCount(count);
lp.setList(list);
return new JsonResult(JsonResult.STATE_SUCCESS,"",lp);
}
}
再加上上篇笔记中的JsonResult类就可以了
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
