vue学习-09vue动画效果和配置代理服务器

动画效果

Vue.js提供了多种方式来实现动画效果，最常用的是使用Vue的过渡和动画功能。下面是一个简单的示例，展示了如何在Vue.js中创建动画效果：

过渡效果：
Vue提供了transition组件，它可以包裹要进行过渡动画的元素。以下是一个例子：

<template>
  <div>
    <button @click="toggle">Togglebutton>
    <transition name="fade" mode="out-in">
      <p v-if="show">这是一个过渡效果p>
    transition>
  div>
template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在上面的例子中，当点击按钮时，段落元素会淡入淡出，产生过渡效果。通过在transition组件上设置name属性，你可以定义过渡效果的类名，然后在CSS中定义相应的样式。

动画效果：
Vue还提供了transition-group组件，用于处理列表元素的动画效果。以下是一个简单的示例：

<template>
  <div>
    <button @click="addItem">添加项目button>
    <transition-group name="list" tag="ul">
      <li v-for="(item, index) in items" :key="index" class="list-item">
        {{ item }}
      li>
    transition-group>
  div>
template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    addItem() {
      this.items.push('新项目');
    }
  }
};
script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-item {
  list-style: none;
  margin: 5px 0;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

在上面的例子中，点击按钮会向列表中添加新项目，同时会产生淡入和淡出的动画效果。

其他：
当涉及到在Vue.js中实现动画效果时，你可以使用不同的方式和库来实现各种各样的动画。以下是一些其他常见的动画效果以及它们的示例：

Velocity.js：

Velocity.js 是一个独立的JavaScript动画库，与Vue.js兼容。你可以使用Velocity.js来创建更复杂的动画效果，例如缓动、轨迹动画等。要使用Velocity.js，首先确保将它引入到你的项目中，然后可以像这样在Vue组件中使用它：

npm install velocity-animate
1

<template>
  <div>
    <button @click="animateElement">Animatebutton>
    <div ref="animatedElement">这是一个动画元素div>
  div>
template>

<script>
import Velocity from 'velocity-animate';

export default {
  methods: {
    animateElement() {
      Velocity(this.$refs.animatedElement, { opacity: 0.5, translateY: '50px' }, { duration: 1000 });
    }
  }
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在上面的示例中，当点击按钮时，元素会使用Velocity.js产生动画效果。

GSAP (GreenSock Animation Platform)：

同样也需要先引入后才能使用

npm install gsap
1

GSAP 是一个功能强大的JavaScript动画库，用于创建高性能的动画效果。你可以将GSAP与Vue.js集成以实现各种复杂的动画效果。以下是一个简单的示例：

<template>
  <div>
    <button @click="animateElement">Animatebutton>
    <div ref="animatedElement">这是一个动画元素div>
  div>
template>

<script>
import { TweenMax } from 'gsap';

export default {
  methods: {
    animateElement() {
      TweenMax.to(this.$refs.animatedElement, 1, { opacity: 0.5, y: 50 });
    }
  }
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这个示例中，GSAP的TweenMax库用于创建动画效果。

CSS动画：

除了Vue的过渡和动画功能，你还可以使用纯CSS来创建动画效果。这通常包括使用@keyframes规则和animation属性。例如：

<template>
  <div>
    <button @click="startAnimation">Start Animationbutton>
    <div class="animated-element" :class="{ active: isAnimating }">div>
  div>
template>

<script>
export default {
  data() {
    return {
      isAnimating: false
    };
  },
  methods: {
    startAnimation() {
      this.isAnimating = true;
      setTimeout(() => {
        this.isAnimating = false;
      }, 1000);
    }
  }
};
script>

<style>
.animated-element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: background-color 0.5s;
}

.animated-element.active {
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% {
    background-color: #3498db;
  }
  100% {
    background-color: #e74c3c;
  }
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

在上面的示例中，点击按钮会触发CSS动画。

配置代理服务器

要在Vue.js项目中配置代理服务器，你可以使用Vue CLI提供的代理配置功能。以下是一些简单的步骤：

打开你的Vue.js项目的根目录。

在项目根目录下找到 vue.config.js 文件，如果没有则可以手动创建。

在 vue.config.js 文件中添加以下内容，以配置代理服务器：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-proxy-server-url.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

例如：

module.exports = {
  devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/atguigu': '/atguigu'
        }
      },
      '/demo': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/demo': '/demo'
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在上面的配置中，将 /api 路径代理到了 http://your-proxy-server-url.com。你可以根据你的需求修改这些配置选项。

保存 vue.config.js 文件。


确保你的开发服务器是运行的，可以使用 npm run serve 命令启动开发服务器。
1
2
3
4

现在，你的Vue.js项目应该能够将以 /api 开头的请求代理到指定的代理服务器。这对于解决跨域请求问题非常有用。

请记住替换 ‘http://your-proxy-server-url.com’ 为你实际的代理服务器地址，并根据需要修改其他配置选项。

---

通过上面的配置，成功地将 /atguigu 和 /demo 路径代理到了 http://localhost:8080，并且进行了路径重写。现在，你可以在前端代码中使用相对路径来发送请求，代理服务器会将这些请求转发到后端服务器。

import axios from 'axios';

export default {
  methods: {
    getStudentsData() {
      axios.get('/atguigu/students')
        .then(response => {
          // 处理响应数据
          console.log(response.data);
        })
        .catch(error => {
          // 处理请求错误
          console.error(error);
        });
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

通过使用相对路径 /atguigu/students，代理服务器会将该请求转发到 http://localhost:8080/atguigu/students，并将响应返回给前端。

同样，如果你想发送请求到 /demo/cars，只需在前端代码中使用相对路径 /demo/cars 即可。

App.vue

<template>
    <div>
        <button @click="getStudents">点击获取学生信息button>
        <button @click="getCars">点击获取汽车信息button>
    div>
template>

<script>
    //引入axios组件
    import axios from 'axios'

    export default {
        name:'App',
        methods:{
            getStudents(){
                //访问成功执行回调函数，找代理服务器要数据
                axios.get('http://localhost:8080/atguigu/students').then((response)=>{
                    console.log("请求成功!!!",response.data);//从响应对象中获取响应数据
                },(error)=>{
                    console.log("请求失败!!!",error.message);从响应对象中获失败信息
                });
            },
            getCars(){
                //访问成功执行回调函数，找代理服务器要数据
                axios.get('http://localhost:8080/demo/cars').then((response)=>{
                    console.log("请求成功!!!",response.data);//从响应对象中获取响应数据
                },(error)=>{
                    console.log("请求失败!!!",error.message);从响应对象中获失败信息
                });
            }
        }
    }
script>

<style>
    
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37