用户登录与表单设计

要求1:

1.用户名为文本框,名称为 UserName,长度为 15,最大字符数为 20。
2.密码为密码框,名称为 UserPass,长度为 15,最大字符数为 20。
3.性别为两个单选按钮,名称为 sex,值分别为男和女,男默认选中。
4.爱好是三个多选按钮,名称为 like,值分别为写作、听音乐、体育。
5.省份为下拉框,名称为 province,选项的键-值对为 Key:陕西省,value:shaanxi;Key:山西省
value:shanx;陕西省默认选中。
6.自我介绍为多行文本框,名称为 intro,宽 25,高 5,默认值为“这个家伙什么也没留下”。
7.提交按钮,名称为“send”,标签为“提交”。
8.重置按钮,名称为“reset”,标签为“重置”。
9.参照图使用表格定位表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1.1用户注册</title>
</head>
<body>
    <div class="box"></div>
    <div class="login">
        <form action="">
            <tr>用户名</tr>
            <td><input type="text" name="Username" size="15" maxlength="20"></td><br>
 
            <tr>密码</tr>
            <td><input type="password" name="UserPass" size="15" maxlength="20"></td><br>
 
            <tr>性别</tr>
            <td>
                <input type="radio" name="sex" value="男" checked>男
                <input type="radio" name="sex" value="女">女
            </td><br>
 
            <tr>爱好</tr>
            <td>
                <input type="checkbox" name="like" value="写作" id="">写作
                <input type="checkbox" name="like" value="听音乐" id="">听音乐
                <input type="checkbox" name="like" value="体育" id="">体育
            </td><br>
 
            <tr>省份</tr>
            <td>
                <select name="province" id="">
                    <option value="shaanxi" selected>陕西省</option>
                    <option value="shanx">山西省</option>
                </select>
            </td><br>
 
            <tr>自我介绍</tr>
            <td>
                <textarea name="intro" id="" cols="25" rows="5" placeholder="这个家伙什么也没留下"></textarea>
            </td><br>
            
            <td colspan="2" align="center">
                <input type="submit" name="send">
                <input type="reset" name="reset">
            </td>
            
            
        </form>
        
    </div>
</body>
</html>

