【八】Vue之插件

【一】项目功能插件

【二】vue-router

【1】详解

(1)介绍

• Vue Router是Vue.js官方提供的用于实现客户端路由的插件。
• 它允许您在单页面应用(SPA)中定义前端路由，以便根据不同的URL路径展示不同的组件内容，从而实现页面之间的切换和导航。

(2)简单的Vue Router案例

1. 首先，确保您已经在项目中安装了Vue Router。您可以通过以下命令使用npm进行安装：

npm install vue-router

2. 在Vue项目的主文件(通常是main.js)中导入Vue Router，并将其配置为Vue实例的插件：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

3. 创建Vue Router实例，并定义路由规则。在这个例子中，我们将创建两个路由，一个是主页路由/，另一个是关于页面路由/about：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

4. 创建对应的组件。在这个例子中，我们创建名为Home和About的组件：

// Home.vue
<template>
  <div>
    <h1>首页</h1>
    <!-- 具体的主页内容 -->
  </div>
</template>

<script>
export default {
  // 组件的逻辑代码
}
</script>

// About.vue
<template>
  <div>
    <h1>关于页面</h1>
    <!-- 具体的关于页面内容 -->
  </div>
</template>

<script>
export default {
  // 组件的逻辑代码
}
</script>

5. 在Vue实例中使用Vue Router。在您的Vue实例中，将创建的Vue Router实例传递给router选项：

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

6. 最后，在您的应用程序中，使用<router-view>组件来显示不同路径所对应的组件，使用<router-link>组件来导航到不同的路径：

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>

    <router-view></router-view>
  </div>
</template>

• 通过以上步骤，您就可以在Vue项目中成功使用Vue Router来实现基本的前端路由功能了。
• 根据不同的URL路径，Vue Router将自动切换并展示对应的组件内容。

• 请注意，这只是Vue Router的基本用法。
• Vue Router还提供了更多高级功能，例如路由参数、路由守卫等。
• 可以参考Vue Router官方文档以获取更详细的信息和进一步的用例。

【2】案例

{
    path: '/',
    name: 'home',
    // 路由的重定向
    redirect: '/home'
}

{
    // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
    path: '/one-view',
    name: 'one',
    component: () => import('./views/OneView.vue')
}

{
    // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
    path: '/one-view/one-detail',
    component: () => import('./views/OneDetail.vue'),
    // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的<router-view/>标签
    children: [{
        path: 'show',
        component: () => import('./components/OneShow.vue')
    }]
}
<!-- router-link渲染为a标签 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{name: 'one'}">One</router-link> |

<!-- 为路由渲染的组件占位 -->
<router-view />
a.router-link-exact-active {
    color: #42b983;
}
// router的逻辑转跳
this.$router.push('/one-view')

// router采用history方式访问上一级
this.$router.go(-1)

【二】vuex

【1】详解

(1)介绍

• Vuex是Vue.js官方提供的状态管理模式以及用于实现集中式状态管理的插件。
• 它能够帮助我们在Vue应用程序中更好地组织、管理和共享组件之间的数据。

(2)简单的Vuex案例

1. 首先，确保您已经在项目中安装了Vuex。您可以通过以下命令使用npm进行安装：

npm install vuex

2. 在Vue项目的主文件(通常是main.js)中导入Vuex，并将其配置为Vue实例的插件：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

3. 创建Vuex store实例。在这个例子中，我们将创建一个简单的store来管理一个计数器的状态：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    increment(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    },
    decrement(context) {
      setTimeout(() => {
        context.commit('decrement')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

4. 在Vue实例中使用Vuex。在您的Vue实例中，将创建的Vuex store实例传递给store选项：

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

5. 在组件中使用Vuex。在需要使用store的组件中，您可以使用$store对象来访问store中的状态、mutations、actions和getters。例如，在一个组件中展示计数器状态和调用增加计数器的mutation和action：

<template>
  <div>
    <h1>当前计数：{{ count }}</h1>
    <h1>计数的两倍：{{ doubleCount }}</h1>
    <button @click="increment">增加计数</button>
    <button @click="decrement">减少计数</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.dispatch('decrement')
    }
  }
}
</script>

• 通过以上步骤，您就可以在Vue项目中成功使用Vuex来实现集中式状态管理了。
• 不同的组件可以通过store对象来共享和修改状态，从而实现数据的统一管理和通信。

