3、Vuex-Axios-Element UI

m0_740043732025-12-17 11:56

复习

  • Vue 语法
    • Vue 对象
javascript 复制代码 
new Vue({
  el:"",
  data:{},
  methods:{},
  computed:{},
  components:{},
  created(){},
  props:{}
})

  • Vue 各种指令

    • v-if,v-show,v-for,v-on,v-bind,v-model

  • Vue 的计算属性

  • Vue 工程
    • src
      • assest 静态
      • components 公共组件
      • router 路由配置 js 文件
      • views 路由相关页面组件
      • store Vuex 相关的 js 配置文件
    • App.vue 组件
    • main.js 主配置文件
  • Vue 工程各种组件
    • 写法
      • template
      • script
      • style
    • 组件传参
      • 父传子，标签内设置属性，子组件是指 props 指定接收
      • 子传父，通过 $emit 调用父组件中的自定义事件
  • Vue 路由
    • 路由额外安装插件
    • 路由两种方式
      • 声明式 写标签 router-link to="/a"
      • 编程式 写函数 this.$router.push ("/a")
    • 路由规则
    • 路由传参
    • 路由守卫 (拦截器)
    • 重定向
    • 元数据

补充：路由模式

补充：路由命名

十七、 Vuex【重点】

17.1 什么是 Vuex

Vuex 是什么？ | Vuex (vuejs.org)

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理 模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

说人话：实现多个组件的数据共享，即一个数据需要在多个组件中使用，那么就需要把这个数据存储在 VueX 中，类似 Java 中的 session 机制.

Vuex 五大核心要素

  • state：存放状态，比如需要全局共享的数据 (也可以取出数据)
  • getters：可以对 state 中的数据进行额外处理，类似计算属性的作用
  • mutations：通过提交 mutations 来改变 state 的状态
  • actions：异步的 mutations，可以通过 dispatch 调用 mutaitons，从而改变 state
  • modules：模块化状态管理，每个模块拥有自己的 state、mutation、action、getter

Vue 组件通过 dispatch 调用 Vuex 中 actions 的方法，进行异步操作。

actions 中的方法中，通过 commit，调用 mutations 中方法，以保证 state 中数据的同步。

如果不需要异步操作，可以直接在组件通过 commit 调用 mutations 中的方法对 state 中共享的数据进行操作。

17.2 安装

如果创建项目时没有勾选 Vuex, 那么可以按照下方再安装一遍

在项目根目录执行如下命令来安装 Vuex

若失败，可使用 cnpm

本例使用的vue2，所以安装vuex装的是vuex3!!!

npm install vuex@3

17.3 配置 vuex

在 src 目录下创建一个名为 ** store ** 的目录并新建一个名为 index.js 文件用来配置 Vuex，代码如下：

javascript 复制代码 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  }
})

修改 main.js 增加刚才配置的 store/index.js，关键代码如下：

bash 复制代码 
import Vue from 'vue'
import App from './App.vue'
// 引入路由模块
import router from './router'
// 引入Vuex模块.注意这里的命名为store
import store from './store'

Vue.config.productionTip = false
// vue2 创建方式
new Vue({
  render: h => h(App),
  router,
  store  // 使用Vuex
}).$mount('#app')

17.2 17.3小节中的[安装|配置]也可以不做,因为后续再创建项目时直接选以下依赖,创建好项目直接就配置好了

  • 一个是路由Router,一个是状态管理Vuex

17.4 演示 state 存 & 取

  • 在 Vuex 中设置数据，在任何组件取出

在任何组件中使用 以下命令取值

this.$store.state.xxx

vue

javascript 复制代码 
<template>
  <div class="about">
    
    <p>取出Vuex的数据,user: {{this.$store.state.user}}</p>
    <p>取出Vuex的数据,token: {{this.$store.state.token}}</p>
    <hr>
    <p>取出Vuex的数据,user: {{user}}</p>
    <p>取出Vuex的数据,token: {{token}}</p>
  </div>
</template>
<script>
export default {
  name: 'AboutView',
  data() {
    return {
      // 可以在data中直接获取Vuex中的数据
      user: this.$store.state.user,
      token: this.$store.state.token
    }
  }
}
</script>

17.5 mutations 修改数据

使用的是 Vuex 中定义的 mutations Mutation | Vuex

具体步骤是

  • mutations 中定义一个修改数据的函数
    • 定义参数，参数 1 固定是 state 对象，参数 2 是修改的新值
  • 其他组件中使用this.$store.commit来调用这个函数进行修改即可

