webpack 中使用 axios 方法总结及初识 vue

webpack 中使用 axios 方法总结

在根目录先建配置文件，以根目录名为 demo 为例，下述为 demo
npm init -y
安装 webpack webpack 脚手架 webpack 开发环境服务器
webpack webpack-cli webpack-dev-server
创建代码存放文件夹 src 及建好主入口文件跟 html 文件

src > index.js index.html
在 demo 文件夹下建好 webpack 配置文件

webpack.config.js
安装 html 打包插件
npm i html-webpack-plugin -D
导入 html 插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
打包查看打包情况
webpack
使用 webpack server 服务器，编写代码保存刷新即时生效，Ctrl+C 可以退出
webpack serve
线上环境安装 axios
npm i axios -S
在 index.js 文件里导入 axios
import axios from 'axios
axios get 与 post 的区别
- get 的参数存在 params 中，post 的参数存在 data 中
- 用 post 方法时，需要处理请求头
```
headers: { 'content-type': 'application/x-www-form-urlencoded' }
```
axios 请求方式
- axios.request(config)
- axios.get(url[, config]) 请求
- axios.delete(url[, config]) 删除
- axios.post(url[, data[, config]]) 发送
- axios.head(url[, config])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
axios 处理并发请求
跟 promise 一样使用 axios.all()

axios 拦截器

请求拦截器

axios.interceptors.request.use((config) => {
  console.log("########");
});

响应拦截器

axios.interceptors.response.use()((config) => {
  console.log("########");
});

axios 全局配置

//主地址
axios.defaults.baseURL = "http://127.0.0.1";
//延时时间
axios.defaults.timeout = 5000;
//post请求头
axios.defaults.headers.post["content-type"] = "application/x-www-form-urlencoded";

axios 实例封装
由于现在大部分都是多服务器，且不同服务器超时时长不一样，没法将后台所有域名都加到 url 中，可以再封装一个 axios 来执行
```
const instance = axios.create({
  url: "http://localhost.com",
  timeout: 3000,
  method: "post",
});
instance.get("http://localhost.com");
```

初识 vue

全局安装
npm i @vue/cli -g
查看版本
vue -V
创建项目
vue create '项目名'
public 文件夹
里面的内容会原封不动的打包到编译目录下
src>assets 文件夹
存放静态资源，如图片、css 等
components 文件夹
存放组件，如按钮、卡片、分页、滑动条等
运行服务器
npm run serve

创建内容及注意事项

vue 文件

<template>
  <!-- div外层标签必须有，标签内内容都填在这里面 -->
  <div>
    {{ msg }}
    <hr />
    {{ info() }}
  </div>
</template>
<script>
export default {
  name: "App2",
  data() {
    return {
      msg: "this is a test",
      name: "admin",
    };
  },
  methods: {
    info() {
      return `my name is ${this.name}`;
    },
  },
};
</script>
<style scoped></style>

-js 主入口文件

import { createApp } from "vue";
// 这里导出的是匿名的 就随意起名就是了 不要用解构赋值 没值啊，用了会有问题
import App2 from "./App2.vue";
createApp(App2).mount("#app");

html 主入口文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Correcting teacher：

autoload

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

git 使用整理

2022-02-22 15:33:52