Vue项目实战-空间论坛(2)
项目实战
实现userlist页面
获取userlist列表,可使用ajax,axios 实现
这里采用ajax实现,需要添加Jquery依赖,然后在UserListView.vue中引入
在UserListView.vue组件的入口函数中定义users变量,并引入ref
使用ajax从云端动态获取用户
并将返回结果展示,根据喜好调整css样式
注:响应式布局,比如框越大头像越大
实现访问个人页面的路由
修改路由,使个人页面带有参数
可在UserProfileView.vue中使用API----useRoute 并在导航栏组件中引入参数params:{userId: }
创建登录退出模块
从bootstrap中找到合适的登录按钮
动态获取用户名和密码,需要一个双向绑定的变量,响应式变量用ref
在入口函数中定义变量username,password,error_message并返回对象
用v-module分别把username,password与input标签双向绑定起来,因为div需要修改
注意:访问ref值的时候需要加上value
login函数,在表单标签中添加点击事件触发login函数,并返回,此时表单会刷新,原因是绑定的是在表单提交之前的事件,执行完login函数后会提交它原本的时间,可用prevent阻止掉默认事件的发生

由于各个页面之间都可能用到用户的个人信息,所以可以定义全局变量来存用户的个人信息
vue中提供一个维护全局变量的机制vuex


注:action中定义对state的各种操作,所有对state的更新方式
但是不能对state进行修改,对state的修改放在mutations执行
vue中对mutations的限制是不能执行异步操作-----从云端获取用户信息,获取后再更新state的是不能写在mutations中

modules模块的作用是把state中的对象做分割
方法:


传统登录验证方式:

js不能访问浏览器cookie
Jwt验证方式:

jwt中有一关键字user_Id

token可以在jwt网站中进行解析编码
注:get方法访问某个链接,所有参数都会放到链接中
创建user.js用于构建全局变量
login(context,data){}中参数context是传API,data为自己定义函数
在LoginView.vue中导入useStore,并调用user.js中actions中的login函数,调用此函数需要把login当做dispatch中的参数
如下:



在user.js中解析出resp
解码resp中的信息需要添加jwt-decode,并在user.js中引入,用jwt-decode导出的函数解码,从而
获取用户信息
并在登录成功后,调用getinfo接口,获取用户信息
并加上jwt验证,因为后端已经对此接口进行了授权,需要加上headers,授权方式为自定义

成功后将resp的内容更新到state中,actions中不能直接更新,所以要在mutations中更新,可在mutations中实现updateUser

在解码成功函数中调用mutations中的updateUser,调用方法如下

成功后调用 Login.view中的回调函数success,success传到了data参数中
失败则调用失败函数
由于acces每5分钟过期,因此可以每4.5分钟刷新一次令牌,可调用刷新JWT令牌的接口,并更新acces

在登录页面组件中引入router,使得成功函数路由到相关链接,并在error函数中设置error_message,每次调用登录函数的时候清空
登录成功后将用户的用户名展示在登录NarBar上:
可以在NavBar中判断一下是否登录,此外登录成功的话还可以直接跳转个人空间页面

实现退出设置
登录是获取了access,再登出的时候只要消去token即可,或者清空state中的信息即可
在登录后,退出标签中加入触发函数,并在入口函数中编写logout函数
注:只要是修改全局state就要把修改的函数定义在actions中(如果是同步的写在哪都可以,异步的话只能写在actions)
在组件中调用mutations中的API:

调用actions则用dispatch
注:store在html中引用要加$
实现查看好友动态
在UserListView中实现一个打开个人信息的函数,open_user_profile
并在点击卡片时返回
删除导航栏中的用户动态
注:vue在后台判断是否为执行逻辑,如果是则会封装成一个执行逻辑
=>

