【精讲】vue框架 axios请求（内含模拟数据交互部分）等详细内容

目录

简介

第一部分：父组件（App）axios请求数据的方式：

 第二部分：JSON格式的数据使用

第三部分：Ajax请求数据

第四部分：注意事项及原理

---

简介

首先需要安装phpstudy软件。打开界面，我们可以看到有一个停止，点击之后就会启动服务器，接下来找到数据库，在数据库中点击右上角的操作，选择打开根目录，可以添加一个xxx.json格式的数据，类型样式如下例图：

模拟数据库的案例实现：

 先后操作如下：

在命令行中输入JSON的文件，启动链接到页面出现空白，将该文件中的数据名添加到地址栏的尾部（3000后面，切记后需要加 / ）

第一部分：父组件（App）axios请求数据的方式：

 在父组件中操作好后，接下来就来到vue.config.js中，找到该文件，在改文件中添加多个配置或者单个配置的axios请求

 

 在以上都配置好，且操作完成后，重启页面，出现下方页面，即为成功实现请求数据（若报错：提示跨区操作失败，404/红色字体报错200，原因可能是你的端口或者配置名写错了）

 第二部分：JSON格式的数据使用

在这里和大家讲述一下JSON后缀名格式的数据文件具体使用：

首先内部可以有多个数组、对象，每一个数组或对象都可以有一个名字，这样我们在页面展示的过程中，需要在地址栏中添加数据名。此外，在工作的过程，还可以对该数据进行增删改查，

数据查询：

数据格式：db.json

{

  "persons": [

    {

      "id": 1,

      "name": "张三",

      "age": 19

    },

{

  "id": 2,

  "name": "李四",

  "age": 20

},

{

  "id": 3,

  "name": "王五",

  "age": 25

}

  ],

  "classinfo":[

  {

  "name":{

  "realname":"张三",

   "nickname":"小三"

  },

  "pwd":"111111"

  },

  {

    "name":{

     "realname":"李四",

      "nickname":"小四"

     },

   "pwd":"111111"

  }

  ]

}

1：http://localhost:3000/persons?id=1   键名1=值&键名2=值2(返回数组形式)

2：如果key是id可以简写：http://localhost:3000/persons/1

3：对象层级形式：

http://localhost:3000/classinfo?name.realname=%E5%BC%A0%E4%B8%89

4：分页形式

http://localhost:3000/persons?_page=2&_limit=2  _page：当前第几页,limit 一页显示几条

5：排序

http://localhost:3000/persons?_sort=id&_order=asc _sort:排序的字段

6:slice 截取

http://localhost:3000/persons?_start=0&_end=2 采用 _start 来指定开始位置， _end 来指定结束位置

7:采用 _gte _lte 来设置一个取值范围（range）:

http://localhost:3000/persons?id_gte=4&id_lte=5

8：采用_ne来设置不包含某个值：

http://localhost:3000/persons?id_ne=2&id_ne=4

9：采用q 关键词全文搜索：

http://localhost:3000/persons?q=2

10.3.6 添加数据

POST方法，创建一条数据。Ajax地址：http://localhost:3000/persons,data:填写对应的字段，id自增长。

10.3.7 更新数据

PUT 方法，常用来更新已有资源，若资源不存在，它也会进行创建。

Ajax地址：http://localhost:3000/persons/1 data:{name:xxx}如果执行name，数据里面的age会消失。采用PATCH方法局部更新。

10.3.8 删除数据

DELETE 方法，常用来删除已有资源

http://localhost:3000/persons/1   1为要删除的ID

10.3.8 配置静态资源服务器

主要是用来配置图片、音频、视频资源,通过命令行配置路由、数据文件、监控等会让命令变的很长，而且容易敲错；

json-server允许我们把所有的配置放到一个配置文件中，这个配置文件一般命名为json_sever_config.json;

内容：

{

  "port": 3001,            

  "watch": true,           

  "static": "./public",

  "read-only": false,

  "no-cors": false,

  "no-gzip": false

}

Package.json 如下：

{

    "scripts": {

        "mock": "json-server --c json_sever_config.json db.json"

}

}

图片访问：http://localhost:3002/02.png

10.3.4 package.json

如果想省事，上述的配置文件可在db.json 统计目录创建 package.json,代码如下：

{

  

  "scripts":

    {

      "mock":"json-server --watch db.json --port 3001"

    }

}

下次启动执行：npm run mock

10.3.3 服务创建

自定义一个文件“myserver” 执行cmd：json-server --watch db.json

没有db.json 会自动生成默认数据，如下：

 Resources

  http://localhost:3000/posts

  http://localhost:3000/comments

  Home

  http://localhost:3000

每一个根节点都是一个路由。

自定义端口号：json-server --watch db.json --port 3001

第三部分：Ajax请求数据

复制vue.config.js与src同目录。

它其实是以一个可选的配置文件，如果项目中的根目录 (和 package.json 同级的) 中存在这个文件，那么它会被 @vue/cli-service 自动加载。

module.exports = {

  pages: {

    index: {

      //入口

      entry: 'src/main.js',

    },

  },

lintOnSave:false, //关闭语法检查

//开启代理服务器（方式一）

/* devServer: {

    proxy: 'http://localhost:5000'

  }, */

}

安装axios

npm i axios

import axios from 'axios'

在methods配置如下代码：

getUser() {

         axios.get("http://localhost:8080/api1/user.php").then(

   response=>{

   console.log(response);

   },

   error=>{

   console.log(error);

   }

   

)

}

第二节：配置多个代理

//开启代理服务器（方式二）

devServer: {

    proxy: {

      '/api1': {

        target: 'http://localhost',

pathRewrite:{'^/api1':''},

        // ws: true, //用于支持websocket

        // changeOrigin: true //用于控制请求头中的host值

      },

      '/api2': {

        target: 'http://localhost',

pathRewrite:{'^/api2':''},

        // ws: true, //用于支持websocket

        // changeOrigin: true //用于控制请求头中的host值

      }

    }

  }

第四部分：注意事项及原理

1，数据在请求的过程中不可以请求多个，否则会报错（同一编辑器，同一浏览器，同一台电脑情况下）

2，在写数据时，切记键值对需要加引号（数值，例：年龄后面的数20可以不加），数据必须是对象型，你可以对象套数组再套对象。

3，原理：

根据上面的图例分析：

电脑端与后台数据库系统的端口不一致属于跨域，所以不能进行数据请求，在这个时候我们可以采用媒介也就是服务器与我们的电脑端连用，因为这两个设置的端口是一致的，当服务器从后台数据库中获取到数据了，那么我们可以从服务器中获取想要的数据。