大二暑假_SSM项目_培训教育板块
大二暑假_SSM项目_培训教育板块
- 一、页面搭建
- 1）主要内容
- 2）部分代码
- 3）遇到的困难
- 4）效果展示
- 二、管理员上传文件
- 1）主要内容
- 2）部分代码
- 3）遇到的困难
- 4）效果展示
- 三、用户点击按钮查看文件
- 1）主要内容
- 2）部分代码
- 3）遇到的困难
- 4）效果展示
一、页面搭建
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")@ResponseBodypublic 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 studyfilevalues(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层，
最主要的一个函数就是上传文件的函数了
@Overridepublic 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这一个
除此以外，我们在删除数据库中的一条文档信息时，应该顺便把对应的文件一并删除，所以删除函数如下
@Overridepublic 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、
困难：不知道如何进行下载文件
解决方法：看博客
ssm实现文件上传与下载
4）效果展示
学习文档页面：
点击查看文件
选择第一个
资质情况页面
点击查看文件会跳转至另一个界面
至此演示完毕。
由于该项目为商业项目，源代码就不传上来了。
大二暑假_SSM项目_培训教育板块相关推荐
- 我的大二暑假实验室经历
前两天写了 2 篇我的大学经历,错过的可以看看: 我的 4 年大学经历之:高考,大一和大二 我的 4 年大学经历之:大三,大四 其实我在大二的暑假还有过一段导师实验室的经历,收获也很大,今天就分享给大 ...
- 大二暑假工作三个月后辞职，总体感悟
本人是个大二的学生,因为疫情影响,学校放了很长时间的假.当时对自己的前端技术很自信,大概在五月底的时候决定去上海闯一下,找个工作,不管能不能找到,就是尝试一下,失败了也没关系,至少能确定下未来的方向. ...
- 乘风破浪，迎接大二——暑假生活总结
长风破浪会有时,直挂云帆济沧海 1.前言 收拾好行李,独自坐在房间里,望着眼前的床,想起今晚是今年在家里睡的最后一晚,便有一点莫名的伤感.时光仿佛回到28天前,因为卓越班要补课到7月31号,所以我订了 ...
- 大二暑假java培训第七天
2018.7.6 内容: 时间与字符串相互转换 1. public class DateUtils {//date->Stringpublic static String getDate2St ...
- 大二暑假：西山居参观实习记
先上图一张:互动环节收获的猎豹移动的纪念衫一件. 这个暑假和大三的学姐学长们去西山居参观学习的机会,我很庆幸自己拥有这个难得的机会,我的收获证明了不枉此行.尤其是在前端认识方面. 庞大的金山集团有4家 ...
- 大二暑假结束我也真实体验了一回企业中的Java开发【实习纪录】
前言 在暑假找份实习工作的想法,在我的心里萌生已久. 找份和自己做学专业的工作,既能及时检查自己学习的成果,又能赚些生活费减轻家里负担,还可以丰富简历提升工作能力. 正文 求职篇 我主要是用实习僧和 ...
- 2019大二暑假总结
算是留在学校的第一个暑假,在集训之前也比较随意,看心情学习,集训开始就慢慢地有点明白自己想要做的事了.这个暑假的刷题大部分看的题解,做的模版题,少部分是自己想的,但全部都是自己思考过后才做完写的题解. ...
- 大二暑假周进度报告之四
1,本周将河北省创新平台系统中的数据库改为oracle数据库:学习林子雨<大数据原理与应用>中的分布式数据库HBase:学习时间:12个小时:代码时间:4个小时:解决问题时间:2个小时: ...
- 计算机网络和因特网大二暑假
计算机网络和因特网 1 什么是因特网 11 架构描述 12 服务描述 13 什么是协议 人类活动的类比 网络协议 14 一些好的超链接 2 网络边缘 21 端系统客户机服务器 22 无连接和面向连接的 ...
最新文章
- 序列化和反序列化（转）
- [Cocoa]深入浅出Cocoa之Core Data（4）- 使用绑定
- 代码对比工具，我就用这 6 个！
- 老大难的空指针，如何优雅处理？
- SSM整合框架实现ajax校验
- ubuntu 输入时弹出剪切板候选项
- 面向对象编程之生成器与迭代器
- Windows Mobile下C++取屏幕分辨率的方法
- Map+Model+ModelMap介绍
- Java内存组成GC算法
- 【数据结构基础笔记】【栈】
- php用wordanalysis抓取姓名_利用vba查询/抓取 外部数据
- 判断手机机型和浏览器内核
- 日志分析系统搭建分析与比较
- print_r与var_dump
- 360 html页面乱码,360浏览器乱码是怎么回事
- 软件工程第二次自考总结（2020年8月）
- 解决笔记本键盘禁用失败问题
- English-Phonics
- SCI声学期刊名以及影响因子