.net core + vue开发单页应用（二）

上一篇中已将完成了基础结构的搭建，这一篇将开始正式开发。页面直接使用了一位小伙伴的源码，可以在https://github.com/taylorchen709/vue-admin下载

在入口函数中添加对element-ui,vue-router,vuex,vue-source等组件的引用

import Vue from "vue"
import App from "./App"
import ElementUI from "element-ui"
import "element-ui/lib/theme-default/index.css"
import VueRouter from "vue-router"
import store from "./vuex/store"
import Vuex from "vuex"
import VueSource from "vue-resource"
import routes from "./routes"
import "font-awesome/css/font-awesome.min.css"
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(VueSource)
//创建路由实例
const router = new VueRouter({
    routes
})
router.beforeEach((to, from, next) => {
    //这里进行了简单的登录验证
    //访问login时直接清除user
    if (to.path == "/login") {
        sessionStorage.removeItem("user");
    }
    let user = JSON.parse(sessionStorage.getItem("user"));
    if (!user && to.path != "/login") {
        next({ path: "/login" })
    } else {
        next()
    }
})
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount("#app")

<template>
    <div id="app">
        <transition name="fade"
                    mode="out-in">
            <router-view></router-view>
        </transition>
    </div>
</template>
<script>
    export default {
        name: "app",
        components: {
        }
    }
</script>

login.vue

<template>
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="account">
            <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    export default {
        data() {
            return {
                logining: false,
                ruleForm2: {
                    account: "admin",
                    checkPass: "123456"
                },
                rules2: {
                    account: [
                        { required: true, message: "请输入账号", trigger: "blur" },
                        //{ validator: validaePass }
                    ],
                    checkPass: [
                        { required: true, message: "请输入密码", trigger: "blur" },
                        //{ validator: validaePass2 }
                    ]
                },
                checked: true
            };
        },
        methods: {
            handleReset2() {
                this.$refs.ruleForm2.resetFields();
            },
            handleSubmit2(ev) {
                var _this = this;
                this.$refs.ruleForm2.validate((valid) => {
                    if (valid) {
                        this.logining = true;
                        //NProgress.start();
                        var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
                        if (loginParams.username != "admin") {
                            this.$message({
                                message: "用户不存在",
                                type: "error"
                            });
                            this.logining = false;
                            return false;
                        }
                        if (loginParams.password != "123456") {
                            this.$message({
                                message: "密码不正确",
                                type: "error"
                            });
                            this.logining = false;
                            return;
                        }
                        let user = {
                            id: 1,
                            username: "admin",
                            password: "123456",
                            avatar: "resources/img/user.png",
                            name: "管理员"
                        }
                        sessionStorage.setItem("user", JSON.stringify(user));
                        this.$router.push({ path: "/" });
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>
<style  scoped>
    .login-container {
        /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
    .remember {
        margin: 0px 0px 35px 0px;
    }
</style>

home.vue

<template>
    <el-row class="container">
        <el-col :span="24" class="header">
            <el-col :span="10" :class="collapsed?"logo-collapse-width logo-collapsed":"logo-width logo"">
                {{collapsed?"":sysName}}
                <!--<img :src="logo" v-show="collapsed" />-->
            </el-col>
            <el-col :span="10">
                <div class="tools" @click.prevent="collapse">
                    <i class="fa fa-align-justify"></i>
                </div>
            </el-col>
            <el-col :span="4" class="userinfo">
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>我的消息</el-dropdown-item>
                        <el-dropdown-item>设置</el-dropdown-item>
                        <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>