Ajax

Axios官网：https://www.axios-http.cn

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

使用时先引入Axios的js文件，使用方式为

1
2
3
axios.post("url").then(result => {
    console.log(result.data)
})

前端工程化

Vue-cli可以用于快速生成一个Vue的项目模板。

使用NodeJS安装Vue-cli

1
npm install -g @vue/cli

通过

1
vue ui

完成vue项目的搭建。创建后的项目目录为

1
2
3
4
5
6
7
8
9
10
11
12
vue-project
|- node_modules		存放整个项目的依赖包
|- public 			存放项目的静态文件
|- src				存放源代码
	|- assets		静态资源
	|- components	可重用的组件
	|- router		路由配置
	|- views		视图组件(页面)
	|- App.vue		入口页面(根组件)
	|- main.js		入口js文件
|- package.json		存放模块基本信息，项目开发所需要的模块、版本信息
|- vue.config.js	保存vue配置的文件，如：代理、端口的配置等

运行

1
npm run serve

启动前端工程。支持热部署，即修改源文件后，网页可以实时同步修改。

可以通过在vue.config.js中设置devServer:{port:7000}设置页面运行的指定端口。

Vue项目开发流程

Vue的组件文件以.vue结尾，每个组件由三个部分组成：

<template>：模板部分，由它生成HTML代码

<script>：控制模板的数据来源和行为

<style>：控制css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <div>
    <h1>{{message}}</h1>  <!-- 使用插值表达式 -->
  </div>
</template>

<script>
export default {
  data(){
    return {
      message: 'Hello Vue!' // 定义数据模型
    }
  },
  methods: {

  }
}
</script>

<style>

</style>

Vue组件库Element

Vue路由

前端路由：URL中的#号与组件之间的对应关系。

Vue Router的组成：

  • VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  • \：请求链接组件，浏览器会解析成\
  • \：动态视图组件，用来渲染展示与路由路径对应的组件

image-20250121000957244

```

Vue路由安装：

```shell
npm install vue-router@3.5.1