Vue项目环境脚手架(vue-cli)的搭建步骤及mock数据axios请求介绍

什么是vue-cli：

 通过官方脚手架，搭建模块化、工程化、自动化开发环境

 脚手架是个工具，帮程序员自动搭建项目环境（创建了一些文件夹和文件，并写了最基础的代码）。        

安装脚手架步骤

全局安装脚手架 npm i @vue/cli -g

查看脚手架版本 vue -V

创建项目步骤

在磁盘下cmd运行 vue create 项目目录名

选择 yes

选择 default默认2.0版本

cd 项目目录名

运行项目 npm run serve

---

项目文件介绍

src/assets文件夹：存放静态资源（css/图片/字体文件/视频等），这些静态资源会做webpack打包处理

src/components文件夹: 所有的子组件

src/view文件夹：所有的大组件（一个大组件代表一个页面）

src/App.vue：main.js所引入的App.vue是模板（main.js里的Vue对象的模板）

src/main.js:唯一的html文件所对应的vue实例对象（根实例）

index.html:唯一的HTML文件。

vue文件书写规则

---

单页面应用

        单页面应用（SPA）：就是整个项目只有一个html文件，首次加载时把所有的html.css.js全部加载下来。通过dom的删除和创建来完成页面的切换

---

mock数据

        模拟服务器后端的数据，前端一般用来自己生成后端测试数据，json-server就是个存储json数据的server

ps：json-server支持跨域请求

使用步骤

初始化项目

npm init -y

安装

npm i json-server -D

在项目根目录创建db.json并写合法json数据

启动配置

在package.json文件的scripts中添加

"server":"json-server db.json"

运行服务器

npm run server

---

mock数据格式

  {
       "vip":[

     {
      "username": "李茂军",
      "userpass": "123666",
      "id": 2
    },
    {
      "username": "李茂军02",
      "userpass": "123666",
      "id": 3
    },
    {
      "username": "李茂军03",
      "userpass": "123666",
      "id": 4
    }

        ]

}

json-server的各种请求

get方法获取所有的书籍数据

localhost:3000/books

 get方法获取指定id的数据

localhost:3000/books/878911

get方法获取指定字段值的数据

localhost:3000/users?name=李四&age=15

post方法可以添加数据

localhost:3000/users

delete方法可以删除数据

 localhost:3000/users/1

删除users 里 的 id为1 的数据

patch方法可以更新数据(更新mock数据中users下id为3的数据中的count为12)

axios(
            url:"localhost:3000/users/3 "
                method:"patch"
                data:{ count:12}

).then(res=>{})

get方法获取数据分页

 localhost:3000/books?_page=1&_limit=2

_page 表示页码，第几页

_limit 表示每页的条数

---

数据交互axios请求

向服务器发送ajax请求，拿取数据

axios

一个基于promise的第三方库，可以用在前端和后端（node.js）中

下载方式：npm install --save axios

格式

Promise axios({

                url:""
                method:""
                params:{}地址栏携带的数据（get方式）
                data:{}非地址栏携带数据（post方式）

).then(res=>{})

axios的完整格式

axios({配置}).then(成功回调).catch(失败回调) 

简写格式

axios.get("url",{params:｛｝}).then().catch()
axios.post("url",{ }).then().catch()
axios.delete("url").then().catch()
axios.patch("url",{ }).then().catch()

使用post方式data的几种数据格式

data是字符串的情况

 axios(
      {
            method:'post',
            url:'regSave.php', 
         data:'username=jzmdd&userpass=123'
      })

data是URLSearchParams对象

let params = new URLSearchParams();
    params.append('username', 张三疯);  
    params.append('userpass', '123');  

    axios(
      {
            method:'post',
            url:'regSave.php', 
            data:params
      })

data是json对象（常用）

 axios({
        url:"/vips",
        method:"post",
        data:{
            name:this.name,
            pass:this.pass,
            sex:this.sex
        }        
      })

 注意：

使用post方式，在和后端联调时，如果后端接不到数据（后端会有数据格式的要求），需要看network中的

Content-type和数据的格式；

1）如果data是字符串或者是URLSearchParams

则content-type：application/x-www-form-urlencoded

数据格式：form data

2)如果data是json对象

则content-type：application/json

数据格式：request payload

并发请求

格式：

axios.all([请求1，请求2])执行所有的请求

axios.spred()执行所有的响应的回调函数

axios.all([axios.get('api/books'),axios.get('api/readers')]).then(
        axios.spread(function(books,readers){
            books.data
            readers.data
        });
    );

全局配置

所有axios请求的基础地址：

 axios.defaults.baseURL = 'https://localhost:3000';

在src下新建一个目录，新建js文件 

引入import axios from "axios";

配置 axios.defaults.baseURL = 'http://localhost:3000';

完成全局配置

---

请求拦截器

请求拦截器是在请求到达后端之前，可以对配置进行修改，如url，或者在请求头携带token

axios.interceptors.request.use((config)=>{
    
    // config.baseURL='http://localhost:3000';

    // 显示loading；
    // isLoading = true;

    // console.log("请求拦截器",config);

    return config;
},(err)=>{
    console.log("请求拦截器出错",err);
})

响应拦截器

给返回的数据增加公共信息

axios.interceptors.response.use((res)=>{

    // console.log("响应拦截器",res);

    // 隐藏loading；
    // isLoading = false;

    return res;
},(err)=>{
    console.log("响应拦截器出错",err);
})
 

 面试题

Ajax、jQuery ajax、axios和fetch的区别？

1、Ajax： ajax：最早出现的前后端交互技术，是原生js，核心使用XMLHttpRequest对象

2、Jquery Ajax： jquery Ajax是原生ajax的封装

3、Fetch： fetch是ES6新增的原生API，Fetch是基于promise设计的。fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。

4、axios： axios是原生ajax的封装，基于promise对象的。Axios也可以在请求和响应阶段进行拦截。它不但可以在客户端使用，也可以在nodejs端使用。