在form第一个便签里加上 @submit 属性，后面跟上执行的函数，
例如：

<form @submit="login">
    <div class="mb-3">
      <label for="username" class="form-label">Username</label>
      <input v-model="username" type="text" class="form-control" id="username">
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input v-model="password" type="password" class="form-control" id="password">
    </div>
    <div class="error-message">{{ errorMessage }}</div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

如果需要禁用掉默认事件可以用 @submit.prevent 例如：

<form @submit.prevent="login">
    <div class="mb-3">
      <label for="username" class="form-label">Username</label>
      <input v-model="username" type="text" class="form-control" id="username">
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input v-model="password" type="password" class="form-control" id="password">
    </div>
    <div class="error-message">{{ errorMessage }}</div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

url : https://www.luogu.com.cn/problem/P2694

tag：
模拟

思路：
为了可以接到所有的金币，所以我们可以采取一个贪心的策略，每次都先去接高度距离自己最近的一个金币，之后判断在这个过程中是否存在接不到的情况，如果有就说明接不到所有的金币，否则就是可以接到所有的金币。
为了采取贪心的策略，我们需要对所有的金币按照高度排序。然后需要维护一个全局的掉落高度 ey 和自己的位置 fx ，之后按照高度遍历每一个金币，判断，当我走到这个金币的时候金币到我的高度，如果大于等于0则说明可以接到，否则接不到。如果可以接到，则更新一下ey和fx。
关于如何排序，可以利用pair的特性，即先按照first排序如果一样再按照second排序，来排。所以我们可以用pair来存每一个金币的位置，且将高度放到first。
关于如何判断，因为题目有给一个速度都是1，所以移动的距离（用绝对值表示）就是这一段时间，即从原来我的位置到要接的那个金币下面的时间，金币下降的高度。所以先让 ey += abs(fx - dp[i].second),之后再判断 dp[i].first - ey 的大小。如果大于0就可以接到，小于零就break掉。
当大于0时，为了可以接到，所以必须让金币的高度为0，因此就还要等一段时间，这段时间fx不会更新，但是ey需要再加上 dp[i].first - ey, 表示在等待的过程中全局的下降距离增加的距离。
ps：如果速度不为1可能反而会好理解一点。

代码：

#include <iostream>  
#include <algorithm>  
using namespace std;  
typedef pair<int, int> PII;  
PII dp[52];  
int main()  
{  
    int g;  
    cin >> g;  
    while(g--)  
    {  
        int n;  
        bool flag = true;  
        cin >> n;  
        int fx = 0, ey = 0;  
        for (int i = 0; i < n; i ++)  
        {  
            cin >> dp[i].second >> dp[i].first;  
        }  
        sort(dp, dp + n);  
        for (int i = 0; i < n; i ++)  
        {  
            ey += abs(fx - dp[i].second);  
            if (dp[i].first - ey >= 0)  
            {  
                ey += dp[i].first - ey;  
                fx = dp[i].second;  
            }  
            else  
            {  
                flag = false;  
                cout << "Notabletocatch\n";  
                break;  
            }  
        }  
        if (flag) cout << "Abletocatch\n";  
    }  
    return 0;  
}

今天是先装了lnmp环境，然后把主页还有博客放进去，博客还有一些插件没有搬过来，到时候般一下。
之后大概就是一个资料站还有一个网盘这两个搬完之后，大概网站的部分就好了。倒是应该还需要将一些其他的服务一起般过来就ok了。
道阻且长啊。
不是很想重新写分类，归档和标签的模板就去找了一个主题，真别说，还挺好看的，哈哈😄。
主题： https://github.com/zgq354/typecho-theme-next?tab=readme-ov-file

安装

npm i jquery

引入

import $ from 'jquery';

使用

$.ajax({  
    url: url,  
    type: "xxx",  
    data: {  
    },  
    dataType: "json",  
    success: function (resp) {  
    },  
});

注： xxx 填方法类型，比如 get，post，delete

其中的 success: function (resp) 可以直接写成 success(resp) 比如：

$.ajax({
  url: 'url',
  type: 'get', 
  success(resp) {
    console.log(resp);
  }
})

需要验证 jwt 的get方法示例：

$.ajax({
    url: "xxx",
    type: "get",
    data: {
        user_id: access_obj.user_id,
    },
    headers: {
        'Authorization': "Bearer " + access,
    },
    success(resp) {
        console.log(resp);
    }
})

headers: {
    'Authorization': "Bearer " + access,
},

添加了一个headers属性，里面需要加一个 Authorization 属性，表示授权，access就是访问令牌jwt。其中 "Bearer" 看具体的api可能会有不同的定义。

使用一个包 jwt-decode
安装：

npm i jwt-decode

引入：

import { jwtDecode } from 'jwt-decode';

使用：

const access_obj = jwtDecode(access);

返回的一个对象，可以打印出来看下属性。