特别注意：发现一个问题

  • 直接通过 this.$store.state.xxx 取出的数据，可以随着这次修改而直接改变
  • 在 data 中取出的 Vuex 的数据，不会随着这次修改而直接改变

为什么？下回分解.....

17.6 计算属性取出 state 数据 [熟悉]

上面发现，data 中的取出的 Vuex 的数据不会随着修改而改动

该怎么解决？使用计算属性取出 Vuex 的数据

计算属性取值

vue

html 复制代码 
<template>
  <div class="about">
    <h2>直接取的</h2>
    <!--方式1: 直接取-->
    <p>取出Vuex的数据,user: {{this.$store.state.user}}</p>
    <p>取出Vuex的数据,token: {{this.$store.state.token}}</p>
    <hr>
    <h2>data中获取的</h2>
    <!--方式2: 在data中获取-->
    <p>取出Vuex的数据,user: {{user}}</p>
    <p>取出Vuex的数据,token: {{token}}</p>
    <hr>
    <h2>调用mutations中的方法修改token</h2>
    <input type="text" v-model="newToken">
    <button @click="changeToken">修改token</button>
    <h2>计算属性中获取的</h2>
    <p>取出Vuex的数据,token: {{token2}}</p>
  </div>
</template>
<script>
export default {
  name: 'AboutView',
  data() {
    return {
      // 可以在data中直接获取Vuex中的数据
      user: this.$store.state.user,
      // token: this.$store.state.token,
      newToken:''
    }
  },
  // 建议使用计算属性取出Vuex的数据,而不是data
  computed:{
    token2(){
      return this.$store.state.token
    }
  }
  ,
  methods: {
    changeToken(){
      // 调用mutations中的方法,修改token
      // this.$store.commit("mutations中定义的方法名", "调用时传递的参数")
      this.$store.commit("setToken", this.newToken)
    }
  }
}
</script>

重要用法：一般从 state 中取出的数据要放在 computed 中而不是 data 中！

为什么？

这是因为 data 中的内容只会在 created 钩子触发前初始化一次。比如说就是 data 中设置 count: this.store.state.token ， 则这个 token 的值是 created 钩子函数执行前 this.store.state.token 的值，之后 this.$store.state.token 如何变化均影响不到 token 的取值。

而 computed 则是通过依赖追踪实现的，计算属性在它的相关依赖发生改变时会重新求值。

简而言之就是说，Vuex 存储的数据如果有变化，computed 中的数据就会变化，但是 data 中的不会变化

:::

17.4.3 mapState 函数 [熟悉]

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。

为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们简化计算属性的操作

vue

html 复制代码 
<template>
  <div class="about">
    <h2>直接取的</h2>
    <!--方式1: 直接取-->
    <p>取出Vuex的数据,user: {{this.$store.state.user}}</p>
    <p>取出Vuex的数据,token: {{this.$store.state.token}}</p>
    <hr>
    <h2>data中获取的</h2>
    <!--方式2: 在data中获取-->
    <p>取出Vuex的数据,user: {{user}}</p>
    <p>取出Vuex的数据,token: {{token}}</p>
    <hr>
    <h2>调用mutations中的方法修改token</h2>
    <input type="text" v-model="newToken">
    <button @click="changeToken">修改token</button>
    <h2>计算属性中获取的</h2>
    <p>取出Vuex的数据,token: {{token}}</p>
    <p>取出Vuex的数据,avatar: {{avatar}}</p>
  </div>
</template>
<script>
// 特殊的,注意 {},是从vuex中引入的同名的方法
import { mapState } from 'vuex'

export default {
  name: 'AboutView',
  data() {
    return {
      // 可以在data中直接获取Vuex中的数据
      user: this.$store.state.user,
      // token: this.$store.state.token,
      newToken:''
    }
  },
  // 建议使用计算属性取出Vuex的数据,而不是data
  // computed:{
    // token2(){
    //   return this.$store.state.token
    // },
    // avatar(){
    //   return this.$store.state.avatar
    // }
  // }
  // 方式3: 使用mapState辅助函数,将state中的数据映射到计算属性中
  // token和avatar是vuex中state定义的变量
  computed:mapState(['token','avatar'])//获取  state中  token 和  avatar
  ,
  methods: {
    changeToken(){
      // 调用mutations中的方法,修改token
      // this.$store.commit("mutations中定义的方法名", "调用时传递的参数")
      this.$store.commit("setToken", this.newToken)
    }
  }
}
</script>

