一. 后端接口文档的解析

• 当我们拿到后端同事的接口以后，
  要先看一下里面的参数数据，
  具体每一个位置的解析如下：
  
  
  

二. 接接口之前的准备工作（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文件里
（具体的文件夹名及位置，见配备目录），
写入以下代码

下面是第一步骤的文件代码解析

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210611001738411.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIRU5HQ0hVTkpVTg==,size_16,color_FFFFFF,t_7
第二步：
在一个新的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>

对于父子组件的传值不熟悉的，
可以点这里进行学习