当前位置：首页 > news >正文

【Web前端|第五篇】Vue进阶（一）：Axios工具和前端工程化

news 2025/9/29 6:55:51

一、Axios工具

（一）Axios的介绍：

1、定义：

2、作用：

（二）借助Apifox软件模拟后端请求与响应：

步骤：

（三）Axios工具的使用：

1、引入Axios文件：

2、向后台发送请求并接受回应

二、前端工程化

（一）Node.js

1、简介

2、安装

3、npm

（二）Vue项目

1、目录结构：

2、.vue文件：

3、.vue文件的两种不同风格

一、Axios工具

（一）Axios的介绍：

1、定义：

Axios是基于Promise的HTTP客户端工具，主要是用于在浏览器或Node.js环境中发送HTTP请求，是前端开发最常用的接口请求工具之一。

2、作用：

在前端代码中调用后端的接口，获取或提交数据

（二）借助Apifox软件模拟后端请求与响应：

步骤：

1、新建项目：填写项目名称，点击新建

2、左侧栏，点击接口，添加子目录建立模块，然后添加接口

3、添加接口的页面中：

（1）为接口命名；

（2）选择提交方式：

（3）uri路径：一般选择默认+模块名/接口名

（4）如果请求参数有则添加（客户端发了什么数据就添加什么）

（5）保存

4、上方栏选择mock，我们可以制定期望作为响应

（1）新建期望

（2）填写期望名称

（3）在下面的json中设置请求成功后返回给前端的信息

（4）右侧的快捷请求

（三）Axios工具的使用：

1、引入Axios文件：

<script src="js/axios-0.18.0.js"></script>

2、向后台发送请求并接受回应

前端实现：

⾸先在VS Code中创建js⽂件夹，与html同级，然后将js/axios-0.18.0.js** ⽂件拷⻉到js⽬录下，然后创建名为Ajax-Axios.html的⽂件，⼯程结果如图所示：

