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也不支持
若是有同行知道解決辦法還請告知下哦，感激不盡