vue3专栏项目 -- 四、前后端结合(上)

一、前后端分离是什么

前面我们一直在和静态数据打交道,虽然流程可以跑个半通,但是静态数据还是给我们造成了诸多不便,现在我们是时候用上后端了。

现在的应用开发模式,自从SPA出现以后,前端和后端可以平行的进行对应的工作,然后再进行接口的联调和整合,这种开发方式就是前后端分离开发。

二、什么是RESTful API

HTTP动词:

· GET(select):从服务器取出资源(一项或多项)

· POST (create):在服务器新建一个资源

· PUT (update):在服务器更新资源

· PATCH (update):在服务器更新资源

· DELETE(delete):从服务器删除资源

三、接口文档

1、接口文档需要包括的点

· endpoints:具体路径

· 使用什么样的method?

· 发送请求的具体参数

· 请求返回的数据格式

2、swagger 的出现

文档规范,我们这个项目看 api.vikingship.xyz 就可以看到这个专栏项目的swagger

有了这个swagger文档,我们就可以很方便的在界面中了解和把玩现在所有的API了,它给前后端工程师都带来了很多的便利

接下来我们把这些写好的后端API在项目中使用,在应用中展示这些数据

四、axios的基本用法

安装axios:npm install axios --save

安装完毕之后我们就可以使用了,如下尝试,注意后端接口API:apis.imooc.com/api/并且添加上icode这个参数,如下已成功返回数据,说明我们的接口已经跑通啦

前面 http://apis.imooc.com/api 可以避免重复,如下,axios给我们提供了axios.default.baseUrl

后面这个icode我们也可以如下,axios提供了Interceptors,称为拦截器,我们来看看怎么用

那会不会影响我们其他参数的添加呢,如下,发现不会影响

上面是测试,最终我们main.ts中如下

五、使用vuex action 发送异步请求

之前我们专栏列表逻辑是从testData中读数据然后展示在界面上,testData是我们自己造的一些数据。现在有了后端接口,我们就多了一步发送请求,获取数据,最后展示页面的过程。

我们需要添加新的mutation,触发数据变化,但是文档中写了mutation有一个特殊的规则,就是mutation必须是同步函数,而axios请求是异步请求,vuex提出了一个新的概念来替换这个名字即Action,Action类似于mutation,不同点在于,Action可以提交的是mutation,而不是直接变更状态,Action可以包含任意异步操作

如下,vuex中引入axios,然后添加actions,在actions中定义一个函数,函数中axios请求专栏列表数据,请求回来后通过commit调用mutations,然后在mutations中定义一个函数,在函数中把获取回来的专栏列表数据赋值给store中的专栏列表数据属性中

然后我们在页面中调用这个actions即可,如下,在组件挂载的时候调用,通过dispatch调用action,即如下atore.dispatch(‘actions中的函数’)

如下,发现可以获取到数据了,但是图片出现了问题

是因为返回的数据中头像图片avator是对象,所以要修改类型啥的。

因为返回的数据结构和我们之前定的有出入,所以我们需要进行修改一下,如下

主要就是看接口文档中这些返回数据的类型是什么样,进行对应调整即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/12992.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【动态规划五】回文串问题

目录 leetcode题目 一、回文子串 二、最长回文子串 三、分割回文串 IV 四、分割回文串 II 五、最长回文子序列 六、让字符串成为回文串的最少插入次数 leetcode题目 一、回文子串 647. 回文子串 - 力扣(LeetCode)https://leetcode.cn/problems/…

5.15_操作符详解

1、操作符分类&#xff1a; 算术操作符 - * / % 移位操作符 << >> 位操作符 & | ^ 赋值操作符 - ...... 单目操作符 关系操作符 逻辑操作符 条件操作符 逗号表达式 下标引用、函数调用和结构成员 2、算术操作符 - * / …

将TailwindCSS默认单位rem转换为px

前言&#xff1a; 我这里需要将 默认的rem 转换为 px 原因是要使用 postcss-px-to-viewport 插件做移动端适配。 在tailwind.config.js文件中进行配置&#xff1a; 注意&#xff1a;这里 padding&#xff08;内边距&#xff09;、spacing&#xff08;外边距&#xff09;、width…

Spacy的安装与使用教程

官网安装指导教程 https://spacy.io/usage 安装指令 需要根据自己系统的cuda版本选择 nvcc -V pip install -U pip setuptools wheel pip install -U spacy[cuda12x] python -m spacy download zh_core_web_sm python -m spacy download en_core_web_sm

【Linux】系统登录,调用shell,shell配置文件,shell命令,特殊符号,shell快捷键,Linux运行级别,解决无限登录问题,修改提示符

目录 Linux系统的登录方式 以及 调用shell Linux shell 以及 shell配置文件 shell 命令 shell 特殊符号 shell 快捷键 Linux操作系统运行级别 单用户模式下解决无限登录问题 centos7修改命令行提示符 PS1 补充、centos7没有滚动条 Linux系统的登录方式 以及 调用shell…

