超级会员免费看
目录
简介
第一部分：父组件（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"
}
}
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，原理：
根据上面的图例分析：
电脑端与后台数据库系统的端口不一致属于跨域，所以不能进行数据请求，在这个时候我们可以采用媒介也就是服务器与我们的电脑端连用，因为这两个设置的端口是一致的，当服务器从后台数据库中获取到数据了，那么我们可以从服务器中获取想要的数据。
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
