【八】Vue之插件

Dream-Z / 2023-08-07 / 原文

【一】项目功能插件

【二】vue-router

【1】详解

（1）介绍

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

（2）简单的Vue Router案例

  1. 首先，确保您已经在项目中安装了Vue Router。您可以通过以下命令使用npm进行安装：
npm install vue-router
  1. 在Vue项目的主文件（通常是main.js）中导入Vue Router，并将其配置为Vue实例的插件：
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
  1. 创建Vue Router实例，并定义路由规则。在这个例子中，我们将创建两个路由，一个是主页路由/，另一个是关于页面路由/about：
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});
  1. 创建对应的组件。在这个例子中，我们创建名为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>
  1. 在Vue实例中使用Vue Router。在您的Vue实例中，将创建的Vue Router实例传递给router选项：
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');
  1. 最后，在您的应用程序中，使用<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
  1. 在Vue项目的主文件（通常是main.js）中导入Vuex，并将其配置为Vue实例的插件：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
  1. 创建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
    }
  }
})
  1. 在Vue实例中使用Vuex。在您的Vue实例中，将创建的Vuex store实例传递给store选项：
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')
  1. 在组件中使用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
  1. 在Vue项目的主文件（通常是main.js）中导入vue-cookies，并将其配置为Vue实例的插件：
import Vue from 'vue'
import VueCookies from 'vue-cookies'

Vue.use(VueCookies)
  1. 在需要使用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'
  1. 使用axios发送GET请求：
axios.get('https://api.example.com/data')
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data)
  })
  .catch(error => {
    // 请求失败，处理错误
    console.error(error)
  })
  1. 使用axios发送POST请求：
axios.post('https://api.example.com/data', { name: 'John' })
  .then(response => {
    // 请求成功，处理响应数据
    console.log(response.data)
  })
  .catch(error => {
    // 请求失败，处理错误
    console.error(error)
  })
  1. 可以通过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插件

【八】Vue之插件更多相关文章

Android 哪些系统应用没法禁用（即哪些应用的禁用按钮是灰选)？

AJAX & AXIOS-2024/11/1

验证码处理在自动化测试中的应用

Java，启动！

2024/11/1日 日志 关于JavaScript简介&引入方式 以及基础语法的学习

android 13 更改手机信号调整

BFS(Breath First Search 广度优先搜索)

Angular 18 上手开发

单链表题+数组题（快慢指针和左右指针）

MySQL和Easy-Es语法对照表

DevOp相关

CSRF攻击与防御

华为云开源项目Sermant正式成为CNCF官方项目

spring-boot-configuration-processor无法生效

给网站添加春节灯笼效果：引入即用，附源码！

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

程序员的修炼之路

Java-中文官方教程-2022-版-一-

Java-中文官方教程-2022-版-五-

Java-中文官方教程-2022-版-四-

随机推荐

命令拼接技巧

Fiddler抓包Android7以内版本

SD NAND 与 SPI NAND

C语言中的编译过程详解

step7 V5.x上的SCL

yolo --- 核心思想

【游记】CCPC 济南 2024 游记

AJAX & AXIOS-2024/11/1

验证码处理在自动化测试中的应用

一些学科笑话

NOIP2024模拟赛20 & 11.1 小记

20241101 数据结构与算法期中机试收获

Java，启动！

什么是IT技术

即将到来！

2024/11/1日 日志 关于JavaScript简介&引入方式 以及基础语法的学习

舍得-时间-工作是人的一生最重要的事情-自己要有私房钱-人的一生最重要的事情是书写自己的人生

2.TiUP 部署 DM 集群

原型模式的C++实现

python bytecode解析

热门话题

Ethernaut Level 11: Elevator Attack and Blockchain Interaction

快速部署开源spug运维平台的Docker安装指南

驱动调试之printk的原理与使用

计算机思维模型及其应用

华为云发布代码大模型PanGu-Coder2，实现高效代码生成

Linux多硬盘数据存储和分区操作

构建高可用架构: 分层冗余与自动故障转移

LoRA：高效调参的大语言模型适应方法

《分布式系统的基本原理及互联网分层架构的本质》

Hadoop写流程解析

Java架构师的系统架构设计方法论中的规范要点

使用observeDOM解决BetterScroll插件在移动端无法滑动的问题

互联网一致性架构设计实践

高并发系统架构与水平扩展

混合应用的崛起：跨平台开发取代原生应用

  穗舟网 （www.seizhou.com）

本站除标明"本站原创"外所有文章版权归创作人所有，本站不承担任何法律责任和连带责任，如有冒犯请直接联系，我们将立即予以纠正并致歉。

Powered by WordPress  ·  v1.0.0-alpha