vue3.0+antdv的admin管理系统vue-admin-beautiful推荐

前言 几年前&#xff0c;笔者自学了vue这一优秀的前端框架&#xff0c;但苦于没项目练手&#xff0c;无意间发现了vue-admin-beautiful这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台&#xff0c;实现了前端和后台的整体功能。整体方案介绍参见…

查询新加 字段不返回数据要看 有没有 AllInfoResultMap 有要再里面加字段

查询新加 字段不返回数据要看 有没有 AllInfoResultMap 有要再里面加字段

HTTP客户端手动解析响应体数据

服务端 package mainimport ("easyGo/person""encoding/json""net/http" )func main() {http.HandleFunc("/test", func(w http.ResponseWriter, r *http.Request) {p : &person.Person{Name: "jackie",Age: 30,T: pe…

操作系统-单片机进程状态问题(三态模型问题)

例题&#xff1a;在单处理机计算机系统中有1台打印机、1台扫描仪&#xff0c;系统采用先来先服务调度算法。假设系统中有进程P1、P2、P3、P4&#xff0c;其中P1为运行状态&#xff0c;P2为就绪状态&#xff0c;P3等待打印机&#xff0c;P4等待扫描仪。此时&#xff0c;若P1释放…

Java并发编程VarHandle类

Java 的 VarHandle 是在 Java 9 中引入的一种新机制&#xff0c;旨在提供对变量&#xff08;包括对象字段、数组元素和静态变量&#xff09;的可变引用和非阻塞操作。VarHandle 主要用于并发编程&#xff0c;提供了一种更灵活且性能更高的方式来进行变量访问和更新操作&#xf…

es6新语法和ajax和json

es6新语法 1.定义变量&#xff1a;let 2.定义常量&#xff1a;const <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"…

用友GRP-U8 userInfoWeb SQL注入致RCE漏洞复现 (XVE-2024-10539)

0x01 产品简介 用友GRP-U8R10行政事业内控管理软件是用友公司专注于国家电子政务事业,基于云计算技术所推出的新一代产品,是我国行政事业财务领域最专业的政府财务管理软件。 0x02 漏洞概述 用友GRP-U8R10行政事业内控管理软件 userInfoWeb接口处存在SQL注入漏洞,未授权的…

ADS使用记录之使用RFPro进行版图联合仿真-加入集总元器件

ADS使用记录之使用RFPro进行版图联合仿真-加入集总元器件 ADS使用记录之使用RFPro进行版图联合仿真中已经简单介绍了使用RFPro对版图就行仿真的方法。但是&#xff0c;如果版图中含有一些非微带的结构&#xff0c;比如说电感、电容、晶体管呢&#xff0c;在此举例解释一下。 …

leetcode61-Rotate List

题目 给你一个链表的头节点 head &#xff0c;旋转链表&#xff0c;将链表每个节点向右移动 k 个位置。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], k 2 输出&#xff1a;[4,5,1,2,3] 分析 这道题目用快慢指针即可解&#xff0c;先快指针往前走k个位置&#x…

MyBatis中关于resultType和resultMap的区别

在MyBatis中&#xff0c;resultType和resultMap都是用于处理查询结果的&#xff0c;但它们之间存在一些关键的区别。 映射方式&#xff1a; resultType&#xff1a;直接表示返回类型&#xff0c;它通常对应着Java模型对象&#xff08;如POJO&#xff09;中的实体。当查询出来的…

百度:文心大模型日均处理Tokens文本已达2490亿

今日&#xff0c;记者从百度获悉&#xff0c;文心大模型日均处理Tokens文本已达2490亿。百度表示&#xff0c;这几天&#xff0c;国内外多家厂商相继发布大模型最新进展和相关应用&#xff0c;百度很高兴地看到&#xff0c;“闭源大模型公有云”已经成为全球AI市场的主流趋势。…

Django信号与扩展:深入理解与实践

title: Django信号与扩展&#xff1a;深入理解与实践 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 后端开发 tags: Django信号松耦合观察者扩展安全性能 第一部分&#xff1a;Django信号基础 Django信号概述 一. Django信号的定义与作用 Django信…

NAT技术总结与双向NAT配置案例

NAT的转换方式&#xff1a; 1.静态转换&#xff1a;固定的一对一IP地址映射。 interface GigabitEthernet0/0/1 ip address 122.1.2.24 nat static global 122.1.2.1 inside 192.168.1.1 #在路由器出接口 公网地址 私网地址。 2.动态转换&#xff1a;Basic NAT nat address-gr…

有多少小于当前数字的数字

链接&#xff1a;https://leetcode.cn/problems/how-many-numbers-are-smaller-than-the-current-number/description/ 思路&#xff1a; 最简单的思路来说&#xff0c;就是双重for循环进行遍历&#xff0c;来判断个数&#xff0c; 优化思路&#xff0c;其中一个思路就是递推 …

day3 leetcode20 有效的括号

有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的相…