一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

setTimeout在vue中的正确使用

笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏，使用到setTimeout函数。遇到了1个坑  

1
2
3
在vue的某个方法(点击后执行)
 
setTimeout(this.end(),4000);//娃娃消失

  这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢！其实，问题还是出在笔者身上，大家请看下图 setTimeout的定义和用法。问题出在我的格式上面 其实是支持两种调用方式：1 字符 2 函数体（文章解决方式） 解决方法如下： 1、定义一个_this暂存this 2、再改变变量的值，则生效啦 3、方法中将this存在变量_this中，此时执行setTimeout函数时，setTimeout函数内的_this就会访问到这个变量，就会得到当前对象。

1
 

 

1
 

注意⚠️: 当在vue中使用定时器在function里直接使用this，发现没有效果，这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。拓展知识：解决vue在setTimeout内修改this失效的问题 要想setTimeout指向正确的值，可以使用如下方法： 1、使用箭头函数

1
2
3
4
5
6
7
8
9
export default {
 methods: {
  start: function () {
   setTimeout(() => {
    this.end()//娃娃消失
   }, 4000);
  }
 }
}

此时函数的this指向的是定义它的时候的对象，也就是this指向了data内中对应的变量。 码字不易，对大家有用最佳 from:https://blog.csdn.net/qq_27295403/article/details/83375574

龙生   03 Mar 2020
View Details

http协议的Request Payload 和 Form Data 的区别

概述 我正在开发的项目前端和后端是完全独立的，通过配置 webpack 的 proxy 将前端请求跨域代理到后台服务。昨天发现，我前端执行 post 请求，后台 springmvc 的 @RequestMapping 接收不到对应的请求参数。开始我以为是我 proxy 配置有问题，导致 post 参数不能传到后台。然而，并不是这样… proxy 配置如下： 前端代码： java 后台代码： Request Payload VS Form Data 前端请求 我看了前端发起的请求，请求正文并不是我熟悉的 Form Data，而是 Request Payload。如图注意下面两个请求的 Content-Type 的区别。 Request Payload 请求 Form Data 请求 了解这两个的区别之前，我们先回顾下 HTTP 请求报文格式： Request Payload 大概格式如下，请求头部的 Content-Type: application/json，并且请求正文是一个 json 格式的字符串 Form Data 大概格式如下，请求头部的 Content-Type: application/x-www-form-urlencoded，并且请求正文是类似 get 请求 url 的请求参数 后台处理 对于 Request Payload 请求， 必须加 @RequestBody 才能将请求正文解析到对应的 bean 中，且只能通过 request.getReader() 来获取请求正文内容 对于 Form Data 请求，无需任何注解，springmvc 会自动使用 MessageConverter 将请求参数解析到对应的 bean，且通过 request.getParameter(…) 能获取请求参数   解决方案 综上，我在前端选择使用 Form Data 的方式来发起请求，使用 qs 库将 json 对象转化为字符串 (如 {name:’dahuang',age: 11} 转化为 name=dahuang&age=11)。 之前我以为 axios 会自动根据你的请求正文格式来选择发起 Form Data 还是 Request Payload 请求，但是执行 delete 操作时，如图的 Content-Type 却是 text/plain […]

龙生   03 Mar 2020
View Details

axios同步请求

一般使用axios进行数据请求就是要使用异步请求，因为项目需求，需要同步请求，所以async+await了解一下: async用于声明一个函数是异步的，await用于声明在一个异步函数中等待语句执行完毕。也就是说await只能在async函数中使用 基本用法就是这样的：

1
2
3
4
5
methods: {
    async funA(){
        var res =  await axios.post('') //这里的res就是axios请求回来的结果
    }
}

  我这边是用在项目里的 common.js

1
2
3
async addImg(file, config) {
    return await axios.post(path.addImage, file, config);
  }

  vue页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
methods:{
async upload() {
      var self = this;
      var formData;
      for (let i = 0; i < this.imgList.length; i++) {
        const img = this.imgList[i];
        formData = new FormData();
        formData.append("file", img);
        formData.append("type", "goods_grade");
        console.log(formData.getAll("file"));
        await this.$api.common
          .addImg(formData, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.uploadSuccess = true;
              this.childrenImgs.push(res.data.result);
              this.$emit("change", this.childrenImgs);
            } else {
              this.$message({
                type: "warning",
                message: res.data.message
              });
            }
          });
      }
    }
}

  注意事项 如果同步请求是封装在其他函数中，那么每一个函数都需要做成异步函数。如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
