使用httpVueLoader加载vue单页面---不用脚手架的方法
<!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> // 封装session存储和获取 <script src="{$__TMPL__}/home/index/static/js/index/request.js"></script> // 封装axios </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="240px">
// 侧边栏 <el-menu class="el-menu-vertical-demo" :unique-opened="uniqueOpened"> <el-submenu v-for="(item ,index) in menuList" :key="index" :index="''+item.id"> <template slot="title"> <i class="iconfont" :class="item.icon"></i><span style="margin:0 10px;">{{item.title}}</span></template> <el-menu-item @click="changeMain(item1.tag,item1.name,item)" :class="{'is-active':currentComponent == item1.tag}" v-for="(item1 ,index1) in item.groupList" :key="index1" :index="''+item.id +'-' + ''+item1.id"> <i class="iconfont" :class="item1.icon"></i> <span slot="title">{{item1.name}}</span> </el-menu-item> </el-submenu> </el-menu> </el-aside> <el-container> <el-main>
// 面包屑导航 <div class="breadcrumb"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item><a v-show="currentComponent">{{currentComponentName.parent}}</a></el-breadcrumb-item> <el-breadcrumb-item v-show="currentComponent"> {{currentComponentName.child}} </el-breadcrumb-item> </el-breadcrumb> </div> <component v-bind:is="currentComponent"></component> // 根据条件切换组件 <div class="shop_car"> <el-button type="warning" icon="el-icon-shopping-cart-2" circle @click="shopCar"></el-button> <el-drawer :append-to-body="true" :modal-append-to-body="false" direction="ltr" size="50%" title="购物车" :visible.sync="drawer" > <shop-car></shop-car> </el-drawer> </div> </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
/*
import Plugin from 'v-fit-columns'; // 表格宽度自适应
Vue.use(Plugin);
*/
// 使用bus实现组件之间的通信————————封装的多条件日期时间选择器需要通过这个把选择的最新时间日期传递给需要的组件
var bus = new Vue();
new Vue({
el: '#app',
data() {
return {
visible: false,
hideSider: false,
currentComponent: "Login",
currentComponentName: {
child:"资源上传",
parent:"资源管理"
},
menuList: [
{
title:"资源管理",
icon:"icon-upload_file",
id:1,
groupList:[
{
name: "资源上传",
id:1,
tag: "FileUpload",
icon: "icon-upload_file"
},
{
name: "3D模型",
id:2,
tag: "DocumentClassification",
icon: "icon-files"
},
{
name: "资源列表",
id:3,
tag: "ResourceManager",
icon: "icon-resource"
},
]
},
{
icon:"icon-upload_file",
title:"3D模型管理",
id:2,
groupList: [
{
name: "3D模型列表",
id:1,
tag: "ThreeDimensional",
icon: "icon-regist"
}
]
},
{
icon:"icon-upload_file",
title:"用户管理",
id:3,
groupList: [
{
name: "注册审核",
id:1,
tag: "RegisterReview",
icon: "icon-regist"
}
]
},
{
icon:"icon-upload_file",
title:"游戏管理",
id:4,
groupList: [
{
name: "游戏列表",
id:1,
tag: "GameManager",
icon: "icon-regist"
}
]
}
],
userInfo: {
username: "张三"
},
isLogin: false,
uniqueOpened:true,
drawer: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'),
'GameManager': httpVueLoader('/template/default/pc/home/index/views/gameManager.vue'),
'ThreeDimensional':httpVueLoader('/template/default/pc/home/index/views/threeDimensional.vue'),
'shopCar':httpVueLoader('/template/default/pc/home/index/views/shopCar.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,name,item) {
let _this = this;
_this.currentComponent = obj;
_this.currentComponentName.child = name;
_this.currentComponentName.parent = item.title;
},
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: '已取消退出'
});
});
},
shopCar(){
this.drawer = !this.drawer;
}
}
})
axios.js
function axiosPostRequst(url,data) {
return axios({
method: 'post',
url: url,
data: data,
transformRequest: [function (data) {
let ret = '';
for (let i in data) {
ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + "&";
}
return ret;
}],
}).then(resp => {
return resp.data;
}).catch(error => {
return "exception=" + error;
});
}
util.js
function logOut() {
}
function setSessionStorage(key, value) {
let curtime = (new Date()).getTime(); // 获取当前时间 ，转换成JSON字符串序列
let valueDate = JSON.stringify({
val: value,
timer: curtime
});
try {
sessionStorage.setItem(key, valueDate);
} catch (e) {
// 兼容性写法
if (isQuotaExceeded(e)) {
console.log("Error: 本地存储超过限制");
sessionStorage.clear();
} else {
console.log("Error: 保存到本地存储失败");
}
}
}
function getSessionStorage(key) {
let exp = 60 * 60 * 24 * 1000; // 一天的毫秒数
let _key = sessionStorage.getItem(key);
// console.log('取token', _key);
if (_key) {
let vals = sessionStorage.getItem(key); // 获取本地存储的值
let dataObj = JSON.parse(vals); // 将字符串转换成JSON对象
let newValue = "";
// 如果(当前时间 - 存储的元素在创建时候设置的时间) > 过期时间
let isTimed = ((new Date()).getTime() - dataObj.timer) > exp;
if (isTimed) {
console.log("存储已过期");
sessionStorage.removeItem(key);
return null;
} else {
newValue = dataObj.val;
}
return newValue;
} else {
return null;
}
}
function validPassword(rule,value,callback) {
let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,8}$/;
if(!reg.test(value)){callback(new Error('密码必须是由6-8位字母+数字组合'))
}else{
callback()
}
}
以上是页面搭建的基础
本文来自博客园，作者：小虾米吖~，转载请注明原文链接：https://www.cnblogs.com/LindaBlog/p/15791160.html
