Vue之路由route、axios案例实战

  Vue 是一套用于构建用户界面的渐进式框架,它的核心库只关注视图层,便于与第三方库或既有项目整合。其次,与工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

一、路由简介

  一般认为,路由就是菜单,不同路由跳转到不同的URL地址,不同的 URL 访问不同的内容。

实现步骤

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

  <!-- 注意加载js的顺序先vue再router -->
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>

<body>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <router-link to="/">首页</router-link>
            <router-link to="/student">会员管理</router-link>
            <router-link to="/teacher">讲师管理</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

    <script>
        //1 定义显示内容
        const Welcomde = {template:'<div>首页....</div>'}
        const Student = {template:'<div>会员....</div>'}
        const Teacher = {template:'<div>讲师....</div>'}

        //2 指定路由对应内容
        const routes = [
            {path:'/',component:Welcomde},
            {path:'/student',component:Student},
            {path:'/teacher',component:Teacher}
        ]

        //3 把路由实例化
        const router = new VueRouter({
            routes // (缩写)相当于 routes: routes
        })

        //4 把路由在vue声明(挂载)
        new Vue({
            el: '#app',
            router
        })
    </script>
</body>
</html>

浏览器界面

在这里插入图片描述

二、axios案例

  axios是独立于vue的一个项目,可以用于浏览器和node.js中发送ajax请求!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-for="teacher in teacherList">
            {{teacher.name}} -- {{teacher.intro}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data () {//定义变量和初始值
                return {
                    //定义所有讲师数组变量
                    teacherList:[]
                    
                }
            },
            created () {//vue生命周期方法,页面渲染之前执行
                //调用methods定义的方法    
                this.getTeacherList()
            },
            methods: {//定义具体的方法
                //查询所有的讲师的方法
                getTeacherList() {
                    //axios发送ajax请求得到
                    axios.get('http://localhost:8001/eduservice/edu-teacher')
                        .then(response => {
                            this.teacherList =response.data.data.items
                            console.log( this.teacherList)
                        }) //请求接口成功,执行then方法
                        .catch(error =>{
                            console.log(error)
                        })//请求接口失败,执行catch方法
                }
                
            }
        })
    </script>
</body>

</html>

运行js
在这里插入图片描述

SpringBoot项目片段
在这里插入图片描述
启动、访问SpringBoot项目
在这里插入图片描述

♚学习、实战、总结、分享,让生活变得更美好!
☞林大侠博客:https://coding0110lin.blog.csdn.net/  欢迎转载,一起技术交流探讨!

©️2020 CSDN 皮肤主题: 1024 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值