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

Monthly Archives: January 2021

Vue 魔法师 —— 将 API “类化”

前言 【类】和【接口】是 JavaScript 未来的方向，我们的 API 调用也将如此，朝着这个方向和业务模块同步分类、同步升级。本文讲的正是 —— Vue 魔法师，如何将 API “类化”？ 万物皆模块，万物可归类。闲言少叙，直接正题。 分类 API 环境： Vue2+ 或 Vue3+ 咱这里直接 VueCLI 迅速快捷构建

1
vue create vue-api-module

得到如下目录

1
2
3
4
5
--src
----store
------index.js
----App.vue
----main.js

  然后新建文件 api.js 如下，

1
2
3
4
5
6
7
--src
----services
------api.js
----store
------index.js
----App.vue
----main.js

  基础类 API 我们先创建一个基础类如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class BaseApiService {
  baseUrl = "https://jsonplaceholder.typicode.com";
  resource;
 
  constructor(resource) {
    if (!resource) throw new Error("Resource is not provided");
    this.resource = resource;
  }
 
  getUrl(id = "") {
    return `${this.baseUrl}/${this.resource}/${id}`;
  }
 
  handleErrors(err) {
    // 处理错误：
    console.log({ message: "Errors is handled here", err });
  }
}

  baseUrl：设置请求根路径； resource：来源； getUrl：获取链接函数，包含 baseUrl、resource、id； handleErrors：处理错误函数； 只读类 API 然后，我们再创建一个子类：包含 fetch、get 只读方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class ReadOnlyApiService extends BaseApiService {
  constructor(resource) {
    super(resource);
  }
  async fetch(config = {}) {
    try {
      const response = await fetch(this.getUrl(), config);
      return await response.json();
    } catch (err) {
      this.handleErrors(err);
    }
  }
  async get(id) {
    try {
      if (!id) throw Error("Id 不合法");
      const response = await fetch(this.getUrl(id));
      return await response.json();
    } catch (err) {
      this.handleErrors(err);
    }
  }
}

  fetch：获取数据； get：通过 id 获取数据； 写入类 API 接着，我们再创建一个包含可读写方法的子类：post、put、delete

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
class ModelApiService extends ReadOnlyApiService {
  constructor(resource) {
    super(resource);
  }
  async post(data = {}) {
    try {
      const response = await fetch(this.getUrl(), {
        method: "POST",
        body: JSON.stringify(data)
      });
      const { id } = response.json();
      return id;
    } catch (err) {
      this.handleErrors(err);
    }
  }
  async put(id, data = {}) {
    if (!id) throw Error("Id 不合法");
    try {
      const response = await fetch(this.getUrl(id), {
        method: "PUT",
        body: JSON.stringify(data)
      });
      const { id: responseId } = response.json();
      return responseId;
    } catch (err) {
      this.handleErrors(err);
    }
  }
  async delete(id) {
    if (!id) throw Error("Id 不合法");
    try {
      await fetch(this.getUrl(id), {
        method: "DELETE"
      });
      return true;
    } catch (err) {
      this.handleErrors(err);
    }
  }
}

  post：创建数据； put：更新数据； delete：删除数据； 继承 让我们看看两个简单的继承示例：

1
2
3
4
5
class UsersApiService extends ReadOnlyApiService {
  constructor() {
    super("users");
  }
}

 

1
2
3
4
5
class PostsApiService extends ModelApiService {
  constructor() {
    super("posts");
  }
}

  【UsersApiService 类】继承了只读类 API —— ReadOnlyApiService，可以使用 fetch、get 两种方法。而 【PostsApiService 类】继承了读写类 API —— ModelApiService，可以使用 fetch、get、post、put、delete 五种方法。 我们也可以根据业务来写继承 API 类:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class AlbumsApiService extends ModelApiService {
  constructor() {
    super("albums");
  }
  async uploadImage() {
    /*
    这里可以写你的上传图片逻辑
     */
    console.log({ message: "图片上传成功！" });
    return true;
  }
 
  async triggerError() {
    try {
      throw Error(" API 模块调用错误！");
    } catch (err) {
      this.handleErrors(err);
    }
  }
}

  导出 我们在 api.js 导出这些 […]

龙生   22 Jan 2021
View Details

RGB颜色参考

实色效果 英文名称 R.G.B 16色 实色效果 英文名称 R.G.B 16色 Snow 255 250 250 #FFFAFA PaleTurquoise1 187 255 255 #BBFFFF GhostWhite 248 248 255 #F8F8FF PaleTurquoise2 174 238 238 #AEEEEE WhiteSmoke 245 245 245 #F5F5F5 PaleTurquoise3 150 205 205 #96CDCD Gainsboro 220 220 220 #DCDCDC PaleTurquoise4 102 139 139 #668B8B FloralWhite 255 250 240 #FFFAF0 CadetBlue1 152 245 255 #98F5FF OldLace 253 245 230 #FDF5E6 CadetBlue2 142 229 238 #8EE5EE Linen 250 240 230 #FAF0E6 CadetBlue3 122 197 205 #7AC5CD AntiqueWhite 250 235 215 #FAEBD7 CadetBlue4 83 134 139 #53868B […]

