winney

It is never too old to learn.

0%
winney

发表于 更新于 分类于

云服务器数据库

  1. 进入mongo

    1
    mongo

  2. 查看已有数据库

    1
    2
    3
    4
    5
    6
    > show dbs
    admin      0.078GB
    local      0.078GB
    myFirstDB  0.078GB
    shopping   0.078GB
    test       0.078GB

  3. 查看当前数据库

    1
    2
    > db
    test

  4. 查看当前数据库的所有集合

    1
    2
    3
    > show collections
    system.indexes
    users

  5. 查找某个集合的所有数据

    1
    2
    3
    4
    > db.users.find()
    { "_id" : ObjectId("64255dec03b14a5ae59ad213"), "name" : "zhangsan", "age" : 20 }
    { "_id" : ObjectId("642650ee5d48a1118feb04d1"), "name" : "张三AAAAAA", "age" : 18, "sex" : "男", "__v" : 0 }
    { "_id" : ObjectId("6426aa7de101e51497b40037"), "name" : "张三BBBBBB", "age" : 26, "sex" : "女", "__v" : 0 }

  6. 创建数据库

    1
    2
    3
    4
    > use wedding
    switched to db wedding
    > db
    wedding

  7. 创建集合

    1
    2
    > db.createCollection('blessing')
    { "ok" : 1 }

  8. 向集合中插入文档

    1
    2
    > db.blessing.insert({"name":"张三", "bless": "快乐快乐快乐快乐"})
    WriteResult({ "nInserted" : 1 })

  9. 查看集合中插入的文档：

    1
    2
    > db.blessing.find()
    { "_id" : ObjectId("64dc9dcfc7acd67531cafb17"), "name" : "张三", "bless" : "快乐快乐快乐快乐" }

express接口搭建

接口所在目录：/usr/local/src/webCode/wx

接口文件所在位置：/usr/local/src/webCode/wx/server/wedding/blessing.js

node命令使用之前
1
nvm  use 16.13.0

运行接口

1
node api.js

解决跨域问题

Access to XMLHttpRequest at 'https://www.winney07.cn:8080/wedding/blessing/getBlessingList' from origin 'http://192.168.1.15:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

使用的是https协议，在微信开发者中，请求https://www.winney07.cn:8080/wedding/blessing/getBlessingList接口，是可以得到数据的。

解决方法：

  1. 服务端——接口响应前加上
1
2
3
4
res.header("Access-Control-Allow-Origin", "*");              	// 允许任意外源访问
res.header("Access-Control-Allow-Headers", "Content-Type");		// 自定义请求首部字段
res.header("Access-Control-Allow-Methods", "*");    		 	// 允许所有请求方法
res.header("Content-Type", "application/json;charset=utf-8");	// 设置数据返回类型为json，字符集为utf8
  1. 前端——使用Fetch请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fetch("https://www.winney07.cn:8080/wedding/blessing/getBlessingList",{
   method:'GET'
}).then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json(); // 解析响应数据为 JSON 格式
})
.then(data => {
    console.log('Response data:', data);
    // 在这里处理获取到的响应数据
})
.catch(error => {
    console.error('Fetch error:', error);
});

fetch 规范主要在三个方面与 jQuery.ajax() 不同：

  • 从 fetch() 返回的 Promise 不会因 HTTP 的错误状态而被拒绝，即使响应是 HTTP 404 或 500。相反，它将正常兑现（ok 状态会被设置为 false），并且只有在网络故障或者有任何阻止请求完成时，才拒绝。

Fetch API

接口一直保持运行状态

要保持云服务器上的 Express 接口一直运行，使其在服务器启动后保持运行状态，而不需要手动运行 node api.js。

使用进程管理工具

在服务器上安装 pm2：

1
npm install -g pm2

然后，在项目文件夹中运行：

1
pm2 start api.js

发表于 更新于 分类于

URL 结构：URL 由多个部分组成，包括协议（如 http 或 https）、主机名（如 www.example.com）、端口号（可选，默认为 80 或 443）、路径（如 /path/to/page）、查询字符串（如 ?id=123&name=John）以及哈希片段（如 #section2）。

window.location.hash

通过 window.location.hash 属性来访问当前 URL 的哈希片段。这个属性返回包括 # 符号的哈希部分，例如 #section2。

获取hash片段中的参数的方法

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
function getHashParams() {
    const hash = window.location.hash.substr(1); // 去掉开头的 #
    const params = {};

    if (hash) {
        const parts = hash.split('?'); // 以 ? 分割
        const path = parts[0]; // 获取路径部分
        params.path = path; // 存储路径

        if (parts.length > 1) {
            const queryString = parts[1]; // 获取查询参数部分
            const paramPairs = queryString.split('&');

            paramPairs.forEach(pair => {
                const [key, value] = pair.split('=');
                params[key] = decodeURIComponent(value || ''); // 解码参数值
            });
        }
    }

    return params;
}

const params = getHashParams();
console.log(window.location.hash); //URL 中的哈希链接
console.log(params.path); // 输出路径
console.log(params.id); // 输出 id 参数的值
console.log(params.name); // 输出 name 参数的值

例子

  1. 链接1：

    1
    http://127.0.0.1:5500/hash.html#?id=2&name=winney

    输出结果：

    1
    2
    3
    4
    #?id=2&name=winney

    2
    winney

  2. 链接2：

    1
    http://127.0.0.1:5500/hash.html#/?id=2&name=winney

    输出结果：

    1
    2
    3
    4
    #/?id=2&name=winney
    /
    2
    winney

  3. 链接3：

    1
    http://127.0.0.1:5500/hash.html#/test/text.html?id=2&name=winney

    输出结果：

    1
    2
    3
    4
    #/test/text.html?id=2&name=winney
    /test/text.html
    2
    winney

注意：查询参数前需要加上?号

getHashParams()方法适合以上3种情况的hash链接获取参数

如果不使用params.id这种方法获取参数对应的值，也可以使用解构赋值获取需要的参数：

1
const { id, name } = params;

根据参数名获取对应的值

getHashParams()方法是一次性返回全部参数。如果想通过传参数名来获取参数对应的值，可以给getHashParams()方法添加参数

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
/*
** @param paramName{string}    // 参数名
*/
function getHashParams(paramName) {
    const hash = window.location.hash.substr(1); // 去掉开头的 #
    const params = {};

    if (hash) {
        const parts = hash.split('?'); // 以 ? 分割
        const path = parts[0]; // 获取路径部分
        params.path = path; // 存储路径

        if (parts.length > 1) {
            const queryString = parts[1]; // 获取查询参数部分
            const paramPairs = queryString.split('&');

            paramPairs.forEach(pair => {
                const [key, value] = pair.split('=');
                params[key] = decodeURIComponent(value || ''); // 解码参数值
            });
        }
    }

    // 如果提供了参数名称，返回特定参数的值；否则返回所有参数
    if (paramName) {
        return params[paramName] || null; // 返回特定参数的值或 null（如果参数不存在）
    } else {
        return params;
    }
}

const id = getHashParams('id');
console.log(id); // 输出 id 参数的值
var params_all = getHashParams();
console.log(params_all); // 输出所有参数
const age = getHashParams('age');
console.log(age); // 输出 age 参数的值

链接：

1
http://127.0.0.1:5500/hash.html#/test/text.html?id=2&name=winney

结果：

1
2
3
2
{path: '/test/text.html', id: '2', name: 'winney'}
null