17.7 解决浏览器刷新后 Vuex 数据消失问题 [了解]

  • 问题描述

Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。但是有一个问题就是：vuex 的存储的数据只是在页面的中，相当于我们定义的全局变量，刷新之后，里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。

  • 解决方案

采用持久化，VueX 整合插件实现持久化：vuex-persistedstate

  • 安装插件

npm install vuex-persistedstate

配置在 /src/store/index.js 中实现配置

javascript 复制代码 
import Vue from 'vue'
import Vuex from 'vuex'
// 1引入持久化插件
import vuexPersistedstate from "vuex-persistedstate";

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    username:"无名66"
  },
  mutations: {
    updateName(state,v){
      state.username = v
    }
  },
  plugins:[vuexPersistedstate()] // 2加入插件
})
  • 测试浏览器刷新测试效果

17.8 getters

state 中定义的数据，如果需要处理后再使用且需要重复使用，即就会在计算属性中重复处理，代码冗余.

将对 state 中数据处理的代码抽取到 getter 中，其他组件直接使用即可

使用步骤

也可以使用 mapGetters 在计算属性中简化取值

17.9 actions

调用 mutations 方法，让其以异步的方式执行.

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。

参考学习: Vuex 的 mutations 和 actions 区别 - CSDN 博客

17.10 modules

Module | Vuex

Vuex 的 index.js 文件中定义太多内容，可以使用 modules 分模块拆分，方便管理维护

十八、Vue 知识总结

  • 基本语法
    • 插值表达式 {{}}, 用来取出 data 或者 computed 中的数据，也可以在其中做运算，甚至调用函数
    • v-if,v-show 用来决定标签是否展现 (场景：分页按钮，权限菜单按钮)
    • v-for 用来遍历生成表格数据
    • v-model 和 v-bind, 用来绑定变量，实现双向绑定 (数据变化)
    • v-on 或者 @ , 用来事件绑定
  • 特性
    • 计算属性
      • 什么时候需要用？当需要对 data 中数据运算且重复使用该运算结果时就可以将运算定义在计算属性
    • 侦听器 (自学)
    • 组件化
      • 一套完整的代码，包含 html,css,js
      • 将代码抽取封装，独立，方便使用和维护，可以实现 spa 开发
      • 需要特殊语法
        • template 里面只能一个根标签，一般都是 div
        • js 中需要使用 export 将代码内容导出
        • js 中 data 中的数据需要定义在函数的 return 中
    • 生命周期函数
  • vue 工程化
    • 会使用 vue-cli 脚手架创建项目
    • 熟悉项目结构
      • src
        • asstes 静态资源
        • components 公共的组件
        • router 路由表
        • store vuex 管理数据状态
        • views 路由的页面
        • App.vue 主页面
        • main.js 主配置文件
      • package.json 定义运行脚本，修改端口
      • node_modules 定义了一些项目运行需要的依赖，一般别人的项目都删除了，我们要运行需要先执行 npm install 把这些依赖下载
    • 需要掌握核心路由技术 router
      • 页面切换就需要路由
      • 路由方式 2 种
        • 编程式路由
        • 声明式路由
      • 携带数据路由
      • 嵌套路由
      • 路由模式
      • 路由守卫
      • 路由重定向，元信息
    • 数据共享技术 Vuex
      • 当 存储数据时定义 vuex 中的 state 存储即可

十九、Axios【重点】

19.1 什么是 Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的 **<font style="color:#DF2A3F;">异步通信框架</font>**，它的主要作用就是实现 AJAX 异步通信，其功能特点如下：

由于 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架

19.2 Axios 的使用

19.2.1 安装 vue axios

npm install --save axios vue-axios

19.2.2 在需要使用的页面中引入

需要发请求，那就在页面的 script 中引入即可

<font style="background-color:#FBDE28;">import axios from 'axios'</font>

初始化查询数据，一般定义在 created () 函数中

vue

