【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-dialog
      title="温馨提示"
      :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的项目，后面会将我们学习的内容用到项目中去，也会写相应的博客与大家分享技术。那我们就下一篇博客再见！如果这篇博客对各位小伙伴有所帮助，请点赞，收藏支持一波哦~

 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[实例] Unity Shader 利用顶点着色器模拟简单水波

[实例] Unity Shader 利用顶点着色器模拟简单水波

我们都知道顶点着色器可以用来改变模型各个顶点的位置&#xff0c;那么本篇我们就利用顶点着色器来做一个模拟简单水波的应用。 1. 简谐运动 在进行模拟水波之前&#xff0c;我们需要了解简谐运动&#xff08;Simple Harmonic Motion&#xff09;公式&#xff1a; 其中&#…
阅读更多...
【跟马少平老师学AI】-【神经网络是怎么实现的】（四）卷积神经网络

【跟马少平老师学AI】-【神经网络是怎么实现的】（四）卷积神经网络

一句话归纳&#xff1a; 1&#xff09;用1个小粒度的模式&#xff0c;逐个与图像的局部区域进行运算&#xff0c;运算结果反映模式与区域的匹配程度。 2&#xff09;卷积神经网络与全连接神经网络的区别&#xff1a; 卷积神经网络的输出只与局部输入有连接。参数较少&#xff0…
阅读更多...
使用jdbc方式操作ClickHouse

使用jdbc方式操作ClickHouse

1、创建测试表&#xff0c;和插入测试数据 create table t_order01(id UInt32,sku_id String,total_amount Decimal(16,2),create_time Datetime ) engine MergeTreepartition by toYYYYMMDD(create_time)primary key (id)order by (id,sku_id);insert into t_order01 values …
阅读更多...
jupyter notebook切换conda虚拟环境

jupyter notebook切换conda虚拟环境

首先&#xff0c;切换到某个虚拟环境&#xff0c;本人切换到了d2l环境&#xff1a; (d2l) C:\Users\10129>pip install ipykernel然后&#xff0c;如代码所示安装ipykernel包 最后&#xff0c;按下述代码执行&#xff1a; (d2l) C:\Users\10129>python -m ipykernel i…
阅读更多...
SQL 基础 | UNION 用法介绍

SQL 基础 | UNION 用法介绍

在SQL中&#xff0c;UNION操作符用于合并两个或多个SELECT语句的结果集&#xff0c;形成一个新的结果集。 使用UNION时&#xff0c;合并的结果集列数必须相同&#xff0c;并且列的数据类型也需要兼容。 默认情况下&#xff0c;UNION会去除重复的行&#xff0c;只保留唯一的行。…
阅读更多...
Istio基础知识

Istio基础知识

一、什么是Istio Istio 提供⼀种简单的⽅式来为已部署的服务建⽴⽹络&#xff0c;该⽹络具有 负载均衡、服务间认证、监控等功能&#xff0c;只需要对服务的代码进⾏⼀点或不需要做任何改动。想要让服务⽀持 Istio&#xff0c;只需要在您的环境中部署⼀个特殊的 sidecar 代 理&…
阅读更多...
Dashboard 安装部署

Dashboard 安装部署

Dashboard 安装部署 Dashboard 安装部署 一&#xff1a;下载 二&#xff1a;部署步骤 1.镜像下载及导入 国内直接拉外网镜像会失败&#xff0c;可在境外下载镜像 查看 deployment 里的镜像版本 Dashboard Deploymentcontainers:- name: kubernetes-dashboardimage: k8s.g…
阅读更多...
vscode 插件 code settings sync（配置云端同步）

vscode 插件 code settings sync（配置云端同步）

vscode 插件 code settings sync&#xff08;配置云端同步&#xff09; 电脑A和B&#xff0c;vscode配置都在A电脑上&#xff0c;此时你想要将A电脑的vscode配置同步到B电脑的vscode中 第一步&#xff1a;A电脑和B电脑都需要在VSCode中安装下图插件 code settings sync 第二步&…
阅读更多...
自定义 Dockerfile 构建 PostgreSQL 15 编译版 Docker 镜像

自定义 Dockerfile 构建 PostgreSQL 15 编译版 Docker 镜像

BG 前几日 Sean 老师发布了一篇文章 – PostgreSQL安装(一): 再简单点儿&#xff0c;用Docker?, 介绍如何快速安装启动 PostgreSQL 数据库。 本文再稍微延伸一点&#xff0c;介绍一下如何自定义 Dockerfile&#xff0c;加入自己想要预制的参数&#xff0c;构建一个自定义的 …
阅读更多...
使用unreal engine5.3.2创建c++第一人称游戏

使用unreal engine5.3.2创建c++第一人称游戏

UE5系列文章目录 文章目录 UE5系列文章目录前言一、NuGet 简介二、解决方法&#xff1a; 前言 为了使用unreal engine5.3.2创建c第一人称游戏&#xff0c;今天安装了Visual Studio 2022专业版。在ue5中创建c工程&#xff0c;结果编译器报错&#xff1a; 严重性 代码 说明 项目…
阅读更多...
如何构建用于从收据中提取信息的生成式人工智能工具

