#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文件里
（具体的文件夹名及位置，见配备目录），
写入以下代码
下面是第一步骤的文件代码解析
第二步：
在一个新的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>
4519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
