当前位置: 首页 > news >正文

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列表&#xff0c;可使用ajax,axios 实现 这里采用ajax实现&#xff0c;需要添加Jquery依赖&#xff0c;然后在UserListView.vue中引入 在UserListView.vue组件的入口函数中定义users变量&#xff0c;并引入ref 使用ajax从云端动…...

小老虎吃汉堡,认识continue和break

continue;//结束本次循环&#xff0c;执行下面的循环 break; //结束本次及以后的循环&#xff0c;执行循环下面的代码1. /*小老虎在吃汉堡&#xff0c;但是第三个汉堡上被挤了芥末&#xff0c;不能吃&#xff0c;跳过去又吃第四、五个*/ for (int i1;i<5;i){if (i3){contin…...

docker搭建zero-ui

确保你已经安装了Docker和Docker Compose。如果没有&#xff0c;请参照官方文档安装&#xff1a;Docker 和 Docker Compose。 使用 Docker CLI 获取 Zero-UI 镜像: 首先&#xff0c;你需要从Docker Hub获取Zero-UI的Docker镜像。你可以使用 docker pull 命令来下载它。 docker…...

187基于matlab的弹道目标跟踪滤波方法

基于matlab的弹道目标跟踪滤波方法&#xff0c;扩展卡尔曼滤波&#xff08;extended Kalman filter, EKF&#xff09;、转换测量卡尔曼滤波&#xff08;conversion measurement Kalman filter, CMKF&#xff09;跟踪滤波&#xff0c;得到距离、方位角、俯仰角误差结果。程序已调…...

讲给自己听的的技术---WMS

标题一 点题 为什么我会说&#xff0c;这是说给自己听的了&#xff1f;做项目有三个月了&#xff0c;外加之前三个月的自学&#xff0c;自我感觉对WMS系统有了一点了解&#xff0c;今天三月九号晚上九点二十&#xff0c;就让我自己和自己说说吧。 标题二 WMS的职责是什么…...

在Java中,请详细讲解并发、多线程、异步的区别和联系

在Java中&#xff0c;请详细讲解并发、多线程、异步的区别和联系 并发、多线程、异步是Java编程中与并行处理相关的三个重要概念&#xff0c;它们之间既有区别也有联系。 并发&#xff08;Concurrency&#xff09;&#xff1a; 并发是指在同一时间段内&#xff0c;多个任务或…...

网络安全及信息安全常识

网络安全及信息安全常识 闻知&#xff1a;西安之地&#xff0c;借软件正版化&#xff0c;诈骗违法犯罪多有。本人自2008年10月&#xff0c;以劳动合同入职软件公司后&#xff0c;知至今日&#xff0c;普通百姓&#xff0c;电脑知识匮乏。因此&#xff0c;当此时&#xff0c;有前…...

(十五)【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&#xff0c;安装教程见Win10系统anaconda安装 - 知乎 (zhihu.com) 二、在虚拟环境下用conda安装 1.创建虚拟环境 …...

Linux下使用MD5SUM命令详解

在Linux操作系统中&#xff0c;md5sum是一个非常实用的工具&#xff0c;用于生成和校验文件的MD5散列值。MD5是一种广泛使用的密码散列函数&#xff0c;可以产生一个128位&#xff08;16字节&#xff09;的散列值&#xff0c;常用来确保数据的完整性和一致性。 一、MD5SUM命令…...

蓝桥杯python常用内置函数

一、 abs() #返回数字的绝对值 例&#xff1a; 二、 all() #判断给定的可迭代参数中的所有元素是否都为True&#xff0c;若是则返回True&#xff0c;反之返回False 例&#xff1a; 三、 any() #判断给定的可迭代参数是否都为False&#xff0c;全为False则返回False&am…...

设计模式 工厂模式

工厂模式&#xff0c;最重要的是反射。 反射&#xff1a;Class类 java的注释是这样写的&#xff1a; Class没有公共构造函数。相反&#xff0c;Class对象是在类加载时由Java虚拟机自动构造的&#xff0c;并通过调用类加载器中的defineClass方法来实现。...

【C++进阶】哈希的应用 --- 布隆过滤器

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…...

Linux——自写一个简易的shell

目录 前言 一、打印提示信息 二、分割字符串 三、替换程序 前言 之前学习了很多进程相关的知识&#xff0c;包括环境变量、进程的创建与退出、进程等待、进程替换。现在可以用所学的作一个小总结&#xff0c;手撕一个shell解释器&#xff0c;大致的思路是先通过环境变量获…...

【操作系统学习笔记】处理器管理1.3

【操作系统学习笔记】处理器管理1.3 参考书籍: 王道考研 视频地址: Bilibili 进程控制 进程控制的主要功能是对系统中的所有进程实施有效的管理&#xff0c;它具有创建新进程、撤销已有进程、实现进程状态转换的功能。简而言之&#xff0c;进程控制就是要实现进程的状态转换…...

AndroidUI--setContentView

我们的Activity通常继承自Activity或者AppCompatActivity&#xff0c;这两个setContentView流程是不同的 一、继承自Activity 1、Activity.setContentView Activity中setContentVIew调用了getWindow().setContentView(view, params); getWindow返回的是mWindow&#xff0c;mWi…...

编程笔记 Golang基础 047 mysql数据库连接与操作

编程笔记 Golang基础 047 mysql数据库连接与操作 一、连接与操作1. 安装MySQL驱动2. 导入驱动包3. 连接数据库4. 执行SQL查询和操作5. 使用连接池6. 处理事务 二、连接字符串三、应用示例四、比较 MySQL凭借其开源、高效、稳定、灵活、安全以及广泛的社区支持等诸多优势&#x…...

.jsonl 格式文件的解释

根据 CHATGPT .jsonl 文件格式是一种文本文件格式&#xff0c;通常用于存储每行一个JSON对象的数据。.jsonl 文件的每一行都是一个独立的JSON对象&#xff0c;这些对象之间没有任何分隔符。 以下是一个示例.jsonl文件的内容&#xff1a; {"name": "John"…...

nodejs web服务器 -- 搭建开发环境

一、配置目录结构 1、使用npm生成package.json&#xff0c;我创建了一个nodejs_network 文件夹&#xff0c;cd到这个文件夹下&#xff0c;执行&#xff1a; npm init -y 其中-y的含义是yes的意思&#xff0c;在init的时候省去了敲回车的步骤&#xff0c;如此就生成了默认的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…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...