【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.xdnf.cn/news/1410538.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

echarts 拖动markline，并计算中间区域的差值，标注红色虚线

echarts 拖动markline，并计算中间区域的差值，标注红色虚线

<!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><!-- 引入 echarts.js --><script src"https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts-en.common.js" rel"external nof…
阅读更多...
Linux 学习 --- 编辑 vi 命令

Linux 学习 --- 编辑 vi 命令

1、vi 基本概念&#xff08;了解&#xff09; 基本上 vi 可以分为三种状态&#xff0c;分别是命令模式 (command mode)、插入模式 (Insert mode) 和底行模式 (last line mode)&#xff0c;各模式的功能区分如下: 命令行模式 command mode&#xff09;　　控制屏幕光标的移动&a…
阅读更多...
工业项目组态用这个开源软件ScadaBR

工业项目组态用这个开源软件ScadaBR

软件介绍 ScadaBR 是一个开源软件&#xff0c;提供完整的 SCADA&#xff08;Supervisory Control and Data Acquisition&#xff0c;监控与数据采集&#xff09;系统的所有功能。SCADA 类型的软件自60年代末开始存在&#xff0c;并且在涉及机器、可编程逻辑控制器&#xff08;P…
阅读更多...
ssh远程访问windows系统下的jupyterlab

ssh远程访问windows系统下的jupyterlab

网上配置这一堆那一堆&#xff0c;特别乱&#xff0c;找了好久整理后发在这里 由于既想打游戏又想做深度学习&#xff0c;不舍得显卡性能白白消耗&#xff0c;这里尝试使用笔记本连接主机 OpenSSH 最初是为 Linux 系统开发的&#xff0c;现在也支持包括 Windows 和 macOS 在内…
阅读更多...
《R语言与农业数据统计分析及建模》学习——数字图像处理

《R语言与农业数据统计分析及建模》学习——数字图像处理

数字图像处理&#xff08;digital image processing&#xff09;又称计算机图像处理&#xff0c;它是指将图像信号转换成数字信号并利用数字图像处理计算机对其进行处理的过程。 常见的数字图像处理是通过计算机对图像进行去除噪声、增强、复原、分割、提取特征等处理。 R语言…
阅读更多...
QT上位机的学习

QT上位机的学习

后面又该找工作了&#xff0c;这块的内容也需要好好学习&#xff01; QT 篇 QT上位机串口编程-CSDN博客 (1)可以通过安装虚拟串口来模拟串口通信的情况 发现我之前安装过&#xff08;9.0): 可以生成虚拟串口&#xff0c;无需实际硬件串口就可以实现同一台电脑上串口模拟通信…
阅读更多...
电路笔记 : 电容电阻大小表示（103、104、151、2R5、R15的含义）

电路笔记 : 电容电阻大小表示（103、104、151、2R5、R15的含义）

电容电阻大小表示 电阻 数字索位标称法 数字索位标称法就是在电阻体上用三位数字来标明其阻值。它的第一位和第二位为有效数字&#xff0c;第三位表示在有效数字后面所加“0”的个数.这一位不会出现字母。如果阻值是小数.则用“R”表示“小数点”.并占用一位有效数字&#xf…
阅读更多...
【51单片机普中板子74LS138+245+573可调时钟整点蜂鸣中级应用】2022-12-7

【51单片机普中板子74LS138+245+573可调时钟整点蜂鸣中级应用】2022-12-7

缘由用51单片机普中开发板实现数字时钟-嵌入式-CSDN问答 #include "reg52.h" //定义按键 sbit key0P3^0; sbit key1P3^1; sbit key2P3^2; sbit key3P3^3; //定义数码管位驱运位 sbit L1P2^2; sbit L2P2^3; sbit L3P2^4; sbit beepP2^5; unsigned char code ShuMaGua…
阅读更多...
微调Mistral 7B以实现命名实体识别 (NER)

微调Mistral 7B以实现命名实体识别 (NER)

文章来源&#xff1a;fine-tuning-mistral-7b-for-named-entity-recognition-ner 2024 年 4 月 19 日 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;命名实体识别&#xff08;NER&#xff09;被认为是一项关键任务&#xff0c;应用范围广泛&#xff0c;包括信息…
阅读更多...
tensorflow报错

tensorflow报错

参考 TensorFlow binary is optimized to use available CPU instructions in performance-critical operations._this tensorflow binary is optimized to use availab-CSDN博客 解决Python中cuBLAS插件无法注册问题_unable to register cudnn factory: attempting to re-CS…
阅读更多...
SQL数据库

