微服务商城系统实战记录用户、商家、后台管理员注册与登录功能实现

代码见 https://github.com/betterGa/ChangGou

文章目录

一、用户注册
- 1、使用 ajax （POST 方法）
- 2、使用 thymeleaf
- 3、解决跨域问题
二、用户登录
- 1、ajax 使用 GET 方法
三、商家注册
- 1、dao、service、controller 层搭建
四、商家登录
五、后台管理员登录

现在整个商城系统的后端逻辑基本上都实现了，接下来需要与前端页面联调起来。

一、用户注册

用户注册需要以下信息：

（注意到 created、updated 都是不为 null 的，所以需要对 UserServiceImpl 的 add 方法进行设置：

 public void add(User user){// 设置创建时间和更新时间为当前时间Date created=new Date();Date updated=new Date();user.setCreated(created);user.setUpdated(updated);userMapper.insert(user);}

）
前端页面：

对应后端方法：

 /**** 新增User数据* @param user* @return*/@PostMappingpublic Result add(@RequestBody   User user){//调用UserService实现添加UseruserService.add(user);return new Result(true,StatusCode.OK,"添加成功");}

需要先对该路径进行放行：

进行测试：

接下来需要由前端传来数据。前端页面调用后端端口，使用 ajax，

1、使用 ajax （POST 方法）

使用 ajax 之前需要先导入 jquery 依赖，jQuery 是一个 JavaScript 函数库，是一个轻量级的 “写的少，做的多” 的 JavaScript 库，其中包含 ajax 功能。在 js 文件夹下拷贝 jquery.js 文件，并且把引入 jquery.js 的放在前面，不能写在一个标签里。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">

整个 script 代码：

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">function entity(username, password, email, phone) {this.username = username;this.password = password;this.email = email;this.phone = phone;}$(function () {$('#registerBut').on('click', function () {var username = $('#username').val()var password = $('#password').val()var email = $('#email').val()var phone = $('#phone').val()returnData = new entity(username, password, email, phone);$.ajax({url: "http://localhost:18087/user",type: "POST",dataType: "JSON",contentType: "application/json;charset=UTF-8",data: JSON.stringify(returnData),success: function (result) {alert("注册成功！");},error: function (result) {console.log(result);alert("用户名重复！");},cache: false})})})
</script>

在 jquery 中，$ 是常用的一个回传函数，定义为 “选取” ，英文是 selector 的缩写，表示选取。
$.function(); 就是选取 JQuery 定义的 function() 执行。
$('input') 就是选取 HTML 当中全部的 input 标签。
$('#abc') 就是选取 HTML 当中 ID 名称为 abc 的物件。
$.fn.testing = function() {} 就是选取 JQuery 内核函数 fn (函数) 回传给 testing 这个名称、定义为一个功能 function()。

把 script 标签写在 head 之后，body 之前，这样会先加载 script ，再加载页面，因为页面的 “完成登录” 按钮：

<button class="sui-btn btn-block btn-xlarge btn-danger" type="button" target="_blank"id="registerBut">完成注册</button>

JQuery 的代码通常会包裹在一个 $(function(){}) 函数中，$(function(){}) 也就是 $(document).ready(function(){}) 的简写，与之对应的原生 js 的window.onload 事件。
注意，ajax 里面的 data 不能是 json 格式，否则会报 400、415 错误状态码。

2、使用 thymeleaf

访问后端端口时，渲染前端页面，使用 thymeleaf，新建子工程 changgou-web-register，因为父工程 web 工程里已经导入过 thymeleaf 依赖了，所以子工程就不需要导了（实际上清除缓存并重启了一次整个项目之后，thymeleaf 才奏效）
此处踩了个坑，使用 thymeleaf 需要确保 Controller 类放在与 @SpringBootApplication 注解的启动类相同包或者子包下。

@Controller@RequestMapping("/user")public class RegisterController {@CrossOrigin@GetMapping("/register")public String search() {return "register";}}

集成好 thymeleaf 后，通过后端控制层路径可以访问到前端页面了，但是现在没有加载出样式。

原先 css 路径：

 <link rel="stylesheet" type="text/css" href="../static/css/all.css" /><link rel="stylesheet" type="text/css" href="../static/css/pages-register.css" />

注意，Thymeleaf 使用的是绝对路径，而不是相对路径。
需要把路径修改为：

 <link rel="stylesheet" type="text/css" href="/css/all.css" /><link rel="stylesheet" type="text/css" href="/css/pages-register.css" />

（因为我们在 application.yml 中配置过了：

有空了去掉，再看看效果。）
同样地，jquery 的路径也需要修改：

<script type="text/javascript" src="/js/jquery.js"></script>

至此，通过 http://localhost:18094/user/register 可以访问到用户登录页面。

启动 changgou-web-register，访问 http://localhost:18094/user/register ，这时出现了问题，它弹框 “用户名重复”，而此时到数据库中查看，新增记录是成功的。
     根本原因在于，在进行 post 请求之前，进行了一次 options 请求。
     众所周知, ajax 请求是由 XMLHttpReques 对象实现的 (部分低版本ID浏览器不是), 而 XMLHttpRequest 会遵守同源策略(same-origin policy). 也就是说，脚本只能访问 相同协议/相同主机名/相同端口 的资源, 如果要突破这个限制, 那就是所谓的跨域 , 此时需要遵守 CORS(Cross-Origin Resource Sharing) 机制。也就是说，现在 http://localhost:18094/user/register 的 register.html 代码的 ajax 中，试图访问 http://localhost:18087/user ，跨域了。
     而在 W3C 规范中，跨域请求，分为简单请求（GET ；HEAD； POST；除了使用用户代理自动生成的 headers，或者在 Fetch 规范中定义为 “forbidden header name” 的其他 headers，只有以下 headers 被允许用作人工地设置为 Fetch 规范定义为 “CORS-safelisted request-header” ：Accept，Accept-Language，Content-Language，Content-Type；content-type 是 application/x-www-form-urlencoded、multipart 或 text/plain ；XMLHttpRequest对象发出的请求）和复杂请求。而复杂请求发出之前，就会出现一次 options 请求。
（简单请求的定义见 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_request_headers：

）
     options 请求是一种探测性的请求，通过这个方法，客户端可以在采取具体资源请求之前，决定对该资源采取何种必要措施，或者了解服务器的性能。
     在 ajax 中，跨域请求时，json，就属于复杂请求，因此需要提前发出一次 options 请求，用以检查请求是否是可靠安全的，如果 options 获得的回应是拒绝性质的，比如 404\403\500 等 http 状态，就会停止 post、put 等请求的发出。
    在代码中， ajax 使用的是跨域请求，而且 contentType 使用的是 application/json，归为复杂请求啦，就会在 POST 方法之前，先使用 OPTIONS ，所以会出现重复提交的情况。
    把请求整成不跨域的就OK。

3、解决跨域问题

在 UserController 上使用 @CrossOrigin 支持跨域（这里好像也是需要清除缓存、重新启动项目才能奏效），然后进行测试：

现在还有个问题，如果用户名重复的话：

控制台：

后台代码并没有对这样的情况捕获异常，等之后对异常处理熟悉了之后，考虑完善这里的逻辑。
【已解决】在插入数据之前先对数据进行查询，如果已经存在记录，返回 false:

@Overridepublic boolean add(User user) {if (userMapper.selectByPrimaryKey(user) == null) {// 设置创建时间和更新时间为当前时间Date created = new Date();Date updated = new Date();// 设置用户使用状态为正常user.setStatus("1");user.setCreated(created);user.setUpdated(updated);userMapper.insert(user);return true;}// 如果数据库中已经存在用户名，返回 falsereturn false;}

 @PostMappingpublic Result add(@RequestBody   User user){//调用UserService实现添加Userboolean isInsert=userService.add(user);if(isInsert){return new Result(true,StatusCode.OK,"添加成功");}else return new Result(false,StatusCode.LOGINERROR,"添加失败，用户名重复");}

在 ajax 中修改逻辑，根据调用接口的返回值进行提示：

 $.ajax({url: "http://localhost:18087/user",type: "POST",dataType: "JSON",contentType: "application/json;charset=UTF-8",data: JSON.stringify(returnData),success: function (result) {var flag=result.flag;if(flag===true){alert("注册成功！");}else alert("用户名重复！");},error: function (result) {console.log(result);alert("访问用户注册接口失败！");},cache: false})

二、用户登录

前端登录页面是这样的：
用户登录的逻辑是，到数据库中校验邮箱/用户名/手机号和密码，一致的话，跳转至商城首页。
需要先提供校验的逻辑：
在 mapper 中使用 SQL 语句：

  @Select("SELECT * FROM tb_user where (password=#{password} and email=#{param1} or (password=#{password} and phone=#{param1} or (password=#{password} and username=#{param1})")void registerCheck(String param1, String password);

服务层：

@Overridepublic User registerCheck(String param1, String password) {List<User> users = userMapper.registerCheck(param1, password);// 查询无果if (users == null || users.size() == 0) return null;else return users.get(0);}

控制层：

 @GetMapping("/login")public Result registerCheck(@RequestParam(value = "param") String param1,@RequestParam("password") String password) {User user = userService.registerCheck(param1,password);if (user == null) {return new Result(false, StatusCode.ERROR, "用户不存在");} else {return new Result(true, StatusCode.OK, "用户登录校验成功", user);}}

测试结果：

需要对该路径进行放行：

1、ajax 使用 GET 方法

使用 ajax 调用该 GET 方法，并把参数传过去，data 要求为 Object 或 String 类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格
式。get 请求中将附加在 url 后。防止这种自动转换，可以查看 processData 选项。对象必须为key/value 格式，例如 {foo1:“bar1”,foo2:“bar2”} 转换为 &foo1=bar1&foo2=bar2 。如果是数组，JQuery 将自动为不同值对应同一个名称。例如 {foo:[“bar1”,“bar2”]} 转换为 &foo=bar1&foo=bar2。

设置登录按钮：

 <button class="sui-btn btn-block btn-xlarge btn-danger" target="_blank"
id="loginBut" type="button">登&nbsp;&nbsp;录</button>

注意：这里的 type=button 是必须的，否则后续点击后无法完成跳转到其他页面。
使用 ajax 访问登录接口：

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">$(function () {$('#loginBut').on('click', function () {$.ajax({url: "http://localhost:18087/user/login",type: "GET",dataType: "JSON",contentType: "application/json;charset=UTF-8",data: {param: $('#inputName').val(), password: $('#inputPassword').val()},success: function (result) {var flag = result.flag;if (flag === true) {var status = result.data.status;if (status == 1) {alert("登录校验成功！即将跳转至商城首页");window.location.href = "http://localhost:18086/search/list";} else {alert("用户使用状态异常，已被限制访问");}} else alert("用户不存在，请重新登录或注册！");},error: function (result) {console.log(result);alert("访问用户登录接口失败！");},cache: false})})})
</script>

三、商家注册

前端页面：

1、dao、service、controller 层搭建

数据库建表：

CREATE TABLE `tb_store` (`storename` varchar(50) NOT NULL COMMENT '商家名称',`password` varchar(100) NOT NULL COMMENT '商家密码',`invitecode` varchar(50) NOT NULL COMMENT '平台邀请码',`centerstatus` varchar(1) DEFAULT NULL COMMENT '入驻状态。1表示允许入驻，0表示未入驻',`created` datetime DEFAULT NULL COMMENT '创建时间',`updated` datetime DEFAULT NULL COMMENT '修改时间',PRIMARY KEY (`storename`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

dao 层继承通用 mapper：

public interface StoreMapper extends Mapper<Store> {}

服务层实现：

@Service
public class StoreServiceImpl implements StoreService {@AutowiredStoreMapper storeMapper;@Overridepublic boolean add(Store store) {Store storeResult = storeMapper.selectByPrimaryKey(store);if (storeResult == null) {Date date = new Date();store.setUpdated(date);store.setCreated(date);// 设置状态未入驻store.setCenterStatus("0");storeMapper.insert(store);// 插入成功return true;}// 说明商户名已存在，返回插入失败return false;}

控制层：

@RestController
@RequestMapping("/store")
public class StoreController {@AutowiredStoreService storeService;@CrossOrigin@PostMapping("/register")public Result register(@RequestBody Store store) {boolean isSuccess = storeService.add(store);if (isSuccess) {return new Result(true, StatusCode.OK, "插入商家记录成功");} else return new Result(false, StatusCode.ERROR, "用户名已存在，插入失败");}

测试结果：

ajax 逻辑：

 $.ajax({url: "http://localhost:18089/store/register",type: "POST",dataType: "JSON",contentType: "application/json;charset=UTF-8",data: JSON.stringify(returnData),success: function (result) {var flag=result.flag;if(flag===true){alert("注册成功！");}else alert("商家名重复！");},error: function (result) {console.log(result);alert("访问商家注册接口失败！");},cache: false})

四、商家登录

前端页面：

服务层实现：

@Override
public Store checkLogin(String storeName, String password) {Store store=new Store();store.setStoreName(storeName);store.setPassword(password);List<Store> storeList=storeMapper.select(store);// 查询无果if(storeList==null||storeList.size()==0){return null;}else {return storeList.get(0);}
}

控制层：

@CrossOrigin@GetMapping("/login")public Result login(@RequestParam(value = "storeName") String storename,@RequestParam(value = "password") String password) {Store store=storeService.checkLogin(storename, password);if (store!=null) {return new Result(true, StatusCode.OK, "登录成功!",store);} else {return new Result(false, StatusCode.ERROR, "登录失败，查询无果!");}}

测试结果：

前端调用 ajax 逻辑：

 $.ajax({url: "http://localhost:18089/store/login",type: "GET",dataType: "JSON",contentType: "application/json;charset=UTF-8",data: {storeName: $('#storeName').val(), password: $('#inputPassword').val()},success: function (result) {var flag = result.flag;if (flag === true) {var centerStatus = result.data.centerStatus;if (centerStatus == 1) {alert("登录校验成功！即将跳转至商家管理页面");window.location.href = "http://localhost:18086/search/list";} else {alert("商家未入驻，需等待管理员审核");}} else alert("商家不存在，请重新登录或注册！");},error: function (result) {console.log(result);alert("访问用户登录接口失败！");},cache: false})

五、后台管理员登录

不在后端代码中做逻辑判断，只是在 js 里判断用户名和密码是否同时是 “admin”，是的话登录成功，后续跳转到管理页面，否则提示登录失败。

<script type="text/javascript">function login(username, password) {if (username === 'admin' && password === 'admin') {alert('登录成功，即将进入管理页面');//window.location.href('');} else alert('请输入正确的管理员用户名和密码');}</script>