人员管理系统遇到问题记录

问题一:

在操作的时候，vue前端页面突然空白，看控制台也没有报错，我这里遇到的问题是把子组件的名字写错了，在写代码的时候习惯ctrl+z进行撤回，速度过快不好把握自己的原始代码到低是什么样子的，后面也是通过vscode的日志功能查看之前的代码找到的错误。

 components里面的TreeSelect少写一个t，加上就可以

  import TreeSelect from '@riophae/vue-treeselect'

  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {

  components: {TreeSelec},

问题二：

我负责的需求是用户合同管理还有管理员合同管理功能，合同涉及到签约时间和到期时间，前端传过来的是一个字符串，后端需要一个data对象，因此需要进行string转换date。之前直接使用date类型接收params里面的数据，很显然报错了，类型转换错误，String不能直接转换为date。

String createDatetime = (String) params.get("createDatetime");
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        Date date = new Date();
         try {
            date = simpleDateFormat.parse(createDatetime);
        } catch (ParseException e) {
            e.printStackTrace();
        }

问题三：

在进行到期合同提醒功能的实现时，我的思路是在前端设置一个定时器，隔一定的时间进行自动发送请求到控制器对数据库里面的到期时间进行判定，判定当前时间是否大于到期时间，通过毫秒值判定。当然在created钩子函数里面也设置方法的调用。

在编写的过程中我遇到了Handler dispatch failed; nested exception is java.lang.StackOverflowError这个错误，通常情况下是死循环或者循环依赖。我的问题是在编写判定时因为for循环里面的if条件出问题因此一直陷入循环，后面改正条件即解决。

问题四：

在计算合同到期时间时，最开始是想用合同新增时选择到期时间，但后续的展示以及数据逻辑的编写有一定的问题，因此我决定使用前端发送请求时携带参数，参数代表合同 的年限，后端自动计算到期时间，并把合同年限保存在数据库，当修改时回调。

在这里我遇到了一个整数过大的问题，因为最开始用一年的毫秒值*合同年限加上签约时间的毫秒值就是到期时间，但是一年的毫秒值用int实在是太大，数据范围超出，因此决定使用使用Long类型也是一样，  Java在任何情况下，处理整数型的“字面量（数据）”时，默认会将字面量当做int型处理。因此需要在数据后加上L，表示是一个Long类型的数据。

问题五：错误java.lang.IllegalArgumentException: Invalid character found in the request target.

当在浏览器中访问时 URL中带有特殊字符，如花括号冒号时，就会出现这个错误。

我的错误原因是在这里拼接的时候出现失误，少写了一个引号导致出现特殊字符

this.$http.adornUrl(`/sys/contract/upload?`) +

      `token=${this.$cookie.get("token")}` +

      `&uid=` +

      file.uid +

      `&id=` +

      this.cid ;

总结一:

在写文件上传下载时运用到了一个新的知识，MultipartFile是org.springframework.web.mutipart包下的一个类

MultipartFile是一种可以接收使用多种请求方式来进行上传文件的代表形式。
这个文件的内容可以存储到内存中或者存储在磁盘的临时位置上。
用户可以自由的拷贝文件内容到session存储中，或者以一种永久的形式进行存储，如果有需要的话。
这种临时性的存储在请求结束之后将会被清除掉。

MultipartFile是一个接口，并继承自InputStreamScource，且在InputStreamScource接口中封装了getInputStream方法，该方法返回类型为InputStream类型，因此MultipartFile文件可以转换为输出流。

multipartFile。getInputStream（）；

方法	说明
String getName()	返回参数的名称
String getOriginalFilename()	返回客户端文件系统中的原始文件名。
String getContentType()	获取文件的类型。
boolean isEmpty()	判断传入的文件是否为空，如果为空则表示没有传入任何文件。
long getSize()	用来获取文件的大小，单位是字节。
byte[] getBytes()	用来将文件转换成一种字节数组的方式进行传输，会抛出IOException异常。
InputStream getInputStream()	返回一个InputStream以从中读取文件的内容
void transferTo(File dest)	把接收到的文件写入到目的文件中,如果目的文件已经存在了则会先进行删除。用于将MultipartFile转换为File类型文件
void transferTo(Path dest)	将接收到的文件传输到给定的目标文件。默认实现只复制文件输入流。

总结二：在对合同时间的记录中我发现了一个组件

可以快捷的生成日期类型数据

 <el-date-picker
      v-model="value1"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>

参数	说明	类型	可选值	默认值
value / v-model	绑定值	date(DateTimePicker) / array(DateTimeRangePicker)	—	—
readonly	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	large, small, mini	—
placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	—
end-placeholder	范围选择时结束日期的占位内容	string	—	—
time-arrow-control	是否使用箭头进行时间选择	boolean	—	false
type	显示类型	string	year/month/date/week/ datetime/datetimerange/daterange	date
format	显示在输入框中的格式	string	见日期格式	yyyy-MM-dd HH:mm:ss
align	对齐方式	string	left, center, right	left
popper-class	DateTimePicker 下拉框的类名	string	—	—
picker-options	当前时间日期选择器特有的选项参考下表	object	—	{}
range-separator	选择范围时的分隔符	string	-	'-'
default-value	可选，选择器打开时默认显示的时间	Date	可被new Date()解析	—
default-time	选中日期后的默认具体时刻	非范围选择时：string / 范围选择时：string[]	非范围选择时：形如12:00:00的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 00:00:00	—
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string	见日期格式	—
name	原生属性	string	—	—
unlink-panels	在范围选择器里取消两个日期面板之间的联动	boolean	—	false
prefix-icon	自定义头部图标的类名	string	—	el-icon-date
clear-icon	自定义清空图标的类名	string	—	el-icon-circle-close

总结三：还有文件上传组件

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

参数	说明	类型	可选值	默认值
action	必选参数，上传的地址	string	—	—
headers	设置上传的请求头部	object	—	—
multiple	是否支持多选文件	boolean	—	—
data	上传时附带的额外参数	object	—	—
name	上传的文件字段名	string	—	file
with-credentials	支持发送 cookie 凭证信息	boolean	—	false
show-file-list	是否显示已上传文件列表	boolean	—	true
drag	是否启用拖拽上传	boolean	—	false
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	—	—
on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
on-success	文件上传成功时的钩子	function(response, file, fileList)	—	—
on-error	文件上传失败时的钩子	function(err, file, fileList)	—	—
on-progress	文件上传时的钩子	function(event, file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—	—
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file)	—	—
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。	function(file, fileList)	—	—
list-type	文件列表的类型	string	text/picture/picture-card	text
auto-upload	是否在选取文件后立即进行上传	boolean	—	true
file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array	—	[]
http-request	覆盖默认的上传行为，可以自定义上传的实现	function	—	—
disabled	是否禁用	boolean	—	false
limit	最大允许上传个数	number	—	—
on-exceed	文件超出个数限制时的钩子	function(files, fileList)	—	-

对于手动上传我们还需要调用

<el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  :auto-upload="false">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

关键是这俩句

手动上传的方法 通过button绑定

   this.$refs.upload.submit();

关闭自动上传

 :auto-upload="false"