• 中文
    • English
  • 注册
  • BBS
  • 今日 0
  • 帖子
  • 关注
  • 赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    • 查看作者
    • 3月1日技术总结

      一. JS中的时间戳转换成Timstamp

      问题:前端页面js中的时间戳,被Controller接受后如何转换成Timestamp

      解决方案:其实这个问题很简单,Timestamp本来就是时间戳,它本身又有一个接受long类型的构造方法,所以只需要将Controller中接受到Strign类型的时间戳转换为long类型后作为Timestamp的参数即可。

      前端:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>test</title>
      </head>
      <body>
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
      <script>
          console.log(new Date()); 
          //输出Sun Mar 01 2020 22:19:22 GMT+0800 (中国标准时间)
          console.log(new Date().getTime()) 
          //输出1583072708956
          $.post("/time", {timestamp: new Date().getTime()}, function (res) {
              console.log(res)
      
          })
      </script>
      </body>
      </html>

      Controller:

      package io.zhangjia.summarize.controller;
      
      import org.slf4j.Logger;
      import org.slf4j.LoggerFactory;
      import org.springframework.stereotype.Controller;
      import org.springframework.web.bind.annotation.GetMapping;
      import org.springframework.web.bind.annotation.PostMapping;
      import org.springframework.web.bind.annotation.ResponseBody;
      
      import java.sql.Timestamp;
      import java.util.Date;
      import java.util.HashMap;
      import java.util.Map;
      
      /**
       * @Author : ZhangJia
       * @Date : 2020/3/1 22:53
       * @Description : 
       */
      
      @Controller
      public class TestController {
          private static final Logger logger = LoggerFactory.getLogger(TestController.class);
      
          @GetMapping("/index")
          public String index() {
              return "index";
          }
      
          @PostMapping(value = "/time", produces = "application/json;charset=utf-8")
          @ResponseBody
          public Map<String, Object> time(String timestamp) {
              logger.debug("timestamp = " + timestamp);
              Timestamp time = new Timestamp(Long.valueOf(timestamp));
              logger.debug("time = " + timestamp);
              Map<String, Object> map = new HashMap<>();
              map.put("timestamp", timestamp);
              return map;
          }
      }

      二. SpringMVC路径问题

      问题:今天启动一个SpringBoot项目的报错如下:Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled,Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.意思是未指定URL属性

      原因:Controller中的某个URL没有添加/,比如可能写成了: @GetMapping("index")

      解决方案:添加/即可,即 @GetMapping("/index")

      三. SpringBoot项目静态资源实时刷新

      问题:IDEA的SpringBoot的项目中,像html、css、js这些静态资源,每次更新的时候,都需要重启SpringBoot项目才可以生效,可以通过以下方法实时刷新

      解决方案

      1. 在pom.xml中添加以下依赖:

       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-devtools</artifactId>
           <optional>true</optional>
      </dependency>

      spring-boot-devtools是SpringBoot为开发者提供的一个专门用户热部署实时更新的模块

      2. 打开IDEA的Settings(快捷键Ctrl + Alt+ s)-> Build,Execution,Deplyment -> Compiler,将Build project automatically 打勾 -> Apply -> ok

      3. 按住Shift+Ctrl+Alt+/ 快捷键 ,选择 Registry ,将 compiler.automake.allow.when.app.running 打钩选中即可

      4. 之后每次有静态资源更新后,只需要按Ctrl+F9快捷键就可以做到即时刷新,而不用重启整个项目了

      5. 除了html中的内容更新后,可以用Ctrl+F9更新,有时候我们加了一些css、js或者图片到项目中,也可以选中这些文件,然后按住Ctrl+F9,就可以使这些新添加的文件生效

      四. Ajax如何获取返回值

      问题:有时候我们将Ajax中success回调函数的返回值,拿到ajax的外部使用,举例如下:

      Controller:

      @PostMapping(value = "/balance", produces = "application/json;charset=utf-8")
      @ResponseBody
      public Map<String, Object> balance() {
          Map<String, Object> map = new HashMap<>();
          map.put("balance", 20.3);
          return map;
      }

      Js:

          var balance = 0;
          console.log(balance);
          $.post("/balance",false,function (res) {
              console.log(res)
              balance = res.balance;
          })
          console.log(balance);

      上述代码中,两次console的输出值都是0,这是因为ajax是异步加载的,可能success的回调函数还没执行,第二个console.log就已经输出了

      解决方案:将Ajax设置为异步的即可

          var balance = 0;
          console.log(balance);
          $.ajaxSettings.async = false;
          $.post("/balance",false,function (res) {
              console.log(res)
              balance = res.balance;
          })
          console.log(balance);
          $.ajaxSettings.async = false;

      如果用的是传统的ajax写法,那么解决方案如下:

      var balance = 0;
      console.log(balance);
      $.ajax({
          url:"/balance",
          type: 'post',
          async:false,
          success:function (res) {
              console.log(res)
              balance = res.balance;
          }
      });
      console.log(balance);

      五.  JS输出内容为[object Object]

      问题:在js中想通过console.log("data = " + users)来输出users的内容,输出结果是data = [object Object]

      原因:这是因为我们使用+号将data=这字符串和 users连接造成的,系统会默认调用users的toString方法,toString()方法被每个Object对象继承。如果此方法在自定义对象中未被覆盖,toString()返回 "[object type]",其中type是对象的类型。

      解决方案:直接去掉左边的字符串即可:console.log(users),或者console.log("data = ",users,"data2 = ",user2)

      六. ORDER BY问题

      问题:用order by 对指定记录排序时,每次执行的结果都不一样

      原因:要排序字段内容如果都相等,那么order by 的结果是随机的。

      比如现在将users中的所有用户根据根据age字段排序,如果这个表中所有的用户年龄都是20岁,那么每次执行的结果都不同,是随机的

      解决方案:可以多加一个字段来设定排序,比如 order by age desc,name desc

      七. Ajax添加加载动画

      问题:有时候我们的Ajax接口执行时间较长,十分影响用户体验

      解决方案:可以在启动Ajax请求之前添加加载动画,请求成功后,关闭该动画即可,这里加载动画采用layer中的loading层,代码如下:

      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
      <script src="https://cdn.bootcss.com/layer/1.8.5/layer.min.js"></script>
      <script>
          var index;
          $.ajax({
              url:"/balance",
              type: 'post',
              beforeSend:function() {
                  var index = layer.load(1, {
                      shade: [0.1,'#fff'] //0.1透明度的白色背景
                  });
              },
              success:function () {
                  console.log("222")
                  layer.close(index);
              }
          });
      
      </script>

      八. 用户排名

      问题:如何使用sql语句来查询排名信息

      举例:比如有一个用户表(user),我们想查询ID为100的用户的余额(balance)排名第几

      解决方案

      SELECT * FROM (SELECT user_id,balance, @rank := @rank + 1 as rank FROM user t1,(SELECT @rank := 0) t2  ORDER BY  balance DESC) t3
      WHERE user_id = 100

      @rank := @rank + 1 的意思相当于 ++rank,而@rank := 0用于初始化rank

      参考资料

      JS输出内容为[object Object]

    • 2
    • 0
    • 0
    • 408
    • success。MI

      请登录之后再进行评论

      登录
    • 做任务
    • 实时动态
    • 偏好设置
    • 返回顶部
    • 单栏布局 侧栏位置: