过程

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、查询当前页数据select
from ---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);
         }
     }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容