SQL数据库

一.什么是数据库 数据库&#xff1a;存储数据的仓库&#xff0c;数据是有组织的进行存储。&#xff08;database 简称DB&#xff09; 数据库管理系统&#xff1a;管理数据库的大型软禁&#xff08;DataBase Management System 简称DBMS&#xff09; SQL&#xff1a;操作关系…
阅读更多...
【MySQL 5.7安装时候 出现2503报错，解决方案】

【MySQL 5.7安装时候 出现2503报错，解决方案】

MySQL5.7 安装遇 2503问题如何解决 1.能正常安装就点这里2.出现2503问题就看这2.1先看问题2.1.1在官网下载好安装包后&#xff0c;首先先确认安装包是否完整&#xff0c;排除安装包损坏的问题2.1.2 安装时候出现这个2503问题 2.2上解决方案2.2.1 打开任务管理器2.2.2 解决 1.能…
阅读更多...
「C/C++ 01」volatile关键字 和 修改const修饰的变量

「C/C++ 01」volatile关键字 和 修改const修饰的变量

目录 一、修改const修饰的局部变量 二、无法修改const修饰的全局变量 三、volatile关键字 面试题】 一、修改const修饰的局部变量 可以通过指针和强转来修改const修饰的局部变量。 #include <iostream> using namespace std;int main(void) {const int a 1;int* pa (in…
阅读更多...
hive表基本语法

hive表基本语法

hive表基本语法 青少年是一个美好而又是一去不可再得的时期 是将来一切光明和幸福的开端 目录 hive表基本语法 1.ROW FORMAT用法 2.LOCATION用法 3.EXTERNAL用法 &#xff08;外部表&#xff09; 4.STORED AS 用法&#xff1a;设置数据存储格式 5.TBLPROPERTIES 用法 6.P…
阅读更多...
.位运算.

.位运算.

本题涉及到计算机组成与原理的相关知识 找了一篇相当不错的讲解&#xff0c;大家可以借鉴&#xff1a;位运算&#xff1a;按位与、按位或、按位异或、按位左移、按位右移-CSDN博客 给定一个长度为 n&#x1d45b; 的数列&#xff0c;请你求出数列中每个数的二进制表示中 11 的…
阅读更多...
设计模式: 工厂模式

设计模式: 工厂模式

工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一&#xff0c;这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式提供了一种创建对象的方式&#xff0c;而无需指定要创建的具体类。 工厂模式属于创建型…
阅读更多...
网络架构建模：一个云案例研究-文章翻译

网络架构建模：一个云案例研究-文章翻译

网络架构建模：一个云案例研究 摘要 互联网支持广泛服务的能力取决于网络架构以及未来网络所需的理论和实践创新。本文中的网络体系结构指的是计算机网络系统的结构及其物理组件、配置和通信协议之间的交互。多年来，人们对网络架构进行了各种各样的描述，其中有大量的表面图…
阅读更多...
ICode国际青少年编程竞赛- Python-1级训练场-基本操作

ICode国际青少年编程竞赛- Python-1级训练场-基本操作

ICode国际青少年编程竞赛- Python-1级训练场-基本操作 1、 Dev.step(3)2、 Dev.step(1)3、 Dev.step(7)4、 Dev.step(-1)5、 Dev.step(-5)6、 Dev.step(3) Dev.step(-8)7、 Dev.turnRight() Dev.step(1)8、 Dev.turnLeft() Dev.step(1)9、 Dev.step(4) Dev.tur…
阅读更多...
Linux下top命令指标说明

Linux下top命令指标说明

目录 Linux下top命令指标说明1. 概览2. CPU利用率3. 内存利用率4. 进程信息 Linux下top命令指标说明 在Linux系统中&#xff0c;top 命令是一个用于实时监视系统运行状态的工具。通过 top 命令&#xff0c;我们可以了解系统的负载情况、CPU利用率、内存使用情况以及各个进程的…
阅读更多...
免费开源语音克隆-GPT-SoVITS-WebUI只需 5 秒的声音样本

免费开源语音克隆-GPT-SoVITS-WebUI只需 5 秒的声音样本

语音克隆-GPT-SoVITS-WebUI 强大的少样本语音转换与语音合成Web用户界面。 功能&#xff1a; 零样本文本到语音&#xff08;TTS&#xff09;&#xff1a; 输入 5 秒的声音样本&#xff0c;即刻体验文本到语音转换。 少样本 TTS&#xff1a; 仅需 1 分钟的训练数据即可微调模型…
阅读更多...
最新文章

Copyright @ 2022~2023