javascript 复制代码 
<template>
  <div>
    <h1>演示axios的应用</h1>
    <ul>
      <li>当前页: {{ pageNum }}</li>
      <li>每页显示条数: {{ pageSize }}</li>
      <li>总条数: {{ total }}</li>
      <li>总页数: {{ totalPages }}</li>
    </ul>
    <hr>
    <table border="1">
      <tr>
        <td>id</td>
        <td>email</td>
        <td>first_name</td>
        <td>last_name</td>
        <td>avatar</td>
      </tr>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.first_name }}</td>
        <td>{{ user.last_name }}</td>
        <td><img :src="user.avatar" alt="avatar" width="50" height="50"></td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "ShowAxios",
  data() {
    return {
      pageNum: null,
      pageSize: null,
      total:null,
      totalPages: null,
      users: []
    }
  },
  methods: {
    fetchData() {
      // https://reqres.in/api这个网站要求携带x-api-key这个请求头
      axios.defaults.headers['x-api-key'] = 'reqres_df5880e088e145d28cee541a6b424b67'
      // 发送axios请求获得数据 , 下面这个是获取第2页的用户数据
      // res就是该网站的返回的数据
      axios.get('https://reqres.in/api/users?page=2').then(res => {
        // console.log("获取第2页的用户数据:",res) //  这个res中有6个数据,只关心返回的数据data中
        console.log("获取第2页的用户数据:",res.data)
        // 从res.data中提取出我们需要的数据
        this.pageNum = res.data.page
        this.pageSize = res.data.per_page
        this.total = res.data.total
        this.totalPages = res.data.total_pages
        this.users = res.data.data
      })
          .catch(err => {
            console.log(err)
          })
    }
  },
  // 组件创建时,发送请求获取数据,使用生命周期函数created
  // created函数,会在组件创建完毕自动调用
  // 一般初始化数据都会在created函数中发送请求获取数据
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>

</style>

图片上的请求头是该服务器要求，固定写法，照抄

请求地址: 'https://reqres.in/api/users?page=2是固定的

19.2.3 使用 axios 发请求

get 请求:

vue

javascript 复制代码 
<template>
  <div>
    axios测试页面
    <table border="1" width="800px"  align="center" >
      <tr>
        <th>序号</th>
        <th>id</th>
        <th>姓氏</th>
        <th>名字</th>
        <th>邮箱</th>
        <th>头像</th>
      </tr>
      <tr v-for="(user, index) in users" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ user.id }}</td>
        <td>{{ user.first_name }}</td>
        <td>{{ user.last_name }}</td>
        <td>{{ user.email }}</td>
        <td><img :src="user.avatar"></td>
        <td><button @click="fetchDate">删除</button></td>
        <td><button @click="fetchDate">修改</button></td>
      </tr>
    </table>
  </div>
</template>
<script >
import axios from 'axios'//导入 axios对象
 export default {
  name: 'TableViews',
   data() {
      return {
        users: []
      }
   },
   methods: {
      fetchDate(){
        console.log('开始请求数据')
        // https://reqres.in/api这个网站要求携带x-api-key这个请求头
        //axios.defaults.headers['x-api-key'] = 'reqres_df5880e088e145d28cee541a6b424b67'
        //开始在这个里面 发送ajax请求  请求一个API（URL） 会返回数据到前端页面中
        //https://reqres.in/api/users?page=2  会换成后端的自己的url
        //axios.get("https://reqres.in/api/users?page=2").then(res=>{
        //axios.get().then().catch()  链式操作
        axios.get("/users?page=2").then(res=>{
          console.log(res.data.data, "line19行")
          this.users = res.data.data
        }).catch(err=>{
          console.log(err)
        })
      }
   },
   created() {
    this.fetchDate()
   }
 }
</script>

<style scoped>

</style>

post 请求:

vue

html 复制代码 
<template>
  <div>
    <h1>登录页面</h1>
