Stark 组件：快速开发神器 —— 模板设计
2024-04-01 05:30:10
说道 Stark 你是不是不会想到他——Tony Stark，超级英雄钢铁侠，这也是我的偶像。
不过我们今天要开发的 Stark 组件，倒是跟他的人工智能助手 JARVIS 有些类似，是帮助我们快速开发数据库增、删、改、查操作、应用各种功能的开发助手。
模板设计
上一篇博客Stark 组件：快速开发神器 —— 自动生成 URL已经生成了相应的 URL，接下来要设计一款显示页面。
对于后台管理系统来说，顶部栏、左侧菜单栏是固定的，变换的只是中间的内容区域，因此，我们可以制作一个模板，让具有具体功能的页面去继承它。
先来看一下效果：
下面呈上的是 HTML 源码，当然只有 HTML 是不行的，还需要 CSS、JS、视图函数巴拉巴拉一大堆，鼓励自己编写，我只是提供一个样品而已，在项目的最后也会放出全部源码。
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Matrix工作室管理系统</title><link rel="stylesheet" href="/static/vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css"><link rel="stylesheet" href="/static/vendor/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"><link rel="stylesheet" href="/static/vendor/font-awesome-4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="{% static 'RBAC/css/theme.css' %}"><link rel="stylesheet" href="{% static 'RBAC/css/default.css' %}">
</head>
<body><header class="header"><div class="logo-container" style="margin-left: 20px;"><a href="#" class="logo"><img src="/static/images/MatrixLogo.png" style="height: 35px;" alt="MatrixLogo"/></a></div><div class="header-right"><form action="#" class="search nav-form"><div class="input-group input-search"><label for="search"></label><input type="text" class="form-control" name="search" id="search" placeholder="Search..."><span class="input-group-btn"><button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button></span></div></form><span class="separator"></span><ul class="notifications"><li><a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown"><i class="fa fa-tasks"></i><span class="badge">3</span></a><div class="dropdown-menu notification-menu large"><div class="notification-title"><span class="pull-right label label-default">3</span>TASKS</div><div class="content"><ul><li><p class="clearfix mb-xs"><span class="message pull-left">生成销售报告</span><span class="message pull-right text-dark">60%</span></p><div class="progress progress-xs light"><div class="progress-bar" role="progressbar" aria-valuenow="60"aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div></div></li><li><p class="clearfix mb-xs"><span class="message pull-left">导入联系人</span><span class="message pull-right text-dark">98%</span></p><div class="progress progress-xs light"><div class="progress-bar" role="progressbar" aria-valuenow="98"aria-valuemin="0" aria-valuemax="100" style="width: 98%;"></div></div></li><li><p class="clearfix mb-xs"><span class="message pull-left">上传一些大的文件</span><span class="message pull-right text-dark">33%</span></p><div class="progress progress-xs light mb-xs"><div class="progress-bar" role="progressbar" aria-valuenow="33"aria-valuemin="0" aria-valuemax="100" style="width: 33%;"></div></div></li></ul></div></div></li><li><a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown"><i class="fa fa-envelope"></i><span class="badge">4</span></a><div class="dropdown-menu notification-menu"><div class="notification-title"><span class="pull-right label label-default">230</span>Messages</div><div class="content"><ul><li><a href="#" class="clearfix"><figure class="image"><img src="/static/images/Alex0.jpg" alt="Joseph Doe Junior"class="img-circle" style="height: 40px"/></figure><span class="title">Joseph Doe</span><span class="message">Lorem ipsum dolor sit.</span></a></li><li><a href="#" class="clearfix"><figure class="image"><img src="/static/images/Alex0.jpg" alt="Joseph Junior"class="img-circle" style="height: 40px"/></figure><span class="title">Joseph Junior</span><span class="message truncate">Truncated message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia orci. Proin vestibulum eget risus non luctus. Nunc cursus lacinia lacinia. Nulla molestie malesuada est ac tincidunt. Quisque eget convallis diam, nec venenatis risus. Vestibulum blandit faucibus est et malesuada. Sed interdum cursus dui nec venenatis. Pellentesque non nisi lobortis, rutrum eros ut, convallis nisi. Sed tellus turpis, dignissim sit amet tristique quis, pretium id est. Sed aliquam diam diam, sit amet faucibus tellus ultricies eu. Aliquam lacinia nibh a metus bibendum, eu commodo eros commodo. Sed commodo molestie elit, a molestie lacus porttitor id. Donec facilisis varius sapien, ac fringilla velit porttitor et. Nam tincidunt gravida dui, sed pharetra odio pharetra nec. Duis consectetur venenatis pharetra. Vestibulum egestas nisi quis elementum elementum.</span></a></li><li><a href="#" class="clearfix"><figure class="image"><img src="/static/images/Alex0.jpg" alt="Joe Junior"class="img-circle" style="height: 40px"/></figure><span class="title">Joe Junior</span><span class="message">Lorem ipsum dolor sit.</span></a></li><li><a href="#" class="clearfix"><figure class="image"><img src="/static/images/Alex0.jpg" alt="Joseph Junior"class="img-circle" style="height: 40px"/></figure><span class="title">Joseph Junior</span><span class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lacinia orci. Proin vestibulum eget risus non luctus. Nunc cursus lacinia lacinia. Nulla molestie malesuada est ac tincidunt. Quisque eget convallis diam.</span></a></li></ul><hr/><div class="text-right"><a href="#" class="view-more">View All</a></div></div></div></li><li><a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown"><i class="fa fa-bell"></i><span class="badge">3</span></a><div class="dropdown-menu notification-menu"><div class="notification-title"><span class="pull-right label label-default">3</span>Alerts</div><div class="content"><ul><li><a href="#" class="clearfix"><div class="image"><i class="fa fa-thumbs-down bg-danger"></i></div><span class="title">Server is Down!</span><span class="message">Just now</span></a></li><li><a href="#" class="clearfix"><div class="image"><i class="fa fa-lock bg-warning"></i></div><span class="title">User Locked</span><span class="message">15 minutes ago</span></a></li><li><a href="#" class="clearfix"><div class="image"><i class="fa fa-signal bg-success"></i></div><span class="title">Connection Restaured</span><span class="message">10/10/2014</span></a></li></ul><hr/><div class="text-right"><a href="#" class="view-more">View All</a></div></div></div></li></ul><span class="separator"></span><div id="userbox" class="userbox"><a href="#" data-toggle="dropdown"><figure class="profile-picture"><img src="/static/images/Alex0.jpg" alt="Alex" class="img-circle" style="height: 50px;"data-lock-picture="/static/images/!logged-user.jpg"/></figure><div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe@JSOFT.com"><span class="name">Alex</span><span class="role">算法组组长</span></div><i class="fa custom-caret"></i></a><div class="dropdown-menu"><ul class="list-unstyled"><li class="divider"></li><li><a role="menuitem" tabindex="-1" href="#"><i class="fa fa-user"></i><span>My Profile</span></a></li><li><a role="menuitem" tabindex="-1" href="#" data-lock-screen="true"><i class="fa fa-lock"></i><span>Lock Screen</span></a></li><li><a role="menuitem" tabindex="-1" href="{% url 'logout' %}"><i class="fa fa-power-off"></i><span>Logout</span></a></li></ul></div></div></div>
</header>
<div class="inner-wrapper"><aside id="sidebar-left" class="sidebar-left"><div class="sidebar-header"><div class="sidebar-title" style="color: white; font-weight: bold;">Navigation</div><div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html"data-fire-event="sidebar-left-toggle"><i class="fa fa-bars" aria-label="Toggle sidebar"></i></div></div><h2>菜单</h2></aside><section role="main" class="content-body"><header class="page-header"><h2>路径导航</h2><div class="right-wrapper pull-right"><a class="sidebar-right-toggle" data-open="sidebar-right"><i class="fa fa-chevron-left"></i></a></div></header>{% block content %}{% endblock %}</section>
</div>
<script src="/static/vendor/jQuery%203.4.1/jquery-3.4.1.min.js"></script>
<script src="/static/vendor/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>
Stark 组件：快速开发神器 —— 模板设计相关推荐
- Stark 组件：快速开发神器 —— 页面显示
说道 Stark 你是不是不会想到他--Tony Stark,超级英雄钢铁侠,这也是我的偶像. 不过我们今天要开发的 Stark 组件,倒是跟他的人工智能助手 JARVIS 有些类似,是帮助我们快速开 ...
- Stark 组件：快速开发神器 —— 自动生成 URL
说道 Stark 你是不是不会想到他--Tony Stark,超级英雄钢铁侠,这也是我的偶像. 不过我们今天要开发的 Stark 组件,倒是跟他的人工智能助手 JARVIS 有些类似,是帮助我们快速开 ...
- Stark 组件：快速开发神器 —— 锦上添花
Stark 组件:快速开发神器 -- 锦上添花 一.分页 二.排序 三.搜索 1.关键字搜索 2.组合搜索 四.批量操作 经过前面几个篇章,我们的 Stark 组件已经能够批量生成 URL,快速实现增 ...
- bno055传感器数据不更新_BMF055和BNO055器件：快速开发传感器融合设计的定制
准确可靠地感测位置.方向和运动已经成为许多细分市场(包括消费.工业和军用/航空)各种应用领域的必要需求.要提供这种复杂的数据,适用的传感器系统除了整合来自基本的陀螺仪传感器或加速计的结果外,还需其他方 ...
- 介绍一个软件开发工具，堪称快速开发神器
软件快速开发平台是一种软件开发工具,以通用技术架构(如MVC)为基础,集成常用建模工具.二次开发包.基础解决方案等而成.可以大幅缩减编码率,使开发者有更多时间关注客户需求,在项目的需求.设计.开发.测 ...
- android 登录组件开发,Android组件化开发路由的设计
调研了一下目前的路由框架,ARouter(阿里的),ActivityRouter都使用了apt技术 编译时注解,个人想法是一口吃不成胖子,先做个比较实用的. VpRouter路由框架主要应用于组件化开 ...
- android组件设计,Android组件化开发路由的设计实践
调研了一下目前的路由框架,ARouter(阿里的),ActivityRouter都使用了apt技术 编译时注解,个人想法是一口吃不成胖子,先做个比较实用的. VpRouter路由框架主要应用于组件化开 ...
- 【C#+SQL Server+打印组件】实现电商快递单打印系统 五：自定义组件和快递单模板设计（附源码和资源）
需要源码和资源请点赞关注收藏后评论区留言私信~~~ 一.自定义组件(扩展TextBox) 由于快递单种类较多,所以在设计系统时考虑开发一个通用模板,由用户根据自己使用的快递单样式自行定义快递单的文本输 ...
- 分享一套Android快速开发通用模板，包含常用主流框架，持续更新中……
AndroidTemplate 博客地址:android小咖秀 项目初衷 做开发三五年了.项目也做了些,都是不停地撸码,有自己从0开始的,有从其他人手里接锅的,慢慢的遇到的问题多了起来也就成了经验,自 ...
最新文章
- topcoder srm 691 div1 -3
- HM16.0之帧间预测——xCheckRDCostInter()函数
- C#实现局部峰值查找,功能对应Matlab中的findpeaks.m
- NYOJ练习题 Splits the string （简单动态规划）
- linux标准IO实验,Linux系统编程(第三篇) 标准IO.pdf
- 机器人 工具坐标系的标定
- resque java_php-resque ：基于Redis的后台任务系统
- 为什么只有奇次谐波_治理变频器产生谐波的应用
- 搭建卷积神经网络怎么确定参数_汽车冲压模具中拉延件各参数要怎么确定？本文教你确定方法！...
- 组装电脑调整分区后分区丢失的资料找回方法
- java settimezone_Java时间处理2----时区TimeZone类方法探究(Java8以前)
- 【云周刊】第125期：“机器学习”三重门_“中庸之道”趋若人
- 2008是中国的奥运年
- PaddleOCR 手写识别模型:标注到训练
- 你不会因为实施了Scrum而变敏捷
- 【WCN685X】WCN685X hostapd 设置country码不生效问题分析及解决方案
- chcp Command的妙用
- 微星 b460m 10400f 黑苹果 (mac os11) rx570 (B460M-A PRO) efi
- 2021年中国霍奇金淋巴瘤治疗学市场趋势报告、技术动态创新及2027年市场预测
- WinZip Pro for Mac专业文件解压缩软件
热门文章
- ionic build Android错误记录 error in opening zip file
- UINavgationController中覆写preferredStatusBarStyle方法不执行的问题
- iOS 利用webView加载html代码，在代理中获取html页面的链接时出现的问题
- Android使用CountDownTimer倒计时
- 富文本编辑器 - wangEditor 表情
- [每天进步一点 -- 流水账]第1周
- Ruby学习笔记_索引贴
- ASP.NET MVC3 权限验证
- jquery插件 autoComboBox 自动创建联动的下拉框 如:省市区联动
- js 链接websocket马上断开_WebSocket之基于STOMP协议的广播模式实现群聊功能