#vue# 【四】 超级详细步骤!vue项目封装网络请求接口思路及方法
#vue# 网络请求之接接口(比较详细)一. 后端接口文档的解析二. 接接口之前的准备工作(post)三. 接接口的工程化封装(拼接域名及地址)四. 几种接接口的情况(1)在本页(当前页)数据渲染(2)不同页(跳转页、仅一页跳转,类似于从首页跳转到其他页)数据渲染(3)父子组件页面之间的数据渲染(4)列表页跳转(类似于从文章列表,跳转到具体文章的详情页里)数据渲染一. 后端接口文档的解析当我们拿到
#vue# 超级详细步骤!vue项目封装网络请求接口思路及方法
一. 后端接口文档的解析
- 当我们拿到后端同事的接口以后,
要先看一下里面的参数数据,
具体每一个位置的解析如下:
二. 接接口之前的准备工作(host)
(1)host概念
-
在进行请求接口之前,我们需要先配备好host
-
Hosts:它是一个没有扩展名的系统文件,
而它的的基本作用,就是将一些我们个人常用的网址和相对应的IP地址建立一个关联“数据库” -
所以,当我们(也就是用户)在浏览器输入一个需要我们登录的网址时,
我们的计算机系统会首先自动的从Hosts文件中寻找对应的IP地址 -
如果一旦找到对应的IP地址,
我们的系统将会立即打开对应的网页,
如果没有找到,这时候系统将会把网址,
交给DNS域名解析服务器进行IP地址的解析
(2)host5大特点
- 加快域名解析
- 方便局域网用户
- 屏蔽网站
- 顺利连接系统
- 虚拟域名
(3)在哪里设置?怎么设置?
-在XP 、win7、win10系统中,
HOST文件,位于系统盘C:\Windows\System32\drivers\etc中
C:\Windows\System32\drivers\etc
如果进去没有看到Hosts文件,是因为某些系统将Host文件隐藏了
然后将同事给的域名和地址,
进行粘贴到里面就可以了
格式:
142553.36.00.10(这个是同事电脑地址) rteryryr5utuyyrty.nen.edb.cn(这个是域名)
这样就映射到同事的电脑了
访问rteryryrutuyyrty.nen.edb.cn,
即系等同于访问1436.00.10
三. 接口的工程化封装
(1)目的
-
第一,当项目比较大且比较多的时候,
若一个一个进行写完整路径,
后期改起来会非常麻烦! -
第二,一般在开发的时候,
都会有测试环境以及正式环境,
他们的域名和地址都是不同的,
所以为了能够快速高效解决问题,
我们会进行封装
(2)接口复用
接口是可以进行多次复用的,我们接口的域名地址拼接完成以后,可以在其他指定的位置进行引入调用,比如我们在首页的banner版块引入的接口数据,也可以在其他版块里面进行调用,灵活使用
(3)配置目录详解
src-assets里面的文件夹,需要自己自行配置
(4)域名地址拼接详解
步骤如下:
第一步:
在一个新的js文件里
(具体的文件夹名及位置,见配备目录),
写入以下代码
下面是第一步骤的文件代码解析
,
写入以下代码
下面是第二步骤的文件代码解析
import {BASE_USER_URL } from '@/config'(这个是自己的目录路径,一定要记得引入!!)
//将第一个js文件里面的常量(就是里面是包含域名值)引入到这个文件里面
class Apis { // 这是代表一个类名,是将板块的路径全部写在这里
BASE_URL = BASE_USER_URL
//为什么这个位置需要将常量赋值给一个新的变量呢?
是因为我们的页面里,会有很多很多的板块路径,
如果后面我们需要修改的话,只需要修改最大的这个板块变量,就可以省去很多麻烦
//测试模块
userURL = `${this.BASE_URL}/user/`
article = `${this.testURL}article`
// 这个的意思是指,现在article就拿到了完整的路径了,
就是等于http://test.jinanav.cn/test/article
class SStu {
sstu_URL = BASE_TEST_URL
//首页模块
indexUrl = `${this.BASE_URL}/index/`
banner = `${this.indexUrl}banner`
//class后面的值需要大写字母,一个板块用一个class
const apis = new Apis()
const user = new User()
export {
apis,
user
}
再进行
//再进行const一下,这些步骤缺一不可!!!
第三步:
在一个新的js文件里
(具体的文件夹名及位置,见配备目录),
写入以下代码
下面是第三步骤的文件代码解析
import Http from '@/assets/js/http'
//(自定义路径,里面包含了网络请求会遇到的一些问题,已经封装好的
import { apis } from '@/assets/js/apis'
import {user} from '../../assets/js/apis'
//(自定义路径,是域名地址的路径,将其进行引入调用)
const index = (data) => {
return Http.get(apis.index, data)
这个就是接受数据请求,比如page=2,就是请求第几页的数据
}
const articleIndex = (data) => {
return Http.get(apis.articleIndex, data)
}
const articleDetail = (data) => {
return Http.get(apis.articleDetail, data)
}
const userIndex = (data) => {
return Http.get(user.userIndex, data)
}
const userUpdate = (data) => {
return Http.post(user.userUpdate, data)
}
const joinIndex = (data) => {
return Http.get(apis.joinIndex, data)
}
export {
index,
articleIndex,
articleDetail,
joinIndex,
userIndex,
userUpdate
}
第四步:
在具体的文件里面进行数据请求或者上传
(具体的文件夹名及位置,见配备目录)
接着,再执行下面的5步:
四. 几种接接口的情况
(1)在当前页的网络请求
在当前页
(1)循环类型:
示例:
<div class = "nav" v-for = "item in 变量" :key = "i"(这个是一定要加的)>
//(变量:就是return里面的变量(即系拿到的全部数据),
这个时候item就是每一条数据的头头,
就是item里面会包含其他小数据,例如“地址、标题、图片等等”,
然后通过v-for再一条一条循环出来)
<p>{{item.title(就是拿到item里面的具体标题}}</p>
<span>{{item.create-time(就是拿到item里面的具体时间}}</span>
(2)直接类型(插值表达式)
示例:
(2)在不同页的网络请求
在不同页(父子组件)
(1)绑定、插值类数据请求
需要在父组件里面,对子组件标签进行绑定
<arit : 变量 = “return里面的变量”></arit>
示例:
在父组件里面:
在子组件里面:
(2)循环类:
通过props,接收到父组件的数据以后,
在子组件里面进行下面操作:
示例:
<div class = "nav" v-for = "item in 变量" :key = "i"(这个是一定要加的)>
//(变量:就是return里面的变量(即系拿到的全部数据),
这个时候item就是每一条数据的头头,
就是item里面会包含其他小数据,例如“地址、标题、图片等等”,
然后通过v-for再一条一条循环出来)
<p>{{item.title(就是拿到item里面的具体标题}}</p>
<span>{{item.create-time(就是拿到item里面的具体时间}}</span>
更多推荐
所有评论(0)