Vue 01 登录和主页面

Vue 01 登录和主页面

目录结构

添加依赖

• axios
• vue-router
• vue-axios

1. 编写基础组件

header

<template>
    <div>
        页面头部
    </div>
</template>

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

<style scoped>

</style>

footer

<template>
    <div>
        页面尾部
    </div>
</template>

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

<style scoped>

</style>

2. 编写页面

login

组成: header, 登录表单, footer

登录方法：axios（需要在main.js添加全局axios）

<template>
    <div>
        <header></header>
        <br>

        <div>
            用户名：<input type="text" v-model="user.username">
            <br>
            密码：<input type="password" v-model="user.password">
            <br>
            <button v-on:click="login">登录</button>
        </div>
        <br>

        <footer></footer>
    </div>
</template>

<script>
    import header from "@/components/header";
    import footer from "@/components/footer";

    export default {
        name: "login",
        components: {
            header,
            footer
        },
        data() {
            return {
                user: {
                    username: 'admin',
                    password: 'admin'
                }
            }
        },
        methods: {
            login: function () {
                this.axios
                    .post('/api/login', this.user)
                    .then(response => {
                        console.log(response)
                        this.$router.push({path:'/index'})
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }
        }
    }
</script>

<style scoped>

</style>

index

首页，登录成功跳转到首页，跳转：

// login里面的逻辑
this.$router.push({path:'/index'})

<template>
    <div>
        <header></header>
        <br>

        <h2>Hello World, Index Page</h2>
        <br>

        <footer></footer>
    </div>
</template>

<script>
    import header from "@/components/header";
    import footer from "@/components/footer";

    export default {
        name: "index",
        components: {
            header,
            footer
        }
    }
</script>

<style scoped>

</style>

3. main

初始化全局对象等？

import Vue from 'vue'
import App from './App.vue'

// 开始
import router from "@/routers/router";
import axios from 'axios'
import VueAxios from 'vue-axios'

axios.defaults.baseURL = 'http://localhost:8081/'
Vue.use(VueAxios,axios);
// 结束

Vue.config.productionTip = false



new Vue({
  render: h => h(App),
  // 开始
  router
  // 结束
}).$mount('#app')

4. App.vue

入口。

router提供：<router-view/>。会在pages下面的vue之间切换（TODO：头部和尾部可以移动到router-view之外）

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
import login from "@/pages/login";
import index from "@/pages/index";

export default {
  name: 'App',
  components: {
    login,
    index
  }
}
</script>

<style>
</style>

5. router

import Vue from 'vue'
import Router from 'vue-router'
import Login from "@/pages/Login";
import Index from "@/pages/Index";

Vue.use(Router)


export const constantRouterMap = [
    {
        path: '/',
        name: 'Login',
        component: Login
    },
    {
        path: '/index',
        name: 'Index',
        component: Index
    }
]

export default new Router({
    // mode: 'hash',
    mode: 'history',
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
})

component has been registered but not used