5 axios & webpack

1 axios

1-1 介绍

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持PromiseAPI
  • 拦截请求数据和响应数据
  • 取消请求
  • 自动请求JSON数据
  • 客户端支持防御XSRE

1-2 安装

  • 第一步：创建一个文件并初始化

    npm init --yes

  • 第二步：下载vue和axios

    npm install vue -S;npm install axios -S

1-3 axios的get请求

// 给定 ID 的 user 创建请求
axios.get('http://127.0.0.1/').then(data => {
	console.log(response);
}).catch(err => {
	console.log(error)
});

1-4 axios的post请求

let params = new URLSearchParams();
params.append('name', 'alex');

axios.post('http://127.0.0.1/', params)
.then(data => {
	console.log(response);
}).catch(err => {
	console.log(error)
});

1-5 axios的默认配置

  • 挂载到全局配置

    Vue.use(axios)
// 等同于
Vue.prototype.$axios = axios;

  • 配置公共的URL

    axios.defaults.baseURL = 'http://127.0.0.1:8800'

    // 使用
this.$axios.get('/').then(data => {
	console.log(response);
}).catch(err => {
	console.log(error)
});

  • 解决axios的回调地狱问题

    try {
        const res = await this.$axios.get('/api/cartList')
        this.cartList = res.data.result;
        console.log(res);
	} catch (error){
    	console.log(error)
}

1-6 常用写法

<script src="axios.js"></script>
<script>
    import {axios} from "./axios";

    axios({
        method: 'post', // 请求方法
        url: 'https://localhost/?v1=123&v2=456', // 请求地址
        params: {v1: 123, v2: 456}, // url中携带的参数
        data: {name: 'lxx', pwd: '123'},  // 请求头传入的参数
        headers: {"Content-Type": "application/json"}  // 请求头
    }).then(function (res) {  // 请求完成之后执行的函数
        console.log(res.data);
    }).catch(function (error) {  // 请求异常问题捕获
        console.log(error)
    })
</script>

2 前端webpack工具

2-1 webpack工具介绍

  1. 对前端中的资源（html、css、js、png、MP3...）进行编译打包
  2. webpack里面有很多的loader加载器
  3. 支持模块化加载（列：inport xxx from ooo）

image

webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时，它会递归地构建一个 依赖关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所有这些模块打包.成一个或多个bundle。

历史介绍

  • 2009年初，commonjs规范 还未出来，此时前端开发人员编写的代码都是非模块化的，

    • 那个时候开发人员经常需要十分留意文件加载顺序所带来的依赖问题

  • 与此同时nodejs开启了js全栈大门，而requirejs在国外也带 动着前端逐步实现模块化

    • 同时国内seajs也进行了大力推广
    • AMD规范，具体实现是requirejs define(模块id',[模块依赖1,模块依赖2],function({ return ;}) , ajax请求文件并加载
    • Commonjs|| CMD 规范seajs淘宝玉伯
      • commonjs和cmd非常相似的
      • cmd require/module.exports
      • commonjs是js在后端语言的规范:模块、文件操作、操作系统底层
      • CMD仅仅是模块定义
    • UMD通用模块定义，- 种既能兼容amd也能兼容commonjs也能兼容浏览器环境运行的万能代码

  • npm/bower集中包管理的方式备受青睐，12年browserify/webpack诞生

    • npm是可以下载前后端的js代码475000个包
    • bower只能下载前端的js代码,bower在下载bootstrap的时候会自动的下载jquery
    • browserify解决让require可以运行在浏览器，分析require的关系，组装代码

  • webpack打包工具，占市场主流

  • es6的module

    export default {}  // 抛出
import xxx from './index.js'  // 导入

2-2 安装webpack

  • 安装（建议安装3.12.0版，有较好的支持Vue）

    npm i webpack@3.12.0

2-3 简单使用

App.js

// es6 module  export 抛出
// 方式一（抛出对象）：
let obj = {name: 'alex'}
export {obj}

// 方式二（抛出key）：
let age = 23;
export {age};

// 方式三（抛出key）：
export let fav = '鸡汤';

// 方式四（抛出函数）：
export function add() {
    alert('弹出了...')
}

main.js

// 导入方式一：
import {obj, age, fav, add} from './App'

console.log(obj)
console.log(age)
console.log(fav)
add()

// 导入方式二：
import * as lkp from './App'

console.log(lkp)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块的基本使用</title>
</head>
<body>

<!-- 同步 -->
<script type="text/javascript" src="main.js"></script>

</body>
</html>

此时打开浏览器，会输出报错。

所以我们需要打包引入：

在终端输入：
webpack ./main.js ./bundle.js

在index.html中引入bundle.js文件

<script type="text/javascript" src="./bundle.js"></script>

image

此时我们发现，每次更改js文件时，都要输入webpack xxx xxx命令进行编译，很繁琐。那么怎么解决呢？

1.安装好webpack的包
2.在App同级目录下，创建webpack.config.js文件，配置如下：
module.exports = {
    // entry 入口
    // output 出口
    entry: {main: './main.js'},
    output: {filename: "./bundle.js"},
    // 持续一直监听
    watch: true, 
}

3.此时我们在终端只需要输入：webpack 命令

还可以有其他写法：

1.修改package.json文件中的scripts
  "scripts": {
    "dev": "webpack"
  },
  
2.此时在终端输入：npm run dev 就会执行webpack

webpack配置文件修改

开发环境下配置文件webpack.dev.config.js：

module.exports = {
    entry: {main: './main.js'},
    output: {filename: "./bundle.js"},
    watch: true, 
}

生产环境下配置文件webpack.prod.config.js：

module.exports = {
    entry: {main: './main.js'},
    output: {filename: "./bundle.js"},
}

package.json文件修改

{
  "name": "vue-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config ./webpack.dev.config.js",
    "prod": "webpack --config ./webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^3.12.0"
  }
}

