网上书城—登录、书籍管理
2024-05-10 07:44:53
前言：
登录模块涉及到的功能在jsp的时候其实就已经有写到过了，这边就不做过多的讲解代码意思了。
管理员模块，这边主要是书籍管理模块，涉及到了最基础增删改查。
目录
一、登录模块
1、主要功能：
2、实现对象：
3、界面展示
4、代码：
二、书籍管理模块
1、主要功能：
2、界面展示：
3、代码：
一、登录模块
1、主要功能：
①七天免登陆
②记住密码
2、实现对象：
Cookie，session
3、界面展示
4、代码：
UserDao.java
package com.dao;import com.entity.PO.UserPo;
import com.zking.util.BaseDao;/*** 类型：Dao层* 功能：实现登录验证(进入数据库对账号进行验证)* @author zjjt**/
public class UserDao extends BaseDao<UserPo>{/*** 登录* @param u 前端对应实体类* @return 查出后的对象* @throws Exception*/public UserPo Login(UserPo u) throws Exception {String sql="select * from t_easyui_user where name = '"+u.getName()+"' and pwd = '"+u.getPwd()+"'";return super.executeQuery(sql, UserPo.class, null).get(0);}}UserAction.java
package com.web;import java.lang.reflect.Field;
import java.net.URLEncoder;import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.dao.UserDao;
import com.entity.DO.UserDo;
import com.entity.PO.UserPo;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.Change;
import com.zking.util.ResponseUtil;/*** 类型：子控制器* 功能：处理用户登录请求* @author zjjt 隔壁程序员老张**/
public class UserAction extends ActionSupport implements ModelDriver<UserDo> {private UserDo userDo = new UserDo();private UserPo userPo = new UserPo();private UserDao ud = new UserDao();@Overridepublic UserDo getModel() {return userDo;}/*** 登录方法* 返回响应码。0登录失败，userType用户身份* @param req 浏览器请求对象* @param resp 响应对象*/public void login(HttpServletRequest req, HttpServletResponse resp) {try {Change u = new Change();/*** 需求：实体类UserPo属性和数据库一一对应，但是登录还需要用到两个属性(sevenLogin,rememberPwd)* 所以需要UserDo来满足该业务。大家可以去了解DTO概念* * 为什么这里需要使用到两个不同类型的User实体类？* 我们dao方法底层的BaseDao要的实体类属性必须和数据库一一对应，但是为了满足该业务，需要使用到Do。* * 实现：主要是将UserPo上的值填充到Do里面。这里使用了lambda表达式。* */userPo = (UserPo) u.change(userDo, x -> {UserPo po = null;try {po = UserPo.class.newInstance();Field[] fs = po.getClass().getDeclaredFields();for (Field f : fs) {f.setAccessible(true);Field ff = userDo.getClass().getDeclaredField(f.getName());ff.setAccessible(true);f.set(po, ff.get(userDo));}} catch (Exception e) {e.printStackTrace();}return po;});UserPo user = ud.Login(userPo);boolean bremember = "true".equals(userDo.getRememberPwd());boolean bseven = "true".equals(userDo.getSevenLogin());if(user != null) {//如果账号验证成功if(bremember || bseven) {Cookie name = new Cookie("name", URLEncoder.encode(userDo.getName(), "utf-8"));Cookie pwd = new Cookie("pwd", URLEncoder.encode(userDo.getPwd(), "utf-8"));name.setMaxAge(60 * 60 * 24 * 7);pwd.setMaxAge(60 * 60 * 24 * 7);resp.addCookie(name);resp.addCookie(pwd);System.out.println("cook1");}if(bseven) { //如果勾选了七天免登陆Cookie seven = new Cookie("seven", URLEncoder.encode("true", "utf-8"));seven.setMaxAge(60 * 60 * 24 * 7);resp.addCookie(seven);System.out.println("cook2");}if(bremember) { //如果勾选了记住密码Cookie remember = new Cookie("remember", URLEncoder.encode("true", "utf-8"));remember.setMaxAge(60 * 60 * 24 * 7);resp.addCookie(remember);System.out.println("cook3");}else {Cookie remember = new Cookie("remember", URLEncoder.encode("false", "utf-8"));remember.setMaxAge(0);resp.addCookie(remember);}req.getSession().setAttribute("user", userPo);}else {ResponseUtil.writeJson(resp, 0);}ResponseUtil.writeJson(resp, user.getType());} catch (Exception e) {e.printStackTrace();}}}Change.java
package com.zking.util;import java.util.function.Function;public class Change {/*** @param t the function argument* @param f 函数接口* @return the function result* @throws Exception*/public Object change(Object t,Function f) throws Exception {return f.apply(t);}}UserPo.java
package com.entity.PO;public class UserPo {private long id;private String name;private String pwd;private int type;public long getId() {return id;}public void setId(long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}public int getType() {return type;}public void setType(int type) {this.type = type;}public UserPo(long id, String name, String pwd, int type) {super();this.id = id;this.name = name;this.pwd = pwd;this.type = type;}public UserPo() {// TODO Auto-generated constructor stub}@Overridepublic String toString() {return "User [id=" + id + ", name=" + name + ", pwd=" + pwd + ", type=" + type + "]";}
}登录模块使用的是无刷新写法，前端接收响应码决定跳转的界面。
Login.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 charset="utf-8">
<title>登录界面</title>
<script src="${ pageContext.request.contextPath }/static/js/login.js"></script>
<link rel="stylesheet" href="${ pageContext.request.contextPath }/static/css/login.css">
</head>
<body><div id="Login"><form class="layui-form" method="post"><div class="layui-form-item" style="text-align: center;"><label style="width: 200px; font-size: 30px;">Welcome Login</label></div><div class="layui-form-item"><label class="layui-form-label">账号</label><div class="layui-input-block"><input value="${ name }" type="text" id="name" required lay-verify="required"placeholder="请输入账号" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-block"><input value="${ pwd }" type="password" id="pwd" required lay-verify="required"placeholder="请输入密码" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><input type="checkbox" id="sevenLogin" title="七天免登陆"> <input ${ remember == '1'? 'checked' : '' } type="checkbox" id="rememberPwd" title="记住密码"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" onclick="login()">登录</button><span style="margin-left: 100px;"> </span><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div><button onclick="login()">xxx</button>
</body>
</html>Login.js
/*** 无刷新登录js* @returns*/
function login(){$.ajax({url : "user.action?methodName=login",type : "post",dataType : "json",data: {name : $("#name").val(),pwd : $("#pwd").val(),sevenLogin : $("#sevenLogin")[0].checked,rememberPwd : $("#rememberPwd")[0].checked},success : function(msg) {if(msg == '0'){layer.msg('密码错误！请重试！')}else if(msg == '1'){//用户layer.msg('欢迎光临！')location.href='index.jsp';}else{//管理员layer.msg('欢迎光临！')location.href='admin.jsp';}}})}你们可能会发现一个问题，如果涉及到的角色多了，那么这里就会造成代码臃肿，写法是不太准确的！
这里我会设计一张表，专门存储不通过角色用户跳转的页面路径，在加载登录界面时就将该表的数据读取出来然后存储到js中定义的map集合之中，那么登录成功回调就根据响应码获取都对应路径。
二、书籍管理模块
1、主要功能：
①上架书籍
②下架书籍
③关键字搜索
④修改书籍
⑤新增书籍
2、界面展示：
修改
3、代码：
BookDao.java
package com.dao;import java.util.List;import com.entity.PO.Book;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;/*** 类型：Dao层(对书籍进行业务处理)* @author zjjt 隔壁程序员老张**/
public class BookDao extends BaseDao<Book>{/*** 新增书籍* @param b* @throws Exception*/public void add(Book b) throws Exception {String sql="insert into t_easyui_book(name,pinyin,cid,author,price,image,publishing,description,deployTime) values(?,?,?,?,?,?,?,?,?)";String[] attrs = new String[] {"name","pinyin","cid","author","price","image","publishing","description","deployTime"};super.executeUpdate(sql, b, attrs);}/*** 修改书籍* @param b* @throws Exception*/public void upd(Book b) throws Exception {String sql="update t_easyui_book set name=?,pinyin=?,cid=?,author=?,price=?,image=?,publishing=?,description=?,deployTime=? where id="+b.getId();String[] attrs = new String[] {"name","pinyin","cid","author","price","image","publishing","description","deployTime"};super.executeUpdate(sql, b, attrs);}}BookVoDao.java
package com.dao;import java.util.List;import com.entity.VO.BookVo;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;public class BookVoDao extends BaseDao<BookVo>{/*** 书籍管理模块数据表格* @param b 数据表格对应的VO实体类* @param p 分页对象* @return 符合条件的书籍集合* @throws Exception */public List<BookVo> list(BookVo b,PageBean p) throws Exception{String sql="select b.*,c.name cname from t_easyui_book b,t_easyui_category c where b.cid = c.id";if(StringUtils.isNotBlank(b.getName())) {System.out.println(b.getName());sql+=" and b.name like '%"+b.getName()+"%'";}if(b.getState() != 0) {sql+=" and b.state = "+b.getState();}return super.executeQuery(sql, BookVo.class, p);}/*** 上架、下架书籍* @param b* @throws Exception*/public void updState(BookVo b) throws Exception {String sql="update t_easyui_book set state="+b.getState()+" where id ="+b.getId();super.executeUpdate(sql, b, null);}}为什么查询是在BookVoDao中？
数据表格需要显示的数据不仅仅是一张表格需要展示的数据！这里需要用的连表查询。仅仅是实体类是不能满足数据表格显示需求，所以有一个BookVo实体类来满足前端显示。
admin.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>后台管理</title>
<script src="${ pageContext.request.contextPath }/static/js/admin.js"></script>
</head>
<body class="layui-layout-body" style="height: 600px;"><div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">书城后台管理</div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用户</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;"> <imgsrc="#" class="layui-nav-img"> 贤心</a><dl class="layui-nav-child"><dd><a href="">基本资料</a></dd><dd><a href="">安全设置</a></dd></dl></li><li class="layui-nav-item"><a href="">退了</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll" ><!-- <ul class="layui-nav layui-nav-tree" lay-filter="test" id="aa"></ul> --><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul id="bookMenu"></ul> </div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px; height: 90%"><!-- <button onclick="tree()">查询data</button> --><div class="layui-tab" lay-allowClose="true" lay-filter="tabs"style="height: 100%"><ul class="layui-tab-title"></ul><div class="layui-tab-content" style="height: 100%; width: 100%;"></div></div></div></div><div class="layui-footer"><!-- 底部固定区域 -->© layui.com - 底部固定区域</div></div><input hidden id="ctx" value="${ pageContext.request.contextPath }" />
</body>
</html>admin.js
var html = '';$(function() {layui.use([ 'tree', 'element', 'jquery' ],function() {var tree = layui.tree;var element = layui.element;var $ = layui.jquery;var url = $('#ctx').val();$.ajax({type : 'post',url : url + '/menu.action?methodName=tree',dataType : 'json',async : true,success : function(data) {/*console.log(data)Buildtree(data);alert(html)$('#aa').append(html)*/tree.render({elem : '#bookMenu',data : data,click : function(node) {var exist = $("li[lay-id='"+ node.data.id +"']").length;if (exist > 0) {element.tabChange('tabs',node.data.id);// 切换到已有的选项卡} else if (node.data.menuURL != null && node.data.menuURL != "") {element.tabAdd('tabs',{title : node.data.title,content : '<iframe scrolling="yes" frameborder="0" src=" '+ url+node.data.menuURL+ ' " width="100%" height="600px" style="border:1px solid #ddd"></iframe>',// 支持传入htmlid : node.data.id});element.tabChange('tabs',node.data.id);}}})}});})
})/*** 侧边导航栏动态加载* * @param obj* @param id* @returns*/
function Buildtree(obj) {var a = 1;$.each(obj, function(i, n) {var url = n.menuURLif (n.hasParent == false) {html += '<li class="layui-nav-item">';}if (n.children.length > 0) {html += '<a href="javascript:;">' + n.title + '</a>';html += '<dl class="layui-nav-child"><dd>';Buildtree(n.children);html += '</dl>';} else {if (a > 0) {html += '<a href="' + url + '" >' + n.title + '</a></dd>';a = a - 1;console.log(a)} else {html += '<dd><a href="' + url + '" >' + n.title + '</a></dd>';}}if (n.hasParent == false) {html += '</li>';}});
}右侧数点击会打开一个内嵌页面，对应js代码如下
listBook1.js
/*** 项目路径*/
var URL = $('#ctx').val();
/*** 弹出框所有index*/
var OpenId;
/*** layui模块加载对象*/
var table;
var $;
var form;
/*** 书籍类别id* 说明：通过下拉框改变事件进行赋值* 修改回显需要进行赋值！！*/
var bookTypeVal;
/*** 模块加载* @returns*/
layui.use([ 'table', 'jquery', 'form' ], function() {table = layui.table;$ = layui.jquery;form = layui.form;/*** 加载事件*/$(function() {/*** listBook1表格渲染*/table.render({elem : '#listBook1',height : 315,tool : 'true',url : URL + '/bookvo.action?methodName=list&state=1' // 数据接口,page : true // 开启分页,cols : [ [ // 表头{checkbox : 'true'}, {field : 'id',title : 'ID',width : 100,sort : true,}, {field : 'name',title : '书籍名',width : 100}, {field : 'pinyin',title : '拼音',width : 100,sort : true}, {field : 'cname',title : '书籍类别',width : 100}, {field : 'author',title : '作者',width : 100}, {field : 'price',title : '价格',width : 100,sort : true}, {field : 'image',title : '图片路径',width : 120,sort : true}, {field : 'publishing',title : '出版社',width : 120}, {field : 'sales',title : '销量',width : 100,sort : true}, {title : '操作',align : 'center',toolbar : '#barDemo',fixed : 'right'} ] ]});/*** 下拉框回显* 说明：该处采用了弹出框作为修改/增加界面。该节目来自DOM元素，随界面加载而加载回显，仅一次* 注意：需要注意同步异步问题，可能导致下拉款渲染失败*/var html = '';$.ajax({url : URL + '/category.action?methodName=list',type : 'post',dataType : 'json',async:false,success : function(msg) {$.each(msg, function(i, n) {html += '<option value="'+n.id+'">'+n.name+'</option>';});}})$('#type').append(html);form.render();form.render('select'); })/*** 行级工具条监听时间* 上架/修改*/table.on('tool(listBook1)', function(obj) {var book = obj.data; // 获得当前行数据var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）if (layEvent === 'sj') {$.ajax({type : 'post',dataType : 'json',url : URL + '/bookvo.action?methodName=updState&state=2&id='+ book.id,success : function(msg) {if (msg == '1') {layer.msg('上架成功')table.reload('listBook1');}}})}else if(layEvent == 'upd'){$('#kind').val('upd')var ts = $('#type option')console.log(ts)$.each(ts, function(i, n) {if(n.text == book.cname){n.selected = true; bookTypeVal = n.value;}});$('#bookId').val(book.id)$('#name').val(book.name)$('#description').val(book.description)$('#publishing').val(book.publishing)$('#price').val(book.price)$('#type').val(book.cname)$('#author').val(book.author)openx('');}});/*** 下拉框监听事件*/form.on('select(bookType)', function(data) {bookTypeVal = data.value});/*** 表单提交监听事件*/form.on('submit(form1)', function(data) {var k = $('#kind').val()var url;if (k == 'add') {url = URL + '/book.action?methodName=add&description='+$('#description').val()+'&publishing='+$('#publishing').val()+'&price='+$('#price').val()+'&cid='+bookTypeVal+'&name='+$('#name').val()+'&author='+$('#author').val();} else {url = URL + '/book.action?methodName=upd&id='+$('#bookId').val()+'&description='+$('#description').val()+'&publishing='+$('#publishing').val()+'&price='+$('#price').val()+'&cid='+bookTypeVal+'&name='+$('#name').val()+'&author='+$('#author').val();}$.ajax({type : 'post',url : url,dataType : 'json',success : function(msg) {if (msg == '1') {if(k == 'add'){layer.msg('增加成功')}else{layer.msg('修改成功')}clear();layer.close(OpenId);table.reload('listBook1');}}})return false;});
})/*** 根据书籍名称查询* * @returns*/
function seachByName() {table.reload('listBook1', {url : URL + '/bookvo.action?methodName=list&state=1',where : {name : $('#bookName').val()}});
}/*** 打开弹出框（增加/修改界面）* @param id* @returns*/
function openx(id) {if(id == '1'){$('#kind').val('add')console.log(1)}layer.open({type : 1,content : $('#caozuo'),success : function(layero, index) {OpenId = index;},cancel : function(index, layero) {if (confirm('确定要关闭么')) { // 只有当点击confirm框的确定时，该层才会关闭layer.close(index);clear();}return false;}});
}/*** 清空添加/修改书籍表单数据* * @returns*/
function clear() {$("#f input,textarea").val('')
}网上书城—登录、书籍管理相关推荐
- 网上书城的登录注册及书籍管理功能
登录注册及书籍管理功能 登录注册 实体类 dao包 web包 书籍管理 实体类 dao包 web包 mvc.xml的配置 界面代码及效果 界面代码 样式 界面效果 登录注册 登录注册所需要用的的实体类 ...
- 网上书城（登录、注册、权限管理）
网上书城(登录.注册.权限管理) 前言 登录 注册 权限管理 前言 网上书城包括前台.后台 网上书城前台内容: 1 .首页 2. 用户注册/登陆 3. 书籍查询 4 .购物车 5. 订单管理 5.1. ...
- SSM项目图书馆管理系统，适合新人练手和毕设参考，功能首页展示 系统注册登录登出 用户管理 权限控制管理 书籍管理 图书借阅管理 个人借阅记录管理 书籍详细信息展示等
图书馆管理系统,系统采用B/S架构 系统采用框架:java+maven+stringboot+mybatis+mysql-plus+boostart(前端界面) 首页展示 内容后台管理 菜单权限管理 ...
- 网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能（项目进度四）
网上书城项目的书籍分类列表展示及新书上架和热销书籍效果展示功能(项目进度四) 前言 需实现的目标(效果图) 书籍分类展示 新书上架展示 热销书籍展示 1.书籍分类展示(实现动态加载数据) 1.1 加载 ...
- 网上书城项目之后台实现书籍分类、新书上架、热销图书
网上书城项目 前言 书籍分类 效果演示 新书上架 效果演示 热销图书 效果演示 注意要点 总结 前言 嘿,今天为大家分享的知识点呢,是后台编码实现前端页面上的书籍分类.新书上架.热销图书这三个主要功能 ...
- 网上书城之门户首页及新书上架，热销书籍
网上书城之门户首页及新书上架,热销书籍 目录 网上书城之门户首页及新书上架,热销书籍 实现功能 门户首页功能 新书上架,热销书籍 总结 实现功能 继上几篇博客的代码 我打算把各种功能的代码一一清楚的写 ...
- java计算机毕业设计Vue.js网上书城管理系统设计与实现服务端MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计Vue.js网上书城管理系统设计与实现服务端MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计Vue.js网上书城管理系统设计与实现服务端MyBatis+系统 ...
- 网上书城首页之书籍分类列表
网上书城首页之书籍分类列表 本章目标.实现首页书籍分类列表 一.开始编写代码 1.主界面index.jsp 2.单独写一个事件,和后台事件分开 index.js代码 3.然后在界面后面引用js 现在的 ...
- 计算机毕业设计JavaVue.js网上书城管理系统设计与实现服务端(源码+系统+mysql数据库+lw文档）
计算机毕业设计JavaVue.js网上书城管理系统设计与实现服务端(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js网上书城管理系统设计与实现服务端(源码+系统+mysql ...
最新文章
- 【c语言】蓝桥杯算法训练 完数
- module 'paddle.fluid' has no attribute 'data'
- ux的重要性_UX中清晰的重要性
- 原动力CMS PHP域名授权系统V3.0
- python xmlns 解析_使用python读取标记中包含xmlns的XML文件
- php连贯操作,Thinkphp 3.2.3 sql的一些连贯操作方法
- 关于在linux系统下卸载软件的问题
- 服务器端提交form
- 计划任务,机器码与注册码,Web服务
- Engineer05
- C语言winform中
- WPS简历模板的图标怎么修改_指导|让疫情之下的应届生，求职简历脱颖而出
- wav转mp3的最简单方法
- java设置铃声_我的Android进阶之旅------gt;Android系统设置默认来电铃声、闹钟铃声、通知铃声...
- 使用List进行分组操作
- Nagios的警报信息CHECK_NRPE: Socket timeout after 10 seconds.
- SQL server 2008R2 入门
- plotnine数据可视化手册
- 微信开发者工具（一）
- 3D塔防游戏实现 5.2 3D怪物死亡（Feekood语言）