注:不加() 传的是定义,加()传的是函数调用
<template><ContentBase><div class="card" v-for="user in users" :key="user.id" @click="open_user_profile(user.id)"><div class="card-body"><div class="row"><div class="col-1"><img :src="user.photo" alt="" class="img-fluid"></div><div class="col-11"><div class="username">{{ user.username }}</div><div class="follower-count">{{ user.followerCount }}</div></div></div></div></div></ContentBase>
</template><script>import ContentBase from '@/components/ContentBase.vue';import {ref} from 'vue';import $ from 'jquery';import router from '@/router/index';import {useStore} from 'vuex';export default {name: 'UserListView',components: {ContentBase},setup(){const store=useStore();let users=ref([]);$.ajax({type: "get",url: "https://app165.acapp.acwing.com.cn/myspace/userlist/",success:function(resp) {users.value=resp;console.log(resp);}});const open_user_profile=userId=>{if(store.state.user.is_login){router.push({name:'userprofile',params:{userId:userId,}})}else{router.push({name:'login',})}}return{users,open_user_profile,}}}</script><style scoped>img{border-radius: 50%;}.username{font-weight: bold;height: 50%;}.follower-count{font-weight: 12px;color: grey;height: 50%;}.card{margin-bottom: 20px;cursor: pointer;}.card:hover{box-shadow: 2px 2px 10px black;transition: 500ms;}</style>
实现查看好友动态,需要动态从云端拉取用户信息

注:HTML中 src="user.photo"----字符串 :src="user.photo"----变量
使用API获取用户的帖子
动态计算当前用户是不是自己,不是自己的话就不展示发帖功能
点击自己页面则可发帖,在根组件中加入完整路径强制刷新(原因是判断链接是否相同时是不包含参数的)

实现动态添加/删除帖子
在UserProfileWrite组件中调用发帖的API
帖子如果先在前端更新,但是提交有bug则可能出现数据库中并没有存储帖子的情况,出现数据不一致
但是等待后端返回再刷新的话不如先刷新流畅
注意:不要忘记更新用户动态中帖子的长度posts.count=resp.length;
给postlist添加删除按钮 ,并设置只有在展示自己的页面中才能展示出来(所以当前的页面可以使用动态计算)
当前的id可以从用户动态页面(父组件中)进行传回

实现点击删除帖子的功能
绑定delete事件和delete函数
在子组件中定义delete事件


调用后端删除API,从数据库中删除帖子
restAPI

