前言
主要介绍了好友列表、登录界面所涉及的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知识点！！！