• 请注意，这只是Vuex的基本用法。
• Vuex还提供了更多高级功能，例如模块化的store、命名空间、插件等。
• 可以参考Vuex官方文档以获取更详细的信息和进一步的用例。

【2】案例

// 在任何一个组件中,均可以通过this.$store.state.msg访问msg的数据
// state永远只能拥有一种状态值
state: {
    msg: "状态管理器"
},
// 让state拥有多个状态值
mutations: {
    // 在一个一个组件中,均可以通过this.$store.commit('setMsg', new_msg)来修改state中的msg
    setMsg(state, new_msg) {
        state.msg = new_msg
    }
},
// 让mutations拥有多个状态值
actions: {

}

【三】vue-cookies

【1】详解

(1)介绍

• vue-cookies是一个用于在Vue.js应用程序中管理和操作浏览器cookie的插件。
• 通过它，您可以轻松地设置、获取和删除cookie，以及对cookie进行其他常见操作。

(2)简单的vue-cookies案例

1. 首先，确保您已经在项目中安装了vue-cookies。您可以通过以下命令使用npm进行安装：

npm install vue-cookies

2. 在Vue项目的主文件(通常是main.js)中导入vue-cookies，并将其配置为Vue实例的插件：

import Vue from 'vue'
import VueCookies from 'vue-cookies'

Vue.use(VueCookies)

3. 在需要使用cookie的组件中，您可以使用this.$cookies对象来进行cookie的设置、获取、删除等操作。以下是一些基本的示例：

• 设置cookie：

this.$cookies.set('username', 'your_username')

• 获取cookie：

const username = this.$cookies.get('username')

• 删除cookie：

this.$cookies.remove('username')

• 设置带有过期时间的cookie：

this.$cookies.set('token', 'your_token', '7d') // 7天后过期

• 获取所有的cookie：

const allCookies = this.$cookies.getAll()

• 通过以上操作，您就可以使用vue-cookies在Vue项目中管理和操作浏览器cookie了。
• 请注意，vue-cookies还提供了其他功能，例如设置cookie的域和路径、加密cookie等。
• 您可以参考vue-cookies的官方文档以获取更详细的信息和更多用例。

• 需要注意的是，由于使用了第三方插件vue-cookies，建议在使用插件前先熟悉并确保对cookie的使用遵循法律、隐私政策等相关规定，确保cookie的存储和使用符合法律法规和用户隐私保护的要求。

【2】案例

// 安装cookie的命令
// npm install vue-cookies --save
// 为项目配置全局vue-cookie
import VueCookies from 'vue-cookies'
// 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问
Vue.prototype.$cookies = VueCookies
// 持久化存储val的值到cookie中
this.$cookies.set('val', this.val, 300)
// 获取cookie中val字段值
this.$cookies.get('val')
// 删除cookie键值对
this.$cookies.remove('val')

【四】axios

【1】详解

(1)介绍

• axios是一个基于Promise的HTTP客户端，用于发送HTTP请求并处理响应。
  • 它是现代的、功能强大的前端网络请求库，广泛应用于Vue.js和其他JavaScript框架中。
• axios可以用于在浏览器和Node.js环境中进行HTTP请求。
  • 它支持各种请求方法(如GET、POST、PUT、DELETE等)，并提供了丰富的配置选项来自定义请求和响应的处理方式。
• 要使用axios，首先需要在项目中安装axios。
• 您可以通过以下命令使用npm进行安装：

npm install axios

• 安装完成后，您可以在Vue项目的任何组件中引入并使用axios。

(2)简单的axios案例

1. 在需要发送请求的组件中，首先导入axios：

import axios from 'axios'

2. 使用axios发送GET请求：

axios.get('https://api.example.com/data')
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data)
  })
  .catch(error => {
    // 请求失败，处理错误
    console.error(error)
  })

3. 使用axios发送POST请求：

axios.post('https://api.example.com/data', { name: 'John' })
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data)
  })
  .catch(error => {
    // 请求失败，处理错误
    console.error(error)
  })

4. 可以通过axios的配置选项来进行更多的定制，如设置请求头、发送FormData等：

axios.post('https://api.example.com/data', { name: 'John' }, {
  headers: {
    'Content-Type': 'application/json'
  }
})

• 需要注意的是，axios默认返回一个Promise对象，因此您可以使用.then()和.catch()方法来处理请求的响应和错误。
• 另外，axios还提供了其他的方法，如axios.put()、axios.delete()等，用于发送不同类型的HTTP请求。