然后在html中引⼊axios所依赖的js⽂件，并且提供2个按钮，绑定单击事件，分别⽤于点击时发送ajax请求，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<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>Ajax-Axios</title>
<script src="js/axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="获取数据POST" onclick="post()">
</body>
<script>function get(){//通过axios发送异步请求-get}function post(){//通过axios发送异步请求-post}
</script>
</html>

然后分别使⽤Axios的⽅法，完整get请求和post请求的发送

//通过axios发送异步请求-get

axios.get('https://m1.apifoxmock.com/m2/5298206-0-default/339563689')

        .then(function (response) {

                console.log(response);

        })

        .catch(function (error) {

                console.log(error);

        });

//通过axios发送异步请求-post

const params = new URLSearchParams();

params.append('username', "tom");

params.append('password', "123456");

axios.post('https://m1.apifoxmock.com/m1/5298206-0-default/user/login', params, {

        headers: {

                'Content-Type': 'application/x-www-form-urlencoded'

        }

})

        .then(function (response) {

                console.log(response.data);

        })

        .catch(function (error) {

                console.log(error);

        });

该方法是指浏览器向url发送一个请求，等待后端作出响应

.then()：请求成功后执行（）中的代码

.catch()：请求失败后执行（）中的代码

（）中放置回调函数。

二、前端工程化

项目搭建，开发大型项目会面临协作困难，通过前端工程化（Node.js + npm + Vue）解决

（一）Node.js

1、简介

Node.js是JavaScript的⼀个运⾏环境。⽀持ES6语法
Node.js的出现使的JavaScript可以脱离浏览器运⾏
Node.js使得JavaScript可以⽤于服务端编程，实现独⽴项⽬开发。Node.js是⼀个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎.
简单的说 Node.js 就是运⾏在服务端的 JavaScript。

2、安装

这里的安装，我们通过node管理工具NVM来安装，不直接去官网下载了，而是下载NVM来安装各个版本的node。因为node的各个版本可能适用于不同的场景，那版本之间的切换就成了一个很大的问题，但是如果下载nvm则可以通过nvm指令快速切换。

nvm：管理node.js版本工具，用于在计算机上安装管理和切换不同版本的node.js

注意区分一下：nvm------下载-------Node.js-------自带------npm

（1）在github官网上找到nvm的最新版（nvm-setup.zip）,解压安装

（2）终端输入nvm version查看nvm的版本号

（3）修改nvm下载Node.js的下载源：在setting.txt中

找到setting.txt,加上

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

（4）查看可以安装的Node.js的版本：nvm list available

（5）选择版本安装：nvm install 版本号

（6）切换版本号：nvm use 版本号

3、npm

npm：全称 node package manager。 node包管理。

⽤来安装和下载node的依赖模块。

类似 java 中 Maven 管理java依赖包的功能。

开发中，经常会⽤到第三⽅的⼀些 .js ⽂件（模块）,此时需要执⾏的步骤：

查找官⽅⽹站
下载⽂件，或许还需要选择版本，解压指定位置引⼊使⽤
如果引⽤的js依赖其他模块，重新经过如上步骤。

过程繁琐⽽麻烦。

开发⼈员期待，对于这些第三⽅库，可以集中管理，并通过关键字（坐标）快速下载使⽤。

集中管理的⼯具（npm）：

提供中央服务，允许⼤家打包发布⾃⼰的模块。
如需使⽤，直接通过 npm install ，即可下载安装。
npm可以管理关联依赖。例如，A依赖B，B依赖C，在安装A时，会⾃动将B、C依赖⼀同下载安装。
npm会⾃动将项⽬依赖，写⼊ package.json ⽂件中，并使⽤ package-lock.json 锁定当前安装版本。
后续copy项⽬只需携带该⽂件，执⾏npm install会⾃动下载⾥边记录的使⽤依赖项。

使用：

（1）node下载好后，可以通过npm -v 查看npm的版本号

（2）换源：

查看源地址： npm config get registry

修改源：命令修改 npm config set registry https://registry.npm.taobao.org（不改也行，我的改了会报错，不改反而可以正常执行）

（3）创建Vue项目（工程化）：npm init vue @ latest

Project name?--------------------》项⽬名称，默认值： vue-project ，可输⼊想要的项⽬名称。

Add TypeScript? -----------------》是否加⼊ TypeScript 组件？默认值： No 。

Add JSX Support? ---------------》是否加⼊ JSX ⽀持？默认值： No 。

Add Vue Router? ...--------------》是否为单⻚应⽤程序开发添加 Vue Router 路由管理组件？默认值： No 。

Add Pinia ?...----------------------》是否添加 Pinia 组件来进⾏状态管理？默认值： No 。

Add Vitest? ...---------------------》是否添加 Vitest 来进⾏单元测试？默认值： No 。

Add an End-to-End? ...---------》是否添加端到端测试？默认值 No 。

Add ESLint for code quality? 》是否添加 ESLint 来进⾏代码质量检查？默认值： No 。

执⾏上述指令，将会安装并执⾏ create-vue，它是 Vue 官⽅的项⽬脚⼿架⼯具

进去之后会让我们选择这些内容

可以按照图片中的进行选择

（4）下载依赖：

进⼊项⽬⽬录（一定要切换到项目目录下），执⾏命令安装当前项⽬的依赖： npm install

（5）启动Vue项目：

执⾏命令： npm run dev ，就可以启动vue项⽬了。

在浏览器中访问local中的地址即可！

（二）Vue项目

1、目录结构：

注意：

（1）index.html中包含一个特定的dom元素，用于挂载Vue实例，Vue实例中的内容最终会渲染到这个dom元素中，因此实际上决定首页长什么样子的是挂载的.vue文件

（2）main.js作为入口文件，他决定了哪一个.vue文件作为Vue实例挂载到dom元素上

（3）App.vue默认挂载到dom元素上的Vue实例

2、.vue文件：

通用的模板：

<template>

</template>

<script>

export default{

name:"element",

data(){……},

methods:{ }

}

</script>

<style>

</style>

3、.vue文件的两种不同风格

Vue 的组件有两种不同的⻛格：组合式API 和选项式 API

选项式API，可以⽤包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。

所有组件的数据放在data中，所有计算属性放在computed中，所有方法放到methods中，用到那个组件，Vue会自动组合组件所需要的内容

<script>

        export default {

                data () { // 声明响应式对象

                        return {

                                count: 0,

                                state:[]

                        }

                },

                 methods: { // 声明⽅法，可以通过组件实例访问

                        increment: function () {

                        this.count++;

                        }

                },

                mounted () { // 声明钩⼦函数

     console.log('Vue mounted ...');

                }

        }

</script>

<template>

        <button @click="increment"> count:{{ count }} </button>

</template>

组合式API：每个组件的内容都放在一起

<script setup>

        import { onMounted, ref } from 'vue';

        import { reactive } from 'vue'

        // 声明响应式变量

        const count = ref(0);

        const state = reactive({

                list: ['apple', 'banana', 'orange']

        })

        function increment () {

                // 声明函数

                count.value++;

        }

        // 声明钩⼦函数

        onMounted(() => {

                console.log('Vue Mounted ...');

        })

</script>

<template>

        <button @click="increment"> count:{{ count }} </button>

</template>