【Vue】结合ElementUI实现简单数据请求和页面跳转功能

一、准备工作

1、创建一个Vue-cli程序

之前的博客有。各位看官姥爷,可以自查。

2、安装ElementUI

在创建Vue-cli程序的过程中,需要在控制台执行以下指令:

#安装 element-ui

npm i element-ui -S

#安装 SASS 加载器

cnpm install sass-loader node-sass --save-dev

3、准别好的login.vue和main.vue页面

这个是提前准备好的两个login.vue和main.vue页面。

login.vue页面:

<template><div><el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"><h3 class="login-title">欢迎登录</h3><el-form-item label="账号" prop="username"><el-input type="text" placeholder="请输入账号" v-model="form.username"/></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" placeholder="请输入密码" v-model="form.password"/></el-form-item><el-form-item><el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button></el-form-item></el-form><el-dialogtitle="温馨提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>请输入账号和密码</span><span slot="footer" class="dialog-footer"><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>
export default {name: "Login",data() {return {form: {username: '',password: ''},//表单验证,需要在el-form-item 元素中增加prop 属性rules: {username: [{required: true, message: " 账号不可为空", trigger: 'blur'}],password: [{required: true, message: " 密码不可为空 ", trigger: 'blur'}]},
//对话框显示和隐藏dialogVisible: false}},methods: {onSubmit(formName) {
//为表单绑定验证功能this.$refs[formName].validate((valid) => {if (valid) {
//使用vue-router路由到指定页面,该方式称之为编程式导航this.$router.push("/main/"+this.form.username);} else {this.dialogVisible = true;return false;}});}}
}
</script><style lang="scss" scoped>
.login-box {border: 1px solid #DCDFE6;width: 350px;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;
}.login-title {text-align: center;margin: 0 auto 40px auto;color: #303133;
}
</style>

main.vue页面:

<template><div><el-container><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-caret-right"></i>用户管理</template><el-menu-item-group><el-menu-item index="1-1">
<!--                name传组件名更方便 params传递参数--><router-link v-bind:to="{name: 'UserProfile',params:{id: 1}}">个人信息</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/user/list">用户列表</router-link></el-menu-item><el-menu-item index="1-3"><router-link to="/goHome">回到首页</router-link></el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-caret-right"></i>内容管理</template><e1-menu-item-group><el-menu-item index="2-1">分类管理</el-menu-item><el-menu-item index="2-2">内容列表</el-menu-item></e1-menu-item-group></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-caret-right"></i>系统管理</template><e1-menu-item-group><el-menu-item index="3-1">页面设置</el-menu-item><el-menu-item index="3-2">用户设置</el-menu-item></e1-menu-item-group></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right:15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出登录</el-dropdown-item></el-dropdown-menu></el-dropdown><span>{{name}}</span></el-header><el-main><router-view></router-view></el-main></el-container></el-container></div>
</template><script>
export default {props:['name'],name: "Main"
}
</script><style scoped lang="scss">
.el-header {.el-header {backdrop-color: #2c568f;color: #333;line-height: 60px;}.el-aside {color: #333;}
}
</style>

   这两个页面中已经写了一些代码,主要的流程是用户在login.vue页面输入账号和密码,只要不为空,就会跳转到main.vue页面,而在main.vue页面中,有两个子导航栏,点击该导航栏就会跳转到对应子路由的子组件中。

4、main.js下的两个页面List.vue和Profile.vue

List.vue页面:

<template>
<h1>用户列表</h1>
</template><script>
export default {name: "UserList"
}
</script><style scoped></style>

Profile.vue页面:

<template>
<!-- 所有的元素,必须在根节点下,需要有盒子套着 --><div><h1>个人信息</h1>{{ id}}</div>
</template><script>
export default {}
</script><style scoped></style>

二、创建路由

代码如下:

ps:注意main组件下的children属性是嵌套路由,表示在我们的main.vue中有两个路由的跳转,跳转时,可以先找到main再找到对应的子组件的跳转路由。

import Vue from "vue"
import Router from 'vue-router'
import Main from "../views/Main";
import Login from "../views/Login";
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
import NotFound from "../views/NotFound";
Vue.use(Router);export default new Router({mode:"history",routes:[{path:'/login',//嵌套路由component: Login,},{path: '/main/:name',component: Main,props:true,children:[{path:'/user/profile/:id',name:'UserProfile',//注意名字是字符串props:true,component:UserProfile},{path:'/user/list',component:UserList},{path:'/goHome',redirect:'/main'}]},{path:'*',component:NotFound,}]
});

设置main.js,将elementUI和router引入,代码如下:

import Vue from 'vue'
import App from './App'
import router from './router'import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
import VueAxios from 'vue-axios'
//先router在axios不然识别不到axios
Vue.use(router);
Vue.use(VueAxios,axios);//这个顺序也不能变
Vue.use(ElementUI);
new Vue({el: '#app',router,render: h => h(App)//ElementUI官网的配置
})

三、页面跳转

其实现在已经可以实现页面跳转了,当我们“登录”跳转“主页面”,点解左右导航栏显示不同信息。

如下所示:

3cb837ad8319461292d9d97bddf4fe26.png

5c7dc70278324b70b106a4d9198645b7.png

b903aad944384457949b06568b955c94.png

    其实到这里对于页面之间的简单跳转就差不多了,对于我们后端学前端的人员来说,最重要的就还剩数据的请求然后再在页面显示即可。

四、数据请求

  我们以Profile.vue页码为例,当用户点击该导航栏时,实现数据的请求,看能否通过接口拿到我们先要的数据呢?

首先我们写一个静态数据测一下,因为还未写后端代码。

{"name":"lfy","url": "http://baidu.com","page": "1","isNonProfit":"true","address": {"street": "含光门","city":"陕西西安","country": "中国"},"links": [{"name": "B站","url": "https://www.bilibili.com/"},{"name": "4399","url": "https://www.4399.com/"},{"name": "百度","url": "https://www.baidu.com/"}]
}

   我们在Proflie.vue实例中,有beforeRouteEnter()、beforeRouteLeave()两个函数分别是进入路由之前和离开路由之后,我们可以在这两个函数之内进行数据的请求,只有请求的方式用的是之前学的axios来请求。

具体代码如下:

<script>
export default {props:['id'],name: "Profile",beforeRouteEnter:(to,from,next)=>{console.log("进入路由之前");next(vm=>{vm.getData();});},beforeRouteLeave:(to,from,next)=>{console.log("进入路由之后");next();},methods:{getData:function () {this.axios({method:"get",url:'http://localhost:8080/static/mock/data.json'}).then(function (response){console.log(response);})}}
}
</script>

效果显示:

87e312a7b58148ddb7c19f230d1889ce.png

   如图所示当我们点击导航栏的时候就可以完成数据的请求,后面只需要通过之前博客写的关于vue的事件进行取值,和elementUI的一些样式进行数据渲染即可。

五、总结

   到这里关于vue的一些基本知识就学习的差不多了,接下来博主正在做一个springboot+vue的项目,后面会将我们学习的内容用到项目中去,也会写相应的博客与大家分享技术。那我们就下一篇博客再见!如果这篇博客对各位小伙伴有所帮助,请点赞,收藏支持一波哦~

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/5951.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

毫米波雷达多人呼吸心跳检测MATLAB仿真

本文基于TI的IWR1642毫米波雷达 2T4R MIMO阵列&#xff0c;通过实际采集数据算法仿真&#xff0c;实现多人呼吸心跳检测。 文章末尾给出了本文的仿真代码。 主要内容包含&#xff1a; &#xff08;1&#xff09;雷达参数设定 &#xff08;2&#xff09;ADC数据导入 &#xff08…

一对一WebRTC视频通话系列(一)—— 创建页面并显示摄像头画面

本系列博客主要记录WebRtc实现过程中的一些重点&#xff0c;代码全部进行了注释&#xff0c;便于理解WebRTC整体实现。 一、创建html页面 简单添加input、button、video控件的布局。 <html><head><title>WebRTC demo</title></head><h1>…

【算法基础实验】图论-深度优先搜索和深度优先路径

深度优先(DFS) 理论基础 深度优先搜索&#xff08;DFS, Depth-First Search&#xff09;是图和树的遍历算法中的一种&#xff0c;它从一个节点开始&#xff0c;沿着树的边走到尽可能深的分支&#xff0c;直到节点没有子节点为止&#xff0c;然后回溯继续搜索下一个分支。DFS …

ubuntu外置网卡配置AP模式

外置网卡RTL8811CU设置 UBUNTU使用RTL8811CU网卡&#xff08;包含树莓派&#xff09; 外置网卡配置AP模式流程 1. 检查网卡支持情况&#xff08;是否支持AP模式&#xff09; iw list找到以上部分&#xff0c;发现支持AP 2. 安装依赖 sudo apt-get update sudo apt-get in…

c语言从入门到函数速成(1)

温馨提醒&#xff1a;本篇文章适合人群&#xff1a;刚学c又感觉那个地方不怎么懂的同学以及以及学了一些因为自身原因停学一段时间后又继续学c的同学 好&#xff0c;正片开始。 主函数 学c时最先学的是我们c语言程序的主体函数&#xff0c;c的主函数有两种写法&#xff0c;这…

25 JavaScript学习:var let const

JavaScript全局变量 JavaScript中全局变量存在多种情况和定义方式&#xff0c;下面详细解释并提供相应的举例&#xff1a; 使用var关键字声明的全局变量&#xff1a; var globalVar "我是全局变量";未使用var关键字声明的变量会成为全局变量&#xff08;不推荐使用&…

【御控物联网平台】物联网数据传输数据格式

物联网平台常用设备消息的标准数据格式为JSON&#xff0c;但是不同厂家、不同型号设备数据传输格式各异&#xff0c;给物联网平台带来数据解析的压力。御控物联网平台提供支持JSON数据消息解析功能的代码库&#xff08;JS、Java、.Net&#xff09;&#xff0c;实现设备自定义JS…

八大排序详解:动图、代码、注释

目录 何为八大排序&#xff1f; 直接插入排序 排序过程解读 直接插入排序的特性总结&#xff1a; 希尔排序 希尔排序的特性总结&#xff1a; 直接选择排序 直接选择排序的特性总结&#xff1a; 堆排序 直接选择排序的特性总结&#xff1a; 冒泡排序 快速排序 1.Hoa…

初学React基础

最近准备跟着黑马React学一下React&#xff0c;扩充一下技术面&#xff0c;打算还是以一边学习一边记笔记为主&#xff0c;进行学习&#xff01; 1. React介绍 1.1. React是什么&#xff1f; React是由FaceBook现在称&#xff08;Meta&#xff09;开发的开源 JavaScript 库&a…

【leetcode】数组和相关题目总结

1. 两数之和 直接利用hashmap存储值和对于索引&#xff0c;利用target-nums[i]去哈希表里找对应数值。返回下标。 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {unordered_map<int, int> mp;vector<int> res;fo…

【linux】进程间通信(匿名管道)

对于本篇文章我们采取三段论&#xff1a;是什么 为什么 怎么办。 目录 进程间为什么要通信&#xff1f;进程间如何通信&#xff1f;进程间怎么通信&#xff1f;匿名管道&#xff1a;匿名管道原理&#xff1a;代码示例&#xff1a;匿名管道的情况与特征&#xff1a; 进程间为什…

win下vscode的vim切换模式的中英文切换

问题描述 在vscode中安装vim插件后&#xff0c;如果insert模式下完成输入后&#xff0c;在中文输入方式下按esc会发生无效输入&#xff0c;需要手动切换到英文。 解决方法 下载完成vscode并在其中配置vim插件下载github—im-select.exe插件&#xff08;注意很多博文中的gitcod…

【MySQL篇】使用mysqldump全量+mysqlbinlog增量完成实例的全库恢复(第四篇,总共四篇)

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&am…

每天五分钟深度学习框架pytorch:如何创建多维Tensor张量元素?

本文重点 上节课程我们学习了如何创建Tensor标量,我们使用torch.tensor。本节课程我们学习如何创建Tensor向量,我们即可以使用torch.Tensor又可以使用torch.tensor,下面我们看一下二者的共同点和不同点。 Tensor张量 tensor张量是一个多维数组,零维就是一个点(就是上一…

【数据结构】链表专题3

前言 本篇博客我们继续来讨论链表专题&#xff0c;今天的链表算法题是经典中的经典 &#x1f493; 个人主页&#xff1a;小张同学zkf ⏩ 文章专栏&#xff1a;数据结构 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 目录 1.判断链表是否…

ROS1快速入门学习笔记 - 014launch启动文件的使用方法

一、定义 Launch文件&#xff1a;通过XML文件实现多节点的配置和启动&#xff08;可自动启动ROSMaster&#xff09; 二、常用语法 1. 根标签 <launch> - launch文件中的根元素采用<launch>标签定义 <launch>表示开始&#xff1b;<launch>表示结束&…

AD | Altium Designer(原理图设计、电路仿真、PCB绘图)汉化版

Altium Designer(原理图设计、电路仿真、PCB绘图) 通知公告 Altium Designer(AD)是一种功能强大的电子设计自动化(EDA)软件。它主要用于设计和开发电子产品,如电路板(PCB)、集成电路(IC)和嵌入式系统。AD提供了完整的设计工具套件,包括原理图设计、PCB布局、仿真、设…

40.WEB渗透测试-信息收集-域名、指纹收集(2)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;39.WEB渗透测试-信息收集-域名、指纹收集&#xff08;1&#xff09; oneforall的安装前置…

基于粒子滤波器的电池剩余使用寿命计算matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 粒子滤波器基础 4.2 电池剩余使用寿命建模与预测 4.3 粒子滤波器在电池寿命预测中的应用 5.完整工程文件 1.课题概述 基于粒子滤波器的电池剩余使用寿命计算。根据已知的数据&#xff0c;预测未来…

OPPO A72/A55/K7X/A53真我Q3S等手机ROOT刷机后广电卡没信号不读卡解决办法

目前运营商除了移动联通电信以外&#xff0c;还存在1个中国广电&#xff0c;广电属于第四大运营商&#xff0c;由于广电起步较晚&#xff0c;对于手机频段要求也自然不一样&#xff0c;导致目前市面上部分手机出厂没有信号或者不读卡等问题&#xff0c;特别在手机被用户自行刷机…