课堂小项目（6）
作者：互联网
webapp中的内容：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>信息管理系统</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<%--<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
<li class="layui-nav-item">
<a href="javascript:;">nav groups</a>
<dl class="layui-nav-child">
<dd><a href="">menu 11</a></dd>
<dd><a href="">menu 22</a></dd>
<dd><a href="">menu 33</a></dd>
</dl>
</li>--%>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</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:;">menu group 1</a>
<dl class="layui-nav-child">
<dd><a href="search.html">论文查询</a></dd>
<dd><a href="paper.jsp">热词分析</a></dd>
<%--<dd><a href="javascript:;">menu 3</a></dd>
<dd><a href="javascript:;">menu 3</a></dd>
<dd><a href="">the links</a></dd>--%>
</dl>
</li>
<%--<li class="layui-nav-item">
<a href="javascript:;">menu group 2</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">list 1</a></dd>
<dd><a href="javascript:;">list 2</a></dd>
<dd><a href="">超链接</a></dd>
</dl>
</li>--%>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 内容主体区域 -->
<%-- <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>--%>
<iframe src="" id="main" height="100%" width="100%"> </iframe>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util;
/* ,$ = layui.$;*/
var $=layui.jquery;
$(document).ready(function (){
$("dd>a").click(function (e) {
e.preventDefault();
$('#main').attr("src",$(this).attr("href"));
});
});
//头部事件
util.event('lay-header-event', {
//左侧菜单事件
menuLeft: function(othis){
layer.msg('展开左侧菜单的操作', {icon: 0});
}
,menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>
</body>
</html>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CVPR-2022词云</title>
<link href="./css01/bootstrap.css" rel="stylesheet">
<script src="./js/jQuery/jquery-3.6.0.js"></script>
<script src="./js01/bootstrap.js"></script>
<script type="text/javascript" src="./js/echarts.js"></script>
<script type="text/javascript" src="./js/echarts-wordcloud.js"></script>
</head>
<style>
html, body, #main {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<body>
<div id="main"></div>
<script type="text/javascript">
window.onload = function(){
$.ajax({
url:"PaperServlet?method=Paper",
async : true ,
type : "POST",
dataType : "json",
success : function(data){
var dt;
var mydata = new Array();
dt = data;
for(var i=0;i<dt.length;i++){
var d = {};
d['name'] = dt[i].name;
d['value'] = dt[i].value;
mydata.push(d);
}
var option = {
title:{
text:'CVPR-2022词云',
x:'center',
textStyle:{
fontSize:20
}
},
backgroundColor:'#F7F7F7',
tooltip:{
show:true
},
series: [{
type: 'wordCloud',
gridSize:2,
sizeRange: [20, 50],//画布范围，如果设置太大会出现少词（溢出屏幕）
rotationRange: [-90, 90],//数据翻转范围
shape: 'circle',
drawOutOfBound:false,
textStyle: {
color: "#5b9bd5",
fontSize:50,
/*normal: {
/!* function() {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}*!/
},*/
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: mydata
}]
};
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
/*
chart.on('click',function(params){
var url = "PaperServlet?method=Search&name="+params.name;
window.location.href = url;
});*/
},
error : function(){
alert("请求失败");
},
});
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模糊查询</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<script src="./layui/layui.js"></script>
<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>
<label class="layui-form-label">论文查询</label>
<div class="layui-input-inline">
<input id="ltitle" type="text" required lay-verify="required" placeholder="请输入论文题目" autocomplete="off"
class="layui-input">
</div>
<div class="layui-input-inline">
<input id="lkey" type="text" required lay-verify="required" placeholder="请输入论文摘要" autocomplete="off"
class="layui-input">
</div>
<button type="button" class="layui-btn" onclick="search()">查询</button>
<table id="demo" lay-filter="test"></table>
<script>
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
, height: 312
, url: 'searchServlet?month=1'//数据接口
, method: 'get'
,id:'demo01'
,cellMinWidth: 80
, page: true //开启分页
, cols: [[ //表头
{field: 'title', title: '题目'}
, {field: 'link', title: '论文链接'}
, {field: 'keywords', title: '关键字'}
, {field: 'right', title: '操作', toolbar: '#barDemo'}
]]
});
table.on('tool(test)', function(obj){
var data = obj.data;
//console.log(obj)
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
}
});
});
function search() {
console.log("++++++")
var $=layui.jquery;
var table = layui.table;
var ltitle = $('#ltitle').val();
var lkey = $('#lkey').val();
table.reload('demo01',{
url: 'searchServlet?month=2<itle=' + ltitle + "&lkey=" + lkey,
where:{
ltitle:ltitle,
lkey:lkey
}
});
}
</script>
<!--<script type="text/javascript">
</script>-->
</body>
</html>
标签：function,layer,项目,layui,menu,var,table,课堂 来源： https://www.cnblogs.com/wlqyyds/p/16370228.html