前言:笔者曾经有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】里面的数字,好了,这个分析再详细不过了。
![大笑](https://static-blog.csdn.net/xheditor/xheditor_emot/default/laugh.gif)
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,行了,整个流程就是这样,我觉得应该很详细了,目前应该没有如此详细的文档,这个是我在做项目过程中一步做一步写出来的,请各位觉得好就多关注,通过我的文档,你会慢慢熟悉物联网的。加油!