Java项目实战第3天：后台数据校验

爱被打了一巴掌 2023-03-02 05:30 2阅读 0赞

### 目录 ###

*   *   *  
     *  一、前端页面发送请求
     *  二、后台代码编写
     *  三、页面渲染和测试
     *  最后

###  ###

今天是刘小爱自学Java的第102天。

感谢你的观看，谢谢你。

话不多说，继续学习注册页面的业务逻辑：

![format_png][]

昨天编写了前端校验的代码，是为了保证数据的完整性和合法性：

*  比如用户名密码不能为空。
 *  比如电话号码不能瞎填，格式要正确。

因为要保证用户在点击注册按钮前实时校验数据，所以需要发送异步请求。

如何实现后台数据校验？

就需要使用到Java经典三层架构来实现了。

其中今天只是最基本的代码实现，后续会进一步将代码优化。

## 一、前端页面发送请求 ##

在编写Java代码之前，前端页面要发送请求。

因为要保证用户在点击注册按钮前实时校验，所以需要使用发送异步请求，使用ajax实现异步请求：

![format_png 1][]

**①绑定blur事件**

给form表单中的email数据栏绑定blur事件，该事件的作用在于：

用户在注册页面填写数据时，一离开email数据栏就会触发该事件。

conso.log(“刘小爱”)这块代码是用来测试事件是否能正常触发的。

如果浏览器控制台输出“刘小爱”，则表明该事件能够正常被触发，所以出现异常优先排除该事件的问题。

**②发送get请求**

get()方法中一共有四个参数：

**"/checkEmailServlet"**：url，也就是请求路径，在服务器中要有一个servlet来接受该请求。

**\{email:email\}**：发送的请求参数，其有两种命名格式，这里使用的是第二种：。

*  key=value&key=value
 *  \{key:value,key:value…\}

**function (result)\{\}**：回调函数，当请求成功后会触发该函数，其中result是服务器响应的结果。

**"json"**：返回参数的类型，可以是xml、html等，这里使用的是json。

## 二、后台代码编写 ##

**1web层**

创建一个servlet来接受上述提交的请求：

![format_png 2][]

**①接受前端请求参数**

ajax提交的数据为email，使用request域对象获取对应的参数即可。

**②交给service层处理**

在service层中创建一个UserService接口，及其对应的实现类。

service层返回给web层处理结果，其为一个boolean值：

*  若为true表示邮箱存在。
 *  若为false表示邮箱不存在。

**③响应数据**

将处理后的数据响应给前端，因为ajax提交中的数据格式为json，所以需要将处理结果转换成json格式之后再响应。

使用JSON.toJSONString()，可以将对应的数据转换成JSON字符串。

**2service层**

service层中，一个Service接口对应一个实现类。在service包下创建一个impl包专门存放实现类。

![format_png 3][]

dao层专门去查询数据，在service层中只需要调用dao层的方法就好了。

因为校验email的唯一性只是UserService中的一个业务，后续还会有和UserService相关的其它业务。

所以将dao层的对象设置成一个成员变量，这样多个方法都可以引用该dao层对象。

**①dao层查询数据**

queryUserByEmail()：根据email查询user。

一般都是这样的一种命名方式，一目了然，一下子就能知道该方法具体实现了什么功能。

**②判断查询结果**

如果查询到一个或者多个user数据，则表示该邮箱已经存在了，所以返回值为true。

如果查询到的数据为空，则表示该邮箱不存在，所以返回值为false。

**3dao层**

dao层和service层一样，也是一个接口对应一个实现类。

![format_png 4][]

**①初始化JdbcTemplate**

使用c3p0连接池获取数据源，再创建JdbcTemplate。

同样的道理，多个业务需要使用该模板，故将其设置成一个成员变量。

**②查询数据**

通过query方法查询，该方法在学JdbcTemplate时详细讲过，做个简单的回顾，其一共有三个参数：

*  sql：即sql语句。
 *  RowMapper：映射器。
 *  email：也就是sql语句中的通配符。

将查询结果直接返回给service层即可。

## 三、页面渲染和测试 ##

后台将处理后的数据响应给前端，其数据格式为json，前端要根据结果渲染对应的页面：

![format_png 5][]

**①在发送请求前，先对邮箱进行前端校验**

如果不存在或者格式不对，没有必要发送请求给后台。

使用正则表达式匹配：

*  满足要求：向服务器发送get请求。
 *  不满足要求：在页面上报错，信息为“输入的邮箱不合法”

**②get请求**

返回的数据result是一个json数据，使用result.checkEmail取出对应的数据：

*  如果为true：邮箱已存在，在页面上报错，信息为“邮箱已经被注册”
 *  如果为false：邮箱不存在，页面显示“√”

**代表编写完毕，在前端页面做一个测试**：

![format_png 6][]

先在数据库中插入一条数据，便于测试。

①在Email中输入1，不符合邮箱的命名规则，显示报错信息 “输入的邮箱不合法”

②该邮箱在数据库中不存在，所以能正常注册，显示一个“√”。

③该邮箱在数据库中已存在了，显示报错信息 “邮箱已经被注册了”。

①和③的区别在于：①是前端校验，并没有向后台发送请求，③是后台校验，发送了请求，查询数据库之后得到的结果。

## 最后 ##

谢谢你的观看。

如果可以的话，麻烦帮忙点个赞，谢谢你。

[format_png]: /images/20230208/d32c72fb3a6f4714af797609adc95053.png
[format_png 1]: /images/20230208/c321ea22a4364f2e8cf863997e2b3848.png
[format_png 2]: /images/20230208/654d68fcd2d24372849815b212d209a3.png
[format_png 3]: /images/20230208/07832a2bb9544c3da2d70b71fe2a1749.png
[format_png 4]: /images/20230208/f692e3a98d6a4cae8b60a0bc9e3de6a7.png
[format_png 5]: /images/20230208/c4ea2c90509b4ad1993fc9a2d7b457c9.png
[format_png 6]: /images/20230208/bf23a0a5de524e18a58e8846af9f4053.png