超级简单的原生php+Mysql+jquery教程，适用人群（新手，大学生做毕设）---第3篇（主页前端篇）
主页的前端代码
主页的css代码
<style>
* {
margin: 0;
padding: 0;
}
.nav-ul{
display: flex;
background-color: #2ecc71;
position: relative;
}
.nav-ul li{
list-style-type: none;
margin: 20px 0 30px 100px;
}
.banner-hcj img{
padding-top: 50px;
width: 900px;
height: 500px;
position: absolute;
left: 0;
right: 0;
margin: auto;
display: none;
}
/*设置轮播图显示的图片*/
.banner-hcj img:nth-of-type(1) {
display: block;
}
/* 小圆点 */
.btn {
width: 150px;
display: flex;
justify-content: space-around;
position: absolute;
left: 200px;
padding-top: 60px;
top: 600px;
margin-left: 32%;
bottom: 10px;
z-index: 100
}
/*小圆点的样式*/
.btn span {
display: block;
width: 15px;
height: 15px;
border: 3px solid black;
border-radius: 50%;
}
/*给校园点添加的样式*/
.active {
background-color: #c14ccc;
}
/*距离顶部的边距*/
.bodyer{
margin-top: 700px;
padding-left: 10%;
}
/*热门商品图标下的div的图片*/
.bodyer-img{
width: 200px;
height: 200px;
}
.bodyer-ul{
margin-top: 30px;
display: flex;
}
.bodyer-ul li{
list-style-type: none;
padding-left: 50px;
}
/* ---手风琴*/
.sfq-ul{
width: 900px;
height: 300px;
margin: 100px 20%;
border: 5px solid skyblue;
display: flex;
}
.sfq-li{
width: 225px;
overflow: hidden;
}
.sfq-img{
height: 300px;
width: 700px;
}
/* -----------*/
.foot {
width: 100%;
min-height: 230px;
color: #666;
background: #222
}
.payment + .foot {
border-top: 90px solid #f9f9f9
}
.foot .foot-box {
width: 1200px;
margin: auto;
display: flex;
padding: 40px 0 30px;
background: #222
}
.foot .foot-box .company-msg {
padding: 0 60px;
border-right: 1px solid #333
}
.foot .foot-box .company-msg .img {
display: block;
margin: auto;
width: 100px;
height: 100px
}
.foot .foot-box .company-msg .name {
color: #00a0e9;
font-size: 14px;
margin: 5px 0 10px;
text-align: center
}
.foot .foot-box .company-msg .web {
line-height: 20px
}
.foot .foot-box .right {
display: flex;
margin-left: 60px;
padding-top: 5px
}
.foot .foot-box .right .item {
width: 100px;
margin-right: 80px
}
.foot .foot-box .right .item:last-child {
margin-right: 0
}
.foot .foot-box .right .item.service .tit {
font-size: 14px;
margin-top: 3px
}
.foot .foot-box .right .item.service .con {
margin-top: 10px;
line-height: 30px
}
.foot .copyright {
width: 100%;
background: #1b1b1b;
padding: 10px 0;
text-align: center
}
</style>主页的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>农产品+果鲜---首页</title>
</head>
<body>
<div>
<header>
<!-- 这里可以放一个商标什么的-->
<div class="nav">
<ul class="nav-ul">
<li><a href="" style="text-decoration:none;color: #0d0d0d">首页</a></li>
<li><a href="" style="text-decoration:none;color: #0d0d0d">关于我们</a></li>
<li><a href="My.html" style="text-decoration:none;color: #0d0d0d">个人中心</a></li>
<li style="position: absolute; left: 80%;">
<a style="margin-left: 20px " onclick="exit()">退出登录</a>
</li>
</ul>
<div class="banner-hcj">
<img src="images/OIP-C.jpg" alt="蔬菜">
<img src="images/OIP-C%20(1).jpg" alt="蔬菜">
<img src="images/R-C.jpg" alt="蔬菜">
</div>
<div class="btn">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
</header>
<div class="bodyer">
<div>
<h2 style="text-align: center">热门蔬菜</h2>
<hr>
<ul class="bodyer-ul" id="goods1">
<!-- 插入想要的数据-->
</ul>
</div>
<div>
<h2 style="text-align: center">猜你喜欢</h2>
<hr>
<ul class="bodyer-ul" id="goods2">
<!-- 插入想要的数据-->
</ul>
</div>
<div>
<h2 style="text-align: center">强烈推荐</h2>
<hr>
<ul class="bodyer-ul" id="goods3">
<!-- 插入想要的数据-->
</ul>
</div>
</div>
<!-- 手风琴-->
<div>
<ul class="sfq-ul">
<li class="sfq-li">
<img src="images/3.webp" class="sfq-img">
</li>
<li class="sfq-li">
<img src="images/4.webp" class="sfq-img">
</li>
<li class="sfq-li">
<img src="images/5.webp" class="sfq-img">
</li>
<li class="sfq-li">
<img src="images/6.webp" class="sfq-img">
</li>
</ul>
</div>
<footer>
<div class="foot">
<div class="foot-box">
<div class="company-msg">
<img class="img" src="images/logo.jpg" alt="logo"/>
<div class="name">农产品+果鲜</div>
</div>
<div class="right">
<div class="item service">
<div class="tit">服务保障</div>
<div class="con">
<div class="text">正品保证</div>
<div class="text">7天无理由退</div>
<div class="text">24小时服务</div>
</div>
</div>
<div class="item service">
<div class="tit">支付方式</div>
<div class="con">
<div class="text">线上支付</div>
<div class="text">货到付款</div>
<div class="text">线下付款</div>
</div>
</div>
<div class="item service">
<div class="tit">会员服务</div>
<div class="con">
<div class="text">免费注册</div>
<div class="text">找回密码</div>
<div class="text">个人中心</div>
</div>
</div>
<div class="item service">
<div class="tit">物流服务</div>
<div class="con">
<div class="text">商品免邮</div>
<div class="text">快递配送</div>
<div class="text">EMS</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>js的代码
注意：这里的js需要在对应的路径有对应的jq包
<script src="js/jquery-3.6.1.min.js"></script>
<script>
//浏览器加载自动执行
$.post(
'getUsers.php',{number:0},
function(res){
console.log(res)
var obj = $.parseJSON(res);
//
var html1 = '';
var html2 = '';
var html3 = '';
$.each(obj, function(index, value){
if (Math.floor(index/5)===0){
html1 +=
`<a href="detail.html?id=${value.id}" style="text-decoration:none;color: #0d0d0d">
<li>
<img src="${value.img}" alt="" class="bodyer-img">
<div style="font-size: 20px">${value.title}</div>
<div style="color: red; font-size: 20px">${value.price}</div>
<div style="font-size: 10px; width: 200px">${value.detail}</div>
</li>
</a>`
}else if (Math.floor(index/5)===1){
html2 +=
`<a href="detail.html?id=${value.id}" style="text-decoration:none;color: #0d0d0d">
<li>
<img src="${value.img}" alt="" class="bodyer-img">
<div style="font-size: 20px">${value.title}</div>
<div style="color: red; font-size: 20px">${value.price}</div>
<div style="font-size: 10px; width: 200px">${value.detail}</div>
</li>
</a>`
}else if (Math.floor(index/5)===2){
html3 +=
`<a href="detail.html?id=${value.id}" style="text-decoration:none;color: #0d0d0d">
<li>
<img src="${value.img}" alt="" class="bodyer-img">
<div style="font-size: 20px">${value.title}</div>
<div style="color: red; font-size: 20px">${value.price}</div>
<div style="font-size: 10px; width: 200px">${value.detail}</div>
</li>
</a>`
}
});
$('#goods1').html(html1);
$('#goods2').html(html2);
$('#goods3').html(html3);
}
);
var index=0;
// 控制图片显示隐藏,小圆点背景色
$(".btn span").on("click", function() {
// 点击时给自己添加样式，删除其他兄弟节点的样式
$(this).addClass("active").siblings().removeClass("active");
index = $(".btn span").index(this); // 更新index值
clearInterval(start); // 清除定时器
showimg(); // 显示当前图片
showRadius(); // 显示当前小圆点背景色
start = setInterval(function() {
index = (index + 1) % $(".btn span").length; // 更新index值
showimg(); // 显示下一张图片
showRadius(); // 显示下一个小圆点背景色
}, 2000);
});
// 创建定时器轮播图为俩秒
let start = setInterval(function() {
index = (index + 1) % $(".btn span").length; // 更新index值
showimg(); // 显示下一张图片
showRadius(); // 显示下一个小圆点背景色
}, 2000);
// 定时器调用的方法
// 1.判断是哪一个图片
function showimg() {
$(".banner-hcj img").eq(index).css("display", "block").siblings().css("display", "none");
}
// 2.判断是哪一个圆点
function showRadius() {
$(".btn span").eq(index).addClass("active").siblings().removeClass("active");
}
// 手风琴
$(".sfq-ul li").mouseover(function () {
$(this).stop().animate({
width:700
}).siblings().stop().animate({
width:70
})
})
$(".sfq-ul").mouseleave(function () {
$(".sfq-ul li").stop().animate({
width:225
})
return false
})
// 退出登录
function exit() {
//退出时删除本地存储的id，并且条状
// delete localStorage["user_id"]
localStorage.setItem("user_id","")
location.href="login.html"
}
</script>
访问的后端
getUsers（获取全部的goods数据）
<?php
// 允许所有来源进行跨域请求
header('Access-Control-Allow-Origin: *');
// 允许的HTTP方法
header('Access-Control-Allow-Methods: GET, POST, PUT');
// 允许的头信息
header('Access-Control-Allow-Headers: X-Requested-With, Content-Type');
//1 连接数据库应用系统，并选择数据库
$conn = mysqli_connect("localhost", "root", "root", "shop");
// 获取从第几条开始的数据
$nuber=$_POST["number"];
///
//分页查询，每条数据拿5条
$sql = "select * from shop_detail;";
///
//3 执行sql，并将结果保存
$rs = mysqli_query($conn, $sql);
//
//4 将数据库返回的结果集转换为PHP能处理的二维关联数组
$data = mysqli_fetch_all($rs, MYSQLI_ASSOC);
echo json_encode($data);
?>总结：
主页写到这里就已经结束了，那么我们是怎么解决数据库本地存储的呢，这里主要是通过localStorage.get()
来实现本地存储的，正常情况下需要用到前端或者后端来存储。这里为了快捷，就把id放到这里面存储
jquery怎么便利数据的也可详细看看
上一篇： 前端编程语言的应用-
下一篇： 基于PHP游戏论坛网