前端小案例喽

已于 2022-06-02 17:55:48 修改
阅读量202 收藏
点赞数
分类专栏： 前端 文章标签： 前端 bootstrap css
于 2022-05-31 10:39:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20427967/article/details/125060268
版权

1 时间选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
</head>
<body>
<div class="container">
    <form class="form-horizontal" style="margin-top: 20px">
        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="姓名">
                    </div>
                </div>
            </div>

            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="年龄">
                    </div>
                </div>
            </div>

        </div>

        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">薪资</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="薪资">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-10">
                        <select class="form-control">
                            <option>IT部门</option>
                            <option>销售部门</option>
                            <option>运营部</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">入职日期</label>
                    <div class="col-sm-10">
                        <input type="text" id="dt" class="form-control" placeholder="入职日期">
                    </div>
                </div>
            </div>
        </div>

        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">提 交</button>
                    </div>
                </div>
            </div>
        </div>

    </form>

</div>


<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="/static/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="/static/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

<script>
    $(function () {
        $('#dt').datetimepicker({
            format: 'yyyy-mm-dd',
            startDate: '0',
            language: "zh-CN",
            autoclose: true
        });
    })
</script>
</body>
</html>
</body>
</html>

2 注册结合数据库

# -*- encoding: utf-8 -*-
# @ModuleName: app
# @Author: 岳强
# @Time: 2022/5/31 11:00 上午
from flask import Flask, render_template, request
from do_mysql import Mysql

app = Flask(__name__)
doMysql = Mysql()


@app.route('/add/user', methods=["GET", "POST"])
def addUser():
    if request.method == "GET":
        return render_template("add_user.html", title="中国联通")
    else:
        username = request.form.get("user")
        password = request.form.get("pwd")
        mobile = request.form.get("mobile")
        sql = "insert into unicom.admin(username,password,mobile) values(%s,%s,%s)"
        data = [username, password, mobile]
        doMysql.otherMysql(sql, data)

        return showUser()


@app.route("/show/user")
def showUser():
    sql = "select * from unicom.admin"
    result = doMysql.getMysql(sql, 2)
    print(result)
    return render_template("show_user.html",data_list=result)


if __name__ == '__main__':
    app.run()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
<div class="container">
    <h1>用户列表</h1>
    <table class="table table-hover table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>密码</th>
            <th>联系方式</th>
        </tr>
        </thead>
        <tbody>
        {% for item in data_list%}
        <tr>
            <td>{{item.id}}</td>
            <td>{{item.username}}</td>
            <td>{{item.password}}</td>
            <td>{{item.mobile}}</td>
        </tr>
        </tbody>
        {% endfor %}
    </table>
</div>

<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>

</head>
<body>
<h1>添加用户</h1>
<form method="post" action="/add/user">
    <input type="text" name="user" placeholder="用户名">
    <input type="text" name="pwd" placeholder="密码">
    <input type="text" name="mobile" placeholder="手机号">
    <input type="submit" value="提交">
</form>

</body>
</html>

 

 

前端小案例汇总（附上原码）
Miracle1203的博客
05-07 1万+
一.交叉动画效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>交...
【前端】实际开发案例
我的的博客哦
12-08 1万+
基础的表单实例
前端开发常用案例（一）
qq_46199553的博客
02-16 3112
【代码】前端开发常用样式。
fuse.js前端搜索简单使用的三个案例
最新发布
iu9831t的博客
03-09 310
Fuse.js 是一个轻量级的前端库，主要用于提供模糊搜索的功能。它非常灵活，易于集成，并且对搜索的结果可以进行配置和权重的调整。在打造用户友好的搜索体验时，Fuse.js 是前端开发者的优选。以下是三个简单的使用案例，展示如何将 Fuse.js 应用于不同的搜索需求中。
分享给大家的几个前端小案例
m0_71412337的博客
07-04 641
使用到了CSS的基本知识，绝对定位和相对定位确定好位置后用transform旋转来完成此案例 以下是详细代码： 运行结果如下：这里面运用了CSS中的动画效果，动画使用的infinite会让动画无线循环，然后还是用了CSS通过定位来完成八卦的绘制，详细代码如下： 运行结果如下：使用了css动画让动画循环，然后小方块和大方块用的css进行绘制，代码如下： 运行结果如下： 这个网页使用了js的技术，实现了生成表格，可以生成多个表格并且表格内会有内容，还可以让每个人的资金翻倍，还有可以筛选出
这些前端案例看似很简单（内附动图）
热门推荐
阿牛的博客
03-20 2万+
在学习前端js操作元素的时候，往往有很多的案例的做法的思想都是一样的，我们一定要会。本篇文章将从几个小demo入手，带你领略js的风采。 很常见的一些案例，一定要学会哦！！！
前端项目实例整理
10-27
前端项目代码实例，都是常用的代码效果集合，绝对让你很方便的搭建前端效果。
前端小案例
qq_37823919的博客
01-02 311
//开灯关灯案例 <input type="button" value="开灯"> <img id="myImage" src="../img/off.gif"> <input type="button" value="关灯"> <script> var img = document.getElementById('myImage'); var input = document.getElementsByTagName('input');
非常漂亮的100个前端案例
06-04
非常漂亮的100个前端案例，包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等等，只有你想不到。
js前端的小例子
04-26
JavaScript的前端的一些讲解，还有一些文档，和API
VUE前端小例子
03-25
VUE前端写的一个简单资产管理的小例子，里面有简单实现布局的代码。
WEB前端-案例汇总
11-08
WEB前端-案例汇总；史上最全的前端资源大汇总；适合初学者进阶，几乎涵盖前端开发所有案例。
前端小案例——动态导航栏文字（HTML + CSS, 附源码）
前端小白一枚
02-04 3650
这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景，并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素，包含一个文本和一个横向的下划线。当鼠标悬停在选项上时，选项的文本颜色会变为粉红色，并且下划线会从中间向两边展开，呈现出一种动态的效果。这种导航栏可以用于网页或应用程序中，提供简洁且有吸引力的导航选项。
前端-案例(一)
KrisChung博客
09-28 8236
文章目录01-案例之评论发表之屏蔽关键字02-案例之表单验证 01-案例之评论发表之屏蔽关键字 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot;&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;UTF-
前端简单案例
huster0828的博客
05-17 692
案例1. 新闻案例 1. 新闻案例 运用标题标签、段落标签和换行标签写的简单新闻页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
简单前端小案例（HTML5+CSS）——跳动的心
SnowMultiflora的博客
08-14 2650
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>粉色爱心❤</title> <style> *{ background-color: skyblue; } .love{ background-c...
50个前端小案例：Html+CSS+JS小案例解读
weixin_43416590的博客
11-23 2781
今天开始我们进行一些前端效果案例的学习，案例来源于：https://github.com/bradtraversy/50projects50days，该案例原作者免费授权任何人学习、使用等，无版权问题。 公众号合集链接：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzkwODY2OTA5NA==&action=getalbum&album_id=3618277165223084032#wechat_redirect 其中部分资源需要科学上网
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秦朝胖子得加钱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值