网上书城前端主页

最新推荐文章于 2023-12-10 23:20:34 发布

小张同学_java

最新推荐文章于 2023-12-10 23:20:34 发布

阅读量1.5k

点赞数 2

文章标签： html5 vue.js html

本文链接：https://blog.csdn.net/weixin_49789131/article/details/120691572

版权

一、功能点

1、书籍展示

2、分类展示

3、关键字搜索书籍（这个和管理员界面的数据表格的搜索功能一样，不做介绍）

二、页面展示

后半部分

热销书籍和最新上线的书籍下面对应的分页条是独立的，并且每次进行分页请求都不会进行页面跳转，只会改变相对应的部分。大家肯定都猜到了用无刷新实现。这个网上书城项目所有前端对应的功能都是使用无刷新来写的，这就有点像前后端分离了，后台只负责提供数据接口。js负责实现网页数据展示，如果在分一个前端服务器那就是前后端分离了。

页面前端代码 index.jsp ：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="${ pageContext.request.contextPath }/static/js/index.js"></script>
<style>
body, html {
	margin: 0px;
	padding: 0px;
}
</style>
</head>
<body class="layui-layout-body" style="height: 600px;">
	<input hidden value="${ pageContext.request.contextPath }" type="text"
		id="ctx" />
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav" lay-filter="" style="background-color: #EB7350">
				<li class="layui-nav-item"><label> <i
						class="layui-icon layui-icon-template-1"></i>网上书城
				</label></li>
				<li class="layui-nav-item" style="margin-left: 1200px;"></li>
				<li class="layui-nav-item" class="anim"><a href="ShopCar.jsp" title="购物车"
					onmouseover="add(i1)" onmouseout="remove(i1)"><i
						class="layui-icon layui-icon-cart" id="i1"></i></a></li>
				<li class="layui-nav-item" class="anim"><a href="" title="联系我们"
					onmouseover="add(i2)" onmouseout="remove(i2)"><i
						class="layui-icon layui-icon-service" id="i2"></i></a></li>
				<li class="layui-nav-item" class="anim"><a href="" title="退出"
					onmouseover="add(i3)" onmouseout="remove(i3)"><i
						class="layui-icon layui-icon-logout" id="i3"></i></a></li>
				<li class="layui-nav-item" class="anim"><a href="index.jsp"
					title="返回首页" onmouseover="add(i1)" onmouseout="remove(i1)"><i
						class="layui-icon">&#xe68e;</i></a></li>
			</ul>
		</div

最低0.47元/天解锁文章

小张同学_java

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
网上书城前端主页

一、功能点1、书籍展示2、分类展示3、关键字搜索书籍（这个和管理员界面的数据表格的搜索功能一样，不做介绍）二、页面展示后半部分热销书籍和最新上线的书籍下面对应的分页条是独立的，并且每次进行分页请求都不会进行页面跳转，只会改变相对应的部分。大家肯定都猜到了用无刷新实现。这个网上书城项目所有前端对应的功能都是使用无刷新来写的，这就有点像前后端分离了，后台只负责提供数据接口。js负责实现网页数据展示，如果在分一个前端服务器那就是前后端分离了。页面前端代码 inde.
复制链接

扫一扫