欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-03-03 21:43:31
...

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 方法时，需要处理请求头
    1. 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 拦截器

    • 请求拦截器

        

      1. axios.interceptors.request.use((config) => {
        2. 

      2.   console.log("########");
        3. 

      3. });
        4.

    • 响应拦截器

        

      1. axios.interceptors.response.use()((config) => {
        2. 

      2.   console.log("########");
        3. 

      3. });
        4.

  • axios 全局配置

      

    1. //主地址
      2. 

    2. axios.defaults.baseURL = "http://127.0.0.1";
      3. 

    3. //延时时间
      4. 

    4. axios.defaults.timeout = 5000;
      5. 

    5. //post请求头
      6. 

    6. axios.defaults.headers.post["content-type"] = "application/x-www-form-urlencoded";
      7.

  • axios 实例封装
    由于现在大部分都是多服务器，且不同服务器超时时长不一样，没法将后台所有域名都加到 url 中，可以再封装一个 axios 来执行

      

    1. const instance = axios.create({
      2. 

    2.   url: "http://localhost.com",
      3. 

    3.   timeout: 3000,
      4. 

    4.   method: "post",
      5. 

    5. });
      6. 

      7. 

    7. instance.get("http://localhost.com");
      8.

初识 vue

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

  • 创建内容及注意事项

    • vue 文件
      

    1. <template>
      2. 

    2.   <!-- div外层标签必须有，标签内内容都填在这里面 -->
      3. 

    3.   <div>
      4. 

    4.     {{ msg }}
      5. 

    5.     <hr />
      6. 

    6.     {{ info() }}
      7. 

    7.   </div>
      8. 

    8. </template>
      9. 

      10. 

    10. <script>
      11. 

    11. export default {
      12. 

    12.   name: "App2",
      13. 

    13.   data() {
      14. 

    14.     return {
      15. 

    15.       msg: "this is a test",
      16. 

    16.       name: "admin",
      17. 

    17.     };
      18. 

    18.   },
      19. 

    19.   methods: {
      20. 

    20.     info() {
      21. 

    21.       return `my name is ${this.name}`;
      22. 

    22.     },
      23. 

    23.   },
      24. 

    24. };
      25. 

    25. </script>
      26. 

      27. 

    27. <style scoped></style>
      28.

    -js 主入口文件

      

    1. import { createApp } from "vue";
      2. 

    2. // 这里导出的是匿名的 就随意起名就是了 不要用解构赋值 没值啊，用了会有问题
      3. 

    3. import App2 from "./App2.vue";
      4. 

    4. createApp(App2).mount("#app");
      5.
    • html 主入口文件
      

    1. <!DOCTYPE html>
      2. 

    2. <html lang="zh-CN">
      3. 

    3.   <head>
      4. 

    4.     <meta charset="UTF-8" />
      5. 

    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. 

    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. 

    7.     <title>Document</title>
      8. 

    8.   </head>
      9. 

    9.   <body>
      10. 

    10.     <div id="app"></div>
      11. 

    11.   </body>
      12. 

    12. </html>
      13.

上一篇： 防止你的 API 被人采用的 4 个技巧

下一篇： vue 组件化

推荐阅读