[小白的Web全栈之旅]独立开发电子商务网站--管理员后台开发（一、界面开发）
2024-05-04 19:36:48
哈喽大家好，今天博主要讲解的是独立开发电子商务网站的第五篇——项目创建+数据库开发，想要预览整个系列博客的参考目录请点击这里
在本博客，博主会讲解：
- 调用Bootstrap开发管理员后台登入界面
- 调用Bootstrap开发管理员后台界面
调用Bootstrap开发管理员后台登入界面
- 首先，进入网站根目录，创建文件Admin.php
- 输入以下代码：
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>管理员后台</title><!--调用Bootstrap--><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><!--调用sweetAlert2--><script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><!--局内css--><style>html,body{margin: 0;min-height: 100%;}</style></head><body style="background-color:grey"><div class="d-flex justify-content-center align-items-center" style="width:100%;height:100%;"><div style="width:50%;height:40%;background-color:#ffffff" class="d-flex justify-content-center align-items-center"><form style="width:90%;"><h3>管理员后台</h3><div class="form-group"><label for="account">管理员账号</label><input type="text" class="form-control" id="account" name="account" aria-describedby="Help"><small id="Help" class="form-text text-muted">请输入正确的登入信息</small></div><div class="form-group"><label for="password">管理员密码</label><input type="password" class="form-control" id="password" name="password"></div><button type="submit" class="btn btn-primary" style="float:right;">登入</button></form></div></div></body> </html>效果如下：
- 大功告成！
调用Bootstrap开发管理员后台界面
- 同样是打开Admin.php文件
- 将下列代码覆盖进去
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>管理员后台</title><!--调用Bootstrap--><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><!--调用sweetAlert2--><script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script><!--局内css--><style>html,body{margin: 0;min-height: 100%;}</style></head><?phpif($_GET['login']=='false'){?><body style="background-color:grey"><div class="d-flex justify-content-center align-items-center" style="width:100%;height:100%;"><div style="width:50%;height:40%;background-color:#ffffff" class="d-flex justify-content-center align-items-center"><form style="width:90%;"><h3>管理员后台</h3><div class="form-group"><label for="account">管理员账号</label><input type="text" class="form-control" id="account" name="account" aria-describedby="Help"><small id="Help" class="form-text text-muted">请输入正确的登入信息</small></div><div class="form-group"><label for="password">管理员密码</label><input type="password" class="form-control" id="password" name="password"></div><button type="submit" class="btn btn-primary" style="float:right;">登入</button></form></div></div></body><?phpreturn;}?><body><div style="float:left;width:15%;height:100%;" class="d-flex align-items-center"><ul class="nav flex-column" style="width:100%;"><li class="nav-item"><h2 class="nav-link active">管理员后台</h2></li><li class="nav-item"><h5 class="nav-link active">当前管理员：<br><small>超级管理员</small></h5></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">商品管理</a><div class="dropdown-menu"><a class="dropdown-item" href="#">已上架商品</a><a class="dropdown-item" href="#">待审核商品</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">商品类型</a></div></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">用户管理</a><div class="dropdown-menu"><a class="dropdown-item" href="#">会员管理</a><a class="dropdown-item" href="#">供货商管理</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">供货商审核</a></div></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">资金管理</a><div class="dropdown-menu"><a class="dropdown-item" href="#">已支付订单</a><a class="dropdown-item" href="#">Bufpay后台</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">提现申请</a><a class="dropdown-item" href="#">已支付提现</a><a class="dropdown-item" href="#">已拒绝提现</a></div></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">系统功能</a><div class="dropdown-menu"><a class="dropdown-item" href="#">系统设置</a><a class="dropdown-item" href="#">系统日志</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">手动更新会员积分</a></div></li><li class="nav-item"><a class="nav-link active">项目由JN_X开发</a></li></ul></div><div style="width:85%;height:100%;float:right;"><iframe src="Admin.php?login=false" style="width:100%;height:100%;" frameborder=0 border=0></div></body> </html>结果如下：
- 大功告成！
下集预告：通过数据库查询实现登入功能，同时制作商品管理功能界面+系统
感谢各位的阅读，博主将稳定的更新该系列的博客，请各位先关注博主，博主每周会更新2到5篇系列博客哦！
完整项目可见：btb.summitx.com.cn
[小白的Web全栈之旅]独立开发电子商务网站--管理员后台开发（一、界面开发）相关推荐
- [小白的Web全栈之旅]独立开发电子商务网站--项目创建+数据库开发
哈喽大家好,今天博主要讲解的是独立开发电子商务网站的第五篇--项目创建+数据库开发,想要预览整个系列博客的参考目录请点击这里 在本博客,博主会讲解: 项目创建 PHP连接MySQL 创建数据表 数据的 ...
- [小白的Web全栈之旅]独立开发电子商务网站--项目介绍
Web开发,是一个看似简单,实际复杂的工程,需要包括但不限于设计师.前端开发.后端开发的程序员们来开发,而Web全栈开发,是一种carry全场,具备页面设计,前端开发,后端开发等多个技能于一身的大神程 ...
- [小白的Web全栈之旅]独立开发电子商务网站--所需框架及api
哈喽大家好,今天博主要讲解的是独立开发电子商务网站的第四篇--所需框架及api,想要预览整个系列博客的参考目录请点击这里 在本博客,博主会讲解: JQuery介绍 Bootstrap介绍 榛子云sms ...
- [小白的Web全栈之旅]独立开发电子商务网站--管理员后台开发（二、登入实现+管理商品【上】）
哈喽大家好,今天博主要讲解的是独立开发电子商务网站的第五篇--项目创建+数据库开发,想要预览整个系列博客的参考目录请点击这里 在本博客,博主会讲解: 通过查询MySQL实现管理员登入 查询已上架商品 ...
- 网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界
一.CSS初认识 1.趣调查 2."装修小能手" 前面我们研究了HTML,回顾下它是做什么的? 当我们用HTML搭建好网页的基本骨架,下面请出我们的"装修小能手" ...
- 开课吧WEB全栈架构师【6期，9-12期】
课程目标 帮助那些追求卓越的初级前端工程师(至少-年以上经验)系统提升研发实力,达到一线互联网企业中高级前端工程师的技能水平.( 技能水平对标:百度T6-T7 ) 适合人群 1-3三年经验前端开发工程 ...
- Web全栈开发基础（小白入门版本）
博客传送门 近几个月认真写了写Web全栈代码,有点小收获这里分享一下.我还做了个PPT,资源路径 欢迎拍砖指点! Web全栈开发是一个听起来很虎的名词.本文从技术层面解释全栈开发,能帮助没有全栈概念, ...
- 小白都能看懂的实战教程 手把手教你Python Web全栈开发(DAY 3)
小白都能看懂的实战教程 手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统 第三讲 这是小白都能看懂的实战教程 手把手教你Python Web全栈开发 的 ...
- 小白都能看懂的实战教程 手把手教你Python Web全栈开发(DAY 1)
小白都能看懂的实战教程 手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统 第一讲 博主博客文章内容导航(实时更新) 更多优质文章推荐: 收藏!最详细的P ...
最新文章
- 用于制图、写电子邮件、创建条形码控件Aspose.Total
- GIT在测试过程中的基本使用
- Android面试：Java相关
- tcga数据下载_好东西丨零基础入门TCGA
- 华为服务器u盘装linux_华为matebook14双系统（deepin15.11+win10）新体验！
- 翻译: Web 3.0是一种几乎无需信任的承诺的协议/架构
- 降维系列之 MDS多维缩放 与 ISOMAP 等度量映射
- linux 中文输入鼠标跳动,解决wps for linux 中文输入法光标不跟随的问题
- yafu 下载_YAFUD
- OpenCV入门教程
- 找Devcon.exe的同学看过来
- perl语言学习 教程
- 用python演绎神奇的生命游戏，在游戏中学习numpy和matplotlib动画
- Ubuntu录制gif动态图
- 低压差线性稳压电源（LDO）原理、参数及应用
- 闪客工具：好玩的GifCam录制gif软件
- 石川：出色不如走运 (III)？
- 新装Win10全方面调优【彻底禁用Win10更新/防火墙/Defender/通知,任务栏优化等】
- 吴恩达机器学习6：模型描述
- 控制工程实践（4）——线性控制系统的稳态误差（之一）