• 通过以上操作，您就可以使用axios在Vue项目中发送HTTP请求并处理响应了。
• 请注意，建议在使用axios前先熟悉并确保对网络请求的使用遵循相关规范，并且对用户隐私和安全保护有充分的考虑。

【2】案例

import axios from 'axios' # 安装的模块不用加相对路径

axios.get().then()
// 安装 axios(ajax)的命令
// npm install axios--save
// 为项目配置全局axios
import Axios from 'axios'
Vue.prototype.$ajax = Axios
let _this = this
this.$ajax({
    method: 'post',
    url: 'http://127.0.0.1:5000/loginAction',
    params: {
        usr: this.usr,
        ps: this.ps
    }
}).then(function(res) {
    // this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向
    // 要更新页面的title变量,title属于vue实例
    // res为回调的对象,该对象的data属性就是后台返回的数据
    _this.title = res.data
}).catch(function(err) {
    window.console.log(err)
})
# 用pycharm启动该文件模拟后台
from flask import Flask, request, render_template
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/')
def index():
    return "<h1>主页</h1>"

@app.route('/loginAction', methods=['GET', 'POST'])
def test_action():
    # print(request.args)
    # print(request.form)
    # print(request.values)
    usr = request.args['usr']
    ps = request.args['ps']
    if usr != 'abc' or ps != '123':
        return 'login failed'
    return 'login success'


if __name__ == '__main__':
    app.run()

【五】跨域问题解决

【1】解决跨域方案

(1)响应头中Access-Control-Allow-Origin: * 允许所有的域访问

• 响应头中设置Access-Control-Allow-Origin: *表示允许所有的域名访问资源。
  • 这是一种简单的跨域解决方案，但在实际应用中并不推荐使用。
• 使用Access-Control-Allow-Origin: *可能存在安全风险，因为它允许任何网站发送请求并访问您的资源，可能导致恶意行为和信息泄漏。
  • 通常情况下，应该明确指定允许访问的域名，而不是使用通配符。
• 例如，您可以将Access-Control-Allow-Origin设置为具体的域名，只允许该域名下的请求访问资源：

Access-Control-Allow-Origin: https://example.com

• 这样做可以确保请求来自于您信任的域名，提高安全性。
  • 如果您需要允许多个域名访问资源，可以在响应头中指定多个域名，或使用其他更复杂的CORS策略，如设置Access-Control-Allow-Origin为具体的域名列表：

Access-Control-Allow-Origin: https://example1.com, https://example2.com

• 总之，建议在实际应用中避免使用Access-Control-Allow-Origin: *，而是明确指定允许访问的域名，以确保安全性和数据保护。

# http://www.mei.com/silo/women 响应头中Access-Control-Allow-Origin: * 允许所有的域访问
# 以猫眼电影为例 ：https://m.maoyan.com/#movie

(2)devServer.proxy

• devServer.proxy是Vue CLI中的一个配置选项，用于在开发模式下代理请求到其他后端服务器或API。

  • 该选项可以帮助我们进行开发时的跨域请求。

• 在Vue项目的vue.config.js文件中，我们可以通过设置devServer.proxy来配置代理。

• 示例代码如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

• 上述配置的含义是将所有以/api开头的请求代理到http://backend.example.com这个后端服务器上。

  • changeOrigin设置为true表示在请求头中将Host字段的值设置为目标服务器的URL。
  • pathRewrite用于重写请求路径，这里将/api前缀去除。

• 在这个例子中

  • 当我们在前端代码中使用/api/user来发送请求时
  • 实际上会被代理到http://backend.example.com/user。

• 通过使用devServer.proxy，我们可以避免在开发过程中出现跨域问题，并且能够将请求发送到真实的后端服务器上，使得开发体验更加贴近真实环境。

• 更多关于devServer.proxy的详细信息，请参考Vue CLI官方文档。

# devServer.proxy
# https://cli.vuejs.org/zh/config/#devserver-proxy

【2】案例

(1)vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/ajax': {
        target: 'https://m.maoyan.com/',
        changeOrigin: true
      }
    }
  }
}

(2)组件中

import axios from 'axios'
mounted () {
  axios.get('ajax/moreClassicList?sortId=1&showType=3').then(res => {
    console.log(res.data)
  })
}
```07-Vue插件