龙生   21 Jan 2021
View Details

c# base64转字符串

转成 Base64 形式的 System.String:

1
2
3
4
5
    string a = "base64字符串与普通字符串互转";  
    byte[] b = System.Text.Encoding.Default.GetBytes(a);      
    //转成 Base64 形式的 System.String  
    a = Convert.ToBase64String(b);  
    Response.Write(a);

  转回到原来的 System.String:

1
2
3
    byte[] c = Convert.FromBase64String(a);  
    a = System.Text.Encoding.Default.GetString(c);  
    Response.Write(a);<br>

  from:https://www.cnblogs.com/daimaxuejia/p/12893207.html

龙生   20 Jan 2021
View Details

js实现保存文件到本地

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function fake_click(obj) {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
    );
    obj.dispatchEvent(ev);
}
 
function download(name, data) {
    var urlObject = window.URL || window.webkitURL || window;
 
    var downloadData = new Blob([data]);
 
    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(downloadData);
    save_link.download = name;
    fake_click(save_link);
}
 
//调用方法
download("save.txt","内容");

  from:https://www.cnblogs.com/frost-yen/p/10226705.html

龙生   19 Jan 2021
View Details

c# 确定dynamic类型的数据对象是否存在某个属性

1
2
3
4
5
6
public static bool IsPropertyExist(dynamic data, string propertyname)
{
    if (data is ExpandoObject)
return ((IDictionary<string, object>)data).ContainsKey(propertyname);
    return data.GetType().GetProperty(propertyname) != null;
}

  https://www.cnblogs.com/94cool/p/8135579.html

龙生   19 Jan 2021
View Details

js解析websocket二进制数据包

js解释数据包 做一个项目,服务器要给我发一个数据包,格式为,前面16位short,后32位int,后面就全是string,我用javascript怎么去把这个数据包解读出来?   用WebSocket,接收到的就是一个Blob对象.而我要给服务器返回的也是这种格式,我又怎么把我的数据封装成这样的数据包? ——解决方案——————--

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
var reader = {
  readAs: function(type,blob,cb){
var r = new FileReader();
r.onloadend = function(){
      if(typeof(cb) === 'function') {
        cb.call(r,r.result);
      }
    }
    try{
      r['readAs'+type](blob);
    }catch(e){}
  }
}
function parseBlob(blob){
  var shortVar, intVar, stringVar;
  reader.readAs('ArrayBuffer',blob.slice(0,2),function(arr){
    shortVar = (new Int16Array(arr))[0];
    console.log(shortVar);
  });
  reader.readAs('ArrayBuffer',blob.slice(2,6),function(arr){
    intVar = (new Int32Array(arr))[0];
    console.log(intVar);
  });
  reader.readAs('Text',blob.slice(6,blob.size,'text/plain;charset=UTF-8'),function(result){
    stringVar = result;
    console.log(stringVar);
  });
}
var buffer = new ArrayBuffer(6);//建立6个字节的缓冲，前两个字节是short，后四个是int
var bufferView = new Int16Array(buffer); //建立16位的视图,那么视图的长度应该是3
bufferView[0] = 32767;
bufferView[1] = 0;
bufferView[2] = 1;  
//现在buffer中的内容由低位到高位应该是
//11111111 11111110 00000000 00000000 100000000 00000000
var blob = new Blob([bufferView,"words words 文本文本文本文本"]);
//构造这个blob类型
//测试一下parseBlob函数是否正确
parseBlob(blob);
//32767
//65536
//words words 文本文本文本文本
//第一个short是32767
//第二个int，前16位为0，第17位为1，所以结果是65536
//第三个字符串，和我们构造blob的时候一样

  from:https://blog.csdn.net/woxingwosu0100/article/details/51273523/

龙生   16 Jan 2021
View Details

JS字符串与二进制的相互转化

1
2
3
4
5
//字符串转ascii码，用charCodeAt();
//ascii码转字符串，用fromCharCode();
var str = "A";
var code = str.charCodeAt();
var str2 = String.fromCharCode(code);

  十进制转二进制

1
2
3
var a = "i";
console.log(a.charCodeAt()); //105
console.log(a.charCodeAt().toString(2)); //1101001

 

1
2
3
var a = "我";
console.log(a.charCodeAt()); //25105
console.log(a.charCodeAt().toString(2)); //110001000010001

