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. console.log("########");
      3. });
    • 响应拦截器

      1. axios.interceptors.response.use()((config) => {
      2. console.log("########");
      3. });
  • axios 全局配置

    1. //主地址
    2. axios.defaults.baseURL = "http://127.0.0.1";
    3. //延时时间
    4. axios.defaults.timeout = 5000;
    5. //post请求头
    6. axios.defaults.headers.post["content-type"] = "application/x-www-form-urlencoded";
  • axios 实例封装
    由于现在大部分都是多服务器,且不同服务器超时时长不一样,没法将后台所有域名都加到 url 中,可以再封装一个 axios 来执行

    1. const instance = axios.create({
    2. url: "http://localhost.com",
    3. timeout: 3000,
    4. method: "post",
    5. });
    6. instance.get("http://localhost.com");

初识 vue

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

    • vue 文件
    1. <template>
    2. <!-- div外层标签必须有,标签内内容都填在这里面 -->
    3. <div>
    4. {{ msg }}
    5. <hr />
    6. {{ info() }}
    7. </div>
    8. </template>
    9. <script>
    10. export default {
    11. name: "App2",
    12. data() {
    13. return {
    14. msg: "this is a test",
    15. name: "admin",
    16. };
    17. },
    18. methods: {
    19. info() {
    20. return `my name is ${this.name}`;
    21. },
    22. },
    23. };
    24. </script>
    25. <style scoped></style>

    -js 主入口文件

    1. import { createApp } from "vue";
    2. // 这里导出的是匿名的 就随意起名就是了 不要用解构赋值 没值啊,用了会有问题
    3. import App2 from "./App2.vue";
    4. createApp(App2).mount("#app");
    • html 主入口文件
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. <title>Document</title>
    8. </head>
    9. <body>
    10. <div id="app"></div>
    11. </body>
    12. </html>

更多相关文章

  1. axios跨域请求,post总是报错No ‘Access-Control-Allow-Origin’
  2. TP5+VUE+AXIOS项目搭建初试
  3. 【php】while/for循环,网络请求
  4. ES6基本语法,Axios异步网络请求介绍
  5. ES6 和异步网络请求
  6. Spring认证_什么是Spring GraphQL
  7. 如何设计一个优秀的秒杀系统?
  8. 循环与网络请求
  9. 【前端】在苹果safari浏览器上video标签无法正常播放视频

随机推荐

  1. Python--day56(前后台数据交互、bootstrap
  2. Python 3.4中的Pytesser:名称“image_to_
  3. C/C++与Python混合编程
  4. python的PIL绘制多行文本的图像。
  5. Linux内核配置文档
  6. Python编程系列教程第16讲——拷贝自身到
  7. python安装第三方的包 工具对比
  8. [LeetCode] 486. Predict the Winner 预
  9. 2018年马哥人工智能&Python自动化全栈
  10. Linux--多线程之线程的取消pthread_cance