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

Category Archives: JavaScript

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

js 的forEach不支持continue解决

break—-用return false; continue --用return true; 代码如下： Object.keys(flatMenuData).forEach((key) => { if (item.routeName === this.$route.name && !rs.activeItem) { //如果开启了首页不展示左侧菜单，则屏蔽左侧菜单 if(this.inner_sideMenu.opt.notActiveIndex){ if(this.$route.name ==’index'){ return true } } } } ———————————————— 版权声明：本文为CSDN博主「CarryBest」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/carrybest/article/details/89000582

龙生   17 Feb 2020
View Details

Vue项目静态文件之图片的引用

一、前提 工程文件目录 |- mock |- node_modules |- public |- src |-- api |-- assets |-- components |-- router |-- store |-- style |-- test1.scss |-- test1_main.scss |-- utils |-- views |-- static_test |-- test1.scss |-- App.vue |-- main.js 二、背景图的引用 背景图样式直接写在element的style属性里 直接在html模板里，在dom对象的style里加背景图，不起效果，代码如下：

1
2
3
<div style="height:100px; background:url('../../assets/img/bg.png') center top no-repeat">
不起效果。。。
</div>

  背景样式class写在vue文件的style标签里 写法： background: url('图片相对当前的路径') center top no-repeat

1
2
3
4
5
6
7
8
<el-card class="box-card sudoku_item">
  <div slot="header" class="clearfix">
    <span>背景图写在css里</span>
  </div>
  <div class='testBackground'>
    起效果。。。
  </div>
</el-card>

 

1
2
3
4
5
6
<style lang="scss" scoped>
  .testBackground {
    height: 100px;
    background: url('../../assets/img/bg.png') center top no-repeat
  }
</style>

  编译后的css：

1
2
3
4
.testBackground[data-v-eb2b930e] {
    height: 100px;
    background: url(../img/bg.187d48cd.png) top no-repeat;
}

  背景样式class写在样式文件里，在vue文件里引入样式文件 样式写法：

1
background: url('图片相对当前vue文件的路径') center top no-repeat

  这个图片路径很重要，url是图片相对于当前vue文件的路径，而不是图片相对于样式文件的路径。 html写法， /views/static_test/test1.vue:

1
2
3
4
5
6
7
8
  <el-card class="box-card sudoku_item">
    <div slot="header" class="clearfix">
      <span>背景图写在style file里</span>
    </div>
    <div class='testBackground_file'>
      起效果。。。
    </div>
  </el-card>

  样式写法， /style/test1.scss：

1
2
3
4
  .testBackground_file {
    height: 100px;
    background: url('../../assets/img/bg.png') center top no-repeat
  }

  /views/static_test/test1.vue，引入样式文件写法：

1
2
3
  <style lang="scss" scoped>
  @import "../../style/test1.scss";
  </style>

  编译后：

1
2
3
4
.testBackground_file[data-v-eb2b930e] {
    height: 100px;
    background: url(../img/bg.187d48cd.png) top no-repeat;
}

  背景样式class写在样式文件里，在main.js里引入样式文件 html写法， /views/static_test/test1.vue:

1
2
3
4
5
6
7
8
  <el-card class="box-card sudoku_item">
    <div slot="header" class="clearfix">
      <span>背景图写在style file里</span>
    </div>
    <div class='testBackground_file_main'>
      起效果。。。
    </div>
  </el-card>

  样式写法, /style/test1_main.scss：

1
2
3
4
  .testBackground_file_main {
    height: 100px;
    background: url('../assets/img/bg.png') center top no-repeat
  }

  请注意，url是main.js相对于图片文件的路径。 引入样式文件方法，main.js：

1
2
// style
import './style/test1_main.scss'

[…]

龙生   14 Feb 2020
View Details
1 … 12 13 14 … 36

Copyright © 2024 Longsheng All rights reserved