Vue登录页

前言

继上个文章新建项目后，我们准备来个由登录到首页

先在src目录下来个文件夹view,然后新加两个由js为基础的vue页面,一个叫Login,一个叫Home

在这之前我们得先引入路由

1）回到npm的cmd命令里面,输入npm install vue-router --save 安装路由

2）再到src目录下添加一个router.js的文件（用来写路由配置的）

3）打开router.js写下如下代码

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // 注册vue-router

const router = new VueRouter({
    //mode: 'history',
    //base: '/Page/',
    routes: [
        {
            path: '/',
            name: 'Login',
            component: (resolve) => require(['@/viewsGS/Login.vue'], resolve),
            meta: { requireAuth: false },
        },
        {
            path: '/Home',
            name: 'Home',
            component: (resolve) => require(['@/viewsGS/Home.vue'], resolve),
            meta: { requireAuth: false },
            //children: [{ path: '/Home/Material', component: (resolve) => require(['@/views/Material.vue'], resolve) },]
        }]
});

export default router;//输出定义router参数啥的

4)到main.js里面再去引用你写的router.js，并挂载到全局，如下

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

import router from '@/router' // 引入你写的路由配置--------这里

Vue.config.productionTip = true;

new Vue({
    render: h => h(App),
    router//挂载全局--------这里
}).$mount('#app');

一、登录页简单跳转

先简单写个登录页面，代码附上，Login.vue

点登录实现路由跳转到Home.vue

<template>
    <div class="loginPage">

        <input type="number" v-model="phone" placeholder="输入账号" />

        <input type="password" v-model="pwd" placeholder="输入密码" />

        <input type="button" @click="login" value="登录" />

    </div>
</template>

<script>

    export default {
        data() {//页面定义字段
            return {
                phone:"",
                pwd:"",
            }
        },
        mounted() {//页面加载

        },
        methods: {//页面方法
            login() {
                if (this.phone == "" || this.pwd == "") {
                    alert("Not NULL");
                } else {
                    this.$router.push({
                        path:"/Home"
                    });//利用路由跳转页面，path为你定义的路由配置中要跳转页面的path
                }
            }
        }
    }
</script>

<style scoped>
    .loginPage {
        width:200px;
        height:200px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    margin-left: -50px;
	    margin-top:-50px;
        text-align:center;
    }
    .loginPage input{
        margin:10px;
        padding:6px 10px;
        border-radius:5px;
        border:1px solid #ccc;
    }
</style>

二，实现http验证成功再跳转

先引入reqwest（http请求用的方法）：npm install reqwest -g

然后在Login.vue中js块引入组件：import reqwest from 'reqwest';

修改登录方法，如下

 login() {
                if (this.phone == "" || this.pwd == "") {
                    alert("Not NULL");
                } else {
                    var sentData = {
                        Phone:this.phone,
                        Password:this.pwd,
                    }
                    reqwest({
                        url: "https//xxxxxxx",
                        method: "POST",
                        headers:{//不同接口不同配置，以下仅供参考
                            'Accept': "application/json",
                            'Content-Type': "application/json",   
                        },
                        data: JSON.stringify(sentData),
                        error: (error) => {
                            //错误处理
                        },
                        success: (res) => {
                             //成功跳转
                            this.$router.push({
                                path: "/Home"
                            });//利用路由跳转页面，path为你定义的路由配置中要跳转页面的path
                        }
                    });
                } 
            }

好了登录结束，下期来讲讲我们使用的AntDesignVue样式组件，是个不错的好东西，蚂蚁金服滴，可以去瞅瞅附链接

https://vue.ant.design/docs/vue/introduce-cn/