vue向spring boot传递时间问题

4 篇文章 1 订阅
  1. 如果前端向后端传递时间会报 nested exception is org.springframework.core.convert.ConversionFailedException: Failed to convert from type [java.lang.String] to type [@javax.persistence.Column @org.springframework.format.annotation.DateTimeFormat java.util.Date],这是因为前后端格式不统一造成后端需要
 @DateTimeFormat(pattern ="yyyy-MM-dd HH-mm-ss")
 private Date startTime = new Date();

前端需要将传入的日期格式化成yyyy-MM-dd HH-mm-ss格式。
2.前端处理方式
通常我们可以为date添加格式化方法

Date.prototype.format =  function (fmt) {
  let o = {
    "M+" : this.getMonth()+1,                 //月份
    "d+" : this.getDate(),                    //日
    "H+" : this.getHours(),                   //小时
    "m+" : this.getMinutes(),                 //分
    "s+" : this.getSeconds(),                 //秒
    "q+" : Math.floor((this.getMonth()+3)/3), //季度
    "S"  : this.getMilliseconds()             //毫秒
  };
  if(/(y+)/.test(fmt)) {
    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  }
  for(let k in o) {
    if(new RegExp("("+ k +")").test(fmt)){
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
    }
  }
  return fmt;
};

这样传值的时候使用new Date().format(“yyyy-MM-dd HH-mm-ss”);就可以了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要实现实时进度条,可以使用 WebSocket 技术将后端发送的进度信息实时推送到前端页面。下面是一个简单的示例: 前端使用 Vue.js 实现: 1. 在 Vue.js 组件中引入 `websocket` 库: ```javascript import { WebSocket } from 'websocket'; export default { data() { return { progress: 0, // 进度条 }; }, mounted() { // 连接 WebSocket const ws = new WebSocket('ws://localhost:8080/progress'); // 监听消息事件 ws.onmessage = (event) => { const data = JSON.parse(event.data); if (data.hasOwnProperty('progress')) { // 更新进度条 this.progress = data.progress; } }; }, }; ``` 2. 在页面中使用 `el-progress` 组件显示进度条: ```html <el-progress :percentage="progress"></el-progress> ``` 后端使用 Spring Boot 实现: 1. 添加 `spring-boot-starter-websocket` 依赖: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 2. 创建 WebSocket 配置类: ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(progressHandler(), "/progress").setAllowedOrigins("*"); } @Bean public WebSocketHandler progressHandler() { return new ProgressHandler(); } } ``` 3. 创建 WebSocket 处理器类: ```java public class ProgressHandler extends TextWebSocketHandler { @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { // 连接建立后发送进度信息 for (int i = 1; i <= 100; i++) { session.sendMessage(new TextMessage("{\"progress\": " + i + "}")); Thread.sleep(1000); } } } ``` 4. 在控制器中返回页面: ```java @Controller public class ProgressController { @GetMapping("/") public String index() { return "index"; } } ``` 这样就可以实现一个简单的实时进度条了。当后端发送进度信息时,前端会实时更新进度条的。 ### 回答2: VueSpring Boot结合,可以实现实时进度条的功能。 在前端使用Vue框架,可以通过Vue的数据双向绑定特性和组件化的思想,实现实时进度条的更新和展示。可以使用Vue的组件库,如Element UI或Ant Design Vue等,提供现成的进度条组件,通过绑定相关数据和事件,实现实时更新进度。 然后,在后端使用Spring Boot框架,可以编写相应的接口和逻辑,处理前端的请求,获取进度信息,并返回给前端。可以使用Spring MVC或Spring WebFlux等组件,处理前后端之间的通信。 前端通过Vue发送请求到后端,获取进度信息,并将其实时展示在页面上的进度条中。可以通过定时轮询、长轮询、WebSocket或Server-Sent Events等技术,实现实时的进度更新。 在后端中,可以使用异步任务或线程池等技术,处理一些比较耗时的操作,如文件上、数据处理等。在处理的过程中,可以通过监听进度、记录已完成的任务数量或进度百分比等方式,获取进度信息,并将其返回给前端。 总结起来,通过VueSpring Boot的配合,可以实现实时进度条的功能。前端通过Vue的数据双向绑定和组件化思想,展示实时进度条,后端通过Spring Boot提供接口和逻辑处理,获取进度信息并返回给前端。可以使用定时轮询、长轮询、WebSocket或Server-Sent Events等技术,实现实时的进度更新。在后端处理耗时操作时,通过监听进度、记录已完成的任务数量或进度百分比等方式,获取进度信息。 ### 回答3: VueSpring Boot在实现实时进度条时可以采取以下步骤: 1. 在Vue中,创建一个进度条组件,可以使用第三方库如Vuetify、Element UI等来实现。进度条组件需要有一个进度的属性,用于控制进度条的显示。 2. 在Vue中,使用Axios或Fetch等库向后端发送请求。请求可以是一个长时间运行的任务,比如上文件或者后台处理数据。 3. 在后端的Spring Boot中,处理接收到的请求。可以使用Spring Boot提供的多线程或者异步任务来处理这些长时间运行的任务。 4. 在后端处理任务的过程中,根据任务的实际进度,将进度发送给Vue前端。 5. 在Vue前端,接收到后端发送过来的进度,更新进度条组件的进度属性。 6. 随着任务的进行,进度条组件会实时显示任务的进度,直到任务完成。 这种实时进度条的实现方式可以提升用户体验,让用户能够清楚地了解到任务的进展情况。同时,使用VueSpring Boot可以使前后端开发分离,提高开发效率和代码的可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值