Vue.js补充_2

# 一、路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）

# 1、创建vue文件夹

# 2、复制js资源

vue.min.js

vue-router.min.js

# 3、创建路由.html

# 4、引入js

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

1
2

# 5、编写html

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 6、编写js

<script>
    // 1. 定义（路由）组件。
    // 复杂的组件也可以从独立的vue文件中引入
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定义路由
    // 每个路由应该映射一个组件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 从而让整个应用都有路由功能
    new Vue({
        el: '#app',
        router
    })

    // 现在，应用已经启动了！
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

#

# 二、axios

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

# 1、复制js资源

axios.min.js

# 2、创建 axios.html

# 3、引入js

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

1
2

# 4、启动课程中心微服务

# 5、编写js

<script>
    new Vue({
        el: '#app',
        data: {
            memberList: []//定义数组
        },
        created() {
            this.getList()
        },

        methods: {

            getList(id) {
                axios.get('http://localhost:8101/admin/edu/teacher')
                    .then(response => {//成功回调
                    console.log(response)
                    this.memberList = response.data.data.items
                })
                    .catch(error => {//失败回调
                    console.log(error)
                })
            }
        }
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 6、html渲染数据

<div id="app">
    <table border="1">
        <tr>
            <td>id</td>
            <td>姓名</td>
        </tr>
        <tr v-for="item in memberList">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
        </td>
    </tr>
</table>
</div>