文章地址: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的数据传输。这里用的是前后端分离的开发方式。
-----------
// 转载请注明出处