methods: {
  fun1: async function () {
    await axios.get('url)
  },
  fun2: async function () {
    ...
    await this.fun1()
    ...
  },
  fun3: async function () {
    ...
    await this.fun2()
    ...
  },
}

  from:https://blog.csdn.net/liuy_1314/article/details/98483792

龙生   03 Mar 2020
View Details

vue获取URL中的参数

1   获取?后面的参数 http://192.168.1.105:8080/#/idInput?username=%22%E5%BC%A0%E4%B8%89%22 获取参数方法     let id = this.$route.query.username 2 获取不带?的URL中的参数 http://192.168.1.12:8080/#/home/newsinfo/234 在路由中配置路由 { path: '/home/newsinfo/:id', component: Newsinfo } .vue页面设置 <template> <router-link :to="'/home/newsinfo/' + item.id"> </template> 获取参数方法    let id = this.$route.params.id ———————————————— 版权声明：本文为CSDN博主「woaizhuzhuxia521521」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/woaizhuzhuxia521521/article/details/83619520

龙生   02 Mar 2020
View Details

js实现webSocket客户端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
var ws = new WebSocket("ws://localhost:8080/msg");
//readyState属性返回实例对象的当前状态，共有四种。
//CONNECTING：值为0，表示正在连接。
//OPEN：值为1，表示连接成功，可以通信了。
//CLOSING：值为2，表示连接正在关闭。
//CLOSED：值为3，表示连接已经关闭，或者打开连接失败
//例如：if (ws.readyState == WebSocket.CONNECTING) { }
//【用于指定连接成功后的回调函数】
ws.onopen = function (evt) {
    console.log("Connection open ...");
    ws.send("Hello WebSockets!");
};
//ws.addEventListener('open', function (event) {
//    ws.send('Hello Server!');
//};
//【用于指定收到服务器数据后的回调函数】
//【服务器数据有可能是文本，也有可能是二进制数据，需要判断】
ws.onmessage = function (event) {
        if (typeof event.data === String) {
            console.log("Received data string");
        }
        if (event.data instanceof ArrayBuffer) {
            var buffer = event.data;
            console.log("Received arraybuffer");
        }
    console.log("Received Message: " + evt.data);
    ws.close();
};
//[【于指定连接关闭后的回调函数。】
ws.onclose = function (evt) {
    console.log("Connection closed.");
};
//发送文本
ws.send("Hello WebSockets!");
//发送Blob数据
var file = document
    .querySelector('input[type="file"]')
    .files[0];
ws.send(file);
//发送ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
    binary[i] = img.data[i];
}
ws.send(binary.buffer);
//webSocket.bufferedAmount
//bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束
var data = new ArrayBuffer(10000000);
socket.send(data);
if (socket.bufferedAmount === 0) {
    // 发送完毕
} else {
    // 发送还没结束
}
//webSocket.onerror 用于指定报错时的回调函数
ws.onerror = function (event) {
};
es.addEventListener("error", function (event) {
});

  from:https://www.cnblogs.com/liuqiyun/p/9984679.html

龙生   01 Mar 2020
View Details

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。 HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。 当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。 以下 API 用于创建 WebSocket 对象。

1
var Socket = new WebSocket(url, [protocol] );

  以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。 WebSocket 属性 以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象： 属性 描述 Socket.readyState 只读属性 readyState 表示连接状态，可以是以下值： 0 – 表示连接尚未建立。 1 – 表示连接已建立，可以进行通信。 2 – 表示连接正在进行关闭。 3 – 表示连接已经关闭或者连接不能打开。 Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 WebSocket 事件 以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象： 事件 事件处理程序 描述 open Socket.onopen 连接建立时触发 […]

龙生   01 Mar 2020
View Details

Module not found: Error: Can’t resolve 'XXX' in 'XXXX'

故障 控制台运行webpack/npm时出现 Module not found: Error: Can’t resolve 'XXX' in 'XXXX' 1 解决方案 npm i XXX --save 1 重新运行即可 如果提示ERROR 尝试执行 npm uninstall XXX npm i XXX --save ———————————————— 版权声明：本文为CSDN博主「YooHoeh」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u011215669/article/details/81231552

龙生   01 Mar 2020
View Details

ES6基本语法入门

一、用let代替var声明变量 ES5中，我们可以在代码中任意位置声明变量，甚至可以重写已经声明的变量，ES6引入了一个let关键字，它是新的var。

