vue+element-ui初体验入门拥有自己的前台项目以及配置文件讲解（2）组件式开发，路由，请求发送

一单成

已于 2023-06-19 09:09:10 修改

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js ui javascript

于 2023-06-19 09:05:07 首次发布

本文链接：https://blog.csdn.net/weixin_72186894/article/details/130963202

版权

vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

阿丹：

前面的文章已经进行了vue的组件安装，本篇文章来了解一下vue的语句语法以及element-ui的具体用法。并使用全局的守卫路由来完成用户完成登录来请求头携带token

导入axios以及导入element-ui

按照图片指引来到main.js将我们前面文章下载的组件进行导入

import Element from 'element-ui'  //引入element-ui
import axios from 'axios'  //引入axios
Vue.use(Element)		//使用element-ui
Vue.prototype.axios = axios; //使用axios
import 'element-ui/lib/theme-chalk/index.css';

代码解读:

这是一段 Vue.js 代码片段，它通过引入 element-ui 和 axios 库并将其绑定到 Vue 上，来扩展 Vue 的功能。

具体来说，这段代码首先使用 import 语句从文件系统中引入 element-ui 和 axios 库，然后将 Element 对象绑定到 Vue 上，以便在Vue实例中使用 element-ui 的组件。使用 Vue.use(Element) 表示将 Element 对象注册为 Vue 插件。然后，通过 Vue.prototype.axios = axios ，将 axios 库绑定到 Vue.prototype 上，使得在 Vue 实例中所有地方都可以使用 axios，而不必重复引入。

最后，通过 import 'element-ui/lib/theme-chalk/index.css' 语句引入 element-ui 的 CSS 样式表，以适用于应用程序中的所有组件。

在vue中新建一个页面并给与路由跳转

上面我们新建了一个vue项目，现在运行的时候发现是一个初始化页面，我们现在开始动手获得一个自己自定义的页面

1、创建一个新的vue页面

在components文件夹下面创建一个属于自己的页面

2、新建了一个adsvue.vue的页面

我们能看到默认的页面中有一些自己生成的代码。我们来了解一下

是一个Vue的组件文件，包括模板、脚本和样式部分。Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。模板部分描述了页面的布局和组件之间的关系，脚本部分包含Vue组件的逻辑，而样式部分则定义了组件的外观和样式

我们注意到

export default{

name:"adsvue"
}

在Vue组件中，name选项是组件的名称。如果你使用了Vue的单文件组件(.vue文件)，那么组件的名称无需设置，系统会自动生成。但如果你使用的是vue.js，就需要手动指定name属性，作为唯一标识一个组件，用于调试与渲染。举个例子，如果在其他组件中引用了这个组件，那么就可以使用"name"来引用这个组件，而不是用组件的路径。这样可以更方便地管理组件，并且可以提高代码的可读性。

3、使用vue的一个模版来快速的帮助开发

下面是一个帮助快速开发的vue模版，如果有需求需要使用上面的使用名字来调用的话可以加入上面的代码。

<template>
  <div></div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"
  
      return {};
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {},
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>

现在我们已经拥有了一个属于自己的vue页面，但是我们发现无法通过路径等去访问到我们这个页面，那么我们需要将这个vue页面添加在路由中。那么我就能使用路径来访问到这个页面了。

4、将vue项目添加入路由

这个就是路由的配置页面

能看到现在只有helloworld一个页面

将我们的页面添加进入导入了页面

创建对于这个vue项目的路由

这段代码是用来定义Vue Router路由的一个路由对象，其中path属性是路由的路径，name属性是路由名称，component属性是路由对应的组件。

path：表示可以匹配到这个路由的路径
name：表示当前路由的名称，用于与其他路由区分开来
component：指定路由渲染的组件，可以通过import adsvue from '@/components/adsvue.vue'引入adsvue组件，然后将它设置为component的值。

现在简单的路由已经介绍完毕了。我们现在我们自定义的页面上写一点东西，我们演示一下效果。

可以看到vue页面可以正常的打开。

如果想访问我们自己的页面就需要在上面的路径上输入对应页面的路径

现在属于我们的页面就跳转出来了。

现在开始路由的重点

守卫路由

阿丹：

之前在写jsp页面项目的时候拦截器大部分在后台写的，vue中可以在前台完成这样的效果。

简单介绍一下vue中守卫路由：

Vue中的路由守卫是一个函数，在进行路由导航时会被调用，用于控制是否允许进行导航。可以使用它进行权限控制、路由拦截、数据预处理等操作。Vue Router提供了多种类型的路由守卫：