工商银行电子汇款单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1.2工商银行电子汇款单</title>
    <style>
        table{
            border-collapse: collapse;
            width: 100%;
            height: 100%;
        }
        table,th,td{
            border: 1px solid black;
            padding: 10px;
        }
        th{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 align="left"><b>工商银行电子汇款单</b></h1>
    <table>
        <tr>
            <td colspan="2"><b>回单类型</b></td>
            <td>网上转账汇款</td>
            <td colspan="2"><b>指令序号</b></td>
            <td>HQH0000000000000013878172</td>
        </tr>
 
        <tr>
            <td rowspan="4"><b>收款人</b></td>
            <td>户名</td>
            <td>老牟</td>
            <td rowspan="4"><b>收款人</b></td>
            <td>户名</td>
            <td>老刘</td>
        </tr>
 
        <tr>
            <td><b>卡号</b></td>
            <td>000000000001</td>
            <td><b>卡号</b></td>
            <td>000000000002</td>
        </tr>
 
        <tr>
            <td>地区</td>
            <td>南京</td>
            <td>地区</td>
            <td>杭州</td>
        </tr>
 
        <tr>
            <td><b>网点</b></td>
            <td>工商江苏南京业务处理中心</td>
            <td><b>网点</b></td>
            <td>江苏徐州业务中心</td>
        </tr>
 
        <tr>
            <td colspan="2"><b>币种</b></td>
            <td>人民币</td>
            <td colspan="2"><b>钞汇标志</b></td>
            <td>钞票</td>
        </tr>
 
        <tr>
            <td colspan="2"><b>金额</b></td>
            <td>1.00元</td>
            <td colspan="2"><b>手续费</b></td>
            <td>0.57元</td>
        </tr>
 
        <tr>
            <td colspan="2"><b>合计</b></td>
            <td colspan="4">人民币(大写):查圆整</td>
        </tr>
 
        <tr>
            <td colspan="2"><b>交易时间</b></td>
            <td>2017年6月1日</td>
            <td colspan="2"><b>时间截</b></td>
            <td>2017.06-01-13.00.00,00000</td>
        </tr>
    </table>
    <p>票据打印时间:2017-06-01 15:00:12</p>
    <p><del>票据打印单位:江苏徐州业务中心</del></p>
    <p>操作员:大曾</p>
</body>
</html>

李白诗词

豆瓣电影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业1.4电影</title>
    <style>
        li{
            list-style: none;
            display: inline-block;
            border: 1px soldred;
            background-color: white;
        }
    </style>
</head>
<body>
    <h1><b>热门电影板块</b></h1><hr>
    <li><b>最近热门电影</b></li>
    <li>热门</li>
    <li>最新</li>
    <li>豆瓣高分</li>
    <li>冷门佳片</li>
    <li>华语</li>
    <li>欧美</li>
    <li>韩国</li>            
    <li>日本</li> 
    <li>更多>></li><hr>
    <table>
        <tr>
            <td>
                <img src="./猜火车.png" width="150px" height="200px">
                <p>猜火车 8.1</p>
            </td>
 
            <td>
                <img src="./贝.png" width="150px" height="200px">
                <p>贝尔科实验 6.0</p>
            </td>
 
            <td>
                <img src="./加州.png" width="150px" height="200px">
                <p>加州公路巡警 6.8</p>
            </td>
 
            <td>
                <img src="./歌声.png" width="150px" height="200px">
                <p>歌声不绝 6.3</p>
            </td>
 
        </tr>
 
        <tr>
            <td>
                <img src="./明日.png" width="150px" height="200px">
                <p>明日的我与昨日的我</p>
            </td>
 
            <td>
                <img src="./速度.png" width="150px" height="200px">
                <p>速度与激情8</p>
            </td>
 
            <td>
                <img src="./特工.png" width="150px" height="200px">
                <p>极速特工</p>
            </td>
 
            <td>
                <img src="./金刚狼.png" width="150px" height="200px">
                <p>金刚狼3:殊死一战</p>
            </td>
        </tr>
    </table>
</body>
</html>

⽤户登录系统数据库表设计 ⽤户登录系统数据库表设计 最近看了看公司后台⽤户登录系统的设计, ⽐较混乱, 主要还是因为URS和Oauth以及URS第三⽅这三个登录形式各不相同导致的。 下⾯着重介绍⼀下涉及到第三⽅登录中需要注意的问题 在⼀个新项⽬中, 如果是要建⽴⾃⼰的登录体系的话, 那么直接创建⼀个Users表,包含username和password两列,这样,就可以实现登录了: id " username " password " name等其他字段 ----+----------+----------+---------------- A1 " bob " a1b23f2c " ... A2 " adam " c0932f32 " ... 如果要让⽤户通过第三⽅登录,⽐如微博登录或QQ登录,怎么集成进来呢? 以微博登录为例,由于微博使⽤OAuth2协议登录,所以,⼀个登录⽤户会包含他的微博⾝份的ID,⼀个Access Token⽤于代表该⽤户访问微博的API和⼀个过期时间。 要集成微博登录,很多童鞋⽴刻想到把Users表扩展⼏列,记录下微博的信息: id " username " password " weibo_id " weibo_access_token " weibo_expires " name等其他字段 ----+----------+----------+----------+--------------------+---------------+---------------- A1 " bob " a1b23f2c " W-012345 " xxxxxxxxxx " 604800 " ... A2 " adam " c0932f32 " W-234567 " xxxxxxxxxx " 604800 " ... 加⼀个QQ登录Users表就⼜需要加3列,⾮常不灵活 那么我们需要对这个表进⾏拆分。当⽤户以任意⼀种⽅式登录成功后,我们读取到的总是Users表对应的⼀⾏记录,它实际上是⽤户的个⼈资料(Profile),⽽登录过程只是为了 认证⽤户(Authenticate),⽆论是本地⽤密码验证,还是委托第三⽅登录,这个过程本质上都是认证。 所以,如果把Profile和Authenticate分开,就⼗分容易理解了。Users表本⾝只存储⽤户的Profile, 其中ID为关联不同登录⽅式的外键。 id " name " birth等其他字段 ----+------+----------------- A1 " Bob " ... A2 " Adam " ... ⽽通过⽤户名⼝令登录可视为⼀种Authenticate的⽅式,利⽤LocalAuth表维护: id " user_id " username " password ----+---------+----------+----------- 01 " A1 " bob " a1b23f2c 02 " A2 " adam " c0932f32 通过微博登录可视为另⼀种Authenticate⽅式,利⽤OAuth表维护, 但是access_token⼀般情况也只有⼏个⼩时的时效, 所以存储它是没有意义的, 每次登录的时候去微博后台 验证⼀下客户端传来的token就⾏了。 如果⽤户只⽤了第三⽅登录, 那就拿第三⽅数据来填充刚才的User表即可。 id " user_id " weibo_id " ----+---------+----------+ 11 " A1 " W-012345 " 12 " A2 " W-234567 " 如果要添加另⼀种OAuth登录,⽐如QQ登录,那就再加⼀个列标⽰不同站点也就OK了, 但是要注意⽤户在不同登录⽅式的⽤户名和photo⼀般不⼀样, 所以也单独存起来 id " user_id " oauth_name " oauth_id " nick_name" photo" ----+---------+------------+----------+----------+------+ 11 " A1 " weibo " W-012345 " 12 " A2 " weibo " W-234567 " 13 " A1 " qq " Q-090807 " 14 " A2 " qq " Q-807060 " 通过这种⽅式, ⽆论⽤户采⽤哪种⽅式登录, 都可以锁定到⽤户的user_id。 下⾯再说⼀下⽹易的URS登录, 因为我们要直接采⽤⽹易通⾏证, 所以也就不需⾃⼰存储密码, 因此我们的架构应该设为User表 id " user_Email " username " birth ----+------------+----------
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值