如何构建用于从收据中提取信息的生成式人工智能工具

原文地址&#xff1a;how-to-build-a-generative-ai-tool-for-information-extraction-from-receipts 使用 LangChain 和 OpenAI 工具从 Google Drive 中存储的收据图像中提取结构化信息 2024 年 4 月 10 日 纸质收据有各种样式和格式&#xff0c;是自动信息提取的一个有趣目…
阅读更多...
【大模型应用】使用 Windows 窗体作为 Copilot 应用程序的 Ollama AI 前端（测试llava视觉问答）...

【大模型应用】使用 Windows 窗体作为 Copilot 应用程序的 Ollama AI 前端（测试llava视觉问答）...

项目 “WinForm_Ollama_Copilot” 是一个使用Windows Forms作为前端的Ollama AI Copilot应用程序。这个项目的目的是提供一个用户界面(UI)&#xff0c;通过它&#xff0c;用户可以与Ollama AI进行交互。以下是该项目的一些关键特点和功能&#xff1a; Ollama Copilot: 这是一个…
阅读更多...
SSM+Vue在线OA办公系统

SSM+Vue在线OA办公系统

在线办公分三个用户登录&#xff0c;管理员&#xff0c;经理&#xff0c;员工。 SSM架构&#xff0c;maven管理工具&#xff0c;数据库Mysql&#xff0c;系统有文档&#xff0c;可有偿安装调试及讲解&#xff0c;项目保证质量。需要划到 最底 下可以联系到我。 功能如下&am…
阅读更多...
免安装SQL管理工具HeidiSQL建库如何选Collation字符校对

免安装SQL管理工具HeidiSQL建库如何选Collation字符校对

免安装SQL管理工具HeidiSQL 文章目录 免安装SQL管理工具HeidiSQL一、安装二、建库因此&#xff0c;通常我们选择&#xff1a; 一、安装 到官方网址&#xff1a;https://www.heidisql.com/ 下载后按不同版本安装或解压&#xff0c;运行目录中的heidisql应用程序。 该工具可以对…
阅读更多...
万界星空科技商业开源MES+项目合作+商业开源低代码平台

万界星空科技商业开源MES+项目合作+商业开源低代码平台

今天我想和大家分享的是一套商业开源的 MES制造执行管理系统带源码。对于制造业而言&#xff0c;MES 是一个至关重要的系统&#xff0c;它可以帮助企业提高生产效率、优化资源利用、提高产品质量&#xff0c;从而增强市场竞争力。 什么是 MES&#xff1f; MES 是指通过计算机技…
阅读更多...
Luminar开始为沃尔沃生产下一代激光雷达传感器

Luminar开始为沃尔沃生产下一代激光雷达传感器

在自动驾驶技术的浪潮中&#xff0c;激光雷达&#xff08;LiDAR&#xff09;传感器以其高精度和强大的环境感知能力&#xff0c;逐渐成为了该领域的技术之星。Luminar&#xff08;路安达&#xff09;公司作为自动驾驶技术的领军企业&#xff0c;近日宣布已开始为沃尔沃汽车生产…
阅读更多...
Git使用指北

Git使用指北

目录 创建一个Git仓库本地仓库添加文件文件提交到本地仓库缓冲区添加远程仓库地址本地仓库推送到远程仓库创建新的分支拉取代码同步删除缓冲区的文件&#xff0c;远程仓库的文件.gitignore文件 创建一个Git仓库 Git仓库分为远程和本地两种&#xff0c;远程仓库如Githu上创建的…
阅读更多...
Themis新篇章：老牌衍生品协议登陆Blast L2，探索全新经济模型

Themis新篇章：老牌衍生品协议登陆Blast L2，探索全新经济模型

本文将深入分析 Themis 的最新经济模型&#xff0c;探讨其核心概念和机制、优势与创新之处、风险与挑战。 一、引言 随着区块链技术的不断发展&#xff0c;DeFi 衍生品项目逐渐成为市场的焦点。而用户体验的革新&#xff0c;进一步的金融创新&#xff0c;去中心化治理方案的优…
阅读更多...
Golang | Leetcode Golang题解之第63题不同路径II

Golang | Leetcode Golang题解之第63题不同路径II

题目&#xff1a; 题解&#xff1a; func uniquePathsWithObstacles(obstacleGrid [][]int) int {n, m : len(obstacleGrid), len(obstacleGrid[0])f : make([]int, m)if obstacleGrid[0][0] 0 {f[0] 1}for i : 0; i < n; i {for j : 0; j < m; j {if obstacleGrid[i]…
阅读更多...
Java中使用Redis实现分布式锁的三种方式

Java中使用Redis实现分布式锁的三种方式

1. 导语 随着软件开发领域的不断演进，并发性已经成为一个至关重要的方面，特别是在资源跨多个进程共享的分布式系统中。 在Java中，管理并发性对于确保数据一致性和防止竞态条件至关重要。 Redis作为一个强大的内存数据存储，为在Java应用程序中实现分布式锁提供了一种高效的…
阅读更多...
最新文章

Copyright @ 2022~2023