1
2
3
4
var a = "我们";
console.log(a.length); //2
var list = a.split("");
console.log(list.length); //2<br>console.log(a.charCodeAt().toString(2)); //110001000010001 100111011101100

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
//将字符串转换成二进制形式，中间用空格隔开
function strToBinary(str){
    var result = [];
    var list = str.split("");
    for(var i=0;i<list.length;i++){
        if(i != 0){
            result.push(" ");
        }
        var item = list[i];
        var binaryStr = item.charCodeAt().toString(2);
        result.push(binartStr);
    }  
    return result.join("");
}
console.log(strToBinary("我们")); //110001000010001 100111011101100
console.log(strToBinary("@%$+")); //1000000 100101 100100 101011
//将二进制字符串转换成Unicode字符串
function binaryToStr(str){
    var result = [];
    var list = str.split(" ");
    for(var i=0;i<list.length;i++){
         var item = list[i];
         var asciiCode = parseInt(item,2);
         var charValue = String.fromCharCode(asciiCode);
         result.push(charValue);
    }
    return result.join("");
}
console.log(binaryToStr("110001000010001 100111011101100")); //我们
console.log(binaryToStr("1000000 100101 100100 101011")); //@%$+

转载请注明出处：http://www.cnblogs.com/it-deepinmind/ from:https://www.cnblogs.com/it-deepinmind/p/7430025.html  

龙生   16 Jan 2021
View Details

docker从容器里面拷文件到宿主机或从宿主机拷文件到docker容器里面

1、从容器里面拷文件到宿主机？ 答：在宿主机里面执行以下命令 docker cp 容器名：要拷贝的文件在容器里面的路径       要拷贝到宿主机的相应路径 示例： 假设容器名为testtomcat,要从容器里面拷贝的文件路为：/usr/local/tomcat/webapps/test/js/test.js,  现在要将test.js从容器里面拷到宿主机的/opt路径下面，那么命令应该怎么写呢？ 答案：在宿主机上面执行命令

1
docker cp testtomcat：/usr/local/tomcat/webapps/test/js/test.js /opt

2、从宿主机拷文件到容器里面 答：在宿主机里面执行如下命令 docker cp 要拷贝的文件路径 容器名：要拷贝到容器里面对应的路径 示例：假设容器名为testtomcat,现在要将宿主机/opt/test.js文件拷贝到容器里面的/usr/local/tomcat/webapps/test/js路径下面，那么命令该怎么写呢？ 答案：在宿主机上面执行如下命令

1
docker cp /opt/test.js testtomcat：/usr/local/tomcat/webapps/test/js

3、在这里在记录一个问题，怎么看容器名称？ 执行命令：docker ps，出现如图所示，其中NAMES就是容器名了。 4.需要注意的是，不管容器有没有启动，拷贝命令都会生效。   from:https://www.cnblogs.com/areyouready/p/8973495.html

龙生   15 Jan 2021
View Details

5分钟学会MySQL-this is incompatible with sql_mode=only_full_group_by错误解决方案

 5分钟学会MySQL-  "this is incompatible with sql_mode=only_full_group_by"错误解决方案   前言： 一、原理层面 这个错误发生在mysql 5.7 版本及以上版本会出现的问题： mysql 5.7版本默认的sql配置是:sql_mode="ONLY_FULL_GROUP_BY"，这个配置严格执行了"SQL92标准"。 很多从5.6升级到5.7时，为了语法兼容，大部分都会选择调整sql_mode，使其保持跟5.6一致，为了尽量兼容程序。   二、sql层面 在sql执行时，出现该原因： 简单来说就是：输出的结果是叫target list，就是select后面跟着的字段，还有一个地方group by column，就是 group by后面跟着的字段。由于开启了ONLY_FULL_GROUP_BY的设置，所以如果一个字段没有在target list 和group by字段中同时出现，或者是聚合函数的值的话，那么这条sql查询是被mysql认为非法的，会报错误。       一、查看sql_mode的语句如下  

1
select @@GLOBAL.sql_mode;

      二、解决方案-(推荐解决方案二)   ①解决方案一：sql语句暂时性修改sql_mode

1
set @@GLOBAL.sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

  问题： 重启mysql数据库服务之后，ONLY_FULL_GROUP_BY还会出现。 ②解决方案二：完美解决方案。 需修改mysql配置文件，通过手动添加sql_mode的方式强制指定不需要ONLY_FULL_GROUP_BY属性， my.cnf位于etc文件夹下，vim下光标移到最后，添加如下：

1
sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

重启mysql服务，顺利解决。   from:https://blog.csdn.net/qq_42175986/article/details/82384160

龙生   15 Jan 2021
View Details

IIS上部署Asp.Net Core 3.1应用

前置条件 官网下载页面：https://dotnet.microsoft.com/en-us/download/dotnet/3.1 安装ASP.NET Core Runtime 3.1.31 安装 Hosting Bundle 3.1.31 执行以下命令 net stop was /y net start w3svc   发布应用     部署到IIS   1.应用程序池：选择无托管模式。我电脑是64位，选择“启用32位应用程序”为“false”。   2.网站设置 为你的网站创建windows用户，把网站目录设置对该用户全部权限。 IIS管理器选择你的网站：基本设置 -> 连接为 -> 特定用户。     参考资料： https://blog.csdn.net/weixin_33757609/article/details/93693395 https://blog.csdn.net/xulong5000/article/details/106072771 https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/publish-to-iis?view=aspnetcore-3.1&tabs=visual-studio  

龙生   15 Jan 2021
View Details
1 2 3 4 5

Copyright © 2025 Longsheng All rights reserved