jq，php，MySQL实现简单的登陆注册效果

文章地址：https://www.cnblogs.com/sandraryan/

在数据库新建表单

（我用的是XAMPP）

首先新建一个数据表。包含ID，价格，名称等。选择不同类型（int，double），把ID设为主键，让其自增。

创建成功是这样子

在浏览器通过数据库打开页面

有时候文件的路径可能需要手输 /(ㄒoㄒ)/~~

先进行简单的页面布局

html：需要引入一个jq库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 导航 -->
<div class="nav"></div>
<!-- 内容 -->
<div class="banner">
    <!-- 菜单栏 -->
    <div class="left-menu">
        <ul>
            <li class="btn active-btn" data-i="0">商品管理</li>
            <!-- 以下两个暂时用不到-->
            <li class="btn" data-i="1">订单管理</li>
            <li class="btn" data-i="2">用户管理</li>
        </ul>
    </div>
    <!-- 选项卡 -->
    <div class="content">
        <div class="card good-m active-card">
            <div class="add-btn">添加商品</div>
            <table class="tab">
                <tr>
                    <th>名称</th>
                    <th>价格</th>
                    <th>介绍</th>
                    <th>图片</th>
                    <th>详情图</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </table>
        </div>
    </div>
</div>

<!-- 遮罩层 -->
<div class="mask"></div>

<!-- 修改弹框 -->
<div class="modal">
    <div class="box">
        <span>商品名称:</span>
        <input type="text" class="g-name">
    </div>
    <div class="box">
        <span>商品价格:</span>
        <input type="text" class="g-price">
    </div>
    <div class="box">
        <span>商品介绍:</span>
        <input type="text" class="g-intro">
    </div>
    <div class="box">
        <span>商品图片:</span>
        <input type="text" class="g-img">
    </div>
    <div class="box">
        <span>详情图:</span>
        <input type="text" class="g-imglist">
    </div>
    <div class="box">
        <span>商品数量:</span>
        <input type="text" class="g-count">
    </div>
    <div class="btns">
        <div class="exit">取消</div>
        <div class="sure">确定</div>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>

css：

* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    list-style: none;
}
.nav {
    height: 80px;
    background: #8acce8;
}
.banner {
    display: flex;
}
.left-menu {
    width: 200px;
    min-height: calc(100vh - 80px);
    background: #1a2225;
    cursor: pointer;
    color: #eee;
    font-weight: lighter;
}
ul {
    text-align: center;
    margin-top: 20px;
}
li {
    padding: 10px 0;
}
.content {
    width: calc(100vw - 200px);
    padding: 20px;
}
.mask {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: .6;
    display: none;
}
.modal {
    position: fixed;
    width: 500px;
    left: calc((100vw - 500px) / 2);
    top: 200px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0,0,0,.7);
    padding: 20px;
    display: none;
}
.box {
    margin-bottom: 20px;
}
.box span {
    display: inline-block;
    width: 100px;
    font-size: 20px;
    font-weight: bolder;
    text-align: right;
}
input {
    width: 354px;
    outline: none;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 3px;
}
.btns {
    text-align: right;
}
.btns>div, .add-btn {
    display: inline-block;
    padding: 6px 11px;
    border: 1px solid #bbb;
    cursor: pointer;
    border-radius: 5px;
    color: #444;
}
.add-btn {
    border: 1px solid orange;
    background: #ffb924;
    color: #fff;
    margin-bottom: 20px;
}
.btns .sure {
    background: #337ab7;
    border: 1px solid #2e6da4;
    color: #fff;
}
.tab {
    width: 100%;
    border-collapse: collapse; /* 单元格边框合并 */
    color: #666;
    font-weight: lighter; /* 字体粗细 */
    text-align: left;
}
.tab td, .tab th {
    border: 1px solid #eee;
    padding: 10px;
}
.tab tr:nth-child(1) {
    background: #f2f5f9;
}
.view, .delete {
    display: inline-block;
    color: #fff;
    background: #ff0067;
    padding: 3px 10px;
    border-radius: 6px;
    cursor: pointer; /* 鼠标悬浮变小手 */
}
.view {
    background: #4577ff;
}
.card  {
    display: none;
}
.active-card {
    display: block;
}
.active-btn {
    background: #000;
}
.order-m {
    background: yellow;
}
.user-m {
    background: blue;
}

.tab img {
    width: 90px;
}

html css布局后的效果图是这样子什么效果都没有~~~

jq和php数据交互

然后是jq和php的数据传输。这里用的是前后端分离的开发方式。

-----------

// 转载请注明出处

jq，php，MySQL实现简单的登陆注册效果

在数据库新建表单

jq和php数据交互

猜你喜欢