全局守卫：这些守卫被注册在Vue Router实例上，对所有路由生效。可以用来处理用户登录状态、路由拦截、页面切换前的处理等。包括beforeEach、beforeResolve、afterEach等。
路由独享守卫：这些守卫被注册在路由配置上，只对当前路由生效。可以用来处理当前路由的权限问题、数据预处理等。包括beforeEnter等。
组件内守卫：这些守卫被注册在具体的组件中，只对当前组件生效。可以用来处理组件内路由的生命周期。包括beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等。

使用守卫可以很方便地控制路由的跳转，并在此过程中进行其他操作，避免用户恶意操作和不当使用带来的问题。

全局守卫路由

全局守卫路由，分为三种，用于

全局守卫：

全局前置守卫，

前置守卫是在用户进行全局访问前进行出发，可完成操作有：

1、校验是否请求头携带token

2、全局请求头挂载token

等


router.beforeEach((to, from, next) => {
  console.log('')
  next()
}

后置路由守卫

这个功能主要用于收集用户的操作数据以及进行数据分析和日志记

后置守卫的业务场景

统计用户停留时间：在用户离开页面时执行一个定时器，记录用户在该页面停留的时间，并将这些数据发送到服务器端进行分析。
记录用户操作轨迹：使用后置路由守卫跟踪用户在网站中的操作路径，然后记录这些数据以便日后分析。这个功能可以帮助开发人员改进用户界面的设计和用户体验。
页面错误监控：通过监听后置路由守卫，开发人员可以及时发现页面上出现的错误和异常情况，并在第一时间内向用户展示错误信息。
登录态检查：通过后置路由守卫检查用户是否登录，然后根据用户的登录状态决定是否跳转到登录页面。


router.afterEach((to, from, next) => {
  console.log('')
  next()
}

全局解析守卫

全局解析守卫是 Vue 中的一种全局钩子函数，它可以在路由解析被触发之前进行处理，常用于路由中的数据预取或其他需要在路由解析前执行的逻辑。下面是一些可能需要使用全局解析守卫的业务场景：

数据预取：在路由解析前，使用全局解析守卫预先获取页面所需的数据，以便提高页面加载速度和用户体验。
权限控制：使用全局解析守卫根据用户权限信息判断当前用户是否有权限进入某个页面，从而进行页面授权管理。
多语言支持：可以使用全局解析守卫在路由解析前根据用户所选语言版本，在页面上做出相应的显示和语言切换。
节流控制：当应用的某个页面需要频繁更新和请求数据时，可以使用全局解析守卫控制请求的节奏，防止频繁请求数据造成服务器压力过大。


router.beforeResolve((to, from, next) => {
  console.log()
  next()
}

注意补充顺序:

beforeEach------------------->beforeEnter------------->beforeRouterEnter------------->beforeResolve-------->affterEach

进入前置守卫--------------->读取路由信息-------------->进入组件---------------->进行解析------------>

进入后置守卫

参数说明：

1.to 表示要去哪里

2.from 表示从哪里来

3.next 表示是否方向

阿丹在这里只介绍了一部分路由需要的可自行百度

axios在vue的使用

阿丹：

其实看起来axios很陌生在但是它在jsp中的名字叫做ajax。是不是一下子就熟悉起来了。

但是和jsp中有区别的是：

在jsp中大概率我们发布和生产的环境是打成了一个war包，也就是意味着在运行的时候出现的是一个项目中前台和后台相互的访问。也就是一体的。这里就不牵扯到一个致命的问题：跨域。

那么在vue中的axios中访问去发送请求有两种方式：

通过这个指令来安装axios

npm install --save axios

1、直接将路径输入，直接对路径发送进行请求。

2、通过在配置文件中书写代理通常是/api来转发请求。

在处理和使用两个方法的时候就要涉及跨域问题了。

在开始我们的vue路途上我们先将跨域问题来进行解决。

在讲解开始前先说明一下我的后台的相关接口等

这里port说明我的后台处理接口为10001。也就是说需要向后台传送请求的时候就需要将ip+10001+路径就可以将数据请求达到后台服务器。

直接将路径输入来发送请求时:

请求的路径为https://ip+:后台端口/请求路径

axios.get(url).then(
res=>{

    }
)

axios.post(url,this.form).then(
res=>{

    }
)

参数说明

url是字符串形式可以使用字符串拼接来拼接请求路径

当请求方法为post的时候有两个参数，第一个参数为请求路径，第二个参数为向后台传递的表单。

res为请求之后的返回值可使用控制台打印来查看返回值结构。然后使用

this.需要赋值的对象 = res.根据结构来拿取需要的内容

一单成

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue+element-ui初体验入门拥有自己的前台项目以及配置文件讲解（2）组件式开发，路由，请求发送

阿丹：前面的文章已经进行了vue的组件安装，本篇文章来了解一下vue的语句语法以及element-ui的具体用法。并使用全局的守卫路由来完成用户完成登录来请求头携带token。
复制链接

扫一扫

专栏目录