前端示例:页面布局 1(后端数据实施)
最编程
2024-07-08 11:07:53
...
效果图
注:这里用到后端语言php(页面是.php文件),提取纯html也可以用
inemployee_index.php
<?php
include('includes/session.inc');
$Title = _('内部员工首页');
$ViewTopic = '内部员工首页';
$BookMark = '内部员工首页';
include('includes/header.inc');
include('includes/SQL_CommonFunctions.inc');
?>
<!-- 核心内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部员工首页</title>
<link rel="stylesheet" href="css/indexpage/inemployee_index.css">
<script src="js/echarts.js" type="text/javascript"></script>
</head>
<body>
<script>
function review(type) {
if (type == "11") {
// 账号注册审核
window.open('RegReview.php', '_blank');
}
if (type == "22") {
// 员工注册审核
window.open('HremployeeRegReview.php', '_blank');
}
if (type == "33") {
// 出差信息审核
window.open('BusinessTripReview.php', '_blank');
}
if (type == "44") {
// 出差信息审核
window.open('LeaveReview.php', '_blank');
}
if (type == "55") {
// 出差信息审核
window.open('SearchSoForApprove.php', '_blank');
}
if (type == "66") {
// 出差信息审核
window.open('PRApproved.php', '_blank');
}
if (type == "77") {
// 出差信息审核
window.open('POApproved.php', '_blank');
}
if (type == "88") {
// 出差信息审核
window.open('DisciplinaryRecordReview.php', '_blank');
}
}
</script>
<div class="all">
<div class="all_position">
<!-- 第一个模块 -->
<div class="module1">
<!-- 第一行 -->
<div class="line1">
<div class="line1_position">
<div class="line1_1">
<div class="line11_item" onclick="review(11)">
<div class="line11_item_icon">
<image src="img/file.png" class="img" />
</div>
<div class="line11_item_text">
<div class="text_count">
<?php
$sql11 = "select count(userid) count from regist_user where user_type = '" . $_SESSION['user_type'] . "' and status = '待审核'";
$result11 = DB_query($sql11, $db);
// 检查查询结果是否为空
if (DB_num_rows($result11) > 0) {
$rown11 = DB_fetch_array($result11);
$count11 = $rown11['count'];
} else {
$count11 = 0;
}
?>
<div class="span1"><?php echo $count11 ?></div>
<div class="span2">件</div>
</div>
<div class="text_title">
<div class="span1">账号注册待审核</div>
</div>
</div>
</div>
<div class="line11_item" onclick="review(22)">
<div class="line11_item_icon">
<image src="img/file.png" class="img" />
</div>
<div class="line11_item_text">
<div class="text_count">
<?php
$sql22 = "select count(id) count from hr_employees_reg where status = '待审核'";
$result22 = DB_query($sql22, $db);
// 检查查询结果是否为空
if (DB_num_rows($result22) > 0) {
$rown22 = DB_fetch_array($result22);
$count22 = $rown22['count'];
} else {
$count22 = 0;
}
?>
<div class="span1"><?php echo $count22 ?></div>
<div class="span2">件</div>
</div>
<div class="text_title">
<div class="span1">员工注册待审核</div>
</div>
</div>
</div>
<div class="line11_item" onclick="review(33)">
<div class="line11_item_icon">
<image src="img/file.png" class="img" />
</div>
<div class="line11_item_text">
<div class="text_count">
<?php
$sql33 = "select count(id) count from businesstrip where status = '待审核'";
$result33 = DB_query($sql33, $db);
// 检查查询结果是否为空
if (DB_num_rows($result33) > 0) {
$rown33 = DB_fetch_array($result33);
$count33 = $rown33['count'];
} else {
$count33 = 0;
}
?>
<div class="span1"><?php echo $count33 ?></div>
<div class="span2">件</div>
</div>
<div class="text_title">
<div class="span1">出差信息待审核</div>
</div>
</div>
</div>
<div class="line11_item" onclick="review(44)">
<div class="line11_item_icon">
<image src="img/file.png" class="img" />
</div>
<div class="line11_item_text">
<div class="text_count">
<?php
$sql44 = "select count(id) count from ask_for_leave where status = '待审核'";
$result44 = DB_query($sql44, $db);
// 检查查询结果是否为空
if (DB_num_rows($result44) > 0) {
$rown44 = DB_fetch_array($result44);
$count44 = $rown44['count'];
} else {
$count44 = 0;
}
?>
<div class="span1"><?php echo $count44 ?></div>
<div class="span2">件</div>
</div>
<div class="text_title">
<div class="span1">请假单待审核</div>
</div>
</div>
</div>
<div class="line11_item" onclick="review(55)">
<div class="line11_item_icon">
<image src="img/file.png" class="img" />
</div>
<div class="line11_item_text">
<div class="text_count">
<?php
$sql55 = "SELECT count(p.order_id) count
FROM so_headers_all p,customers b
WHERE p.customer_code = b.customer_code
AND p.status
in ('待签核')
";
$result55 = DB_query($sql55, $db);
// 检查查询结果是否为空
if (DB_num_rows($result55) > 0) {
$rown55 = DB_fetch_array($result55);
$count55 = $rown55['count'];
} else {
$count55 = 0;
}
?>
<div class="span1"><?php echo $count55 ?></div>
<div class="span2">件</div>
</div>
<div class="text_title">
<div class="span1">订单待签核</div>
</div>
</div>
</div>
<div class="line11_item" onclick="review(66)">
<div class="line11_item_icon">
<image src="img/file.png" class="img" />
</div>
<div class="line11_item_text">
<div class="text_count">
<?php
$sql66 = " select count(a.pr_num) count
from pr_headers_all a
where status = '待签核'
";
$result66 = DB_query($sql66, $db);
// 检查查询结果是否为空
if (DB_num_rows($result66) > 0) {
$rown66 = DB_fetch_array($result66);
$count66 = $rown66['count'];
} else {
$count66 = 0;
}
?>
<div class="span1"><?php echo $count66 ?></div>
<div class="span2">件</div>
</div>
<div class="text_title">
<div class="span1">请购单待签核</div>
</div>
</div>
</div>
<div class="line11_item" onclick="review(77)">
<div class="line11_item_icon">
<image src="img/file.png" class="img" />
</div>
<div class="line11_item_text">
<div class="text_count">
<?php
$sql77 = " SELECT count(po_num) count
FROM po_headers_all a, vendors b
WHERE status in( '待签核' )
AND a.vendor_code = b.vendor_code
";
$result77 = DB_query($sql77, $db);
// 检查查询结果是否为空
if (DB_num_rows($result77) > 0) {
$rown77 = DB_fetch_array($result77);
$count77 = $rown77['count'];
} else {
$count77 = 0;
}
?>
<div class="span1"><?php echo $count77 ?></div>
<div class="span2">件</div>
</div>
<div class="text_title">
<div class="span1">采购单待签核</div>
</div>
</div>
</div>
<div class="line11_item" onclick="review(88)">
<div class="line11_item_icon">
<image src="img/file.png" class="img" />
</div>
<div class="line11_item_text">
<div class="text_count">
<?php
$sql88 = " select count(a.id) count
from hr_disciplinary_record a,hr_employees b
where a.employee_num = b.employee_num
and a.status = '待审核'
";
$result88 = DB_query($sql88, $db);
// 检查查询结果是否为空
if (DB_num_rows($result88) > 0) {
$rown88 = DB_fetch_array($result88);
$count88 = $rown88['count'];
} else {
$count88 = 0;
}
?>
<div class="span1"><?php echo $count88 ?></div>
<div class="span2">件</div>
</div>
<div class="text_title">
<div class="span1">奖惩信息待签核</div>
</div>
</div>
</div>
</div>
<div class="line1_2">
<div class="line12_item">
<div class="calendar">
<div class="header">
<a data-action="prev-month" href="javascript:void(0)" title="Previous Month"><i></i></a>
<div class="text" data-render="month-year"></div>
<a data-action="next-month" href="javascript:void(0)" title="Next Month"><i></i></a>
</div>
<div class="months" data-flow="left">
<div class="month month-a">
<div class="render render-a"></div>
</div>
<div class="month month-b">
<div class="render render-b"></div>
</div>
</div>
</div>
<script src="javascript/indexpage/inemployee_index.js"></script>
</div>
</div>
</div>
</div>
<!-- 第二行 -->
<div class="line2">
<div class="line2_position">
<div class="line2_1">
<div class="line21_item">
<div class="kanban_item">
<div class="kanban_line">
<div class="kanban_title">
近一个月业务员新增订单金额前五榜单
</div>
<div class="kanban_content">
<table>
<tr>
<td>
<div id="poruku" class="chart-container"></div>
</td>
<td>
<div style="width: 100%; height:100%;"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="line2_2">
<div class="line22_item">
<div class="kanban_item">
<div class="kanban_line">
<div class="kanban_title">
站别良品、不良率
</div>
<div class="kanban_content">
<table>
<tr>
<td>
<div id="poruku2" class="chart-container"></div>
</td>
<td>
<div style="width: 100%; height:100%;"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 第三行 -->
<div class="line3">
<div class="line3_position">
<div class="line3_1">
<div class="line31_item">
<div class="kanban_item">
<div class="kanban_line">
<div class="kanban_title">
近一月新增订单金额前五榜单
</div>
<div class="kanban_content">
<table>
<tr>
<td>
<div id="poruku1" style="height:95%;" class="chart-container"></div>
</td>
<td>
<div style="width: 100%; height:100%;"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="line3_2">
<div class="line32_item">
<div class="kanban_item">
<div class="kanban_line">
<div class="kanban_title">
近一月产品新增订单金额前五榜单
</div>
<div class="kanban_content">
<table>
<tr>
<td>
<div id="poruku3" style="height:95%;" class="chart-container"></div>
</td>
<td>
<div style="width: 100%; height:100%;"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="line3_3">
<div class="line33_item">
<div class="kanban_item">
<div class="kanban_line">
<div class="kanban_title">
近一月新增订单金额前五榜单
</div>
<div class="kanban_content">
</div>
</div>
</div>
</div>
</div>
<div class="line3_4">
<div class="line34_item">
<div class="kanban_item">
<div class="kanban_line">
<div class="kanban_title">
近一月新增订单金额前五榜单
</div>
<div class="kanban_content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="module2">
<div class="kanban_item">
<div class="kanban_line">
<div class="kanban_title1">
公告
</div>
<div class="kanban_content1">
<?php
//公告面板
$sql_msg = "SELECT *
FROM message_board
where enable_flag = 'Y'
ORDER BY created_date desc
LIMIT 50
";
$result_msg = DB_query($sql_msg, $db);
// 检查查询是否成功
if ($result_msg) {
// 检查查询结果是否为空
if (mysqli_num_rows($result_msg) > 0) {
?>
<ul class="message_item">
<?php
while ($row_msg = mysqli_fetch_assoc($result_msg)) {
?>
<li>
<div class="message_link">
<a target="_blank" href="<?php echo $RootPath ?>/message_details.php?Msgid=<?php echo $row_msg['id'] ?>"><?php echo $row_msg['title'] ?></a>
</div>
</li>
<?php
}
?>
</ul>
<?php
} else {
echo "No results found.";
}
} else {
echo "Query failed.";
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
//数据可视化内容
// 近一月客户新增订单金额前五榜单
$sql = "SELECT customer_code,
SUM(order_all_amount) AS total_amount
FROM so_headers_all
WHERE creation_date >= UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL 1 MONTH))
GROUP BY customer_code
ORDER BY total_amount
LIMIT 5
";
$result = DB_query($sql, $db);
while ($array = mysqli_fetch_assoc($result)) {
$arrays[] = $array;
}
if (is_array($arrays)) {
foreach ($arrays as $key => $value) {
$customer[] = $value['customer_code'];
$amount[] = $value['total_amount'];
}
} else {
$customer[] = 0;
$amount[] = 0;
}
sort($amount);
echo "<script>";
echo "; var customer = ";
echo json_encode($customer);
echo "; var amount = ";
echo json_encode($amount);
echo ";
var myChart = echarts.init(document.getElementById('poruku'));
option = {
//图形颜色
color: [
'#05c798'
],
//提示框,鼠标悬停在图形上的注解
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line'
},
backgroundColor: 'rgba(255, 255, 255, 0.7)', // 设置提示条的背景颜色
textStyle: {
color: 'rgba(0, 0, 0)', // 设置提示条文本的颜色为白色
fontSize: 12 // 设置提示条文本的字体大小为12px
}
},
//配置网格组件,用于定义图表的位置和大小
grid: {
top: '18%', // 增加top的值来创建间距
left: '1%',
right: '10%',
bottom: '2%', // 增加bottom的值来创建间距
containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
},
//横坐标
xAxis: {
name: '订单金额',
type: 'value', //数据类型为数值型。
axisLine: {
lineStyle: {
color: '#6691b5' // 设置 x 坐标轴线的颜色
}
},
axisLabel: {
fontSize: 12 // 设置横轴标签字体大小为12
},
nameTextStyle: {
fontSize: 12 // 设置横轴名称字体大小为12
},
splitLine: {
show: false // 隐藏纵坐标轴的背景横线
},
},
//纵坐标
yAxis: [
{
name: '客户',
type: 'category', //横坐标数据类型为类别型,适用于离散的数据
data: customer,
axisLine: {
lineStyle: {
color: '#6691b5' // 设置 x 坐标轴线的颜色
}
},
axisLabel: {
fontSize: 12 // 设置横轴标签字体大小为12
},
nameTextStyle: {
fontSize: 12 // 设置横轴名称字体大小为12
}
},
],
series: [
{
type: 'bar',
barWidth: '14',
data: amount, //设置横坐标的数据,使用变量中的数据。
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
textStyle: {
color: '#6691b5',
fontSize: 12
}
}
}
}
},
],
};
let currentIndex = -1;
setInterval(function() {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 1000);
myChart.setOption(option);
</script>";
//近一月业务员新增榜单
$sql1 = "SELECT sl.yewu,em.employee_name,
SUM(sl.order_all_amount) AS total_amount
FROM so_headers_all sl,hr_employees em
WHERE sl.creation_date >= UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL 1 MONTH))
AND sl.yewu = em.employee_num
GROUP BY sl.yewu
ORDER BY total_amount desc
LIMIT 5
";
$result1 = DB_query($sql1, $db);
$index = 1;
while ($array1 = mysqli_fetch_assoc($result1)) {
$name = $array1['employee_name'];
$value = $array1['total_amount'];
$title = 'TOP' . $index;
if (!$value) {
$value = 0;
}
$array_data1[] = array(
'name' => $name,
'value' => $value,
'title' => $title
);
$index++;
}
echo "<script>";
// echo "console.log(" . json_encode($array_data1) . ");";
echo "; var array1 = ";
echo json_encode($array_data1);
// 对数据项数量进行判断
$arrayLength = count($array_data1);
for ($i = 1; $i <= 5; $i++) {
//输出数据到前端显示
echo "
if (array1[" . ($i - 1) . "]) {
document.getElementById('yewu_top" . $i . "').innerText = array1[" . ($i - 1) . "].name + ':' + array1[" . ($i - 1) . "].value;
} else {
document.getElementById('yewu_top" . $i . "').innerText = '--';
}
";
}
echo ";
var ydata = []
var myChart1 = echarts.init(document.getElementById('poruku1'));
option1 = {
color:['#73c0de','#fd6f6f','#fac858','#91cc75','#5470c6'],
tooltip: {
trigger: 'item',
formatter: function(params) {
var name = params.data.name;
var title = params.data.title;
var value = params.value;
var marker = params.marker; // 添加marker(小圆点)
return marker + ' ' + title + '<br/>' + name + ' : ' + value;
}
},
series: [
{
type: 'pie',
data:array1,
roseType: 'area',
itemStyle: {
normal: {
label: {
show: true,
textStyle: {
fontSize: 16
}
}
}
}
}
]
};
myChart1.setOption(option1);
</script>";
//按站别分的良率和不良率
$sql2 = "SELECT
operation_code,
SUM(IFNULL(transaction_quantity, 0)) AS total_transaction_quantity,
SUM(IFNULL(bad_quantity, 0)) AS total_bad_quantity,
CASE
WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
ELSE ROUND((SUM(IFNULL(transaction_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
END AS good_rate,
CASE
WHEN (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0))) = 0 THEN 0
ELSE ROUND((SUM(IFNULL(bad_quantity, 0)) / (SUM(IFNULL(transaction_quantity, 0)) + SUM(IFNULL(bad_quantity, 0)))*100), 2)
END AS bad_rate
FROM wip_transactions
GROUP BY operation_code
ORDER BY bad_rate desc
";
$result2 = DB_query($sql2, $db);
while ($array2 = mysqli_fetch_assoc($result2)) {
$arrays2[] = $array2;
}
if (is_array($arrays2)) {
foreach ($arrays2 as $key => $value) {
$goodnum2[] = $value['total_transaction_quantity'];
$badnum2[] = $value['total_bad_quantity'];
$arr_good_quantity2[] = $value['good_rate'];
$arr_bad_quantity2[] = $value['bad_rate'];
$arrvendor2[] = $value['operation_code'];
}
} else {
$goodnum2[] = 0;
$badnum2[] = 0;
$arr_good_quantity2[] = 0;
$arr_bad_quantity2[] = 0;
$arrvendor2[] = 0;
}
echo "<script>";
echo "; var goodnum2 = ";
echo json_encode($goodnum2);
echo "; var badnum2 = ";
echo json_encode($badnum2);
echo "; var good_rate2 = ";
echo json_encode($arr_good_quantity2);
echo "; var bad_rate2 = ";
echo json_encode($arr_bad_quantity2);
echo "; var x2 = ";
echo json_encode($arrvendor2);
echo ";
var ydata = []
var myChart2 = echarts.init(document.getElementById('poruku2'));
option2 = {
//滚动显示
dataZoom: [{
type: 'slider', // 滑动条型式的dataZoom组件
show: true, // 显示dataZoom组件
start: 0, // 默认数据窗口范围的起始位置为0
end: 30, // 默认数据窗口范围的结束位置为30
xAxisIndex: [0], // 设置dataZoom组件影响的x轴索引,默认为第一个x轴
filterMode: 'filter', // 数据窗口范围的定义模式为filter过滤模式
height: 12, // 设置滑动条型式的高度为20像素
bottom: '5%', // 将滑动条组件的底部距离设置为5%
textStyle: {
color: '#c48df3' // 设置文字颜色为白色
},
handleStyle: {
color: '#c48df3' // 设置滚动条手柄的颜色为红色
},
fillerColor: 'rgba(255, 255, 255, 0.1)', // 设置滚动条选中区域的颜色为蓝色
},
{
type: 'inside', // 内置型式的dataZoom组件
start: 0, // 默认数据窗口范围的起始位置为0
end: 60, // 默认数据窗口范围的结束位置为60
xAxisIndex: [0], // 设置dataZoom组件影响的x轴索引,默认为第一个x轴
filterMode: 'filter', // 数据窗口范围的定义模式为filter过滤模式
height: 12
}],
//图形颜色
color: ['#b381dd','#3aafe8'],
//提示框,鼠标悬停在图形上的注解
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'line' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function(params) {
var index = params[0].dataIndex;
var goodnum = goodnum2[index];
var badnum = badnum2[index];
var goodrate = params[0].value;
var badrate = params[1].value;
return '良品数量:' + goodnum + '<br>' +
'不良数量:' + badnum ;
}
},
//配置网格组件,用于定义图表的位置和大小
grid: {
top: '20%', // 增加top的值来创建间距
left: '3%',
right: '3%',
bottom: '15%', // 增加bottom的值来创建间距
containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
},
//横坐标
xAxis: {
name: '时间',
nameTextStyle: {
padding: [0, 0, -25, -25] // 横坐标名称与原位置的边距
},
type: 'category', //横坐标数据类型为类别型,适用于离散的数据
data: x2, //设置横坐标的数据,使用变量x2中的数据。
axisLine: {
lineStyle: {
color: '#6691b5' // 设置 x 坐标轴线的颜色
}
},
axisLabel: {
interval: 0, // 设置横坐标刻度的显示间隔,默认为0表示全部显示
// 如果刻度标签太长,可以使用rotate进行旋转
textStyle: {
fontSize: 12
}
},
},
//比例
yAxis: [
{
name: '比例',
type: 'value', //数据类型为数值型。
axisLabel: {
formatter: '{value}%'
},
splitLine: {
show: false // 隐藏纵坐标轴的背景横线
},
axisLine: {
lineStyle: {
color: '#6691b5' // 设置 x 坐标轴线的颜色为红色
}
},
},
],
series: [
{
name:'良品率',
type: 'bar',
data: good_rate2,
barWidth: '30%', // 设置柱状图的宽度为整个类目宽度的40%
barGap: '20%', // 设置柱状图之间的间距为整个类目宽度的20%
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '{c}%',
textStyle: {
color: '#b381dd',
fontSize: 10
}
}
}
}
},
{
name:'不良率',
type: 'bar',
data: bad_rate2,
barWidth: '30%', // 设置柱状图的宽度为整个类目宽度的40%
barGap: '20%', // 设置柱状图之间的间距为整个类目宽度的20%
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '{c}%',
textStyle: {
color: '#3aafe8',
fontSize: 10
}
}
}
}
}
]
};
myChart2.setOption(option2);
</script>";
//计算总的良品和不良
$sql3 = "SELECT sl.stockid,sf.item_name,SUM(line_amount) AS total_amount
FROM so_lines_all sl,sf_item_no sf
WHERE sl.stockid = sf.item_no
AND sl.creation_date >= UNIX_TIMESTAMP(DATE_SUB(NOW(), INTERVAL 1 MONTH))
GROUP BY stockid
ORDER BY total_amount desc
LIMIT 5
";
$result3 = DB_query($sql3, $db);
$index = 1;
while ($array3 = mysqli_fetch_assoc($result3)) {
$name = $array3['stockid'];
$value = $array3['total_amount'];
$title = 'TOP' . $index;
if (!$value) {
$value = 0;
}
$array_data3[] = array(
'name' => $name,
'value' => $value,
'title' => $title
);
$index++;
}
echo "<script>";
// echo "console.log(" . json_encode($array_data3) . ");";
echo "; var array3 = ";
echo json_encode($array_data3);
// 对数据项数量进行判断
$arrayLength = count($array_data3);
echo ";
var ydata = []
var myChart3 = echarts.init(document.getElementById('poruku3'));
option3 = {
color:['#73c0de','#fd6f6f','#fac858','#91cc75','#5470c6'],
tooltip: {
trigger: 'item',
formatter: function(params) {
var name = params.data.name;
var title = params.data.title;
var value = params.value;
var marker = params.marker; // 添加marker(小圆点)
return marker + ' ' + title + '<br/>' + name + ' : ' + value;
}
},
series: [
{
type: 'pie',
radius: '60%',
data: array3,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
label: {
show: true
},
labelLine: {
show: false
}
}
},
itemStyle: {
normal: {
// label: {
// show: false
// },
// labelLine: {
// show: false
// }
},
}
}
]
};
myChart3.setOption(option3);
</script>";
?>
</body>
</html>
<?php
include('includes/footer.inc');
?>
inemployee_index.css
* {
margin: 0;
padding: 0
}
body {
background-color: #F0F0F0 !important;
}
.all {
width: 100%;
}
/* 整体 */
.all_position {
width: 100%;
display: flex;
justify-content: space-between;
}
.module1 {
width: 75%;
}
.module2 {
width: 24%;
border: 1px solid #ccc;
box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.3);
}
/* 第一行 */
.line1 {
height: 250px;
}
.line1_position {
display: flex;
justify-content: space-between;
}
/* 第一行第一模块 */
.line1_1 {
width: 70%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
.line11_item {
height: 120px;
display: flex;
display: grid;
grid-template-columns: 1fr 2fr;
}
/* 给每个模块不同的颜色 */
.line11_item:nth-child(1) {
background-color: #578ebe;
}
.line11_item:nth-child(2) {
background-color: #44b6ae;
}
.line11_item:nth-child(3) {
background-color: #e35b5a;
}
.line11_item:nth-child(4) {
background-color: #00897b;
}
.line11_item:nth-child(5) {
background-color: #949fb1;
}
.line11_item:nth-child(6) {
background-color: #f29503;
}
.line11_item:nth-child(7) {
background-color: #4f5c65;
}
.line11_item:nth-child(8) {
background-color: #8775a7;
}
/* 图片 */
.line11_item_icon {
display: flex;
justify-content: flex-end;
align-items: center;
}
.line11_item_icon .img {
width: 45px;
height: 45px;
}
/* 文字 */
.line11_item_text {
display: flex;
flex-direction: column;
width: 100%;
color: #fff;
}
.line11_item_text .text_count {
flex: 5;
display: flex;
justify-content: center;
align-items: flex-end;
}
.line11_item_text .text_count .span1 {
flex: 1;
font-size: 200%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
cursor: default;
}
.line11_item_text .text_count .span2 {
flex: 1;
display: flex;
justify-content: flex-start;
padding-bottom: 2%;
margin-left: 4%;
cursor: default;
}
.line11_item_text .text_title {
flex: 4;
display: flex;
justify-content: center;
cursor: default;
}
/* 第一行第二模块 */
.line1_2 {
width: 29%;
}
.line12_item,
.line13_item,
.line21_item,
.line22_item,
.line31_item,
.line32_item,
.line33_item,
.line34_item {
width: 100%;
height: 100%;
}
/* 第二行 */
.line2 {
margin-top: 1%;
height: 220px;
}
.line2_position,
.line3_position {
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
}
.line2_1 {
width: 50%;
}
.line2_2 {
width: 49%;
}
/* 第三行 */
.line3 {
margin-top: 1%;
height: 250px;
}
.line3_1,
.line3_2,
.line3_3,
.line3_4 {
width: 24%;
height: 250px;
background: #fff;
}
/* 日历样式 */
*,
:after,
:before {
box-sizing: border-box
}
.pull-left {
float: left
}
.pull-right {
float: right
}
.clearfix:after,
.clearfix:before {
content: '';
display: table
}
.clearfix:after {
clear: both;
display: block
}
.calendar {
width: 100%;
font-size: 100%;
perspective: 1000px;
cursor: default;
position: relative
}
.calendar .header {
height: 30px;
position: relative;
color: #fff
}
.calendar .header .text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #308ff0;
transform: rotateX(90deg);
transform-origin: bottom;
backface-visibility: hidden;
transition: .4s ease-in-out 0s;
/* box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .19), 0 8px 17px 0 rgba(0, 0, 0, .2); */
opacity: 0
}
.calendar .header .text>span {
text-align: center;
padding: 5px;
display: block;
font-family: 'Roboto Condensed', sans-serif;
}
.calendar .header.active .text {
transform: rotateX(0deg);
opacity: 1
}
.months {
width: 100%;
height: 218px;
position: relative
}
.months .hr {
height: 1px;
background: #ccc
}
.month {
padding: 10px;
width: inherit;
height: inherit;
background: #fff;
position: absolute;
backface-visibility: hidden;
transition: all .4s ease-in-out 0s;
/* box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .19), 0 8px 17px 0 rgba(0, 0, 0, .2) */
}
.months[data-flow="left"] .month {
transform: rotateY(-180deg)
}
.months[data-flow="right"] .month {
transform: rotateY(180deg)
}
.month_table {
width: 100%;
font-size: 10px;
font-weight: 400;
display: table
}
.month_table .row {
display: table-row
}
.month_table .row.head {
color: #308ff0;
text-transform: uppercase
}
.month_table .row .cell {
width: 14.28%;
padding: 3px;
text-align: center;
display: table-cell;
}
.month_table .row .cell.disable {
color: #ccc
}
.month_table .row .cell span {
display: block;
width: 25px;
height: 25px;
line-height: 25px;
transition: color, background .4s ease-in-out 0s;
margin: auto;
}
.month_table .row .cell.active span {
color: #fff;
background-color: #308ff0
}
.months .month[data-active="true"] {
transform: rotateY(0)
}
/* 左右翻页按钮 */
.header [data-action] {
color: inherit;
position: absolute;
top: 50%;
margin-top: -10px;
width: 20px;
height: 20px;
z-index: 1;
opacity: 0;
transition: all .4s ease-in-out 0s
}
.header [data-action]>i {
width: 12px;
height: 12px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-top: -5px;
margin-left: -10px
}
.header [data-action]>i:before,
.header [data-action]>i:after {
top: 50%;
margin-top: -1px;
content: '';
position: absolute;
height: 2px;
width: 12px;
border-top: 2px solid;
border-radius: 2px
}
.header [data-action*="prev"] {
left: 15px
}
.header [data-action*="next"] {
right: 15px
}
.header [data-action*="prev"]>i:before,
.header [data-action*="prev"]>i:after {
left: 0
}
.header [data-action*="prev"]>i:before {
top: 2px;
transform: rotate(-45deg)
}
.header [data-action*="prev"]>i:after {
top: auto;
bottom: 2px;
transform: rotate(45deg)
}
.header [data-action*="next"]>i:before,
.header [data-action*="next"]>i:after {
right: 0
}
.header [data-action*="next"]>i:before {
top: auto;
bottom: 2px;
transform: rotate(-45deg)
}
.header [data-action*="next"]>i:after {
top: 2px;
transform: rotate(45deg)
}
.header.active [data-action] {
opacity: 1
}
/* 每个月份不同的颜色 */
[data-theme="一月"] {
background-color: #1E88E5
}
[data-theme="一月"] .row.head {
color: #1E88E5
}
[data-theme="一月"] .header .text,
[data-theme="一月"] .month_table .row .cell.active span {
background-color: #1E88E5
}
[data-theme="二月"] {
background-color: #039BE5
}
[data-theme="二月"] .row.head {
color: #039BE5
}
[data-theme="二月"] .header .text,
[data-theme="二月"] .month_table .row .cell.active span {
background-color: #039BE5
}
[data-theme="三月"] {
background-color: #00897B
}
[data-theme="三月"] .row.head {
color: #00897B
}
[data-theme="三月"] .header .text,
[data-theme="三月"] .month_table .row .cell.active span {
background-color: #00897B
}
[data-theme="四月"] {
background-color: #7CB342
}
[data-theme="四月"] .row.head {
color: #7CB342
}
[data-theme="四月"] .header .text,
[data-theme="四月"] .month_table .row .cell.active span {
background-color: #7CB342
}
[data-theme="五月"] {
background-color: #efbf4f
}
[data-theme="五月"] .row.head {
color: #efbf4f
}
[data-theme="五月"] .header .text,
[data-theme="五月"] .month_table .row .cell.active span {
background-color: #FFB300
}
[data-theme="六月"] {
background-color: #F4511E
}
[data-theme="六月"] .row.head {
color: #F4511E
}
[data-theme="六月"] .header .text,
[data-theme="六月"] .month_table .row .cell.active span {
background-color: #F4511E
}
[data-theme="七月"] {
background-color: #8E24AA
}
[data-theme="七月"] .row.head {
color: #8E24AA
}
[data-theme="七月"] .header .text,
[data-theme="七月"] .month_table .row .cell.active span {
background-color: #8E24AA
}
[data-theme="八月"] {
background-color: #5E35B1
}
[data-theme="八月"] .row.head {
color: #5E35B1
}
[data-theme="八月"] .header .text,
[data-theme="八月"] .month_table .row .cell.active span {
background-color: #5E35B1
}
[data-theme="九月"] {
background-color: #EF9A9A
}
[data-theme="九月"] .row.head {
color: #E53935
}
[data-theme="九月"] .header .text,
[data-theme="九月"] .month_table .row .cell.active span {
background-color: #E53935
}
[data-theme="十月"] {
background-color: #6d2081
}
[data-theme="十月"] .row.head {
color: #8E24AA
}
[data-theme="十月"] .header .text,
[data-theme="十月"] .month_table .row .cell.active span {
background-color: #8E24AA
}
[data-theme="十一月"] {
background-color: #ef4478
}
[data-theme="十一月"] .row.head {
color: #ef4478
}
[data-theme="十一月"] .header .text,
[data-theme="十一月"] .month_table .row .cell.active span {
background-color: #ef4478
}
[data-theme="十二月"] {
background-color: #546E7A
}
[data-theme="十二月"] .row.head {
color: #546E7A
}
[data-theme="十二月"] .header .text,
[data-theme="十二月"] .month_table .row .cell.active span {
background-color: #546E7A
}
/* 公告列表 */
.message_item {
list-style-type: none;
padding: 0;
margin: 0;
width: 100%;
height: 710px;
overflow-y: auto;
}
.message_item li:nth-child(even) {
background-color: #ffffff;
}
.message_item li:nth-child(odd) {
background-color: #f0f0f0;
}
.message_item li {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 30px;
padding: 5% 0;
font-size: 95%;
}
.message_item li div {
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
/* 数据可视化+标题内容布局 */
.kanban_item {
width: 100%;
height: 100%;
}
.kanban_line {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
}
.kanban_title1 {
flex: 1;
display: flex;
padding: 5px;
justify-content: flex-start;
align-items: center;
font-weight: bold;
font-family: '华文细黑';
border-left: 4px solid #75b2fa;
border-bottom: 1px solid #f0f0f0;
}
.kanban_content1 {
flex: 25;
width: 100%;
height: 100%;
overflow: hidden;
}
.kanban_title {
flex: 1;
display: flex;
padding: 5px;
justify-content: flex-start;
align-items: center;
font-weight: bold;
font-family: '华文细黑';
border-left: 4px solid #75b2fa;
border-bottom: 1px solid #f0f0f0;
}
.kanban_content {
flex: 9;
width: 100%;
height: 100%;
overflow: hidden;
/* 添加overflow属性 */
}
.chart-container {
width: 100%;
height: 100%;
}
.kanban_content table {
width: 100%;
height: 100%;
position: relative;
border: 0px;
background-color: rgba(255, 255, 255, 0);
}
.kanban_content table tr {
width: 100%;
height: 100%;
border: 0px;
}
.kanban_content table tr td {
width: 100%;
height: 100%;
border: 0px;
}
推荐阅读
-
SSM三大框架基础面试题-一、Spring篇 什么是Spring框架? Spring是一种轻量级框架,提高开发人员的开发效率以及系统的可维护性。 我们一般说的Spring框架就是Spring Framework,它是很多模块的集合,使用这些模块可以很方便地协助我们进行开发。这些模块是核心容器、数据访问/集成、Web、AOP(面向切面编程)、工具、消息和测试模块。比如Core Container中的Core组件是Spring所有组件的核心,Beans组件和Context组件是实现IOC和DI的基础,AOP组件用来实现面向切面编程。 Spring的6个特征: 核心技术:依赖注入(DI),AOP,事件(Events),资源,i18n,验证,数据绑定,类型转换,SpEL。 测试:模拟对象,TestContext框架,Spring MVC测试,WebTestClient。 数据访问:事务,DAO支持,JDBC,ORM,编组XML。 Web支持:Spring MVC和Spring WebFlux Web框架。 集成:远程处理,JMS,JCA,JMX,电子邮件,任务,调度,缓存。 语言:Kotlin,Groovy,动态语言。 列举一些重要的Spring模块? Spring Core:核心,可以说Spring其他所有的功能都依赖于该类库。主要提供IOC和DI功能。 Spring Aspects:该模块为与AspectJ的集成提供支持。 Spring AOP:提供面向切面的编程实现。 Spring JDBC:Java数据库连接。 Spring JMS:Java消息服务。 Spring ORM:用于支持Hibernate等ORM工具。 Spring Web:为创建Web应用程序提供支持。 Spring Test:提供了对JUnit和TestNG测试的支持。 谈谈自己对于Spring IOC和AOP的理解 IOC(Inversion Of Controll,控制反转)是一种设计思想: 在程序中手动创建对象的控制权,交由给Spring框架来管理。IOC在其他语言中也有应用,并非Spring特有。IOC容器实际上就是一个Map(key, value),Map中存放的是各种对象。 将对象之间的相互依赖关系交给IOC容器来管理,并由IOC容器完成对象的注入。这样可以很大程度上简化应用的开发,把应用从复杂的依赖关系中解放出来。IOC容器就像是一个工厂一样,当我们需要创建一个对象的时候,只需要配置好配置文件/注解即可,完全不用考虑对象是如何被创建出来的。在实际项目中一个Service类可能由几百甚至上千个类作为它的底层,假如我们需要实例化这个Service,可能要每次都搞清楚这个Service所有底层类的构造函数,这可能会把人逼疯。如果利用IOC的话,你只需要配置好,然后在需要的地方引用就行了,大大增加了项目的可维护性且降低了开发难度。 Spring中的bean的作用域有哪些? 1.singleton:该bean实例为单例 2.prototype:每次请求都会创建一个新的bean实例(多例)。 3.request:每一次HTTP请求都会产生一个新的bean,该bean仅在当前HTTP request内有效。 4.session:每一次HTTP请求都会产生一个新的bean,该bean仅在当前HTTP session内有效。 5.global-session:全局session作用域,仅仅在基于Portlet的Web应用中才有意义,Spring5中已经没有了。Portlet是能够生成语义代码(例如HTML)片段的小型Java Web插件。它们基于Portlet容器,可以像Servlet一样处理HTTP请求。但是与Servlet不同,每个Portlet都有不同的会话。 Spring中的单例bean的线程安全问题了解吗? 概念用于理解:大部分时候我们并没有在系统中使用多线程,所以很少有人会关注这个问题。单例bean存在线程问题,主要是因为当多个线程操作同一个对象的时候,对这个对象的非静态成员变量的写操作会存在线程安全问题。 有两种常见的解决方案(用于回答的点): 1.在bean对象中尽量避免定义可变的成员变量(不太现实)。 2.在类中定义一个ThreadLocal成员变量,将需要的可变成员变量保存在ThreadLocal(线程本地化对象)中(推荐的一种方式)。 ThreadLocal解决多线程变量共享问题(参考博客):https://segmentfault.com/a/1190000009236777 Spring中Bean的生命周期: 1.Bean容器找到配置文件中Spring Bean的定义。 2.Bean容器利用Java Reflection API创建一个Bean的实例。 3.如果涉及到一些属性值,利用set方法设置一些属性值。 4.如果Bean实现了BeanNameAware接口,调用setBeanName方法,传入Bean的名字。 5.如果Bean实现了BeanClassLoaderAware接口,调用setBeanClassLoader方法,传入ClassLoader对象的实例。 6.如果Bean实现了BeanFactoryAware接口,调用setBeanClassFacotory方法,传入ClassLoader对象的实例。 7.与上面的类似,如果实现了其他*Aware接口,就调用相应的方法。 8.如果有和加载这个Bean的Spring容器相关的BeanPostProcessor对象,执postProcessBeforeInitialization方法。 9.如果Bean实现了InitializingBean接口,执行afeterPropertiesSet方法。 10.如果Bean在配置文件中的定义包含init-method属性,执行指定的方法。 11.如果有和加载这个Bean的Spring容器相关的BeanPostProcess对象,执行postProcessAfterInitialization方法。 12.当要销毁Bean的时候,如果Bean实现了DisposableBean接口,执行destroy方法。 13.当要销毁Bean的时候,如果Bean在配置文件中的定义包含destroy-method属性,执行指定的方法。 Spring框架中用到了哪些设计模式? 1.工厂设计模式:Spring使用工厂模式通过BeanFactory和ApplicationContext创建bean对象。 2.代理设计模式:Spring AOP功能的实现。 3.单例设计模式:Spring中的bean默认都是单例的。 4.模板方法模式:Spring中的jdbcTemplate、hibernateTemplate等以Template结尾的对数据库操作的类,它们就使用到了模板模式。 5.包装器设计模式:我们的项目需要连接多个数据库,而且不同的客户在每次访问中根据需要会去访问不同的数据库。这种模式让我们可以根据客户的需求能够动态切换不同的数据源。 6.观察者模式:Spring事件驱动模型就是观察者模式很经典的一个应用。 7.适配器模式:Spring AOP的增强或通知(Advice)使用到了适配器模式、Spring MVC中也是用到了适配器模式适配Controller。 还有很多。。。。。。。 @Component和@Bean的区别是什么 1.作用对象不同。@Component注解作用于类,而@Bean注解作用于方法。 2.@Component注解通常是通过类路径扫描来自动侦测以及自动装配到Spring容器中(我们可以使用@ComponentScan注解定义要扫描的路径)。@Bean注解通常是在标有该注解的方法中定义产生这个bean,告诉Spring这是某个类的实例,当我需要用它的时候还给我。 3.@Bean注解比@Component注解的自定义性更强,而且很多地方只能通过@Bean注解来注册bean。比如当引用第三方库的类需要装配到Spring容器的时候,就只能通过@Bean注解来实现。 @Configuration public class AppConfig { @Bean public TransferService transferService { return new TransferServiceImpl; } } <beans> <bean id="transferService" class="com.kk.TransferServiceImpl"/> </beans> @Bean public OneService getService(status) { case (status) { when 1: return new serviceImpl1; when 2: return new serviceImpl2; when 3: return new serviceImpl3; } } 将一个类声明为Spring的bean的注解有哪些? 声明bean的注解: @Component 组件,没有明确的角色 @Service 在业务逻辑层使用(service层) @Repository 在数据访问层使用(dao层) @Controller 在展现层使用,控制器的声明 注入bean的注解: @Autowired:由Spring提供 @Inject:由JSR-330提供 @Resource:由JSR-250提供 *扩:JSR 是 java 规范标准 Spring事务管理的方式有几种? 1.编程式事务:在代码中硬编码(不推荐使用)。 2.声明式事务:在配置文件中配置(推荐使用),分为基于XML的声明式事务和基于注解的声明式事务。 Spring事务中的隔离级别有哪几种? 在TransactionDefinition接口中定义了五个表示隔离级别的常量:ISOLATION_DEFAULT:使用后端数据库默认的隔离级别,Mysql默认采用的REPEATABLE_READ隔离级别;Oracle默认采用的READ_COMMITTED隔离级别。ISOLATION_READ_UNCOMMITTED:最低的隔离级别,允许读取尚未提交的数据变更,可能会导致脏读、幻读或不可重复读。ISOLATION_READ_COMMITTED:允许读取并发事务已经提交的数据,可以阻止脏读,但是幻读或不可重复读仍有可能发生ISOLATION_REPEATABLE_READ:对同一字段的多次读取结果都是一致的,除非数据是被本身事务自己所修改,可以阻止脏读和不可重复读,但幻读仍有可能发生。ISOLATION_SERIALIZABLE:最高的隔离级别,完全服从ACID的隔离级别。所有的事务依次逐个执行,这样事务之间就完全不可能产生干扰,也就是说,该级别可以防止脏读、不可重复读以及幻读。但是这将严重影响程序的性能。通常情况下也不会用到该级别。 Spring事务中有哪几种事务传播行为? 在TransactionDefinition接口中定义了八个表示事务传播行为的常量。 支持当前事务的情况:PROPAGATION_REQUIRED:如果当前存在事务,则加入该事务;如果当前没有事务,则创建一个新的事务。PROPAGATION_SUPPORTS: 如果当前存在事务,则加入该事务;如果当前没有事务,则以非事务的方式继续运行。PROPAGATION_MANDATORY: 如果当前存在事务,则加入该事务;如果当前没有事务,则抛出异常。(mandatory:强制性)。 不支持当前事务的情况:PROPAGATION_REQUIRES_NEW: 创建一个新的事务,如果当前存在事务,则把当前事务挂起。PROPAGATION_NOT_SUPPORTED: 以非事务方式运行,如果当前存在事务,则把当前事务挂起。PROPAGATION_NEVER: 以非事务方式运行,如果当前存在事务,则抛出异常。 其他情况:PROPAGATION_NESTED: 如果当前存在事务,则创建一个事务作为当前事务的嵌套事务来运行;如果当前没有事务,则该取值等价于PROPAGATION_REQUIRED。 二、SpringMVC篇 什么是Spring MVC ?简单介绍下你对springMVC的理解? Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,通过把Model,View,Controller分离,将web层进行职责解耦,把复杂的web应用分成逻辑清晰的几部分,简化开发,减少出错,方便组内开发人员之间的配合。 Spring MVC的工作原理了解嘛? image.png Springmvc的优点: (1)可以支持各种视图技术,而不仅仅局限于JSP; (2)与Spring框架集成(如IoC容器、AOP等); (3)清晰的角色分配:前端控制器(dispatcherServlet) , 请求到处理器映射(handlerMapping), 处理器适配器(HandlerAdapter), 视图解析器(ViewResolver)。 (4) 支持各种请求资源的映射策略。 Spring MVC的主要组件? (1)前端控制器 DispatcherServlet(不需要程序员开发) 作用:接收请求、响应结果,相当于转发器,有了DispatcherServlet 就减少了其它组件之间的耦合度。 (2)处理器映射器HandlerMapping(不需要程序员开发) 作用:根据请求的URL来查找Handler (3)处理器适配器HandlerAdapter 注意:在编写Handler的时候要按照HandlerAdapter要求的规则去编写,这样适配器HandlerAdapter才可以正确的去执行Handler。 (4)处理器Handler(需要程序员开发) (5)视图解析器 ViewResolver(不需要程序员开发) 作用:进行视图的解析,根据视图逻辑名解析成真正的视图(view) (6)视图View(需要程序员开发jsp) View是一个接口, 它的实现类支持不同的视图类型(jsp,freemarker,pdf等等) springMVC和struts2的区别有哪些? (1)springmvc的入口是一个servlet即前端控制器(DispatchServlet),而struts2入口是一个filter过虑器(StrutsPrepareAndExecuteFilter)。 (2)springmvc是基于方法开发(一个url对应一个方法),请求参数传递到方法的形参,可以设计为单例或多例(建议单例),struts2是基于类开发,传递参数是通过类的属性,只能设计为多例。 (3)Struts采用值栈存储请求和响应的数据,通过OGNL存取数据,springmvc通过参数解析器是将request请求内容解析,并给方法形参赋值,将数据和视图封装成ModelAndView对象,最后又将ModelAndView中的模型数据通过reques域传输到页面。Jsp视图解析器默认使用jstl。 SpringMVC怎么样设定重定向和转发的? (1)转发:在返回值前面加"forward:",譬如"forward:user.do?name=method4" (2)重定向:在返回值前面加"redirect:",譬如"redirect:http://www.baidu.com" SpringMvc怎么和AJAX相互调用的? 通过Jackson框架就可以把Java里面的对象直接转化成Js可以识别的Json对象。具体步骤如下 : (1)加入Jackson.jar (2)在配置文件中配置json的映射 (3)在接受Ajax方法里面可以直接返回Object,List等,但方法前面要加上@ResponseBody注解。 如何解决POST请求中文乱码问题,GET的又如何处理呢? (1)解决post请求乱码问题: 在web.xml中配置一个CharacterEncodingFilter过滤器,设置成utf-8; <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> </filter> <filter-mapping> <filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> (2)get请求中文参数出现乱码解决方法有两个: ①修改tomcat配置文件添加编码与工程编码一致,如下: <ConnectorURIEncoding="utf-8" connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/> ②另外一种方法对参数进行重新编码: String userName = new String(request.getParamter("userName").getBytes("ISO8859-1"),"utf-8") ISO8859-1是tomcat默认编码,需要将tomcat编码后的内容按utf-8编码。 Spring MVC的异常处理 ? 统一异常处理: Spring MVC处理异常有3种方式: (1)使用Spring MVC提供的简单异常处理器SimpleMappingExceptionResolver; (2)实现Spring的异常处理接口HandlerExceptionResolver 自定义自己的异常处理器; (3)使用@ExceptionHandler注解实现异常处理; 统一异常处理的博客:https://blog.csdn.net/ctwy291314/article/details/81983103 SpringMVC的控制器是不是单例模式,如果是,有什么问题,怎么解决? 是单例模式,所以在多线程访问的时候有线程安全问题,不要用同步,会影响性能的,解决方案是在控制器里面不能写成员变量。(此题目类似于上面Spring 中 第5题 有两种解决方案) SpringMVC常用的注解有哪些? @RequestMapping:用于处理请求 url 映射的注解,可用于类或方法上。用于类上,则表示类中的所有响应请求的方法都是以该地址作为父路径。 @RequestBody:注解实现接收http请求的json数据,将json转换为java对象。 @ResponseBody:注解实现将conreoller方法返回对象转化为json对象响应给客户。 SpingMvc中的控制器的注解一般用那个,有没有别的注解可以替代? 一般用@Controller注解,也可以使用@RestController,@RestController注解相当于@ResponseBody + @Controller,表示是表现层,除此之外,一般不用别的注解代替。 如果在拦截请求中,我想拦截get方式提交的方法,怎么配置? 可以在@RequestMapping注解里面加上method=RequestMethod.GET。 怎样在方法里面得到Request,或者Session? 直接在方法的形参中声明request,SpringMVC就自动把request对象传入。 如果想在拦截的方法里面得到从前台传入的参数,怎么得到? 直接在形参里面声明这个参数就可以,但必须名字和传过来的参数一样。 如果前台有很多个参数传入,并且这些参数都是一个对象的,那么怎么样快速得到这个对象? 直接在方法中声明这个对象,SpringMVC就自动会把属性赋值到这个对象里面。 SpringMVC中函数的返回值是什么? 返回值可以有很多类型,有String, ModelAndView。ModelAndView类把视图和数据都合并的一起的。 SpringMVC用什么对象从后台向前台传递数据的? 通过ModelMap对象,可以在这个对象里面调用put方法,把对象加到里面,前台就可以拿到数据。 怎么样把ModelMap里面的数据放入Session里面? 可以在类上面加上@SessionAttributes注解,里面包含的字符串就是要放入session里面的key。 SpringMvc里面拦截器是怎么写的: 有两种写法,一种是实现HandlerInterceptor接口,另外一种是继承适配器类,接着在接口方法当中,实现处理逻辑;然后在SpringMvc的配置文件中配置拦截器即可: <!-- 配置SpringMvc的拦截器 --> <mvc:interceptors> <!-- 配置一个拦截器的Bean就可以了 默认是对所有请求都拦截 --> <bean id="myInterceptor" class="com.zwp.action.MyHandlerInterceptor"></bean> <!-- 只针对部分请求拦截 --> <mvc:interceptor> <mvc:mapping path="/modelMap.do" /> <bean class="com.zwp.action.MyHandlerInterceptorAdapter" /> </mvc:interceptor> </mvc:interceptors> 注解原理: 注解本质是一个继承了Annotation的特殊接口,其具体实现类是Java运行时生成的动态代理类。我们通过反射获取注解时,返回的是Java运行时生成的动态代理对象。通过代理对象调用自定义注解的方法,会最终调用AnnotationInvocationHandler的invoke方法。该方法会从memberValues这个Map中索引出对应的值。而memberValues的来源是Java常量池 三、Mybatis篇 什么是MyBatis? MyBatis是一个可以自定义SQL、存储过程和高级映射的持久层框架。 讲下MyBatis的缓存 MyBatis的缓存分为一级缓存和二级缓存,一级缓存放在session里面,默认就有, 二级缓存放在它的命名空间里,默认是不打开的,使用二级缓存属性类需要实现Serializable序列化接口, 可在它的映射文件中配置<cache/> Mybatis是如何进行分页的?分页插件的原理是什么? 1)Mybatis使用RowBounds对象进行分页,也可以直接编写sql实现分页,也可以使用Mybatis的分页插件。 2)分页插件的原理:实现Mybatis提供的接口,实现自定义插件,在插件的拦截方法内拦截待执行的sql,然后重写sql。 举例:select * from student,拦截sql后重写为:select t.* from (select * from student)t limit 0,10 简述Mybatis的插件运行原理,以及如何编写一个插件? 1)Mybatis仅可以编写针对ParameterHandler、ResultSetHandler、StatementHandler、 Executor这4种接口的插件,Mybatis通过动态代理, 为需要拦截的接口生成代理对象以实现接口方法拦截功能, 每当执行这4种接口对象的方法时,就会进入拦截方法, 具体就是InvocationHandler的invoke方法,当然, 只会拦截那些你指定需要拦截的方法。 2)实现Mybatis的Interceptor接口并复写intercept方法, 然后在给插件编写注解,指定要拦截哪一个接口的哪些方法即可, 记住,别忘了在配置文件中配置你编写的插件。 Mybatis动态sql是做什么的?都有哪些动态sql?能简述一下动态sql的执行原理不? 1)Mybatis动态sql可以让我们在Xml映射文件内, 以标签的形式编写动态sql,完成逻辑判断和动态拼接sql的功能。 2)Mybatis提供了9种动态sql标签:trim|where|set|foreach|if|choose|when|otherwise|bind。 3)其执行原理为,使用OGNL从sql参数对象中计算表达式的值, 根据表达式的值动态拼接sql,以此来完成动态sql的功能。 #{}和${}的区别是什么? 1)#{}是预编译处理,${}是字符串替换。 2)Mybatis在处理#{}时,会将sql中的#{}替换为?号,调用PreparedStatement的set方法来赋值(有效的防止SQL注入); 3)Mybatis在处理${}时,就是把${}替换成变量的值。 为什么说Mybatis是半自动ORM映射工具?它与全自动的区别在哪里? Hibernate属于全自动ORM映射工具, 使用Hibernate查询关联对象或者关联集合对象时, 可以根据对象关系模型直接获取,所以它是全自动的。 而Mybatis在查询关联对象或关联集合对象时, 需要手动编写sql来完成,所以,称之为半自动ORM映射工具。 Mybatis是否支持延迟加载?如果支持,它的实现原理是什么? 1)Mybatis仅支持association关联对象和collection关联集合对象的延迟加载, association指的就是一对一,collection指的就是一对多查询。 在Mybatis配置文件中, 可以配置是否启用延迟加载lazyLoadingEnabled=true|false。 2)它的原理是,使用CGLIB创建目标对象的代理对象, 当调用目标方法时,进入拦截器方法, 比如调用a.getB.getName, 拦截器invoke方法发现a.getB是null值, 那么就会单独发送事先保存好的查询关联B对象的sql, 把B查询上来,然后调用a.setB(b), 于是a的对象b属性就有值了, 接着完成a.getB.getName方法的调用。 这就是延迟加载的基本原理。 MyBatis与Hibernate有哪些不同? 1)Mybatis和hibernate不同,它不完全是一个ORM框架, 因为MyBatis需要程序员自己编写Sql语句, 不过mybatis可以通过XML或注解方式灵活配置要运行的sql语句, 并将java对象和sql语句映射生成最终执行的sql, 最后将sql执行的结果再映射生成java对象。 2)Mybatis学习门槛低,简单易学,程序员直接编写原生态sql, 可严格控制sql执行性能,灵活度高,非常适合对关系数据模型要求不高的软件开发, 例如互联网软件、企业运营类软件等,因为这类软件需求变化频繁, 一但需求变化要求成果输出迅速。但是灵活的前提是mybatis无法做到数据库无关性, 如果需要实现支持多种数据库的软件则需要自定义多套sql映射文件,工作量大。 3)Hibernate对象/关系映射能力强,数据库无关性好, 对于关系模型要求高的软件(例如需求固定的定制化软件) 如果用hibernate开发可以节省很多代码,提高效率。 但是Hibernate的缺点是学习门槛高,要精通门槛更高, 而且怎么设计O/R映射,在性能和对象模型之间如何权衡, 以及怎样用好Hibernate需要具有很强的经验和能力才行。 总之,按照用户的需求在有限的资源环境下只要能做出维护性、 扩展性良好的软件架构都是好架构,所以框架只有适合才是最好。 MyBatis的好处是什么? 1)MyBatis把sql语句从Java源程序中独立出来,放在单独的XML文件中编写, 给程序的维护带来了很大便利。 2)MyBatis封装了底层JDBC API的调用细节,并能自动将结果集转换成Java Bean对象, 大大简化了Java数据库编程的重复工作。 3)因为MyBatis需要程序员自己去编写sql语句, 程序员可以结合数据库自身的特点灵活控制sql语句, 因此能够实现比Hibernate等全自动orm框架更高的查询效率,能够完成复杂查询。 简述Mybatis的Xml映射文件和Mybatis内部数据结构之间的映射关系? Mybatis将所有Xml配置信息都封装到All-In-One重量级对象Configuration内部。 在Xml映射文件中,<parameterMap>标签会被解析为ParameterMap对象, 其每个子元素会被解析为ParameterMapping对象。 <resultMap>标签会被解析为ResultMap对象, 其每个子元素会被解析为ResultMapping对象。 每一个<select>、<insert>、<update>、<delete> 标签均会被解析为MappedStatement对象, 标签内的sql会被解析为BoundSql对象。 什么是MyBatis的接口绑定,有什么好处? 接口映射就是在MyBatis中任意定义接口,然后把接口里面的方法和SQL语句绑定, 我们直接调用接口方法就可以,这样比起原来了SqlSession提供的方法我们可以有更加灵活的选择和设置. 接口绑定有几种实现方式,分别是怎么实现的? 接口绑定有两种实现方式,一种是通过注解绑定,就是在接口的方法上面加 上@Select@Update等注解里面包含Sql语句来绑定, 另外一种就是通过xml里面写SQL来绑定,在这种情况下, 要指定xml映射文件里面的namespace必须为接口的全路径名. 什么情况下用注解绑定,什么情况下用xml绑定? 当Sql语句比较简单时候,用注解绑定;当SQL语句比较复杂时候,用xml绑定,一般用xml绑定的比较多 MyBatis实现一对一有几种方式?具体怎么操作的? 有联合查询和嵌套查询,联合查询是几个表联合查询,只查询一次, 通过在resultMap里面配置association节点配置一对一的类就可以完成; 嵌套查询是先查一个表,根据这个表里面的结果的外键id, 去再另外一个表里面查询数据,也是通过association配置, 但另外一个表的查询通过select属性配置。 Mybatis能执行一对一、一对多的关联查询吗?都有哪些实现方式,以及它们之间的区别? 能,Mybatis不仅可以执行一对一、一对多的关联查询, 还可以执行多对一,多对多的关联查询,多对一查询, 其实就是一对一查询,只需要把selectOne修改为selectList即可; 多对多查询,其实就是一对多查询,只需要把selectOne修改为selectList即可。 关联对象查询,有两种实现方式,一种是单独发送一个sql去查询关联对象, 赋给主对象,然后返回主对象。另一种是使用嵌套查询,嵌套查询的含义为使用join查询, 一部分列是A对象的属性值,另外一部分列是关联对象B的属性值, 好处是只发一个sql查询,就可以把主对象和其关联对象查出来。 MyBatis里面的动态Sql是怎么设定的?用什么语法? MyBatis里面的动态Sql一般是通过if节点来实现,通过OGNL语法来实现, 但是如果要写的完整,必须配合where,trim节点,where节点是判断包含节点有 内容就插入where,否则不插入,trim节点是用来判断如果动态语句是以and 或or 开始,那么会自动把这个and或者or取掉。 Mybatis是如何将sql执行结果封装为目标对象并返回的?都有哪些映射形式? 第一种是使用<resultMap>标签,逐一定义列名和对象属性名之间的映射关系。 第二种是使用sql列的别名功能,将列别名书写为对象属性名, 比如T_NAME AS NAME,对象属性名一般是name,小写, 但是列名不区分大小写,Mybatis会忽略列名大小写,
-
前端示例:页面布局 1(后端数据实施)