index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>游戏资源管理系统</title>
<link rel="stylesheet" href="{$__TMPL__}/home/index/static/css/element_ui_index.css">
<link rel="stylesheet" href="{$__TMPL__}/home/index/static/css/iconfont.css">
<link rel="stylesheet" href="{$__TMPL__}/home/index/static/css/common.css">
<script src="{$__TMPL__}/home/index/static/js/vue.js"></script>
<script src="{$__TMPL__}/home/index/static/js/axios.min.js"></script>
<script src="{$__TMPL__}/home/index/static/js/httpVueLoader.js"></script>
<script src="{$__TMPL__}/home/index/static/js/index/util.js"></script>
<script src="{$__TMPL__}/home/index/static/js/index/request.js"></script>
</head>
<body>
<div id="app" v-cloak>
<el-container v-if="isLogin">
<el-header>
<div class="left">
<img src="{$__TMPL__}/home/index/static/images/logo.png" class="logo">
</div>
<div class="right">
<el-dropdown @command="handleCommand">
<p class="el-dropdown-link">
<span><img src="{$__TMPL__}/home/index/static/images/header.png" class="head_img"></span>
<span>你好，{{userInfo.username}}</span>
<span class="iconfont icon-xiala"></span>
</p>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="login">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</el-header>
<el-container>
<el-aside width="140px">
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="hideSider">
<el-menu-item @click="changeMain(item.tag)" :class="{'is-active':currentComponent == item.tag}" v-for="(item ,index) in menuList" :key="index">
<i class="iconfont" :class="item.icon"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-main>
<div class="breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="(item ,index) in menuList" :key="index" v-show="currentComponent == item.tag"> {{item.name}} </el-breadcrumb-item>
</el-breadcrumb>
</div>
<component v-bind:is="currentComponent"></component>
</el-main>
</el-container>
</el-container>
</el-container>
<el-container v-else>
<component v-bind:is="currentComponent"></component>
</el-container>
</div>
</body>
<script src="{$__TMPL__}/home/index/static/js/element_ui_index.js"></script>
<script src="{$__TMPL__}/home/index/static/js/index/index.js"></script>
</html>
index.js
// 使用httpVueLoader
new Vue({ el: '#app', data() { return { visible: false, hideSider: false, currentComponent: "Login", menuList: [ { name: "文件上传", tag: "FileUpload", icon: "icon-upload_file" }, { name: "文件分类", tag: "DocumentClassification", icon: "icon-files" }, { name: "资源管理", tag: "ResourceManager", icon: "icon-resource" }, { name: "注册审核", tag: "RegisterReview", icon: "icon-regist" } ], userInfo: { username: "张三" }, isLogin: false, } }, components: { 'FileUpload': httpVueLoader('/template/default/pc/home/index/views/fileUpload.vue'), 'DocumentClassification': httpVueLoader('/template/default/pc/home/index/views/documentClassification.vue'), 'Login': httpVueLoader('/template/default/pc/home/index/views/login.vue'), 'RegisterReview': httpVueLoader('/template/default/pc/home/index/views/registerReview.vue'), 'ResourceManager': httpVueLoader('/template/default/pc/home/index/views/resourceManager.vue') }, created() { let _this = this; _this.userInfo = getSessionStorage('userInfo'); console.log('userInfo', _this.userInfo); if (!_this.userInfo) { _this.isLogin = false; _this.currentComponent = "Login"; } else { console.log("已登录"); _this.isLogin = true; _this.currentComponent = "FileUpload"; } }, mounted() { console.log("登录状态", this.isLogin); }, watch: { isLogin: function (val) { let _this = this; _this.isLogin = val; } }, methods: { changeMain(obj) { let _this = this; _this.currentComponent = obj; }, handleCommand(command) { let _this = this; this.$confirm('退出登录, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { setSessionStorage('userInfo', ''); _this.isLogin = false; _this.currentComponent = "Login"; }).catch(() => { this.$message({ type: 'info', message: '已取消退出' }); }); } } })
login.vue
<template>
<div class="login-box" :class="{'register_box':!formStatus}">
<div class="left"><img src="/template/default/pc/home/index/static/images/login-k.png" alt=""></div>
<div class="right">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<p class="login-title">Hello， <span v-if="formStatus">欢迎登录!</span>
<span v-else>欢迎注册!</span>
</p>
<el-form-item prop="username">
<el-input v-model="ruleForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
</el-form-item>
<div v-if="!formStatus">
<el-form-item prop="email">
<el-input v-model="ruleForm.email" prefix-icon="el-icon-message" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item prop="nickname">
<el-input v-model="ruleForm.nickname" prefix-icon="el-icon-news" placeholder="请输入昵称"></el-input>
</el-form-item>
</div>
<el-form-item prop="password">
<el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
</el-form-item>
<el-form-item class="right_item">
<a @click="goRegister">
<span v-if="formStatus">没有账号？点击注册</span>
<span v-else>已有账号？点击登录</span>
</a>
</el-form-item>
<el-form-item>
<el-button type="primary" v-if="formStatus" @click="LoginForm('ruleForm')" class="login-btn-r">登录</el-button>
<el-button type="primary" v-else @click="registerForm('ruleForm')" class="login-btn-r">注册</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script> module.exports = { name:"Login", data() { var validateUsername = (rule, value, callback) => { if (value) { if (/[\u4E00-\u9FA5]/g.test(value)) { callback(new Error("不能输入汉字")); } else { // 验证通过
callback(); } callback(); } }; return { ruleForm:{ username:"", password:"", email:"", nickname:"" }, rules:{ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { validator: validateUsername, message: '用户名不能含有中文', trigger: 'change' }, ], password: [ { required: true, message: '请输入用户名密码', trigger: 'blur' }, ], email:[ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } ], nickname:[ { required: true, message: '请输入昵称', trigger: 'blur' }, ] }, formStatus: true } }, methods:{ goRegister(){ console.log("zhuce "); let _this = this; _this.formStatus = !_this.formStatus; }, LoginForm(ruleForm) { this.$refs[ruleForm].validate((valid) => { if (valid) { axiosPostRequst('/api/admin/login',this.ruleForm).then((res)=>{ console.log("login_res",res); this.$message(res.msg); if(res.code == 1){ let _this = this; setSessionStorage('userInfo',res.data); setTimeout(function () { window.location.reload(); // 刷新登录状态
},3000); } }) } else { console.log('error submit!!'); this.$message('请填写用户名或密码'); return false; } }); }, registerForm(ruleForm){ this.$refs[ruleForm].validate((valid) => { if (valid) { axiosPostRequst('/api/admin/register',this.ruleForm).then((res)=>{ console.log('registerForm_res',res); this.$message(res.msg); if(res.code == 1){ let _this = this; setTimeout(function () { _this.formStatus = !_this.formStatus;// 跳转登录
},3000); } }) } else { console.log('error submit!!'); return false; } }); }, resetForm(ruleForm) { this.$refs[ruleForm].resetFields(); } } } </script>
<style scoped> @import "../static/css/views/myLogin.css"; </style>
本地访问没问题，但是发布到线上服务器时 火狐浏览器一直报错如下所示：并且没有找到解决办法
IE也不支持
若是有同行知道解决办法还请告知下哦，感激不尽