实现注册模块
可复用修改注册模块的代码,并调用注册的API
实现关注模块
相关文章:
Vue项目实战-空间论坛(2)
项目实战 实现userlist页面 获取userlist列表,可使用ajax,axios 实现 这里采用ajax实现,需要添加Jquery依赖,然后在UserListView.vue中引入 在UserListView.vue组件的入口函数中定义users变量,并引入ref 使用ajax从云端动…...
小老虎吃汉堡,认识continue和break
continue;//结束本次循环,执行下面的循环 break; //结束本次及以后的循环,执行循环下面的代码1. /*小老虎在吃汉堡,但是第三个汉堡上被挤了芥末,不能吃,跳过去又吃第四、五个*/ for (int i1;i<5;i){if (i3){contin…...
docker搭建zero-ui
确保你已经安装了Docker和Docker Compose。如果没有,请参照官方文档安装:Docker 和 Docker Compose。 使用 Docker CLI 获取 Zero-UI 镜像: 首先,你需要从Docker Hub获取Zero-UI的Docker镜像。你可以使用 docker pull 命令来下载它。 docker…...
187基于matlab的弹道目标跟踪滤波方法
基于matlab的弹道目标跟踪滤波方法,扩展卡尔曼滤波(extended Kalman filter, EKF)、转换测量卡尔曼滤波(conversion measurement Kalman filter, CMKF)跟踪滤波,得到距离、方位角、俯仰角误差结果。程序已调…...
讲给自己听的的技术---WMS
标题一 点题 为什么我会说,这是说给自己听的了?做项目有三个月了,外加之前三个月的自学,自我感觉对WMS系统有了一点了解,今天三月九号晚上九点二十,就让我自己和自己说说吧。 标题二 WMS的职责是什么…...
在Java中,请详细讲解并发、多线程、异步的区别和联系
在Java中,请详细讲解并发、多线程、异步的区别和联系 并发、多线程、异步是Java编程中与并行处理相关的三个重要概念,它们之间既有区别也有联系。 并发(Concurrency): 并发是指在同一时间段内,多个任务或…...
网络安全及信息安全常识
网络安全及信息安全常识 闻知:西安之地,借软件正版化,诈骗违法犯罪多有。本人自2008年10月,以劳动合同入职软件公司后,知至今日,普通百姓,电脑知识匮乏。因此,当此时,有前…...
(十五)【Jmeter】取样器(Sampler)之HTTP请求
简述 操作路径如下: HTTP请求 (HTTP Sampler): 作用:模拟发送HTTP请求并获取响应。配置:设置URL、请求方法、请求参数等参数。使用场景:测试Web应用程序的HTTP接口性能。优点:支持多种HTTP方法和请求参数,适用于大多数Web应用程序测试。缺点:功能较为基础,对于复杂…...
YOLOv8.1.0安装
【YOLO】YOLOv8训练环境配置 python 3.8.18 cuda 11.3.1 cudnn 8.2.1 pytorch 1.12.1-gpu版 - 知乎 (zhihu.com) 一、Anaconda 默认装好了可用的Anaconda,安装教程见Win10系统anaconda安装 - 知乎 (zhihu.com) 二、在虚拟环境下用conda安装 1.创建虚拟环境 …...
Linux下使用MD5SUM命令详解
在Linux操作系统中,md5sum是一个非常实用的工具,用于生成和校验文件的MD5散列值。MD5是一种广泛使用的密码散列函数,可以产生一个128位(16字节)的散列值,常用来确保数据的完整性和一致性。 一、MD5SUM命令…...
蓝桥杯python常用内置函数
一、 abs() #返回数字的绝对值 例: 二、 all() #判断给定的可迭代参数中的所有元素是否都为True,若是则返回True,反之返回False 例: 三、 any() #判断给定的可迭代参数是否都为False,全为False则返回False&am…...
设计模式 工厂模式
工厂模式,最重要的是反射。 反射:Class类 java的注释是这样写的: Class没有公共构造函数。相反,Class对象是在类加载时由Java虚拟机自动构造的,并通过调用类加载器中的defineClass方法来实现。...
【C++进阶】哈希的应用 --- 布隆过滤器
👦个人主页:Weraphael ✍🏻作者简介:目前学习C和算法 ✈️专栏:C航路 🐋 希望大家多多支持,咱一起进步!😁 如果文章对你有帮助的话 欢迎 评论💬 点赞…...
Linux——自写一个简易的shell
目录 前言 一、打印提示信息 二、分割字符串 三、替换程序 前言 之前学习了很多进程相关的知识,包括环境变量、进程的创建与退出、进程等待、进程替换。现在可以用所学的作一个小总结,手撕一个shell解释器,大致的思路是先通过环境变量获…...
【操作系统学习笔记】处理器管理1.3
【操作系统学习笔记】处理器管理1.3 参考书籍: 王道考研 视频地址: Bilibili 进程控制 进程控制的主要功能是对系统中的所有进程实施有效的管理,它具有创建新进程、撤销已有进程、实现进程状态转换的功能。简而言之,进程控制就是要实现进程的状态转换…...
AndroidUI--setContentView
我们的Activity通常继承自Activity或者AppCompatActivity,这两个setContentView流程是不同的 一、继承自Activity 1、Activity.setContentView Activity中setContentVIew调用了getWindow().setContentView(view, params); getWindow返回的是mWindow,mWi…...
编程笔记 Golang基础 047 mysql数据库连接与操作
编程笔记 Golang基础 047 mysql数据库连接与操作 一、连接与操作1. 安装MySQL驱动2. 导入驱动包3. 连接数据库4. 执行SQL查询和操作5. 使用连接池6. 处理事务 二、连接字符串三、应用示例四、比较 MySQL凭借其开源、高效、稳定、灵活、安全以及广泛的社区支持等诸多优势&#x…...
.jsonl 格式文件的解释
根据 CHATGPT .jsonl 文件格式是一种文本文件格式,通常用于存储每行一个JSON对象的数据。.jsonl 文件的每一行都是一个独立的JSON对象,这些对象之间没有任何分隔符。 以下是一个示例.jsonl文件的内容: {"name": "John"…...
nodejs web服务器 -- 搭建开发环境
一、配置目录结构 1、使用npm生成package.json,我创建了一个nodejs_network 文件夹,cd到这个文件夹下,执行: npm init -y 其中-y的含义是yes的意思,在init的时候省去了敲回车的步骤,如此就生成了默认的pac…...
laravel-admin 头部添加操作
新建html 样式及js namespace App\Admin\Extensions\Nav;class Links {public function __toString(){return <<<HTML<li><a href"" οnclick"js_method();return false;"><i class"fa fa-floppy-o"></i><s…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中,有几种方法可以执行Shell指令: 1. 使用system()函数 这是最简单的方法,包含在stdlib.h头文件中: #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
