【Web开发手礼】探索Web开发的秘密（十三）-Vue（3）好友列表、登录

---

前言

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

---