-
小组成员
吕登名（负责博客撰写，数据库设计，数据库操作处理，项目任务汇总），博客地址：https://www.cnblogs.com/haveadate/
刘婧祺（负责项目规划，cookie、session交互处理，博客排版指导，参考链接规范化），博客地址：https://www.cnblogs.com/Sabrian-Liu/
-
新建项目
图 1 新建项目
图 2 选择web应用
图 3 设置项目名称和保存位置
图 4 添加Tomcat
图 5 点击添加按钮
图 6 选择本地Tomcat服务器，没有直接看到就到下面xx items more中去找（前提是要装Tomcat）
图 7 给本地服务器起个名字，设置Tomcat服务器所在位置（如果没有的话），其它先不用管，切换选项卡
图 8 选择后先点击apply再点ok
图 9 开始配置项目
图 10 在web->WEB-INFO中添加lib和classes目录，切换选项卡
图 11 设置输出目录和测试输出目录都为刚才我们所新建的classes，切换选项卡
图 12 设置引用位置
图 13 设置引用位置为我们刚才建立的lib目录
图 14 设置目录文件类型
图 15 引入Tomcat相关的包
图 16 建立一个Servlet文件，注意该文件要放在src目录下
图 17 编写测试代码，注意存放位置位于doGet方法，放在doPost方法中不会有响应
图 18 配置WEB-INFO下的web.xml文件
图 19 servlet-class写完整的Servlet文件路径（包含包名，我没有创建包），/login中 login 随便取
图 20 运行
图 21 服务器启动成功
图 22 输入我们刚才在web.xml中配置的接口
图 23 可以看到，服务器对我们的请求作出了相应的响应
导入登录界面
图 24 将前面写好的登录页面文件复制到web目录下
图 25 注意将文件位置放到web目录下
图 26 重新启动，输入网页
图 27 可以看到，导入登录页面成功
建立数据库
图 28 创建数据库、表并插入数据
使用Servlet校验用户名和密码
在刚开始做登录界面时，我们只是做了一个前端，当时并没有考虑后端的交互，对此我们需要对原来的html进行修改：
需要注意地是，登录的那几个input标签需要放在form标签里，form标签的action属性值对应的就是我们前面web.xml中LoginServlet映射的值（我的web.xml文件中LoginServlet对应的是/login，所以此处form标签的action属性对应的值是login）,提交方式是POST，因为此处引用于登录，涉及到用户隐私，而GET方式会暴露用户输入的信息，所以此处用POST方式提交表单，同时请注意提交按钮的type属性值为submit而不应该是button这一点请注意，通过这种方式就可以让服务器对前端的请求作出相应的响应。
既然前端提交的方式是POST，那么我们就需要在LoginServlet中的doPost方法中作出相应的响应。此处还未涉及到数据库，我们暂且不用，便于测试。
重启服务器，按照前面的方法进入登录界面，输入用户名和密码，我们可以看到，服务器作出的响应；
图 29 将用于操作SQL SERVER的包sqljdbc4.jar放在我们创建的lib目录下
图 30 整理前面的代码
考虑到最终实现新闻推送操作数据库的次数比较多，此处将数据库操作的文件放在包中统一管理，同时将前面的LoginServlet也放在该包中，注意修改web.xml中的信息，包名规范参考了解见文章末尾。
图 31 初始化构造函数
图 32 同一类下，添加一个获取当前系统时间的方法，用于异常输出
图 33 关闭数据库连接
图 34 更改数据库
图 35 验证登录
图 36 更新LoginServlet中的doPost方法验证登录方式
图 37 假设小明登录(id：20173106001，pwd：123456)
图 38 服务器验证通过
图 39 通过id：20173106001 pwd：000000方式登录的验证结果
使用Cookie本地存储用户登录信息
还记得前面我们写前端页面时有个状态栏，但是现在我们并没有用起来，只是在后端通过输出的方式判断登录状态，这样并不友好，所以，通过jqueryt的ajax方式实现前后端交互，把这个状态栏用起来。
图 40 form标签一定要去掉，不然会产生意想不到的错误(两个小时找bug总结而来)
修改原来的js文件。jquery的ajax请求方式和form类似，按照这个模板来操作就行，请求成功后执行回调函数，可以进行页面交互。
当登录成功后，将账号密码存储在Cookie中，同时将信息传到前端，对应于回调函数中的参数。
图 41 效果展示
图 42 查看Chrome浏览器中存储的Cookie
图 43 添加检测浏览器Cookie的js代码
图 44 刷新界面后，账号密码自动填充
使用Session显示在线人数
在前面向浏览器Cookies存储数据时，我们将操作Cookie的代码直接写在了doPost方法中，这样并不好，doPost方法干了很多活儿，不方便代码的阅读，所以我Cookie相关的操作封装成一个方法与doPost在同一个类中，在原来的地方只需要调用即可
同样，与Session相关的操作也封装在一个方法中，放在doPost所在类中。虽然我参照的是菜鸟教程上的操作，但是我不全部认同它里面的操作，仔细品味session.isNew()的作用，原文会话不是新的访问者反而要增加访问次数，这样并不合理。
图 45 参考博文一处截图
图 46 会话超时设置
图 47 在Chrome中反复登录后换到IE浏览器反复登录
使用过滤器解决乱码问题
图 48 添加过滤器
图 49 设置客户端请求和服务器响应的编码方式（注意删除Servlet中设置的编码方式）
图 50 配置过滤器
大家可能不是很清楚，为什么要添加过滤器，都说乱码乱码，具体是什么样的呢，先关闭过滤器，添加一个测试样例看一下：
这就是乱码，中文不能正常显示，启动过滤器以后：
我们可以看到，启动过滤器以后，不仅中文显示正常，而且html标签元素也得到了显示。可能有人会问：在LoginServlet也曾设置对request和response内容的过滤，为啥还要费工夫去添加一个这玩意儿，我直接在LoginServlet里用两行代码不就解决了吗？事实上，上述添加的过滤器我们只是用了皮毛，过滤器还可以做很多事情，例如记录到来的请求信息，以及其发起机器的IP地址、作为加密/解密的设备、用户的认证、数据的压缩和用户输入的验证等等。
图 51 在数据库插入中文登陆数据
图 52 测试
页面跳转，用的ajax实现的交互，可以直接在前端中实现跳转，也可以在后端通过这种方式跳转：
图 53 后端跳转方式
师傅，停一下车，你是不是忘了说点什么？为啥我添加过滤器以后，前端的html和js都乱码了，你前面完全没提过呀！不要方，你参照附录【4】的方式设置idea的编码，你可能得到如下界面：
这似乎少了点什么，css文件怎么没有加载出来？Chrome浏览器f12看一下项目结构：
这似乎完全没问题，可为什么没有加载css，这是一个让我百思不得其解的问题，我的解决方案很直接，将两个css文件的内容复制到html中就可以了，这是我对于附录【4】不是很满意的地方，还有一个就是控制台中文输出成乱码：
这个问题只要用英文输出就没问题，附录【4】是我找了很多方案中最让我满意的，但是有这两个瑕疵，如果你有更好的方案请在评论区告诉我，大家相互学习[抱拳][抱拳][抱拳]。
问题总结
1. 在idea中修改html、js等文件后，以默认的方式重启服务器后，可能没有效果，可以参考附录【1】，比较有效果，如果实在改不了，可以清除idea中 的缓存或者修改文件名称：
2. 随着后面项目量的增大，用包统一管理类结构会更加清晰，可以参考附录【2】，比较详细；
3. 连接数据库(Sql Server)时，导入驱动程序时，还要在配置管理器中进行修改，可以参考附录【3】；
4. 添加过滤器乱码时，需要设置idea的的编码方式，参考附录【4】；
效果展示和源代码
模仿_西南石油大学电子邮件系统
码云：往事随风@ihaveadate
附录
[1] tangxl2008008. 使用IntelliJ IDEA开发Java Web项目时，修改了JSP后刷新无效果问题[J/OL]. CSDN. (2017-05-08)[2020-05-26]. https://blog.csdn.net/tangxl2008008/article/details/71404965?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase.
[2] 大码哥. Java 包的命名规范[J/OL]. 博客园. (2019-07-15)[2020-05-26]. https://www.cnblogs.com/xichji/p/11188420.html.
[3] bujiangdaoli. “通过端口 1433 连接到主机 localhost 的 TCP/IP 连接失败“常见问题的解决方案[J/OL]. CSDN. (2017-11-17)[2020-05-26]. https://blog.csdn.net/bujiangdaoli/article/details/78558834.
[4] fengqing5578. IntelliJ IDEA 统一设置编码为utf-8编码[J/OL]. CSDN. (2018-06-11)[2020-05-26]. https://blog.csdn.net/fengqing5578/article/details/80648753.