不惑之年的硬件牛人一步一步教你学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月27日 研究主题：客户管理模块从前端到后台之客户管理相关部分分析
一、我的客户管理实现的整体规划如下：
OK，整体内容框架有了，下面就教你一步一步来实现以上内容
二、首先创建一个叫“addusr.html”的文件，用于“新建客户”模块的WEB前端显示
1、先编写左边导航菜单
代码如下：
<div class="body-left"> <div class="nav"> <ul> <li class="navList active"><a href="/useradmin"><i class="iconfont"></i><span>用户管理</span></a> </li> <li class="navList"><a href="/device"> <i class="iconfont"></i><span>设备管理</span></a></li> </ul> </div> </div>
2、其次引入顶部的蓝色图标为了整体布局好看
代码如下：
<div class="body-top"> <div class="personBox"> <div id="person"> <div class="headimg"> <img/> </div> <div class="person"> <span></span> </div> </div> </div> </div>
3、添加客户信息内容，按照以上实现功能编写，具体代码如下：
<div class="body"> <div class="tag1"> <span>客户管理 > 添加客户</span> </div> <div class="tag3"> <div class="addDiv"> <form action="" id="addForm"> <ul class="addDivul1"> <li><label>姓名：</label><input name="name" type="text"><span class="error"></span></li> <li><label>账号：</label><input name="username" type="text"><span class="error"></span></li> <li><label>密码：</label><input name="password" type="text"><span class="error"></span></li> <li><label>联系电话：</label><input name="tel" type="text" maxlength="11"><span class="error"></span></li> <li><label>用户类型：</label><select name="userType"><option value="客户">客户</option><option value="销售人员">销售人员</option></select></li> <li class="t1"><label>会员权限：</label><select name="level"><option value="0">免费</option><option value="1">VIP</option></select> </li> <li class="t1"><label>所属区域：</label><select name="area"><option value="西南区">西南区</option><option value="西北区">西北区</option><option value="华东区">华东区</option><option value="华南区">华南区</option></select></li> <li class="t1"><label>地址：</label><div id="distpicker5"> <select class="form-control" id="province10"></select> <select class="form-control" id="city10"></select> <select class="form-control" id="district10"></select> </div> <div class="ssq" hidden="hidden"> <input type="text" name="address" /> </div><span class="error"></span> </li> <li class="t1"><label>详细地址：</label><input name="addressDetail" type="text"></li> </ul> <ul class="addDivul2"> <li><button type="button" class="Btn">确定</button></li> </ul> </form> </div> </div> </div>
显示界面如下：
4、最终显示效果如下：
三、省略“adduser.css”的样式代码，里面大部分由UI设计师提供具体样式参数，在此忽略
四、新建“adduser.js”的jQuery代码，由于前端与后台的AJAX的交互,我们来详细分析一下：
1、获取暂存到网页中的username、password及头像信息，注意头像是URL的方式存到OSS里面的图片，在此处是URL连接
var key = sessionStorage.getItem('key'); getStr(key,'/');
function getStr(string,str){ var key = sessionStorage.getItem('key'); if(!key||key==null){ window.location.href="/login"; }else{ var str_before = string.split(str)[0]; var str_after = string.split(str)[1]; var headImg1 = string.split(str)[2]; var headImg2 = string.split(str)[4]; var headImg3 = string.split(str)[5]; var headImg4 = string.split(str)[6]; var headImg5 = string.split(str)[7]; $(".person span").text(str_after); $(".headimg img").attr("src",headImg1+"//"+headImg2+"/"+headImg3+"/"+headImg4+"/"+headImg5); }
2、获取输入的：tel、name、username及pasword的值
var telField = $("input[name='tel']"), nameField = $("input[name='name']"), usernameField = $("input[name='username']"), passwordField = $("input[name='password']"),
3、对name的输入合法性进行判断，下面的"taget.siblings(".error").text("")”表示错误提示不能为空，点击name输入框，错误提示会消失，如果不点击，则会出现“请输入用户名”的提示
nameField.focus(function (evt) { var target = $(evt.target); target.siblings(".error").text(""); }).blur(function (evt) { var target = $(evt.target); if(!target.val()) { target.siblings(".error").text("请输入用户名"); nameError = true; }else{ nameError = false; } });
4、对收入的tel电话号码的合法性进行判断，如果为空则提示“请输入电话”，如果不为空，则判断合法性，里面的“
!target.val().match(/^[1][3,4,5,7,8][0-9]{9}$/)”是什么意思呢？“^”表示开始；【1】表示第一位必须是数字1；【3，4，5，7，8】表示第二位必须是3，4，5，7，8这里面的数字；【0-9】{9}表示剩下9为必须为【0-9】里面的数字，好了，这个分析再详细不过了。
telField.focus(function (evt) { var target = $(evt.target); target.siblings(".error").text(""); }).blur(function (evt) { var target = $(evt.target); if(!target.val()) { target.siblings(".error").text("请输入电话"); telError = true; }else if(!target.val().match(/^[1][3,4,5,7,8][0-9]{9}$/)){ target.siblings(".error").text("电话不符合规范"); telError = true; }else{ telError = false; } });
5、对password密码合法性进行判断，如果为空则提示“请输入密码”；如果不为空则判断合法性及位数；
passwordField.focus(function (evt) { var target = $(evt.target); target.siblings(".error").text(""); }).blur(function (evt) { var target = $(evt.target); if (!target.val()) { target.siblings(".error").text("请输入密码"); passwordError = true; } else if (target.val().length<6){ target.siblings(".error").text("密码必须输入6位以上"); }else if(!target.val().match(/(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{5,23}/)){ target.siblings(".error").text("密码输入不符合规范"); passwordError = true; }else{ passwordError = false; } });
6、对usrname进行合法性判断，如果为空则提示“请输入账号”，如果不为空则对合法性进行判断；另外这里需要用“/searchUserByUsername”与后台进行账号的查询，不能有重复，如果重复则提示“500”错误码
usernameField.focus(function (evt) { var target = $(evt.target); target.siblings(".error").text(""); }).blur(function (evt) { var target = $(evt.target); if(!target.val()) { target.siblings(".error").text("请输入账号"); usernameError = true; }else if(!target.val().match(/(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23}/)){ target.siblings(".error").text("用户名输入不符合规范"); usernameError = true; }else{ $.post("/searchUserByUsername?username="+target.val(),{},function (re) { if(re.code=="500"){ target.siblings(".error").text(re.msg); usernameError = true; }else{ usernameError = false; } }) } });
7、取出输入“省”、“市”、“区”的值，并传到".ssq input"表示id=ssq里面，由于在“adduser.html”中传到这个id是一个div的name="address"不具有input功能，因此必须在“.ssq”里面增加“input”表示是输入型获取其三个值“province+city+district”就OK了
$("#city10").change(function () { var province = $("#province10").val(), city = $("#city10").val(); $(".ssq input").val(province+city); }); $("#district10").change(function () { var province = $("#province10").val(), city = $("#city10").val(), district = $("#district10").val(); $(".ssq input").val(province+city+district); });
8、点击“确认”按键，其class=Btn，及通过POST方式的路径“/addNewMember”提交表单数据(“#addForm").serialize()，即可
$(".Btn").on('click',function(evt) { evt.preventDefault(); // telField.add(nameField).add(usernameField).add(passwordField).add(orderField).add(organnameField).add(addressDetailField).trigger("blur"); telField.add(nameField).add(usernameField).add(passwordField).trigger("blur"); if (telError || passwordError || usernameError ||nameError) { return; }else{ $.post("/addNewMember",$("#addForm").serialize(),function (result) { if(result=="添加成功"){ alert(result); }else{ alert(result); } }) } })
以上"addForm”表单数据在"adduser.html中为：
<form action="" id="addForm"> <ul class="addDivul1"> <li><label>姓名：</label><input name="name" type="text"><span class="error"></span></li> <li><label>账号：</label><input name="username" type="text"><span class="error"></span></li> <li><label>密码：</label><input name="password" type="text"><span class="error"></span></li> <li><label>联系电话：</label><input name="tel" type="text" maxlength="11"><span class="error"></span></li> <li><label>用户类型：</label><select name="userType"><option value="客户">客户</option><option value="销售人员">销售人员</option></select></li> <li class="t1"><label>会员权限：</label><select name="level"><option value="0">免费</option><option value="1">VIP</option></select> </li> <li class="t1"><label>所属区域：</label><select name="area"><option value="西南区">西南区</option><option value="西北区">西北区</option><option value="华东区">华东区</option><option value="华南区">华南区</option></select></li> <li class="t1"><label>地址：</label><div id="distpicker5"> <select class="form-control" id="province10"></select> <select class="form-control" id="city10"></select> <select class="form-control" id="district10"></select> </div> <div class="ssq" hidden="hidden"> <input type="text" name="address" /> </div><span class="error"></span> </li> <li class="t1"><label>详细地址：</label><input name="addressDetail" type="text"></li> </ul> <ul class="addDivul2"> <li><button type="button" class="Btn">确定</button></li> </ul> </form>
9、另外特别注意我应用了一个省市区归属的库，如下：
<script type="text/javascript" src="js/province/bootstrap.min.js"></script> <script type="text/javascript" src="js/province/distpicker.data.js"></script> <script type="text/javascript" src="js/province/distpicker.js"></script> <script type="text/javascript" src="js/province/main.js"></script>
五、前端已经搞定，下面介绍一下后台逻辑controller层，其实这里只用到了两个接口：一个是“/addNewMember”添加客户；另一个是“/searchUserByUsername”验证是否有重复客户；新建一个“/controller/UserController.java”，添加以上两个接口：
/* 新用户添加 @ 参数 */ @PostMapping("/addNewMember") public String save(UserEntity entity) { try { String re = userService.save(entity); return re; } catch (Exception e) { e.printStackTrace(); return "新用户添加失败,服务器异常"; } } /* 根据用户username */ @PostMapping("/searchUserByUsername") public ResultData getOrderByUsername(String username) throws Exception{ try{ UserEntity result = userService.getUserEntityByUsername(username); if(result!=null){ return returnFailed("500","该账户已存在，请重新输入"); }else{ return returnSuccess("200","查询成功",result); } }catch (Exception e){ e.printStackTrace(); return returnFailed("500","服务器异常"); } }
六、通过接口到service层里面的“UserServiceImp.java”自定义接口，主要用于查询userDao里面的数据库的username字段是否有重复名
@Override public UserEntity getUserEntityByUsername(String username) throws Exception { return userDao.findUserEntityByUsername(username); }
七、再到DAO层里面的userDao.java，使用接口“/searchUserByUsername”会用其数据库的查询方法通过关键字“username”即可查询
@Query("select t from UserEntity t where t.username=:username") public UserEntity findUserEntityByUsername(@Param("username") String username);
注意，如果使用接口“/addNewMember”的话，那就直接用JPA的方法通过save直接增加到数据库即可添加用户信息。
八、到实体ENTITY里面的UserEntity.java中建立数据库的关键字段，注意应用name="t_user"这个名为：t_user的数据库
@Entity @Data @Table(name = "t_user") public class UserEntity implements Serializable { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private int id; private String username; private String password; private int uid; private String name; private String tel; @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") private Date creatTime; private int level; private String alarmType; private String headImgUrl; private String address; private String addressDetail; private String organname; private String area; private String userType; }
九、通过“navicat premium”软件创建数据库表“t_user”，部分关键字如下：
OK，行了，整个流程就是这样，我觉得应该很详细了，目前应该没有如此详细的文档，这个是我在做项目过程中一步做一步写出来的，请各位觉得好就多关注，通过我的文档，你会慢慢熟悉物联网的。加油！