案例使用delphiwebmvc框架开发
登录界面代码
<html>
<#include file="/include.html" />
<body>
<div id="app" style="margin-left: auto; margin-right: auto; margin-top: 100px; width: 350px;">
<h1>{{title}}</h1>
<el-form class="apply-form first-form" :model="formData" :rules="rules" ref="form">
<div>
<table style="width: 100%;">
<tr>
<td style="width: 60px;font-family:Helvetica Neue;">用户名</td>
<td>
<el-input v-model="formData.username" clearable></el-input>
</td>
<td style="width: 80px;">
<el-form-item style="height:1px;" prop="username"></el-form-item>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<el-input v-model="formData.pwd" show-password></el-input>
</td>
<td style="width: 80px;" ><el-form-item prop="pwd"></el-form-item></td>
</tr>
<tr>
<td></td>
<td style="text-align: right;">
<el-button @click="submit()" icon="el-icon-search">登录</el-button>
</td>
</tr>
</table>
</div>
<div style="text-align: center;">
username:admin pwd:admin
</div>
</el-form>
</div>
</body>
<script>
new Vue({
el: '#app',
created() {
document.title=this.title1,
this.showdata();
},
data: {
title: "",
title1:"ok",
visible: false,
formData: {
username: "",
pwd: "",
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
pwd: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
}
},
methods: {
submit: function () {
this.$refs['form'].validate((valid) => {
if (valid) {
this.$http.post('/check', this.formData).then(function (res) {
if (res.body.code == 0) {
window.location = "/main";
} else {
this.$message({ type: 'error', message: res.body.message });
}
}, function () {
this.$message({ type: 'error', message: res.body.message });
});
}else{
return false;
}
})
},
showdata: function () {
//发送get请求
this.$http.get('/data').then(function (res) {
this.title = res.body.title;
}, function () {
console.log('请求失败处理');
});
},
login: function () {
if (this.username == "") {
this.$message({ type: 'error', message: "请输入用户名" });
return;
}
if (this.pwd == "") {
this.$message({ type: 'error', message: "请输入密码" });
return;
}
this.$http.post('/check', { username: this.username, pwd: this.pwd }).then(function (res) {
if (res.body.code == 0) {
window.location = "/main";
} else {
this.$message({ type: 'error', message: res.body.message });
}
}, function () {
this.$message({ type: 'error', message: res.body.message });
});
},
alert: function (msg) {
this.$alert(msg, '提示', {
confirmButtonText: '确定',
callback: action => {
}
});
}
}
})
</script>
</html>主界面代码
<!DOCTYPE html>
<html lang="en">
<head>
<#include file="/include.html" />
<title>Document</title>
</head>
<body>
<div id="app" v-cloak>
<el-row style=" width: 100%; margin-top: -25px;">
<el-col :sm="4" :md="4" :xs="4">
<el-menu default-active="subaction" class="el-menu-vertical-demo" @open="handleOpen"
@close="handleClose" @select="handleSelect" :default-openeds=["1"] background-color="#545c64" text-color="#fff"
active-text-color="#ffd04b" style="margin-left: -6px;">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item :index="(item.url)" v-for="(item,index) in this.menus" :key="index">
<span >{{item.name}}</span>
</el-menu-item>
</el-submenu>
<el-menu-item index="21">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="31">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="41">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :sm="20" :md="20" :xs="20">
<div>
<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
@select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
style="margin-right: -6px; ">
<el-menu-item index="21">处理中心</el-menu-item>
<el-submenu index="22">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="23" disabled>消息中心</el-menu-item>
<el-menu-item index="24"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>
<div>
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
<el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title"
:name="item.name">
<div v-html="item.content"></div>
</el-tab-pane>
</el-tabs>
</div>
</el-col>
</el-row>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
iframeHeight: window.innerHeight - 100,
getPageUrl: '',
subaction: "1",
activeIndex2: '1',
tabIndex: 1,
editableTabsValue: '2',
editableTabs: [],
menus: [
{ "id": 1, "url": "/user/", "name": "用户管理" },
{ "id": 2, "url": "/user/1", "name": "用户管理1" },
{ "id": 3, "url": "/user/2", "name": "用户管理2" },
{ "id": 4, "url": "/user/3", "name": "用户管理3" },
{ "id": 5, "url": "/user/4", "name": "用户管理4" }]
};
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.menus.some((item1, key1) => {
if (item1.url == key) {
item=item1;
this.menuclick(item);
return;
}
});
},
menuclick(item) {
iframeHeight = window.innerHeight - 100;
let newTabName = '';
let isok = 0;
this.editableTabs.some((item1, key) => {
if (item1.name == item.id) {
isok = 1;
newTabName = item.id+'';
return;
}
});
if (isok == 0) {
html = '<iframe src="' + item.url + '" width="100%"' +
'height="' + iframeHeight + '" frameborder="0" scrolling="no"></iframe>';
newTabName = item.id + '';
this.editableTabs.push({
title: item.name,
name: newTabName,
content: html
});
}
this.editableTabsValue = newTabName;
},
handleTabsEdit(targetName, action) {
if (action === 'remove') {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
}
}
}
})
</script>
</html>下载地址：https://pan.baidu.com/s/1Eq5Re9Inc4nr90mhHW4Xfw 提取码：jcxz
来源：oschina
链接：https://my.oschina.net/delphimvc/blog/3166452