Vue 使用 httpVueLoader 加载vue组件 vue页面使用 module.exports
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也不支持
若是有同行知道解决办法还请告知下哦，感激不尽
本文来自博客园，作者：小虾米吖~，转载请注明原文链接：https://www.cnblogs.com/LindaBlog/p/15771816.html