2-4 css-loader介绍

这些模块中的loader文件，loader加载器能对css、json、png、MP3的js代码进行编译

本节，只介绍css-loader

main.css

*{
    padding: 0;
    margin: 0;
}

main.js

import './main.css'

此时我们在编译就会出错

image

那么我们应该按照css-loader处理.css后缀的文件

npm i css-loader -D;npm i style-loader -D

此时在配置一下webpack.config.js文件：

module.exports = {
    // entry 入口
    // output 出口
    entry: {main: './main.js'},
    output: {filename: "./bundle.js"},
    // watch: true, // 持续一直监听
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}

2-5 html-webpack-plugin插件

该工具会帮助我们管理文件分类，并创建文件夹

  • 安装工具

    npm install html-webpack-plugin -D

  • webpack.config.js

    let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // entry 入口
    // output 出口
    entry: {main: './main.js'},
    output: {filename: "./bundle.js"},
    // watch: true, // 持续一直监听
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 参照物
        })
    ],
}

2-6 http-server

http-server相当于前端一个服务器。可用于检测上线

  • 安装插件

    npm install -g http-server

  • 切换目录

    cd xxx/

  • 启动

    hs -o -p 9999

2-7 webpack-dev-server

作用：会自动刷新页面，不在手动刷新

  • 安装

    npm install webpack-dev-server@2.9.0

  • 配置

    webpack.config.js

    {
  "name": "vue-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot --inline --config ./webpack.dev.config.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.0"
  },
}

  • 启动

    npm run dev

2-8 其它插件

npm i vue-loader@14.1.1 vue-template-compiler@2.5.17

module.exports = {
    // entry 入口
    // output 出口
    entry: {main: './main.js'},
    output: {filename: "./bundle.js"},
    // watch: true, // 持续一直监听
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
          	{
              	test: /\.vue$/,
              	loader: 'vue-loader'
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 参照物
        })
    ],
}

3 mock模拟数据

vue.config.js

module.exports = {
    devServer: {
        // mock 模拟后端数据
        before(app, server){
            // 每次修改完这个文件，一定要重新启动
            // 接口 http://localhost:8080/api/cartList/
            app.get('/api/cartList', (req, res) => {
                res.json({
                    result: [
                        {id: 1, title: "Vue实战开发", price: 188, active: false, count: 1},
                        {id: 2, title: "React实战开发", price: 188, active: false, count: 1},
                    ]
                })
            })
        }
    }
}

跟axios连用，可以模拟数据

mian.js

import axios from "axios";

Vue.prototype.$axios = axios;

app.vue

this.$axios.get('/api/cartList').then(res => {
    console.log(res)
    this.cartList = res.data.result
}).catch(err=>{
    console.log(err)
})
posted @ 2022-09-26 15:13  角角边  Views(224)  Comments(0)    收藏  举报