这篇内容涵盖了Linux系统的资源监控，通过`top`命令查看内存占用；介绍了如何在Linux环境下查找指定文件；详细阐述了一个将大型SQL表拆分为多个1024KB文件的shell脚本执行流程；展示了用户信息修改功能的前端和后端实现，包括用户信息回显、正则验证、数据更新等；最后，讲解了如何统计平均薪资最高的城市并用柱状图展示，涉及SQL查询和前端图表渲染。
一、Linux简答题
1.使用top查看系统资源占用情况时，哪一列表示内存占用呢？
used表示占用了多少内存
2.如果知道一个文件名称，怎么查这个文件在linux下的哪个目录，如：要查找tnsnames.ora文件
2种常用查询方法：
find /opt/software/ -name scala* 或者 find /opt/software/ |grep scala
二、编码题
题目要求:
一个张xxx.sql表的大小为156M, 需要用拆分表的工具将表拆分为1024KB的多个文件,请编写shell脚本执行这些sql文件,完成表的创建和数据的插入。
PS： 我们提SQL文件 position_type_info_v2.sql ; 提供拆分表的工具SQLDumpSplitter.exe
步骤：
打开SQLDumpSplitter.exe，载入待分解的sql文件，点击执行按钮进行拆分
拆分完毕后会在软件目录下生成一个SQLDumpSplitterResult目录，用来保存拆分的文件
将拆分好的文件上传到linux服务器中，并将建表的sql文件拿出来放到SQLDumpSplitterResult文件夹的同级目录下
编写shell脚本并执行即可
三、实现修改功能
1、题目需求
用户列表页点击修改按钮，弹出dialog框回显用户信息，修改完用户信息后更新页面数据
2、要求如下：
1、点击修改数据用户能够回显
2、前台使用正则表达式校验邮箱格式以及手机号码格式
3、后台校验用户名是否存在及邮箱是否存在
4、更新完毕数据后数据能够更新
5、如果用户名和其他用户名重复则更新失败，但如果是自己原来的可以实现更新
6、如果邮箱和其他邮箱重复则更新失败，如果是自己现有邮箱，则可以更新
回显要求：
修改要求：
解题步骤：
这道题是在原先的可视化项目基础上修改的。
功能演示：
userList.html 增加修改dialog
<aside class="col-lg-2 col-md-4 pr-0">
<div class="mt-20 mb-20 ml-15 mr-15">
<a href="#updateModal" data-toggle="modal" title="Compose" id="showUpdateDialog">
</a>
<div aria-hidden="true" role="dialog" tabindex="-1" id="updateModal"
class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h4 class="modal-title" >修改用户</h4>
</div>
<div class="modal-body">
<form class="form-horizontal form-material" >
<div class="form-group">
<div class="col-md-12 mb-20">
用户名
<input type="text" class="form-control"
id="updateName" name="username">
</div>
<div class="col-md-12 mb-20">
邮箱
<input type="text" class="form-control"
id="updateEmail" name="email">
</div>
<div class="col-md-12 mb-20">
电话
<input type="text" class="form-control"
id="updatePhone" name="phone">
</div>
<div class="form-group">
<span id="errMsg2"></span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info waves-effect"
data-dismiss="modal" onclick="update()">更新
</button>
<button type="button" class="btn btn-default waves-effect"
data-dismiss="modal" >取消
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
</aside>
userList.html 增加对应功能
// 弹出修改用户界面,并回显用户信息
var userId;
function showUpdate(id) {
//弹出修改用户界面
$("#showUpdateDialog").click();
$.post("/lg_visualization/user/selectUserByID.do","id="+id,function(data){
console.log(data);
$("#updateName").val(data.data.username);
$("#updateEmail").val(data.data.email);
$("#updatePhone").val(data.data.phone);
userId = id;
}, "json")
}
//修改用户
function update() {
var username = $("#updateName").val();
var email = $("#updateEmail").val();
var phone = $("#updatePhone").val();
var re = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (username == "") {
alert("用户名不能为空");
return;
}
if (email != "" && !re.test(email)) {
alert("邮箱格式不正确，请重新输入");
return;
}
var re1 = /1[3-8]+\d{9}/;
if(phone != "" && !re1.test(phone)){
alert("手机号码格式不正确，请重新输入");
return;
}
$.post("/lg_visualization/user/updateUser.do", {
"id": userId,
"username": username,
"email": email,
"phone": phone
}, function (data) {
console.log(data);
if (data.status == 0) {
alert("更新成功");
location.reload();
} else {
alert("更新失败：" + data.msg)
}
}, "json")
}
后端代码：
userController增加方法
/**
* 6.按ID查询用户信息
*/
@RequestMapping(value = "selectUserByID.do",method = RequestMethod.POST)
@ResponseBody
public ServerResponse<User> selectUserByID(int id){
ServerResponse<User> user = iUserService.getInformation(id);
return user;
}
/**
* 7.更新用户
*/
@RequestMapping(value = "updateUser.do",method = RequestMethod.POST)
@ResponseBody
public ServerResponse<String> updateUser(User user){
return iUserService.updateUser(user);
}
IUserService接口方法
ServerResponse<User> getInformation(int id);
ServerResponse<String> updateUser(User user);
UserServiceImpl实现类方法
/**
* 校验用户名和邮箱是否存在
* @param str 有可能是用户名,也有可能是邮箱
* @param type 类型可以是用户名 ,也可以是邮箱
* @return
*/
public ServerResponse<String> checkValid(String str,String type){
if(StringUtils.isNotBlank(type)){
//校验用户名
if(Const.USERNAME.equals(type)){
//查询用户名是否存在
int resultCount = userMapper.checkUserName(str);
if(resultCount > 0){
return ServerResponse.createByErrorMsg("用户名已经存在");
}
}
//校验邮箱
if(Const.EMAIL.equals(type)){
int resultCount = userMapper.checkEmail(str);
if(resultCount > 0 ){
return ServerResponse.createByErrorMsg("Email已经存在");
}
}
}
return ServerResponse.createBySuccessMsg("校验成功");
}
/**
/**
* 根据用户的id获取用户信息
*/
@Override
public ServerResponse<User> getInformation(int userId){
User user = userMapper.selectByPrimaryKey(userId);
//根据id查到了用户
if(user != null){
return ServerResponse.createBySuccessData(user);
}
return ServerResponse.createByErrorMsg("用户不存在");
}
/*
* 更新用户
* @param user
* @return
*/
@Override
public ServerResponse<String> updateUser(User user) {
//1.获取待修改用户信息
ServerResponse<User> information = this.getInformation(user.getId());
User oldUser = information.getData();
ServerResponse<String> validResponse;
// 如果用户改了用户名和邮箱，则验证用户名和邮箱是否重复
if (!user.getUsername().equalsIgnoreCase(oldUser.getUsername()) && !user.getEmail().equalsIgnoreCase(oldUser.getEmail()) ){
//校验用户名是否存在
validResponse = this.checkValid(user.getUsername(), Const.USERNAME);
if(validResponse.getStatus() != ResponseCode.SUCCESS.getCode()){
return validResponse;
}
//校验邮箱是否已经存在
validResponse = this.checkValid(user.getEmail(), Const.EMAIL);
if(validResponse.getStatus() != ResponseCode.SUCCESS.getCode()){
return validResponse;
}
// 当用户的用户名是自己的，修改了邮箱后，先验证邮箱是否重复
}else if (user.getUsername().equalsIgnoreCase(oldUser.getUsername()) && !user.getEmail().equalsIgnoreCase(oldUser.getEmail())){
//校验邮箱是否已经存在
validResponse = this.checkValid(user.getEmail(), Const.EMAIL);
if(validResponse.getStatus() != ResponseCode.SUCCESS.getCode()){
return validResponse;
}
// 当邮箱是自己的，修改了用户名后，先验证用户名是否重复
}else if (user.getEmail().equalsIgnoreCase(oldUser.getEmail()) && !user.getUsername().equalsIgnoreCase(oldUser.getUsername())){
System.out.println("into 3");
System.out.println("user.getUsername" + user.getUsername());
//校验用户名是否已经存在
validResponse = this.checkValid(user.getUsername(), Const.USERNAME);
System.out.println(validResponse);
System.out.println(ResponseCode.SUCCESS.getCode());
if(validResponse.getStatus() != ResponseCode.SUCCESS.getCode()){
return validResponse;
}
}
// 如果用户名或者邮箱重复，则直接返回了，否则更新用户
int resultCount = userMapper.update(user);
if(resultCount ==0 ){
return ServerResponse.createByErrorMsg("更新失败");
}
return ServerResponse.createBySuccessMsg("更新成功");
}
UserMapper接口方法
int update(User user);
UserMapper.xml sql
<!-- 10.更新用户 -->
<update id="update" parameterType="user">
update user set username=#{username},email=#{email},phone=#{phone} where id=#{id}
</update>
四、统计平均工资最高的5个城市
1、题目要求：
统计平均工资最高的前10的城市，柱状图显示。
2、题目要求
1、平均的工资是岗位工资（最小值+最大值的平均值）
2、使用柱状图展示工资水平前10的城市
3、服务器返回数据
4、页面展示效果
思路提示：
编写sql语句是难点
sql语句提示信息：
/*思路:
- SUBSTRING_INDEX(position_salary,’-’,1) 分割- ,得到最小值
- 在使用 REPLACE(xxx,’’) 换掉K 值 , 得到最大值
- 转换varchar为DECIMAL 方便相加 /2 CONVERT(xxx, decimal(38,2)) 最大值和最小值相加 位数太长
- ROUND(xxxx , 2)保留两位小数
*/
解题过程：
这道题也是在原先的可视化项目基础上修改的，新增的这个图和原先的项目里的"统计热门行业招聘信息"一模一样，所以只要参照"统计热门行业招聘信息"的代码修改即可。
功能演示：
前端复制industryTop.html并改名为avgSalaryTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Elmer I Fast build Admin dashboard for any platform</title>
<meta name="description" content="Elmer is a Dashboard & Admin Site Responsive Template by hencework." />
<meta name="keywords" content="admin, admin dashboard, admin template, cms, crm, Elmer Admin, Elmeradmin, premium admin templates, responsive admin, sass, panel, software, ui, visualization, web app, application" />
<meta name="author" content="hencework"/>
<!-- Custom CSS -->
<link href="dist/css/style.css" rel="stylesheet" type="text/css">
<script src="dist/js/echarts.min.js"></script>
</head>
<body>
<!--/Preloader-->
<div class="wrapper theme-1-active pimary-color-blue">
<!-- Main Content -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default card-view">
<div class="panel-heading">
<div class="pull-left">
<h6 class="panel-title txt-dark">统计平均工资最高的前10城市</h6>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body">
<!--图表区域-->
<div id="main" style="height: 700px"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Slimscroll JavaScript -->
<script src="dist/js/jquery.slimscroll.js"></script>
<!-- Fancy Dropdown JS -->
<script src="dist/js/dropdown-bootstrap-extended.js"></script>
<!-- Owl JavaScript -->
<script src="vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- Switchery JavaScript -->
<script src="vendors/bower_components/switchery/dist/switchery.min.js"></script>
<!-- Init JavaScript -->
<script src="dist/js/init.js"></script>
<script>
//1.创建echarts对象
var mychart = echarts.init(document.getElementById("main"));
//2.发送ajax请求
$.post("/lg_visualization/industry/avgSalaryTop.do",function(data){
//3.在回调函数中设置 option
mychart.setOption({
tooltip: { //提示组件
trigger: 'axis', //如果是柱状图或折线图触发
axisPointer: { //坐标轴指示配置项
type: 'shadow' // 默认值 line shadow 阴影指示器
}
},
grid: { //直角坐标系网络 ,网络中绘制折线图 柱状图 ...
left: '3%', //组件举例左侧容器举例
right: '4%',
bottom: '3%',
containLabel: true //grid 区域是否有坐标轴的刻度
},
xAxis: {
type: 'value', //数值轴
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category', //类目轴
data: data.data.names
},
series: [
{
name: '招聘数量',
type: 'bar', //柱状图
data: data.data.count,
label: { //图形上添加文字标签
show:true , //是否在标签上展示
position: 'insideRight' //标签数据展示位置
}
}
]
});
},"json")
</script>
</body>
</html>
后端：
IndustryController 里新增方法
/**
* 4.平均工资top10
*/
@RequestMapping(value = "avgSalaryTop.do",method = RequestMethod.POST)
@ResponseBody
public ServerResponse<Map<String,Object>> getAvgSalaryTop(){
ServerResponse<Map<String,Object>> response = iIdustryService.getAvgSalaryTop10();
return response;
}
IIdustryService接口里 新增方法
/**
* 4.平均工资top10
* @return
*/
ServerResponse<Map<String, Object>> getAvgSalaryTop10();
IdustryServiceImpl实现类里新增方法实现
/**
* 平均工资top10
*/
@Override
public ServerResponse<Map<String, Object>> getAvgSalaryTop10() {
//1.查询最热门的10个行业 List<IndustryVo>
List<ConverterVo> list = mapper.getAvgSalaryTop();
//2.创建map 封装所有数据
Map<String,Object> map = new HashMap<>();
//3.创建两个list cityNames 放城市名称 salaryList 平均薪水
List<String> cityNames = new ArrayList<>();
List<String> salaryList = new ArrayList<>();
//4.循环给list设置数据
for (ConverterVo converterVo : list) {
cityNames.add(converterVo.getName());
salaryList.add(converterVo.getValue());
}
//5.list存在map中
map.put("names",cityNames);
map.put("count",salaryList);
//6.map放到ServerResponse
return ServerResponse.createBySuccessData(map);
}
IdustryMapper 接口里新增方法
/**
* 统计平均工资top10的城市
* @return
*/
List<ConverterVo> getAvgSalaryTop();
IdustryMapper.xml 里写sql实现
<!-- 4.统计平均工资top10的城市 -->
<select id="getAvgSalaryTop" resultType="ConverterVo">
SELECT
positionCity name,
avgSalary value
FROM
(
SELECT
positionCity,
(minSalary + maxSalary) / 2 avgSalary
FROM
(
SELECT
position_city positionCity,
SUBSTRING_INDEX(position_salary, '-', 1) minSalary,
REPLACE (
SUBSTRING_INDEX(position_salary, '-' ,- 1),
'K',
''
) maxSalary
FROM
position_info_v2
) p
GROUP BY
positionCity
) p1
ORDER BY
avgSalary DESC
limit 10
</select>
扫一扫
7677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
