前言:笔者曾经有18年的硬件研发经验,从(1)51单片机到(2)FPGA到(3)嵌入式ARM(ARM9到CORTEX A9)全都研发设计过,产品从(1)B超的整机研发到(2)智能家居系统到(3)无线电监测机到(4)平板电脑研发到(5)路灯智能控制到(5)工业电脑均有涉及,从(1)普通的电子技术工程师到(2)副总工程师到(3)副总经理到(4)事业部总经理。。。从2017年开始转到系统软件框架,而且偏向于物联网方面的系统,组建了自己的物联网项目研发团队,我们从0开始搭建一个中型物联项目平台,从底层硬件到物联后台到移动端到物联项目的盈利模式。。。。我们一直的路上,努力在三年内打造国内较好的物联网整体解决方案,如有需要合作的大型传统企业转型到物联网+可以直接和我联系!QQ:876477059。好了,开始教你学习用spring boot搭建一个我们落地的完整项目模块--客户管理部分。
今天是:2018年6月22日 研究主题:客户管理模块从前端到后台之客户管理登录逻辑相关部分分析
一、登录部分:login.js
1、必须以“$(function(){”开头才能知道是jQuery语句
$(function () {
2、有“enter”回车按键按下的检测,注意:此处回车按键的值键盘默认是:13
$(this).keydown(function (e){ if(e.keyCode == 13){
或者是点击“login”登录按键后
$("#loginBtn").click(function () {
3、把在“login.html”中获取的表单值用POST的方法带上后台路径“/loginPost”传到后台controller,具体流程如下:
(1)、获取“login.html”中的用户名及密码
<form id="LoginForm"> <input type="text" placeholder="用户名" name="username"/> <input type="password" placeholder="密码" name="password"/> <input type="button" id="loginBtn" value="登录"/> </form>
(2)、通过“login.js”的AJAX向后台传数据同时进行数据库验证,两种方式:一种是通过回车键,传递“username”和“password”的值到后台,同时进行数据验证
$(this).keydown(function (e){ if(e.keyCode == 13){ $.post("/loginYZ", $("#LoginForm").serialize(), function (result) { if (result.code == '200') { sessionStorage.setItem('key', result.data); // $.cookie('JSESSIONID',result.data); setTimeout(function () { window.location.href = "/admin"; }, 200); } else { alert(result.msg) ; } }); } });
另一种方式通过鼠标点击“登录”按键向后台传递username”和“password”的值,同时也进行验证
$("#loginBtn").click(function () { $.post("/loginYZ", $("#LoginForm").serialize(), function (result) { if (result.code == '200') { sessionStorage.setItem('key', result.data); // $.cookie('JSESSIONID',result.data); setTimeout(function () { window.location.href = "/admin"; }, 200); } else { alert(result.msg) ; } }); })
(3)、用POST的方式,其路径映射“/loginYZ”与controller下面的路径映射必须一致,controller下面的“/loginYX”,其后台返回“500”表示不成功,如果返回“200”表示返回成功,即“登录验证成功”
@RequestMapping("/loginYZ") public ResultData manageryz(ManagerEntity entity) throws Exception{ String result = managerService.manageryz(entity); if("用户名不存在".equals(result)){ return returnFailed("500","用户名不存在"); }else if("密码输入不正确".equals(result)){ return returnFailed("500","密码输入错误"); }else if("密码输入为空".equals(result)) { return returnFailed("500", "密码输入为空"); }else if("用户名不能为空".equals(result)){ return returnFailed("500", "用户名不能为空"); }else{ return returnSuccess("200","登录验证成功",result); } }
(4)、如何与后台数据库进行交互,就必须将值传到“service”层,在该层我们进行了接口的自定义及“managerServiceImp”,当然它肯定要继承“managerService”
@Service(value = "managerService") public class ManagerServiceImp implements ManagerService { @Resource private ManagerDao managerDao; @Override @Transactional public String manageryz(ManagerEntity entity) throws Exception { ManagerEntity manager = managerDao.findManagerEntityByUsername(entity.getUsername()); if ("".equals(entity.getUsername()) ){ return "用户名不能为空"; }else if(!"".equals(entity.getUsername()) && "".equals(entity.getPassword())){ return "密码输入为空"; }else if(manager == null){ return "用户名不存在"; }else if(!"".equals(manager.getPassword())&!manager.getPassword().equals(entity.getPassword())){ return "密码输入不正确"; } return manager.getId()+"/"+manager.getName()+"/"+manager.getHeadImg()+"/"+manager.getUsername(); // return loginname.toString(); }
(5)、接下来就需要在DAO层即与数据库数据交互层进行数据的“增”、“删”、“改”、“查”等的操作,在该层建立一个“ManagerDao”的接口,通过JPA的方式进行后台数据库的查询
@Repository public interface ManagerDao extends JpaRepository<ManagerEntity,Integer> { @Query("select t from ManagerEntity t where t.username=:username") public ManagerEntity findManagerEntityByUsername(@Param("username") String username); @Query("select t from ManagerEntity t where t.username=?1 and t.password = ?2") public ManagerEntity ybp(String username, String password); }
(6)、当然最后我们会在“entity”实体映射里面建立一个“ManagerEntity”文件,创建数据库的关键字
@Entity @Table(name = "t_manager") public class ManagerEntity { @Id @GeneratedValue private int id; private String name; private String headImg; private String username; private String password; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getHeadImg() { return headImg; } public void setHeadImg(String headImg) { this.headImg = headImg; } }
(7)、我们通过“Navicat Premium”数据库编辑软件连接数据库并建立一张名为“t_manager”的表
OK,以上从WEB前端到后台及数据的各层用一个登录的实例来进行详细分析,我觉得应该具有代表性,由于牵涉项目保密性,更多细节不便于列出,请谅解!