vuex异步获取数据_vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态

书到用时方恨少

这个阶段涉及到了vuex,本来想着不慌，用起来，使用的过程中问题还真不少

本篇涉及到的内容：

---postman 测试数据

---封装 ajax 请求函数

---封装接口请求函数

---使用 vuex 管理状态

---获取首页相关数据

0. 其它

1. 安装 MongoDB ，启动后台

这个小练习项目是一个前后台分离的项目，后台应用负责处理前台应用提交的请求, 并给前台应用返回 json 数据，前台应用负责展现数据, 与用户交互, 与后台应用交互。

后台应用是用nodejs写的，数据库需要用到mongodb

暂时不会nodejs和mongodb，不过没关系，照着文档先用起来，问题不大。

1.1 到MongoDB官网，下载适合的版本，安装好

1.2 到后台项目文件夹下，cmd，用npm start启动数据库

启动数据库

2. 使用 postman 测试数据

数据库打开以后，进一步去测试是否打开成功，是否能取到数据，这里就要用到接口测试工具 postman

postman 可以获取数据、可以检测API文档中的接口是否有问题

项目重点也不在这里，可以去 postman 官方网站链接 下载客户端 和 很厉害的教程链接

查看API接口文档

1.1 根据经纬度获取位置详情(例子)

--请求URL：http://localhost:3000/position/:geohash

--示例：http://localhost:3000/position/40.10038,116.36867

--请求方式：GET

--参数类型：param

|参数 |是否必选 |类型 |说明

|geohash |Y |string |经纬度

--返回示例：

{

"code": 0,

"data": {

"address": "北京市昌平区337省道",

"city": "北京市",

"geohash": "40.10038,116.36867",

"latitude": "40.10038",

"longitude": "116.36867",

"name": "昌平区北七家宏福科技园(337省道北)"

}

}

1.2 接口输入postman中，查看结果

1.3 输出与文档相同，获取数据成功

数据获取成功

3. 封装 ajax 请求函数

这里的异步交互使用的是axios,需要在项目中添加依赖 npm install --save axios

这里的封装非常重要，虽然代码不是很难懂，但是感觉是 知其然而不知其所以然 ，这也是贯彻了模块化开发的思想，还是先用起来，会熟能生