大二暑假_SSM项目_培训教育板块
一、页面搭建
1）主要内容
做出下面这样的效果
2）部分代码
1、学习文档
（1）写个数据表，存放学习文档的信息（其中file字段是做后面的部分时才加上去的）
由于我们新增数据时并不需要知道ID值，所以ID设为了自增
（2）写实体类层和Dao层
写Dao层的时候有一个函数需要注意一下
即下面这个语句，模糊查询+按照日期降序排序+分页
<select id="selectbyname" resultType="com.factory.pro.entity.Studyfile">
<!-- 具体的sql -->
SELECT * FROM studyfile where (sname LIKE CONCAT('%',#{content},'%'))
order by date DESC limit #{start}, #{limit}
</select>
（3）写Service层和controller层，
Service层代码比较简单，不再演示
Controller层需要注意的是，在显示的时候学长让我加了一个按照名字搜索的功能，所以要分情况显示。
即搜索框中没有东西时，显示全部，有东西时仅显示搜索结果
@RequestMapping(value = "/user/common/peixun/studyshow",produces="application/json;charset=utf-8")
@ResponseBody
public Map<String, Object>studyshow(int page,int limit,HttpServletRequest request) {
String name=request.getParameter("name");
System.out.println(name.toString());
List<Studyfile> list =studyfileservice.selectall(page, limit);
Map<String, Object> map = new HashMap<String,Object>();
if(!name.equals("[object Object]"))
{
List<Studyfile> selectlist=studyfileservice.selectbyname(name, page, limit);
System.out.println("selectlist"+selectlist);
map.put("data",selectlist);
map.put("count",selectlist.size());
}
else {
System.out.println("list"+list);
int count=studyfileservice.getStudyfileCount();
map.put("data",list);
map.put("count",count);
}
map.put("code", 0);
map.put("msg", "");
return map;
}
可以看到我的判断方法比较简单粗暴，因为没输入东西时，传入的参数就是个Object对象，而他转为String类型就会变成“[object Object]”，据此可以判断出搜索框中是否有东西
（4）前端
参考了Layui的官网: Layui
利用选项卡做成了如下效果
其中那些图标是利用了阿里巴巴矢量库
选项卡：
<ul class="layui-tab-title" style="height:200%">
<li class="layui-this" style="width:18%">
<i class="iconfont icon-wendang" style="font-size:200%"></i><br>学习文档</li>
<li style="width:18%"> <i class="iconfont icon-huiyi" style="font-size:200%"></i><br>会议视频</li>
<li style="width:18%"> <i class="iconfont icon-xinde--" style="font-size:200%"></i><br>培训情况</li>
<li style="width:18%"> <i class="iconfont icon-kaoshi" style="font-size:200%"></i><br>考核结果</li>
<li style="width:18%"> <i class="iconfont icon-dengpao" style="font-size:200%"></i><br>资质情况</li>
</ul>
选项卡具体内容
<div class="demoTable" style="margin-top:3px" >
<div class="layui-inline" style="margin-top:7px">
<input class="layui-input" name="studyname" id="studyname" autocomplete="off" placeholder="请输入文档名">
</div>
<button id="study-btn-search" class="layui-btn" style="margin-top: 7px" data-type="reload">搜索</button>
<span class="fl" style="margin-left:5px;">
<a class="layui-btn layui-btn-danger btn-delect" id="study-btn-refresh" style="margin-top:7px">刷新</a>
</span>
</div>
<table id="zhengshuList" lay-filter="zhengshuList"></table>
<script type="text/html" id="zhengshubarDemo">
<a class="layui-btn layui-btn-xs" lay-event="view">查看文件</a>
</script>
javascript
layui.use(['form','layer','table','laydate','util'],function aa(selectname){
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : top.layer,
$ = layui.jquery,
laydate=layui.laydate,
util = layui.util,
table = layui.table;
studytableIns = table.render({
elem: '#studyList',
url : '${pageContext.request.contextPath}/user/common/peixun/studyshow?name='+encodeURI(selectname),
cellMinWidth : 95,
//toolbar: '#startListBar',
page : true,
height : "full-200",
limits : [10,15,20,25],
defaultToolbar: ['filter'],
limit : 10,
skin:'nob',
id : "studyListTable",
cols : [[
{field: 'sname', title: '学习文档名', minWidth:130, align:"center"},
{field: 'workshop', title: '部门', minWidth:80, align:"center"},
{field: 'date', title: '发布时间', minWidth:130, align:"center"},
{title: '操作', minWidth:260, templet:'#studybarDemo',fixed:"right",align:"center"}
]]
});
//搜索按钮按下后的函数
$('#study-btn-search').on('click', function(){
var selectname=$("#studyname").val();
aa(selectname);
});
$('#study-btn-refresh').on('click', function () {
$("#studyname").val('');
var name='';
aa(name);
});
2、会议视频等其他部分
基本和上面一样
唯一需要注意的是在做资质情况部分时，由于该部分要求是是显示当前用户的证书，所以需要改下数据表，让其与User表关联。并需要改下sql语句，查询当前用户对应的证书信息
3）遇到的困难
1、
困难：写前端时，学长让我加一些图标丰富页面，我不知道怎么弄
解决方法：搜了博客
阿里巴巴矢量库
2、
困难：第一次完全自己来写前端，连怎么让选项卡占满一行都不知道
解决方法：看了一篇博客，了解了一下标签的使用
div标签
3、
困难：不知道如何点击刷新按钮后删掉搜索框中内容
解决方法：看博客
jquery点击按钮删除文本框的内容
代码如下
$('#study-btn-refresh').on('click', function () {
$("#studyname").val('');
var name='';
aa(name);
});
4、
困难：不知道如何判断输入框内是否输入了信息
解决方法：通过自己尝试，发现未输入信息时，参数selectname就是一个object对象，其转化为String后就是[object Object]
4）效果展示
学习文档
搜索
点击刷新
会议视频
其他不再演示
二、管理员上传文件
1）主要内容
在admin（系统管理员）的操作界面增加文档管理、视频管理等模块，用来进行文件的上传
2）部分代码
1、文档管理
（1）写个数据表，
与上面一样
（2）写实体类层和Dao层
需要注意的是下面这个插入语句，由于ID设为了自增，所以我们在插入时要么注明一下对哪些列进行插入，要么像下面这样，id的value写成0（必须写成0，其他任何值都不行），不然会报错
<insert id="insertStudyfile" parameterType="com.factory.pro.entity.Studyfile">
insert into studyfile
values
(0
<if test='sname!=null'>
,#{sname}
</if>
<if test='sname==null'>
,null
</if>
<if test='workshop!=null'>
,#{workshop}
</if>
<if test='workshop==null'>
,null
</if>
<if test='date!=null'>
,#{date}
</if>
<if test='date==null'>
,null
</if>
<if test='file!=null'>
,#{file}
</if>
<if test='file==null'>
,null
</if>
);
</insert>
（3）写Service层和controller层，
最主要的一个函数就是上传文件的函数了
@Override
public void doImport(MultipartFile mfile,String workshop) throws IOException {
Studyfile studyfile = new Studyfile();
HttpServletRequest request=SessionUtils.getCurrentServletRequest();
String realPath=request.getSession().getServletContext().getRealPath("/");
String path=realPath+"WEB-INF/upload/"+mfile.getOriginalFilename();
File file=new File(path);
System.out.println(path);
FileUtil.copy(mfile, file);
studyfile.setWorkshop(workshop);
String[] filenames=file.getName().split("\\.");//需要转义
studyfile.setSname(filenames[0]);
Date date=new Date(System.currentTimeMillis());
studyfile.setDate(date);
studyfile.setFile("WEB-INF/upload/"+mfile.getOriginalFilename());
studyfiledao.insertStudyfile(studyfile);
// 更新用户信息
}
}
其中的文件工具类如下
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import org.springframework.web.multipart.MultipartFile;
public class FileUtil {
public static boolean copy(MultipartFile src,File dest){
BufferedInputStream bufferedInputStream=null;
BufferedOutputStream bufferedOutputStream=null;
try {
bufferedInputStream=new BufferedInputStream(src.getInputStream());
bufferedOutputStream=new BufferedOutputStream(new FileOutputStream(dest));
byte[] bts=new byte[1024];
int len=-1;
while((len=bufferedInputStream.read(bts))!=-1){
bufferedOutputStream.write(bts,0,len);
}
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
finally{
if(bufferedInputStream!=null){
try {
bufferedInputStream.close();
} catch (Exception e2) {
e2.printStackTrace();
}
}
if(bufferedOutputStream!=null){
try {
bufferedOutputStream.close();
} catch (Exception e3) {
e3.printStackTrace();
}
}
}
}
}
由于文档名一般和文档路径的最后一部分一致，而日期显然就是上传文件时当天的日期，所以表中大部分字段都可以在上传文件时自动生成，不用我们手动输入。
只有部门字段需要手动输入一下，所以我们传入的参数也只有workshop这一个
除此以外，我们在删除数据库中的一条文档信息时，应该顺便把对应的文件一并删除，所以删除函数如下
@Override
public GlobalResult deleteStudyfile(Integer sid) {
if (sid == null) {
return new GlobalResult(400, "id为空，删除失败！", 400);
}
Studyfile studyfile = studyfiledao.selectbyid(sid);
HttpServletRequest request=SessionUtils.getCurrentServletRequest();
File delfile=new File(request.getSession().getServletContext().getRealPath("/")+studyfile.getFile());
boolean tag=delfile.delete();
Integer integer = studyfiledao.deleteStudyfileById(sid);
if (integer == 0||!tag) {
return new GlobalResult(400, "删除失败", null);
} else {
return new GlobalResult(200, "删除成功", null);
}
}
（4）前端
页面如下：
上传：
增删改代码较为简单，仅展示上传部分代码
html:
<!-- 导入窗口 -->
<div id="importDlg" class="easyui-window" >
<form id="importForm" enctype="multipart/form-data">
<table>
<tr>
<td>导入文件</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td>部门</td>
<td><input type="text" name="workshop"></td>
</tr>
</table>
</form>
</div>
js:
var importForm = document.getElementById('importForm');
var formData = $('#importForm').serializeJSON();
if (importForm) {
$('#importDlg').dialog(
{
title : '导入数据',
width : 330,
height : 130,
modal : true,
closed : true,
buttons : [ {
text : '导入',
handler : function() {
$.ajax({
url : name + 'doImport?workshop='+formData.workshop,
data : new FormData($('#importForm')[0]),
type : 'post',
processData : false,
contentType : false,
dataType : 'json',
success : function(data) {
$.messager.alert('提示', data.msg,
'info', function() {
if (data.status==200) {
$('#importDlg').dialog('close');
$('#importForm').form('clear');
$('#grid').datagrid('reload');
}
});
}
});
}
} ]
});
}
2、会议视频等
与上面基本一致，唯一需要注意的是在做会议视频部分时，由于视频一般较大，所以需要改下Springmvc配置文件中对上传文件大小的限制
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 上传文件大小限制 -->
<property name="maxUploadSize">
<value>1073741824</value>
</property>
<!-- 请求的编码格式, 和 jsp 页面一致 -->
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
</bean>
这个数字代表1个G（1024的三次方），一般来说是够用了
3）遇到的困难
1、
困难：不清楚上传文件的具体过程
解决方法：看博客
如何向服务器上传文件
并参考使用了他的文件工具类
2、
困难：对File类的常用方法不太熟悉，不知道怎么获取文件路径的最后一级路径
解决方法：看博客
详述java的File类常用方法
3、
困难：写Service层时，我想分割把文件名和后缀分开，即把“a.txt”分成“a”和“txt”，但发现直接像下面这么写会报错
String[] filenames=file.getName().split(".");//需要转义
studyfile.setSname(filenames[0]);
解决方法：参考了博客
String.split()分割字符串，转义字符
知道了需要对小数点进行转义,即需要写成下面这样
String[] filenames=file.getName().split("//.");//需要转义
studyfile.setSname(filenames[0]);
4、
困难：不知道如何获取当前日期
解决方法：看博客
java如何获取当前日期和时间
最终采取了如下形式
Date date=new Date(System.currentTimeMillis());
5、
困难：上传文件完成后，发现只是上传到了Tomcat的文件夹中，而学长说需要上传至项目路径下
解决方法：看博客
Java 文件上传到工程中，上传成功但是目录中没有显示
修改Tomcat配置即可解决
其中配置选项的意思可参考如下博客
Server Options服务器4个选项功能说明
6、
困难：对文件的删除不太了解
解决方法：看博客
Java删除指定文件
4）效果展示
以学习文档为例
页面
导入
选择文件
点击导入
发现多了一条数据，其中日期、路径、文档名均为自动生成，ID为自增
查看项目，确实多了一个文件
修改文档名（路径设置为了只读，不可更改，如果乱改用可能会造成用户显示的时候找不到文件了）
点击保存
可以看到修改成功，
删除
数据表中少了一条数据
查看项目，发现对应的文件已被删除
其他部分不再演示
三、用户点击按钮查看文件
1）主要内容
点击按钮，查看文件（下载文件）
2）部分代码
1、学习文档
（1）写controller层，
以下为代码
@RequestMapping("/user/common/peixun/studyshowfile")
public void Studyshowfile(HttpServletResponse response,HttpServletRequest request,@PathParam("sid")String sid) throws IOException {
Studyfile studyfile = studyfileservice.getStudyfilebyid(Integer.parseInt(sid));
String realPath=request.getSession().getServletContext().getRealPath("/");
File file = new File(realPath+studyfile.getFile());
FileInputStream in =new FileInputStream(file);
String[] filenames=studyfile.getFile().split("/");//需要转义
String filename=filenames[filenames.length-1];
// 设置输出流,实现下载文件
response.setHeader("Content-Disposition",
"attachment;filename=" +URLEncoder.encode(filename,"UTF-8"));
//FileOutputStream out = new FileOutputStream(response.getOutputStream());
BufferedOutputStream out=new BufferedOutputStream(response.getOutputStream());
int len=0;
while((len=in.read())!=-1) {
out.write(len);
out.flush();
}
out.close();
response.getOutputStream().close();
}
（2）前端
按下按钮后的函数
table.on('tool(studyList)', function(obj){
var layEvent = obj.event,
data = obj.data;
if(layEvent === 'view'){ //查看文件
viewStudyFile(data);//data主当前点击的行
}
});
function viewStudyFile(data){
window.open("${pageContext.request.contextPath}/user/common/peixun/studyshowfile/?sid="+data.sid);
}
2、会议视频等
与上面基本一致
唯一需要注意的是，由于资质情况显示的是图片，而图片是可以直接查看的，不需要下载。
所以我们可以通过如下代码进行直接查看
（1）controller层
@RequestMapping(value="/user/common/peixun/toViewZhengshuImage",method=RequestMethod.GET)
public String toViewProcessImage(HttpServletRequest request,Model model) {
String id=request.getParameter("id");
model.addAttribute("id", id);
return "/user/common/peixun/viewZhengshuImage";
}
@RequestMapping("/user/common/peixun/zhengshushowfile")
public void Zhengshushowfile(HttpServletResponse response,HttpServletRequest request,@PathParam("id")String id) throws IOException {
Zhengshu zhengshu = zhengshuservice.getZhengshubyid(Integer.parseInt(id));
String realPath=request.getSession().getServletContext().getRealPath("/");
File file = new File(realPath+zhengshu.getFile());
FileInputStream in =new FileInputStream(file);
try {
BufferedImage image = ImageIO.read(in);
ServletOutputStream outputStream = response.getOutputStream();
ImageIO.write(image, "PNG", outputStream);
in.close();
outputStream.close();
} catch (Exception e) {
e.printStackTrace();
}
}
（2）前端
点击按钮后，转向另一个页面
table.on('tool(zhengshuList)', function(obj){
var layEvent = obj.event,
data = obj.data;
if(layEvent === 'view'){ //查看文件
viewZhengshuFile(data);//data主当前点击的行
}
});
function viewZhengshuFile(data){
window.open("${pageContext.request.contextPath}/user/common/peixun/toViewZhengshuImage/?id="+data.id);
}
查看图片页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查看证书</title>
</head>
<body>
<img alt="证书" src="${pageContext.request.contextPath}/user/common/peixun/zhengshushowfile?id=${id}">
</body>
</html>
3）遇到的困难
1、
困难：不知道如何进行下载文件
解决方法：看博客
4）效果展示
学习文档页面：
点击查看文件
选择第一个
资质情况页面
点击查看文件会跳转至另一个界面
至此演示完毕。
由于该项目为商业项目，源代码就不传上来了。
扫一扫
1726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
