Web收银台系统[项目] -- (2) 注册页面

1.将前端代码放在Webapp下面

2. 项目整体框架

3. 项目 -- 注册

点击红框圈出的, 连接上数据库cash

检查是否连接成功, 先去命令行看一下cash数据库是否创建了, 没创建就 create database cash; 然后 use cash; 查看cash数据库,

然后 use tables; 查看数据库的那四张表是否在. 

如果那四张表没在的话将数据库那四张表的信息复制进命令行里, 并回车, 直到最后一行显示OK. 

如果没连接成功, 设置完命令行之后, 可以先删掉现在的数据库,再重新连.

删掉数据库, 如图 ,点击 这个 减号

然后再重新连接数据库, 连接成功后, 则会出现下图四张表

点击 甲壳虫debug 进行调试, 则会跳转到浏览器登陆页面, 但是此时还不能登录 , 因为还没有注册呢, 然后点击注册, 来到注册页面

注册成功后, 会跳转到登陆页面进行登录.

这里采用post方法进行注册, 为什么不使用get方法呢? 这里就需要回顾一下get和post方法的区别

get 方法的参数都是放在URL上, 所以传输数据的大小是有限制的

post 方法的参数可以放在URL上, 也可以放在请求体, 所以传输数据可以很大,  并且支持的数据类型不仅支持一般出现的文本, 字符串类型, 还支持二进制, 包括文件, 图片等

然后接下来自己要搞明白 注册的逻辑图, 要能讲得出来

servlet的工作就是调用它自己的一些方法接收和解析从客户端传来的信息, 然后再封装发送给服务端

从register.html要交给注册的servlet,但注册的servlet是不存在的, 因为现在要写一个注册的servlet, 然后交给数据库进行处理

因此, 要建几个包.

main-java-new-Package-util  要连接数据库的话要建一个名为util的包, util包里面放工具包.

main-java-new-Package-servlet 

因为要建一个账户, 需要有账户的实体

main-java-new-Package-entity

因为util包里放的是工具包, 要连接数据库, 再在util包右键new-JavaClass-DBUtil

然后点击servlet包右键new-JavaClass-RegisterServlet

然后点击entity包右键new-JavaClass-Account 建一个账户

 

当在register.html页面中进行注册并submit提交表单后, 要找到注册的servlet

因此在RegisterServlet中开始写代码,

RegisterServlet继承自HttpServlet

而怎么找到U对应的RegisterServlet呢, 用到了"注解" @WebServlet  通过注解来配置相应的servlet

当在register.html页面一提交, RegisterServlet会通过注解捕捉到当前提交的信息

因为register.html页面中method=post, 是post方法, 因此要在RegisterServlet里重写它的post方法

当在register.html页面一提交, RegisterServlet会通过注解捕捉到当前提交的信息, 然后执行doPost方法

 

DBUtil是通过JDBC来连接数据库的

点击IDEA右边的database可以看到Account有三个字段 id username password

创建项目时安装好了lombok插件, 现在就可以直接@Data, 这样当用到get和set方法时会自动提供get和set方法, 就不用自己再写了, 大大减少了代码量, 以及Java代码的简洁

 

进行数据库连接要配置一下URL  URL是之前配置JDBC时出现的那个地址

然后写入 数据库的名称和密码

接着配置"数据库连接池" , 写成单例模式, 从数据库连接池以单例方式获取一个连接

private static volatile DataSource DATASOURCE; // 使用volatile为保证datasource的可见性

接下来获取真正的连接

接下来进行关闭连接的操作

然后来到RegisterServlet.java 

到这里, 注册的页面就写完了.

整体过程再叙述一遍哦:

      交给服务器一个servlet, servlet去操作数据库, 操作成功后, 会发送一个响应体给前端页面, 因为注册成功了, 接下来想要用户登录, 那么服务器要发出一个响应, 响应到登录页面去. 即重定向到login.html页面去

可以自己注册测试一下

再次重试的时候, 点击下面的运行框左边的红框框出来的内容

h