前端——各种小问题

1.解决video src路径改变 但视频并不会自动刷新

之前的代码

<video v-for="(x,i) in video" v-if="i<4" class="ItemPicture" width="160" height="120" controls>
    <source :src="x.video_url" type="video/mp4">
</video>

正确的做法是。不绑定source标签里的src属性，而是绑定video标签中的src属性。改正如下：

<video v-for="(x,i) in video" v-if="i<4" class="ItemPicture" width="160" height="120" controls :src="x.video_url" type="video/mp4">
</video>

2.html显示图片，并处理图片和图片之间的距离

显示图片：

<img v-for="(x,i) in pic" v-if="i<4" width="140px" height="140px"class="ItemPicture" :src="x.pic_url"/>

处理图片之间的间距：让图片变成块级元素，在style里面设置，通过RelativePic属性关联

<div class="relative-img">
    <img v-for="(x,i) in pic" v-if="i<4" width="140px" height="140px"class="RelativePic" :src="x.pic_url"/>
</div>

<!-- 格式设置 -->
 <style>
 .class1{font-weight:bold;font-size:25px;}
 .class2{color:red;}
 .RelativePic{margin-left:5px;margin-right:5px;}
 </style>

固定图片或容器的显示位置（绝对位置）：

<style type="text/css">   
img{     
  position:absolute;   <! 绝对位移>
  left:300px;
  top:150px;
  } 
</style>

3. 元素的id属性和class属性的区别

id属性是元素唯一的标识，在一个文档中每个元素的id值都不同，而且元素只能有一个id；在一个文档中，class属性可以重复，方便设置同样的样式，可以通过class选择器选择多个元素，一个元素可以有多个class属性，通过空格隔开。

4.html加js加ajax上传图片，并发送图片到后端，接收后端返回的数据

html代码如下：

<form id="form1" enctype="multipart/form-data">
         
    图片:<input type="file" id="file" name="imgfile">

    <button type="button" id="upButton">上传</button>
</form>

js代码如下：

  $("#upButton").on("click",function () {
    console.log("111111")
    var formData = new FormData();
    var file = document.getElementById('file').files[0];
    formData.append("file", file);

    $.ajax({
        url: "http://192.168.199.91:8889/copyBaiTeng/picSearch2",
        type: "post",
        data: formData,
        dataType: "json",
        cache: false,//上传文件无需缓存
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须*/
        success: function (data) {
            console.log(data)
            Response.ifShown = true;
            Response.article = data.data_article;
            Response.video = data.data_video;
            Response.people = data.data_people;
            Response.pic = data.data_pic;
            console.log(Response.more[0]);
        }
    });
  })

后端代码如下：

    @RequestMapping(value = "/copyBaiTeng/picSearch2", method = RequestMethod.POST)
    public RetResult<String> picSearch2(HttpServletRequest req, @RequestParam("file") MultipartFile file, Model m) {
        RetResult retResult = new RetResult();
        try {
            String fileName = System.currentTimeMillis()+file.getOriginalFilename();
            String destFileName="C:\\Users\\user\\Desktop\\upload"+File.separator+fileName;

            File destFile = new File(destFileName);
            destFile.getParentFile().mkdirs();
            file.transferTo(destFile);

            m.addAttribute("fileName", fileName);
            String hashcodeSearchPic = IMSocketClient.getPictureRecord(destFileName);
            System.out.println(hashcodeSearchPic);
            //
            ArrayList<ModelEsPic> data_pic = getEsModel.getModelPic(esClient, "hashcode", hashcodeSearchPic);
            String queryKind = data_pic.get(0).getKind();

            ArrayList<ModelEsVideo> data_video = getEsModel.getModelVideo(esClient, queryKind);
            ArrayList<ModelEsPeople> data_People = getEsModel.getModelPeople(esClient, "description", queryKind, "");
            ArrayList<ModelEs> data_article = getEsModel.getModel(esClient, queryKind);
            data_pic = getEsModel.getModelPic(esClient, "full_text", queryKind);


            retResult.setCode(20000).setMes("success").setData_article(data_article).setData_video(data_video).setData_pic(data_pic).setData_people(data_People);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
            retResult.setCode(50000).setMes("参数传入错误");
        } catch (IOException e) {
            e.printStackTrace();
            retResult.setCode(50000).setMes("参数传入错误");
        } catch (Exception e){
            retResult.setCode(50000).setMes("参数传入错误");
        }

        return retResult;

    }