不惑之年的硬件牛人一步一步教你学spring boot完整项目---客户管理模块从前端到后台之客户管理登录逻辑相关部分分析（八）

前言：笔者曾经有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前端到后台及数据的各层用一个登录的实例来进行详细分析，我觉得应该具有代表性，由于牵涉项目保密性，更多细节不便于列出，请谅解！

不惑之年的硬件牛人一步一步教你学spring boot完整项目---客户管理模块从前端到后台之客户管理登录逻辑相关部分分析（八）

猜你喜欢