过程
1、maven
属于配置管理工具，统一jar包，配置信息都下载到一个文件里，配置的文件一样下载的jar包就一样
老师教程：
https://www.jianshu.com/p/62f67d3bb727
下载后解压在conf里面的settings里面进行国内镜像地址配置
以下一段粘贴到settings的mirror内部
<mirror>
<id>alimaven</id>
<mirrorOf>central</mirrorOf>
<name>aliyun maven</name>
<url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>
配置本地下载仓库
<localRepository>E:\LSL\东软java\maven ku</localRepository>
template模板
下载template.js作为样式文件，
在html的head中关联文件，
在ajax中
在body中用如下标签集成
<script id="id" type="text/html">
{{each userlist as user}}
（userlist为json中的键）
用{{}} 进行参数写入
</script>
声明一个 var html=template（“id”，json）
然后dom操作append html
分页原理
想分页需要知道每页放几条数据，总共多少条数据
（引入jquery）
利用ajax查询数据库中emp表，并在页面分页显示
每次只查出当页面数据，不会全部查出
1、页面加载时就发ajax查询首页数据
ajax发送信息：url（发到哪）；带的数据（1、第0页（当前页索引），2、5 （每页显示多少条））
ajax返回信息：返回对象（ajax格式的）包含2条信息：1、待会当前页数据（list）；2、带回来总条数，放在下面做导航（int）。
2、servlet接收到ajax发出的数据（当前页索引（pageIndex）；每页条数（pageSize））
a/收到的2个参数封装成对象（创建一个对象Page）
b/封装对象时将pageIndex与pageSize相乘作为一个参数，pageSize作为一个参数
因为limit pageIndexpageSize，pageSize
3、查询当前页数据selectfrom ---limit pageIndexpageSize，pageSize
4、查询总条数select count（）count from ---
5、创建一个类，将查询出的当前页数据（list）和总条数（total）作为参数封装进入对象，将对象打印成json字符串返回给ajax
6、ajax遍历返回的信息(在ajax的function中写)
a/遍历list中的信息
b/遍历总条数做分页索引
总条数对每页条数取模如果不为0，遍历res.total%pageSize+1；总条数对每页条数取模如果为0，遍历res.total%pageSize。
if（res.total%pageSize！=0）{
var x=Math.ceil(res.total%pageSize)
}else{
var x=res.total/5
}
c/遍历追加
for(var i=0;i<x;i++){
$('#page').append('<a> aid="'+i+'" '+（i+1）+‘</a>’)
}
7、给每一个追加的a标签追加一个点击动作（再起一个ajax点击时发送的ajax，此时追加内容时先清空一下要追加的元素）
当点击时就再发送一个ajax此时ajax带的数据唯一的便会就是pageIndex变为此时的aid（$(this).attr('aid')）
分页组件
教程：https://github.com/mricle/Mricode.Pagination
首先引入分页文件
在head中引入
<link href="mricode.pagination.css" rel="stylesheet" />
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="mricode.pagination.js"></script>
在body中输入
<div id="page" class="m-pagination"></div>(用于放置分页的页码标签)
初始化
$("#page").pagination({
pageSize: 10,
remote: {
url: 'data.json',
success: function (data) {
// data为ajax返回数据
},
totalName:'total'
}
});
不喜欢的样式可以点进去查看它依赖了哪些样式文件的多少行过去修改
修改头像
上传头像格式首先要有判断
location.reload(页面重新加载)
<input type=“file” name=“”
session修改掉，后台数据口修改掉，前台页面修改掉
上传文件时需要form表单,上传路径用#替代，需要一个属性：enctype="multipart/form-data" 里面套input type=file
此时form里面没有提交按钮，而是在js中给form绑定事件，当改变时提交数据onchange事件
声明一个FormData对象data他能打包表单中的所有数据，需要确定哪个表单（用选择器），第几个数据（【0】），
let data=new FormData($('#headupload')[0]);
然后发ajax（还需要多带两个参数）
processData: false,
contentType: false,
// 上传头像
$('#headupload').change(function () {
// FormData这个对象能打包一个表单的所有数据
let sendData = new FormData($('#headupload')[0]);
// 发送ajax
$.ajax({
url : '${pageContext.request.contextPath}/user/uploadHead',
data : sendData,
type : 'post',
cache:false,
processData: false,
contentType: false,
dataType:"json",
success : function (res) {
if(res.status == 0){
// 重新加载页面
// location.reload();
$('.avatar-add').find('img').attr('src',res.path);
$('.fly-nav-avatar').find('img').attr('src',res.path);
}
if(res.status == 1){
alert("不支持该格式");
}
},
error:function () {
},
async : true
})
})
上传头像有依赖-jar包
commons-io
commons-fileupload
进入servlet
1、在servlet上需要一个注解@MultipartConfig
2、在服务器上保存图片 //.jpg
3、修改数据库.jpg
4、同步更新session中login_user中的headurl为***.jpg
5、响应ajax信息
1.在服务器上保存图片
// 指定存储路径
String savePath = getServletContext().getRealPath("/fly/res/images/avatar");
File file = new File(savePath);
if(!file.exists()) {
file.mkdirs();
}
// 获取上传的文件集合
Collection<Part> parts = request.getParts();
UUID uuid = null;
String fileName = "";
for(Part part : parts){
String header = part.getHeader("content-disposition");
System.out.println(header);
// 获取文件名
fileName = getFileName(header);// 1.jpg v JPG
if(!fileName.endsWith(".jpg") && !fileName.endsWith(".png") && !fileName.endsWith(".gif") && !fileName.endsWith(".JPG") && !fileName.endsWith(".PNG") && !fileName.endsWith(".GIF")){
UploadInfo uploadInfo = new UploadInfo();
uploadInfo.setStatus(1);
response.getWriter().println(JSON.toJSONString(uploadInfo));
return;
}
// 把文件写到指定路径
// 生成一个uuid
uuid = UUID.randomUUID();
part.write(savePath + File.separator + uuid + fileName);
}
// 2.修改数据库xxxxxxx.jpg
UserinfoService userinfoService = new UserinfoServiceImpl();
Userinfo login_user = (Userinfo) request.getSession().getAttribute("login_user");
// 3.同步更新session中login_user的headurl xxxxxxx.jpg
login_user.setHeadurl(uuid + fileName);//此步骤同步修改了session里的headurl内容
int num = userinfoService.uploadHeadImg(login_user);
// 4.响应ajax信息
UploadInfo uploadInfo = new UploadInfo();
uploadInfo.setStatus(0);
uploadInfo.setPath(request.getContextPath()+"/fly/res/images/avatar/"+uuid + fileName);
response.getWriter().println(JSON.toJSONString(uploadInfo));
springMVC方式的图片上传
在页面form中提交enctype="multipart/form-data"的数据时，需要springmvc对multipart类型的数据进行解析。
在springmvc.xml中配置multipart类型解析器。
<!-- 文件上传 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="80000"></property>
<property name="defaultEncoding" value="UTF-8"></property>
</bean>
上传图片代码
页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="upload.do" method="post" enctype="multipart/form-data">
<h2>文件上传</h2>
文件:<input type="file" name="file1"/><br/><br/>
用户名：<input type="text" name="username">
<br/><br/>
图片：<img src="${imgpath}"/><br/><br/>
<input type="submit" value="上传"/>
</form>
</body>
</html>
controller方法
@Controller
public class uploadController {
@RequestMapping("/upload.do")
public void doUpload(@RequestParam MultipartFile file1, HttpServletRequest request) throws IOException {
String strName = request.getParameter("username");
System.out.println(strName);
if(file1.isEmpty()){
System.out.println("文件未上传!");
}
else {
//得到上传的文件名
String fileName = file1.getOriginalFilename();
//得到服务器项目发布运行所在地址
String strFolder = request.getServletContext().getRealPath("/image")+ File.separator;
File folder = new File(strFolder);
if(!folder.exists())
{
folder.mkdir();
}
// 此处未使用UUID来生成唯一标识,用日期做为标识
String strNewFilePath = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+ fileName;
String strFinalPath = strFolder + strNewFilePath;
//查看文件上传路径,方便查找
System.out.println(strFinalPath);
//把文件上传至path的路径
File localFile = new File(strFinalPath);
file1.transferTo(localFile);
request.getSession().setAttribute("imgpath", "image"+ File.separator+strNewFilePath);
}
}
}
