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>

批改老师：

autoload

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

git 使用整理

2022-02-22 15:33:52