SpringBoot笔记-4

文件上传注意事项

1. 修改文件名为唯一文件名 避免被覆盖
2. 配置上传文件的大小
3. 客户端只能访问到服务器静态资源文件夹下的文件, 如果需要让客户端访问上传的文件,需要将保存文件的文件夹也设置为静态资源文件夹

图片和其它信息如何一起保存到数据库中?

1. 以微博为例: 通过ElementUI组件 选择上传的图片 选择完之后组件会立即发请求把图片上传到服务器, 上传完之后会给客户端做出响应, 此时在响应方法里面 得到上传完成的文件的路径,多个文件 需要将多个路径拼接成一个字符串赋值给urls,下面截图就是上传完图片后调用的方法
2. 当删除掉已上传的图片时会调用下面方法需要在方法中根据此时的文件数量更新表示图片的路径的urls变量
3. 最后当点击发布微博按钮的时候把微博的正文和图片路径一起提交给服务器

创建微博表SQL语句

use empdb;
create table weibo(id int primary key auto_increment,content
varchar(255),urls varchar(255)) charset=utf8;

会话管理

• 数据库保存的是用户的数据
• 会话管理保存的是客户端的数据

客户端和服务器之间进行数据交互,遵循的是HTTP协议,此协议属于无状协议(一次请求对应一次响应)响应完连接断开,服务器无法跟踪客户端的请求,通过会话管理中的Cookie技术,可以在客户端向服务器发出请求时服务器给客户端添加一个标识(把数据保存到这个标识里面) , 之后客户端每次发出请求时都会带上这个标识,这样服务器通过此标识就能识别出该客户端的信息, 但是这种把数据保存在客户端的方式存在数据被篡改的风险,Session的作用就是能够解决这种问题, 因为Session的数据是保存在服务器端,不存在被篡改的问题.

Cookie和Session

• Cookie: 数据保存在客户端,类似打孔式的会员卡
  • 只能保存字符串类型的数据
  • 保存时长: 默认保存在浏览器内存中, 浏览器关闭时清除, 也可以设置任意的保存时长,设置后数据会保存到客户端磁盘中,时间到了后清除.应用场景: 长时间保存的数据使用Cookie,比如记住用户名和密码
• Session: 数据保存在服务器端, 类似银行卡
  • 可以保存任意对象类型的数据
  • 保存时长: 只能保存半小时左右
  • 应用场景: 对数据安全性要求比较高并且是短时间保存的,比如登录状态

通过Cookie实现记住用户名和密码功能

• 为什么使用Cookie实现记住用户名和密码? 因为此功能保存数据的时长比较久,Cookie是可以保存任意时长的方式. Session只能保存半个小时左右的时间.

文件上传步骤:

1. 创建工程5-3工程
2. 在application.properties里面添加链接数据库的信息
3. 创建首页index.html页面 (从Web工程中第7天代码里面找到starter.html 然后复制并改名为index.html)
4. 把之前工程中包含 elementui和vue,axios的js文件夹复制到工程中,然后ReBuild工程 或ReBuild static文件夹
5. 从ElementUI文档中找到组件->form->upload上传->照片墙
   1. 先复制html代码部分 到自己的页面中

   <el-upload
   action="https://jsonplaceholder.typicode.com/posts/"
   list-type="picture-card"
   :on-preview="handlePictureCardPreview"
    class="el-icon-plus">i>
   el-upload>
   <el-dialog :visible.sync="dialogVisible">
   <img width="100%" :src="dialogImageUrl" alt="">
   el-dialog>
   

   2. 复制js相关代码 添加到Vue里面

   data() {
         return {
         dialogImageUrl: '',
         dialogVisible: false
      };
      },
      methods: {
      handleRemove(file, fileList) {
      console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
         }
         }
   

6. 修改html部分的代码如下:
7. 创建UploadController 处理/upload请求 代码参考:
8. 此时上传的图片文件已经能够保存到服务器的磁盘中 ,下一步处理删除文件,当页面中点击删除的按钮时会调用methods里面的handleRemove(file,fileList)方法, 在方法内部 通过file.response可以得到删除文件的文件名, 向服务器发删除图片的请求,同时把文件名传递过去
9. 在UploadController中创建remove方法处理/remove请求,接收传递过来的文件名 通过文件名得到完整的文件路径 然后删除
   10.在UploadController中创建remove方法处理/remove请求,接收传递过来的文件名 通过文件名得到完整的文件路径 然后删除

要把上传的图片路径和微博信息保存到一个表中如何操作?

1. 首先在vue的data里面添加一个weibo自定义对象 用来保存发布微博时提交的数据,里面包含微博内容和微博图片路径
2. 在上传成功和删除图片时更新urls变量的值 从两个方法中的fileList数组中得到当前存在的表示已经上传图片的file文件对象, 通过file.response可以得到图片的路径 , 添加一个上传成功调用的方法并实现
3. 此时当图片上传成功或删除成功时 weibo对象里面的urls都会跟着发生改变
4. 在页面中添加一个form表单获取用户输入的微博信息
5. 在methods里面添加send方法
6. 创建WeiboController处理/insert请求