1
2
3
let language = 'javascript';
let language = 'zj'; //此处会报错
console.log(language);

因为同一作用域中let已经声明过了，所以再次声明会报错   二、常量 ES6还引入了const关键字，和let用法一样，唯一的区别就是，const变量是只读的   三、模板字符串拼接 用反引号拼接字符串

1
2
3
4
5
let language = 'javascript';
console.log(language);
 
let lan = `此处写字符串 ${language}`;
console.log(lan) //此处写字符串 javascript

只要把变量写在${}里面就好了；模板字符串也可以识别空格，可可以用于多行的字符串，再也不用写\n了。   四、箭头函数

1
2
3
4
5
let circle = (x) => {
const PI = 3.14;
let area = PI * r * r;
return area;
}

可以省略掉关键字function，如果函数只有一条语句，可以连关键字都省略掉

1
let circle2 = (x) => 3.14 * r * r;

  五、函数参数的默认值

1
2
let sum = (x = 1, y = 2, z = 3) => x + y + z;
console.log(sum());

可以声明函数参数的默认值   六、声明展开和剩余参数 ES6展开操作符 …

1
2
3
4
5
6
7
8
9
let params = [1,2,3];
console.log(...params); //1 2 3
 
let pro = {
one:0,
two:1,
three:2,
};
console.log({...pro}); //{ one: 0, two: 1, three: 2 }

  七、数组解构

1
var [a, b] = ['x', 'y'];

以上代码和下面的代码效果是一样的 a = 'x'; b = 'y'; 数组解构也可以进行值的互换 [x, y] = [y, x];   八、使用面向对象biancheng

1
2
3
4
5
6
7
8
9
//ES5语法
function Book (title, page, isbn) {
this.title = title;
this.page = page;
this.isbn = isbn;
}
Book.prototype.printTitle = function () {
console.log(this.title);
};

1
2
3
4
5
6
7
8
9
10
11
//ES6语法
class Desk {
constructor (title, pages, isbn){
this.title = title;
this.page = page;
this.isbn = isbn;
}
printIsbn () {
console.log(this.isbn);
}
}

ES6只需要使用class关键字，声明一个有constructor函数和诸如printIsbn等其他函数的类； 我们可以用extends扩展一个类并继承它的行为

1
2
3
4
5
6
7
8
9
10
11
12
//ES6语法
class ITDesk extends Desk {
constructor (title, pages, isbn){
this.title = title;
this.page = page;
this.isbn = isbn;
}
printIsbn () {
console.log(this.isbn);
}
 
}

更多es6细节请看： http://es6.ruanyifeng.com/#docs/array   from:https://www.cnblogs.com/plBlog/p/11431429.html

龙生   25 Feb 2020
View Details

vconsole 的安装以及使用

1. 安装

1
npm install vconsole

  2. 使用 main.js

1
2
3
import Vconsole from 'vconsole'
const vConsole = new Vconsole()
Vue.use(vConsole)

运行即可看到～右下角的vconsole from:https://blog.csdn.net/luckyzhoufangbing/article/details/95978480

龙生   20 Feb 2020
View Details

vue路由传参的三种基本方式

项目中很多情况下都需要进行路由之间的传值，想过很多种方式 sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异 下面我来说下vue自带的路由传参的三种基本方式 先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

1
<div class="examine" @click="insurance(2)">查看详情</div>

  第一种方法 页面刷新数据不会丢失

1
2
3
4
5
6
7
methods：{
  insurance(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })
}

  需要对应路由配置如下：

1
2
3
4
5
{
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
   }

  可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值 另外页面获取参数如下

1
this.$route.params.id

  第二种方法 页面刷新数据会丢失 通过路由属性中的name来确定匹配的路由，通过params来传递参数。

1
2
3
4
5
6
7
8
9
methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }

  对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

1
2
3
4
5
{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

  子组件中: 这样来获取参数

1
this.$route.params.id

  第三种方法 使用path来匹配路由，然后通过query来传递参数 这种情况下 query传递的参数会显示在url后面?id=？

1
2
3
4
5
6
7
8
9
methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }

  对应路由配置：

1
2
3
4
5
{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

  对应子组件: 这样来获取参数

1
this.$route.query.id

  特别注意哦， 组件中 获取参数的时候是router 这很重要~~~ 作者：w夏了夏天 链接：https://www.jianshu.com/p/d276dcde6656 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生   17 Feb 2020
View Details
1 … 20 21 22 … 60

Copyright © 2024 Longsheng All rights reserved