<!--    帮我写登录的输入框-->
    <input type="text" placeholder="请输入邮箱" v-model="email"> <br>
    <input type="password" placeholder="请输入密码" v-model="password"> <br>
    <button @click="login">登录</button>

  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "",
  components: {},
  data() {
    return {
      email: "",
      password: ""
    }
  },
  methods: {
    login() {
      // 1. 获取用户输入的邮箱和密码
      const email = this.email
      const password = this.password
      // 2. 发起ajax请求，将用户输入的邮箱和密码发送给服务器
      ////axios.post("https://reqres.in/api/login")
      axios.post("/login", {
        email: email,
        password: password
      }).then(res => {
        console.log(res, "line36")
        if (res.status == 200) {
          //编程式路由    跳转到主页
        } else {
          
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
};
</script>

<style scoped>

</style>

19.2.5 BUG

在 axios 的回调中，无法使用 this. 数据 获得 vue 的 data 中的数据

造成 axios 取不到值得原因主要是 this 回调问题。

当执行完函数 function 时，this 指向放生变化。导致 this 指向函数体本身。

这时 this.data 里的数据取不到。

简单直接的解决就是把 function 写成箭头函数形式，箭头函数不是构造函数，不会指定 this，而是抓取上下文 this 作为自己的 this

19.3 其他 api 演示

可以查看官网请求配置 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

https://axios-http.com/zh/docs/post_example

http://www.axios-js.com/zh-cn/docs/

也可以看示例

javascript 复制代码 
  // get请求(1) 路径拼接参数 
  axios.get('http://localhost:8080/vue/user?id=456').then(function(ret){
    console.log(ret.data); 
  })

  // get请求(2) Restful风格参数 
  // 这么写后端SpringBoot项目需要特殊@PathVariable接收
  axios.get('http://localhost:8080/vue/user/123').then(function(ret){
    console.log(ret.data); 
  })

  // get请求(3) 使用params传递参数 
  axios.get('http://localhost:8080/vue/user',{
    params:{
      id:20001
    }
  }).then(function(ret){
    console.log(ret.data); 
  })

  // post请求,发送的是json,后台需要使用@RequestBody 
  axios.post('http://localhost:8080/vue/user/json',{
    username:'张三',
    password:'987654'
  }).then(function(ret){
    console.log(ret.data); 
  })

  // put请求 
  axios.put('http://localhost:8080/vue/user/form',{
    username:'张三丰',
    password:'11111'
  }).then(function(ret){
    console.log(ret.data); 
  }).catch(function (err){
    console.log(err)
  })

19.4 Axios 的响应

官网: https://www.axios-http.cn/docs/res_schema

响应结果的主要属性:

  • <font style="color:#DF2A3F;">data: 服务器响应回的数据</font>
  • headers: 响应头信息
  • status: 响应状态码
  • statusText: 响应状态信息
  • config
  • request

需要特别注意，我们后台返回的数据在 data 中

19.5 axios 的全局配置

官网: 默认配置 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

我们讲一个特别实用的，我们在项目中调用数十次乃至百次接口是很常见的，后期一旦根域名发生改变，所有接口都需要修改，非常繁琐且容易出错。

axios 提供了设置根域名的方法。在main.js全局入口文件中，设置：

javascript 复制代码 
import axios from 'axios'

// 全局配置axios的请求头
axios.defaults.headers['x-api-key'] = 'reqres-free-v1'
// 全局配置axios的baseURL
axios.defaults.baseURL = 'https://reqres.in/api'

在其他 vue 页面中使用 axios 发请求的时候

javascript 复制代码 
axios.get('/dept').then((res)=>{
  console.log(res)
  this.deptList = res.data.data
})

19.6 封装 axios 工具 [重点]

wb 的写法：

  1. 创建了 utils/request.js
  1. 创建 api/user.js

request 方法的目的： 相当于 axios 发送请求

  1. 在组件中 script 中调那个方法正常使用

作用： 就是 在组件中不能出现 axios.get axios.post 等

模仿若依

创建 utils/request.js, 内容如下

javascript 复制代码 
// 封装axios请求
import axios from 'axios'

// 统一设置请求头的contentType为json格式
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers['x-api-key'] = 'reqres-free-v1'

// 创建axios实例,这个service就是axios对象
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    // 这个路径是从.env.xxx文件中读取的
    baseURL: 'https://reqres.in/api',
    // 超时
    timeout: 10000
})




// 导出axios实例
export default service

按照项目的模块，创建各自的 api/xxx.js

javascript 复制代码 
import request from '@/utils/request'

// 查询全部用户
export function getUserList(query) {
     return request({
        url: '/users',
        method: 'get',
         params: query
     })
}

// 用户登录
export function login(data) {
    return request({
        url: '/login',
        method: 'post',
        data
    })
}

页面内导入该方法

javascript 复制代码 
// 从api/user.js中导入getUserList,login函数
import { getUserList, login } from '@/api/user'

方法调用使用

javascript 复制代码 
  methods: {
      fetchData() {
        getUserList({page: 1}).then(res => {
            console.log("获取第1页的用户数据:", res.data)
            this.pageNum = res.data.page
            this.pageSize = res.data.per_page
            this.total = res.data.total
            this.totalPages = res.data.total_pages
            this.users = res.data.data
        }).catch(err => {
          console.log("获取用户数据失败:", err)
        })
    },
    login() {
      login(this.user).then(res => {
              console.log("登录成功:",res.data)
              alert("登录成功")
            })
            .catch(err => {
              console.log("登录失败:",err)
            })
    }
  }

删除之前 main.js 中关于 axios 的配置即可

19.7 拦截器

https://www.axios-http.cn/docs/interceptors

在 request.js 文件中添加请求拦截

js

javascript 复制代码 
// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log('------- 请求拦截器 -------')
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

在 request.js 中响应拦截

js

javascript 复制代码 
// 添加响应拦截器
service.interceptors.response.use(function (response) {
    console.log('------- 响应拦截器 -------')
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

演示接口

接口由该网站提供: https://reqres.in/

每个请求需要设置请求头

yaml

javascript 复制代码 
headers:{
    "x-api-key":"reqres_df5880e088e145d28cee541a6b424b67"
 },
方式 路径 参数
GET https://reqres.in/api/users?page=2 page=2
POST https://reqres.in/api/users plain { "name": "morpheus", "job": "leader" }
POST https://reqres.in/api/login plain { "email": "eve.holt@reqres.in", "password": "cityslicka" }

二十、Element UI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

官网： https://element.eleme.cn/#/zh-CN

Element Plus, 基于 Vue 3，面向设计师和开发者的组件库

官网: https://element-plus.gitee.io/zh-CN/

安装 & 入门使用

1. 装 ElementUI

npm install element-ui -S

2. 项目中引入

引入 Element

javascript 复制代码 
// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

// ...其他以前的东西...

测试

新建文件，Element 官网复制代码，启动访问即可

常用组件

补充知识： 对象展开运算符

对象展开运算符 ...（也称为扩展运算符）是一种用于展开对象或数组的语法，它允许将一个对象或数组拆分成单独的元素，并在其他对象或数组中使用。在 JavaScript 中，... 运算符可以用在多种场景中，下面分别介绍它们的用法。

展开对象

可以使用对象展开运算符 <font style="color:rgb(233, 105, 0);background-color:rgb(248, 248, 248);">...</font> 来创建一个新对象，并将另一个对象中的属性和值复制到新对象中。这可以用于对象浅拷贝或对象合并。

示例：

javascript 复制代码 
const obj1 = { name: 'John', age: 30 };
const obj2 = { ...obj1, city: 'New York' };
obj2 = 

console.log(obj2);
// 输出：{ name: 'John', age: 30, city: 'New York' }

合并对象

将多个对象合并成一个新对象的简便方法。如果有相同的属性，后面的对象的属性值会覆盖前面的对象的属性值。

示例：

javascript 复制代码 
const obj1 = { name: 'John', age: 30 };
const obj2 = { city: 'New York' };
const obj3 = { ...obj1, ...obj2 };

console.log(obj3);
// 输出：{ name: 'John', age: 30, city: 'New York' }

展开数组

在数组中使用 <font style="color:rgb(233, 105, 0);background-color:rgb(248, 248, 248);">...</font> 可以将一个数组展开为独立的元素，可以用于创建一个新数组或者在函数调用时传递参数。

示例：

javascript 复制代码 
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2);
// 输出：[1, 2, 3, 4, 5]
javascript 复制代码 
const arr = [1, 2, 3];
someFunction(...arr); // 将数组中的元素作为参数传递给函数
相关推荐
阿蒙Amon2 小时前
JavaScript学习笔记：14.类型数组
javascript·笔记·学习
风止何安啊2 小时前
一场组件的进化脱口秀——React从 “类” 到 “hooks” 的 “改头换面”
前端·react.js·面试
JS_GGbond2 小时前
给数组装上超能力：JavaScript数组方法趣味指南
前端·javascript
前端无涯2 小时前
Tailwind CSS v4 开发 APP 内嵌 H5：安卓 WebView 样式丢失问题解决与降级实战
前端
小邋遢2.02 小时前
vscod 执行npm build报错：Error: Cannot find module ‘vite‘
前端·npm·node.js
OLong2 小时前
this有且仅有的五种指法
javascript
是你的小橘呀2 小时前
新手入门 React 必备：电影榜单项目核心知识点全解析
前端·javascript
yinmaisoft2 小时前
JNPF 钉钉双向同步攻略：组织 / 用户一键打通，触发事件自动联动
前端·低代码·钉钉
梨子同志2 小时前
Node.js Buffer 和 Stream
前端
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04【AutoGLM部署】本地私有化部署AI手机Agent05Open-AutoGLM Windows 安装部署教程06在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）07Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser08BongoCat - 跨平台键盘猫动画工具09【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）