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

安装

  1. npm i jquery

引入

  1. import $ from 'jquery';

使用

  1. $.ajax({
  2.    url: url,
  3.    type: "xxx",
  4.    data: {
  5.   },
  6.    dataType: "json",
  7.    success: function (resp) {
  8.   },
  9. });

注: xxx 填方法类型,比如 get,post,delete

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

  1. $.ajax({
  2. url: 'url',
  3. type: 'get',
  4. success(resp) {
  5. console.log(resp);
  6. }
  7. })

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

  1. $.ajax({
  2. url: "xxx",
  3. type: "get",
  4. data: {
  5. user_id: access_obj.user_id,
  6. },
  7. headers: {
  8. 'Authorization': "Bearer " + access,
  9. },
  10. success(resp) {
  11. console.log(resp);
  12. }
  13. })
  1. headers: {
  2. 'Authorization': "Bearer " + access,
  3. },

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

使用一个包 jwt-decode
安装:

  1. npm i jwt-decode

引入:

  1. import { jwtDecode } from 'jwt-decode';

使用:

  1. const access_obj = jwtDecode(access);

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

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

  1. setup(props) {
  2. let fullname = computed(() => props.user.firstName + ' ' + props.user.lastName);
  3. const follow = () => {
  4. console.log("follow");
  5. }
  6. const unFollow = () => {
  7. console.log("unfollow");
  8. }
  9. return {
  10. fullname,
  11. follow,
  12. unFollow,
  13. }
  14. }

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

使用样例:

  1. <button v-on:click="follow" v-if="!user.is_followed" type="button" class="btn btn-secondary btn-sm">follow</button>
  2. <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: 可以简写为 @ 例如:

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

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

  1. setup(props, context) {
  2. let fullName = computed(() => props.user.lastName + ' ' + props.user.firstName);
  3. const follow = () => {
  4. context.emit('follow');
  5. };
  6. const unfollow = () => {
  7. context.emit("unfollow");
  8. }
  9. return {
  10. fullName,
  11. follow,
  12. unfollow,
  13. }
  14. }

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

父组件中template:

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

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

  1. setup() {
  2. const user = reactive({
  3. id: 1,
  4. username: "heky",
  5. lastName: "he",
  6. firstName: "ky",
  7. followerCount: 999,
  8. is_followed: false,
  9. });
  10. const handlefollow = () => {
  11. console.log("u");
  12. };
  13. const handleunFollow = () => {
  14. console.log("u")
  15. }
  16. return {
  17. user,
  18. handlefollow,
  19. unFollow,
  20. }
  21. }

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

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

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

  1. const post_a_post = (content) => {
  2. posts.count ++;
  3. posts.posts.unshift({
  4. id: post_a_post.count,
  5. user_id: 1,
  6. content: content,
  7. })
  8. }

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

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

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

  1. export default {
  2. name: 'UserProfileView',
  3. components: {
  4. ContentBase,
  5. UserProfileInfo,
  6. UserProfilePosts
  7. },
  8. setup() {
  9. const user = reactive({
  10. id: 1,
  11. username: "heky",
  12. lastName: "he",
  13. firstName: "ky",
  14. followerCount: false,
  15. });
  16. return {
  17. user,
  18. }
  19. }
  20. }

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

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

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

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

  1. <UserProfileInfo :user="user"/>

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

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

  1. export default {
  2. name: "UserProfileInfo",
  3. props: {
  4. user: {
  5. type: Object,
  6. required: true,
  7. },
  8. }
  9. }

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

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

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

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

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

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

  1. import { computed } from 'vue';
  2. export default {
  3. name: "UserProfileInfo",
  4. props: {
  5. user: {
  6. type: Object,
  7. required: true,
  8. },
  9. },
  10. setup(props) {
  11. let fullname = computed(() => props.user.firstName + ' ' + props.user.lastName);
  12. return {
  13. fullname
  14. }
  15. }
  16. }

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

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

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

  1. <template>
  2. <textarea v-model="content" class="form-control" id="edit-post" rows="3"></textarea>
  3. </template>
  4. <script>
  5. import { ref } from 'vue';
  6. export default {
  7. name: "UserProfileWrite",
  8. setup() {
  9. let content = ref("");
  10. return {
  11. content,
  12. }
  13. }
  14. }
  15. </script>

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

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