今天是先装了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);

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

事件函数的编写需要在 export default{} 中的 setup() 函数中例如：

setup(props) {
    let fullname = computed(() => props.user.firstName + ' ' + props.user.lastName);

    const follow = () => {
        console.log("follow");
    }

    const unFollow = () => {
        console.log("unfollow");
    }

    return {
        fullname,
        follow,
        unFollow,
    }
}

注意，写的函数要return出去才可以使用

使用样例：

<button v-on:click="follow" v-if="!user.is_followed" type="button" class="btn btn-secondary btn-sm">follow</button>
<button v-on:click="unFollow" v-if="user.is_followed" type="button" class="btn btn-secondary btn-sm">un-follow</button>

使用 v-on:click 绑定事件函数，其中 v-on: 可以简写为 @ 例如：

<button @click="follow" v-if="!user.is_followed" type="button" class="btn btn-secondary btn-sm">follow</button>
<button @click="unFollow" v-if="user.is_followed" type="button" class="btn btn-secondary btn-sm">un-follow</button>

触发父组件的函数：
使用 context.emit() ，例如：

setup(props, context) {
    let fullName = computed(() => props.user.lastName + ' ' + props.user.firstName);

    const follow = () => {
        context.emit('follow');
    };

    const unfollow = () => {
        context.emit("unfollow");
    }

    return {
        fullName,
        follow,
        unfollow,
    }
}

和上一个 setup 相比，这里需要传一个上下文 context 然后使用 context.emit 来绑定
注意：这里的props和context是由位置决定的，不是由名字决定的，所以假如在没有用到props时，想绑定事件，也依旧要传一个props。

父组件中template：

<UserProfileInfo @follow="handlefollow" @unFollow="handleunFollow" :user="user"/>

context.emit 绑定的事件名称就是 @ 后面的名称，所以只要一一对应就行，也可以不和函数名称相同。 = 后面的就是触发的函数。这些被触发的函数同样写在 setup 中，也同样需要被return出去，例如：

setup() {
    const user = reactive({
        id: 1,
        username: "heky",
        lastName: "he",
        firstName: "ky",
        followerCount: 999,
        is_followed: false,
    });

    const handlefollow = () => {
        console.log("u");
    };

    const handleunFollow = () => {
        console.log("u")
    }

    return {
        user,
        handlefollow,
        unFollow,
    }
}

假如有传递参数，就在 context.emit() 再多传一个参数
例如：

const post_a_post = () => {
    context.emit('post_a_post', content.value);
    content.value = "";
}

而对应的触发事件需要加一个传入的形参,
例如：

const post_a_post = (content) => {
    posts.count ++;
    posts.posts.unshift({
        id: post_a_post.count,
        user_id: 1,
        content: content,
    })
}

setup(props, context)：初始化变量、函数

• ref定义变量，可以用.value属性重新赋值
• reactive定义对象，不可重新赋值，当他的值发生改变（一般是对象中的某一个属性改变）会将有使用这个对象的组件重新渲染一遍。
• props存储父组件传递过来的数据
• context.emit()：触发父组件绑定的函数

vue 中通过 setup() 函数来初始化变量。setup函数写在 export default {} 中，可以用 setup = () => {} 即箭头函数的写法，也可以直接写作 setup()
例子：

export default {
name: 'UserProfileView',
components: {
    ContentBase,
    UserProfileInfo,
    UserProfilePosts
},
setup() {
    const user = reactive({
        id: 1,
        username: "heky",
        lastName: "he",
        firstName: "ky",
        followerCount: false,
    });

    return {
        user,
    }
}
}

这个例子中定义了一个user的变量对象，里面放着5各变量，之后将要用到的变量对象 user return出去

之后可以在子组件的标签中用 v-bind: 来绑定
例如：

<UserProfileInfo v-bind:user="user"/>

v-bind: 也可以省略为 : ，例如：

<UserProfileInfo :user="user"/>

等号后面的冒号可以传入一个表达式，这里将 user 传入

之后要在组件中使用，需要将用到的组件放到 export default{} 中 props 中 props 是一个对象。
例如：

export default {
    name: "UserProfileInfo",
    props: {
        user: {
            type: Object,
            required: true,
        },
    }
}

其中user也是作为一个对象来写，有两个值，一个是类型，另外一个是是否需要。
这样写完之后就可以在 template 中用了，使用时用两个大括号括起来 {{}}
例如：

<div class="username">{{ user.username }}</div>
<div class="fans">fans: {{ user.followerCount }}</div>

如果想作为属性的值进行使用，可以在对应的属性前面加上 : ，
例如：

<img :src="user.photo" alt="" class="img-fluid" >

这里的 user.photo 是一个变量而不是当作一个字符串，作用于src这个属性，所以src前面加上一个冒号（ : 是 v-bind: 的简写）

如果需要对变量进行计算然后实现动态变化，需要在组件中设置一个新的变量，以及用到vue中的 computed 函数
例如：

import { computed } from 'vue';

export default {
    name: "UserProfileInfo",
    props: {
        user: {
            type: Object,
            required: true,
        },
    },
    setup(props) {
        let fullname = computed(() => props.user.firstName + ' ' + props.user.lastName);
        return {
            fullname
        }
    }
}

这里setup函数传入一个变量props表示当前组件的props，然后在里面定义了一个新的变量 fullname 调用 computed 函数动态计算变量的值，注意 computed 函数接收一个函数，之后也是一样将要用到的变量return出去就可以了。
在template中使用：

<div class="username">{{ fullname }}</div>

使用 v-model 属性获取html标签内的内容示例：

<template>
    <textarea v-model="content" class="form-control" id="edit-post" rows="3"></textarea>
</template>

<script>
import { ref } from 'vue';
export default {
    name: "UserProfileWrite",
    setup() {
        let content = ref("");

        return {
            content,
        }
    }
}
</script>

变量对象可以用 reactive ，单个变量可以使用 ref 。示例中使用 v-model 将textarea中的内容绑定到content这个变量中，之后要取得这个值可以用 content.value 来取。之后如果要修改这个值也可以直接对 content.value 进行赋值。

注：其实用 reactive 也是可以赋值的，不过是对对象中的属性赋值，一般如果变量是对象就用 reactive 否则可能就用 ref