文档章节

delphi下element-ui 开发

苏兴迎
 苏兴迎
发布于 02/15 16:23
字数 873
阅读 1.8K
收藏 0

        案例使用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

© 著作权归作者所有

上一篇: DelphiMVC框架介绍
下一篇: NetWebMVC 框架
苏兴迎
粉丝 7
博文 40
码字总数 10439
作品 0
石家庄
高级程序员
私信 提问
加载中

评论(0)

Delphi 使用 Duilib 库--Duilib for Delphi

导读 什么是Duilib for Delphi? Duilib for Delphi是一个基于C++Duilib的开源工程,主要致力于在Delphi中使用Duilib库构建漂亮的UI。 怎么学习?首先对Duilib有基本的了解,特别是XML构建的U...

不在乎y
2015/11/30
2.9K
0
RAD Studio产品经理爆的开发路线图

我们都在等待Delphi路线图,现在可以先看一个RAD Studio产品经理最新提供的“路线图预览”。 1. FireMonkey经常和定期更新 2. 下一代Delphi编译器生成多种硬件/操作系统的目标文件 3. 下一代...

mychinashare
2011/09/22
526
3
老牌集成开发环境 Delphi 发布免费社区版

Delphi® - 社区版 Delphi Community Edition与我们的自由开发人员,初创公司,学生和非营利组织免费共享,是一个全功能的IDE,用于从单个Delphi代码库(有限的商业使用许可证)构建iOS,And...

vga
2018/07/23
1.6W
95
【北京】某互联网服务企业诚聘ios,系统运维,Delphi相关职位

1. 高级运维工程师 (北京) 岗位职责: 1、负责管理数量庞大的存储服务器; 2、负责应用服务器、网络设备维护及网络安全维护; 3、应用系统软件配置,维护,监控,调优,故障排除等; 4、数...

sabrinazhu
2012/05/18
310
0
不在乎y/Duilib for Delphi

###DDuilib 目录 项目介绍 其它说明 初次使用 自行编译 目录详情 Demo截图 作者信息 项目介绍 什么是DDuilib(原名“Duilib for Delphi”)? DDuilib是一个建立在C++开源项目duilib之上,且最...

不在乎y
2015/12/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周三乱弹 —— 提高不了工作效率和脸有关系

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 1 《夏令时记录(piano.ver)》- ゆめこ 手机党少年们想听歌,请使劲儿戳(这里) ...

小小编辑
今天
67
2
List的一波操作

public static void main(String[] args) { List<Entity> list = new ArrayList<>(); list.add(new Entity(1)); list.add(new Entity(2)); list.add(new Entity(3)); ......

那个猩猩很亮
今天
75
0
Spring基础

主要用于service层; 轻量级java开发框架; 各层 web层:struts,spring-MVC service层:spring dao层:hibernate,mybatis , jdbcTemplate --> spring-data Spring核心:控制反转IOC 切面编...

七宝1
今天
30
0
解决overflow+border-radius+transform圆角问题

网上还有其他版本,但是对我来说都不好使,下面是我在Chrome上的代码。overflow:hidden依然是不能正常使用,换成unset就可以,读者如果有更好的解决方案,请留言,谢谢。 <figure> <img...

hi懒喵
今天
53
0
《C语言》—— 数组

书籍使我变成了一个幸福的人,使我的生活变成轻松而舒适的诗。——高尔基 本文已经收录至我的GitHub,欢迎大家踊跃star 和 issues。 https://github.com/midou-tech/articles 点关注,不迷路!...

龙跃十二
今天
84
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部