Bootstrap+jQuery登录注册之 think PHP5.1实战增删改查

最新推荐文章于 2021-08-06 10:49:45 发布

hpp74520

最新推荐文章于 2021-08-06 10:49:45 发布

阅读量200

点赞数 2

分类专栏：记录成长文章标签：我的大学

本文链接：https://blog.csdn.net/hpp74520/article/details/103253729

版权

记录成长专栏收录该内容

13 篇文章 0 订阅

订阅专栏

因参加比赛而获得的知识，特意想把它保存下来做个纪念。
ps:比赛发挥很不好，因为题目要求做一个后台信息管理系统，比赛时却卡壳了，更新功能一直实现不了，呜呜呜，明年加油。
在这里插入图片描述
让我们先从注册登录开始吧

wamp+phpstrom+google浏览器
在这里插入图片描述环境我就不过多讲解的了，注意前端框架的路径是否导入。
这里有个方法检查文件是否导入成功，就是按F12查看是否有报错信息。
直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/tp5.11/public/static/js/jquery-3.1.1.min.js"></script>
    <script src="/tp5.11/public/static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/tp5.11/public/static/css/bootstrap.min.css">
    <style>
        .first {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .second {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 330px;
            height: 310px;
            box-shadow: 1px 1px 1000px 1000px rgba(0, 0, 0, 0.2), 0px 0px 20px 5px rgba(0, 0, 0, 0.2);
            margin-top: -200px;
            margin-left: -150px;
            background-color: white;
            opacity: 0.8;
        }

        .btn {
            display: inline;
            text-align: center;
            width: 200px;
        }

        .form-div {
            text-align: center;
        }

        .a {
            font-size: 17px;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
<a href="" data-toggle="modal" data-target="#myModal">登录</a>

<div class="first modal fade" id="myModal">
    <div class="second">
        <form action="" class="form-inline">
            <div class="form-div">
                <button class="close" data-dismiss="modal" data><span>&times;</span></button>
                <br>
                <h4>Please&nbsp;&nbsp;Login</h4><br>
                <input type="text" class="form-control" placeholder="请输入账户名"><br><br>
                <input type="text" class="form-control" placeholder="请输入密码"><br><br><br>
                <button class="btn btn-block">登录</button>
                <br><br>
                <a href="#" class="a">忘记密码?</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" class="a">没有账户?点我注册</a>
            </div>
        </form>
    </div>
</div>
</body>
</html>

注册页代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="{:url('register_exe')}" onsubmit="return judgePW()" method="post">
    <input type="text" placeholder="请输入账户名" required name="username"><br>
    <input type="password" placeholder="请输入密码" id="input1" required name="pwd"><br>
    <input type="password" placeholder="请再次输入密码"  id="input2" required><br>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <a href="main_home.html">回到首页</a>
</form>
<script>
    function judgePW() {
        i1=document.getElementById('input1').value;
        i2=document.getElementById('input2').value;
        if (i1!=i2){
            alert('两次密码不一致,请重新输入');
            return false;
        }
        return true;
    }
</script>
</body>
</html>

这里实现的是一个弹窗的效果，效果图如下。在这里插入图片描述
很遗憾的是比赛的时候只有3个半小时，还要和前端兄弟的代码合起来放在环境里面，后来就没有时间写这些代码了，必须吐槽一下那个键盘，就是那种按下去就弹不上来那种，真的焦灼。

接下来就是利用框架实现前台页面的增删改查。

mysql+tp5.1+phpmyadmin

数据库已打包
在这里插入图片描述
配置根据自己环境而定
剩余代码打包了

代码下载地址
接下来是展示部分功能效果图
前端真的不想写了，累了。

还有收藏功能这些不想写了，如果你需要的话，就请留言吧。
还有用户个人信息的相关操作，有兴趣请直接download代码吧，不要忘记留下赞哦。

hpp74520

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Bootstrap+jQuery登录注册之 think PHP5.1实战增删改查

因参加比赛而获得的知识，特意想把它保存下来做个纪念，ps:比赛发挥很不好，因为题目要求做一个后台信息管理系统，比赛时却卡壳了，更新功能一直实现不了，呜呜呜，明年加油。让我们先从注册登录开始吧wamp+phpstrom+google浏览器环境我就不过多讲解的了直接上代码<!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