【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页面:

html 复制代码
<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页面:

html 复制代码
<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页面:

html 复制代码
<template>
<h1>用户列表</h1>
</template>

<script>
export default {
  name: "UserList"
}
</script>

<style scoped>

</style>

Profile.vue页面:

html 复制代码
<template>
<!-- 所有的元素,必须在根节点下,需要有盒子套着 -->
  <div>
    <h1>个人信息</h1>
    {{ id}}
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>

二、创建路由

代码如下:

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

javascript 复制代码
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引入,代码如下:

javascript 复制代码
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官网的配置
})

三、页面跳转

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

如下所示:

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

四、数据请求

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

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

javascript 复制代码
{
  "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来请求。

具体代码如下:

javascript 复制代码
<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>

效果显示:

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

五、总结

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

相关推荐
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