前言

主要介绍了好友列表、登录界面所涉及的vue知识点！！！

好友列表

从云端API读取数据信息

• 地址 https://app165.acapp.acwing.com.cn/myspace/userlist/
• 方法：GET
• 是否验证jwt：否
• 输入参数：无
• 返回结果：返回10个用户的信息

首先，我们需要先下载jquery

npm install jquery

<script>
import ContentBase from '@/components/ContentBase.vue';
import $ from "jquery";
import { ref } from 'vue'; export default{name: "UserListView",components: {ContentBase},setup(){let users = ref([]);$.ajax({url: "https://app165.acapp.acwing.com.cn/myspace/userlist/",type: "get",success(resp){console.log(resp);}});return{users}}
}
</script>

使用jQuery的ajax方法发送一个GET请求到指定的URL（“https://app165.acapp.acwing.com.cn/myspace/userlist/”）。在请求成功时，会执行定义的success回调函数，将服务器返回的数据resp打印到控制台。
将users作为setup()函数的返回值，使其在组件中可以通过解构或者直接使用users变量来访问这个响应式数据。

<template><ContentBase><div class="card" v-for="user in users " :key="user.id"><div class="card-body"><div class="row"><div class="col-1"><img class="img-fluid" :src="user.photo" alt="头像"></div><div class="col-11"><div class="username">{{ user.username }}</div><div class="follow-count">{{ user.followerCount }}</div></div></div></div></div></ContentBase>
</template><script>
import ContentBase from '@/components/ContentBase.vue';
import $ from "jquery";
import { ref } from 'vue'; export default{name: "UserListView",components: {ContentBase},setup(){let users = ref([]);// 创建一个响应式数据users，初始为空数组$.ajax({url: "https://app165.acapp.acwing.com.cn/myspace/userlist/",type: "get",success(resp){users.value = resp;// 将从服务器获取的用户数据赋值给users}});return{users}}
}
</script><style scoped>
img{border-radius: 50%;/* 圆形头像效果 */
}
.username{font-weight: bold;/* 用户名加粗显示 */height: 50%; /* 用户名和粉丝数量各占一半高度 */
}
.follow-count{font-size: 12px;/* 粉丝数量的字体大小 */color: gray;/* 粉丝数量灰色显示 */height: 50%;/* 用户名和粉丝数量各占一半高度 */
}.card{margin-bottom: 20px;/* 卡片之间的间距 */cursor: pointer;/* 鼠标悬停时显示手型指示 */}
.card:hover{box-shadow: 2px 2px 10px lightgray;/* 鼠标悬停时的阴影效果 */transition: 500ms;/* 过渡效果，让阴影变化平滑 */
}
</style>

• ：使用Vue.js的v-for指令遍历users数组中的每个用户对象，并为每个用户生成一个卡片。:key="user.id"用于Vue的虚拟DOM算法中的元素标识，确保每个用户卡片的唯一性和高效更新。
• 图片和用户名信息：展示每个用户的头像和用户名，以及粉丝数量。
  

{path: '/userprofile/:userId',name: 'userprofile',component: UserProfileView},

path: ‘/userprofile/:userId’：定义了一个路由路径，其中:userId是动态路径参数，表示这个路由可以匹配类似 /userprofile/123 这样的URL，其中 123 是实际的用户ID。动态路径参数可以通过 $route.params.userId 在组件内部访问。

<router-link class="nav-link" :to="{name: 'userprofile', params: {userId: 2}}">用户动态</router-link>import { useRoute } from 'vue-router';<!--setup函数内部-->const router = useRoute();const userId = router.params.userId;

• :to=“{name: ‘userprofile’, params: {userId: 2}}”：:to 是 Vue Router 的一个 prop，用来指定导航的目标路由。在这里，它指向名为 ‘userprofile’ 的路由，并且传递了一个动态参数 userId: 2。这意味着当用户点击这个链接时，会导航到 /userprofile/2 这个路径，其中 2 是用户的ID。
• useRoute 是 Vue Router 提供的一个钩子函数，用于在组件内部获取当前路由的信息。
• const router = useRoute();：调用 useRoute() 后返回的 router 对象包含了当前路由的各种信息，包括 params 对象，其中包含了动态路由参数。
• const userId = router.params.userId;：这里通过 router.params.userId 获取到了路由中动态参数 userId 的值。在这个例子中，如果当前路径是 /userprofile/2，则 userId 的值将是 2。

登录

<template><ContentBase><div class="row justify-content-md-center"><div class="col-3"><form @submit.prevent="login"><div class="mb-3"><label for="username" class="form-label">用户名</label><input v-model="username" type="text" class="form-control" id="username" ></div><div class="mb-3"><label for="password" class="form-label">密码</label><input v-model="password" type="password" class="form-control" id="password"></div><div class="error-message">{{ error_message }}</div><button type="submit" class="btn btn-primary">登录</button></form></div></div></ContentBase>
</template><script>
import ContentBase from '@/components/ContentBase.vue';
import { ref } from 'vue';export default{name: "LoginView",components: {ContentBase},setup(){let username = ref('');let password = ref('');let error_message = ref('');const login = () => {}return{username: username,password: password,error_message: error_message,login}}
}
</script><style scoped>
button{width: 100%;
}
.error-message{color: red;
}
</style>

• @submit.prevent=“login”：当表单提交时，调用 login 方法并阻止默认的表单提交行为。
• 双向绑定 v-model 用于绑定 username 和 password 到输入框的值。
• error_message 用于显示登录过程中的错误信息。
• import { ref } from ‘vue’; 引入了 Vue 3 中的 ref 函数，用于创建响应式引用。
• setup() 是 Vue 3 中的新语法，用于设置组件的响应式数据和方法。
• 在 setup() 中，使用 ref() 创建了 username、password 和 error_message 这三个响应式变量。
• login() 方法定义了登录函数的空壳，需要根据实际情况填充逻辑来处理用户提交的用户名和密码。
• return { … } 返回了组件中需要在模板中使用的数据和方法，包括 username、password、error_message 和 login。

import { createStore } from 'vuex'export default createStore({state: {user: {username: "",id:'',firstName: '',lastName: ''}},getters: {fullName(state){return state.user.firstName + state.user.lastName;}},mutations: {updateUser(state,user){state.user.username = user.username;}},actions: {updateUser(context){let resp;},},modules: {}
})

• 使用了 createStore 函数从 Vuex 中导入，并且这个函数被用来创建一个 Vuex 的 store 实例。
• state 对象包含应用的状态数据。
• 定义了一个 user 对象，包含了用户的基本信息，如 username、id、firstName 和 lastName。
• getters 是用来从 store 中的 state 中获取数据的方法。
• 定义了一个 fullName 的 getter，它会返回 firstName 和 lastName 拼接成的完整名字。
• mutations 是用来修改 store 中的 state 的方法。
• 定义了一个 updateUser 的 mutation，它接收一个 user 对象作为参数，用来更新 state.user.username。
• actions 类似于 mutations，不同之处在于它提交的是 mutation，而不是直接变更 state。
• updateUser action 通常用来处理异步操作，例如调用 API 后再提交 mutation。
• modules 可以用来将 store 分割成模块，目前未定义任何模块。

Vuex store 实例包含了一个简单的 user 对象作为应用的状态，以及对应的 getters、mutations 和 actions。可以用来管理用户信息，并提供了获取完整名字和更新用户名的功能。增加更多的 state 属性、mutations 和 actions，来实现复杂的状态管理和业务逻辑。

总结

主要介绍了好友列表、登录界面所涉及的vue知识点！！！