Jsp+Servlet+MYSQL注册登录案例(界面难看，ε=(´ο｀*)))唉)

　　注册登录界面尤为常见，我的界面尤为难看，勉为其难的写吧，前端不熟就是这样。。。

这个案例运用到了:

1.Jsp动态页面--->动态页面

 2.Servlet逻辑判断后台---->实现界面与数据库/业务的连接，简而言之，起承转合。PS：后台响应Ajax后往前端回数据时，需按照前端规定的数据类型进行Write()，才可以在success中获取，data.xxxx。

 3.MYSQL数据库----->持久化数据

 4.JDBC----->Java DataBase Connectivity,Java数据库连接

 5.C3P0数据源连接池------>开源的JDBC连接池

 6.JQuery------>轻量级 JavaScript 库

 7.DButils工具类----->简化数据库CRUD操作

 8.网易云信------>第三方验证码发送平台，由于我操作太频繁被限制了......，内有Java接入示例（http://dev.netease.im/docs/product/%E7%9F%AD%E4%BF%A1/%E7%9F%AD%E4%BF%A1%E6%8E%A5%E5%85%A5%E7%A4%BA%E4%BE%8B），有二十条免费的可以测试Java程序发送手机验证码(用完就没了)，需要注意的是添加依赖后，还可能报错，需再添加commons.logging.jar

9.javax.mail.jar---->简单邮件发送依赖jar，发送邮件首先需要有一个邮箱账号和密码，以网易163邮箱为例，邮箱账号必须要开启 SMTP 服务，在浏览器网页登录邮箱后一般在邮箱的“设置”选项中可以开启，并记下邮箱的 SMTP 服务器地址

　　看起来有点麻烦，画个注册部分的逻辑:

　　　　

 

 页面的CSS是真的没想象力去写，ε=(´ο｀*)))界面难看。。。。。。。。。

 

 

　　工程MVC（model、view、control）结构:

　　　　个人感觉就是将原来什么都混在一起，像叠衣服一样，衣服是衣服，裤子是裤子的放起来，这样找起来比较方便，那么相应的格局开始就要布置好，会稍微麻烦点，但整体写法不会因为这个改变。

　　　　

　　　　依赖:

　　　　

 

注册部分代码(CSS就不上了，这么渣的样式...感觉要被鄙视了0.0.):

　　Register,jsp---------->页面显示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>注册</title><link rel="stylesheet" href="css/Register.css"><script src="jquery/jquery-1.11.1.js"></script><script>$(function () {//用户注册和用户登录切换
            $("#li_register").click(function () {$("#register").show();$("#login").hide();})$("#li_login").click(function () {$("#login").show();$("#register").hide();})//给发送按钮绑定点击事件:获取电话号码检验是否为电话号码，ajax到后台
            $("#bt_send").click(function () {var phone=$("#r_telephone").val();var pattern=/^1(3|4|5|7|8)\d{9}$/;if(!(pattern.test(phone))){alert("请输入正确的电话号码");return;}//进行ajax数据交互，此处切记button可能会导致Ajax请求失败，改为input即可，大坑啊....
               $.ajax({url:"SendPhoneVerifyCode",type:"get",data:{phone:phone},dataType:"json",success:function (data) {alert(data.message);},error:function (err) {alert("发送失败")console.log(err);}});})})</script>
</head><body><div id="content"><div id="tip"><ul><li id="li_register">用户注册</li><p>/</p><li id="li_login">用户登录</li></ul></div><div id="register"><form action="UserRegisterServlet" method="post">用户名:  <input type="text" name="r_username" id="r_username"><br>密&nbsp;码:  <input type="password" name="r_password" id="r_password"><br>电话号码:<input type="text" name="r_telephone" id="r_telephone"><br>验证码:<input type="text" name="phoneVerifyCode" id="phoneVerifyCode"><input type="button" id="bt_send" value="点击发送"><br><input type="submit" value="点击注册,贪玩蓝月"><br><span id="r_messageShow">${sessionScope.messageShow}</span></form></div>//登录还没写.........<div id="login"><form action="">用户名: <input type="text" name="l_username" id="l_username"><br>密&nbsp;码:<input type="password" name="l_password" id="l_password"><br><input type="submit" value="点击登录，渣渣辉"><br><span id="l_messageShow"></span></form></div></div>
</body>
</html>

 

 

 SendPhoneVerifyCode----->ajax发送数据的后端servlet，接收前端发来的电话号码，并执行发送验证码的动作

public class SendPhoneVerifyCode extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");//获取电话号码String phone = request.getParameter("phone");//给当前号码发送验证码,返回验证码存在session里，就是这里把我限制了，云信都登不上了，不过不影响使用String code = new PhoneVerifyCode(phone).sendCode();request.getSession().setAttribute("phoneCode",code);//session是存在于服务器上滴，cookie是在客户端滴//将json数据返回前端，提示用户response.getWriter().write("{\"message\":\"信息已发送\"}");}
}

 

PhoneVerifyCode--->网易云信的提示中有代码，记得在copy一下它的CheckSumBuilder类，会用到，还要添加两个JAR包httpcore-4.4.3.jar和httpclient-4.5.1.jar，如果报错中有logging等字眼，再添加com.springsource.org.apache.commons.logging-1.1.1.jar

public class PhoneVerifyCode {//发送验证码的请求路径URLprivate static final StringSERVER_URL="https://api.netease.im/sms/sendcode.action";//网易云信分配的账号，请替换你在管理后台应用下申请的Appkeyprivate static final StringAPP_KEY="d39afb7b5b9ece021935351e74f75d98";//网易云信分配的密钥，请替换你在管理后台应用下申请的appSecretprivate static final String APP_SECRET="543d6e574be7";//随机数private static final String NONCE="123456";//短信模板IDprivate static final String TEMPLATEID="4062279";//手机号private static  String MOBILE="";//验证码长度，范围4～10，默认为4private static final String CODELEN="6";public PhoneVerifyCode(String MOBILE){this.MOBILE=MOBILE;}public String sendCode(){DefaultHttpClient httpClient = new DefaultHttpClient();HttpPost httpPost = new HttpPost(SERVER_URL);String curTime = String.valueOf((new Date()).getTime() / 1000L);/** 参考计算CheckSum的java代码，在上述文档的参数列表中，有CheckSum的计算文档示例*/String checkSum = CheckSumBuilder.getCheckSum(APP_SECRET, NONCE, curTime);// 设置请求的headerhttpPost.addHeader("AppKey", APP_KEY);httpPost.addHeader("Nonce", NONCE);httpPost.addHeader("CurTime", curTime);httpPost.addHeader("CheckSum", checkSum);httpPost.addHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");// 设置请求的的参数，requestBody参数List<NameValuePair> nvps = new ArrayList<NameValuePair>();/** 1.如果是模板短信，请注意参数mobile是有s的，详细参数配置请参考“发送模板短信文档”* 2.参数格式是jsonArray的格式，例如 "['13888888888','13666666666']"* 3.params是根据你模板里面有几个参数，那里面的参数也是jsonArray格式*/nvps.add(new BasicNameValuePair("templateid", TEMPLATEID));nvps.add(new BasicNameValuePair("mobile", MOBILE));nvps.add(new BasicNameValuePair("codeLen", CODELEN));try {httpPost.setEntity(new UrlEncodedFormEntity(nvps, "utf-8"));} catch (UnsupportedEncodingException e) {e.printStackTrace();}// 执行请求HttpResponse response = null;try {response = httpClient.execute(httpPost);} catch (IOException e) {e.printStackTrace();}/** 1.打印执行结果，打印结果一般会200、315、403、404、413、414、500* 2.具体的code有问题的可以参考官网的Code状态表*/String respJSON= null;try {respJSON = EntityUtils.toString(response.getEntity(), "utf-8");System.out.println(respJSON);} catch (IOException e) {e.printStackTrace();}Gson gson=new Gson();CodeEntity entity = gson.fromJson(respJSON, CodeEntity.class);String ss=entity.getObj();//因为把我限制了，导致给我的验证码格式不对，截取前面的即是验证码，正常用户直接getobj()即是验证码，没办法被限制了...System.out.println(ss.substring(0,7));return ss.substring(0,7);}
}

 

UserRegisterServlet---->用户注册判断用户填写的数据是否可以注册的servlet

public class UserRegisterServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String username = request.getParameter("r_username");String password = request.getParameter("r_password");String telephone = request.getParameter("r_telephone");String phoneVerifyCode = request.getParameter("phoneVerifyCode");User user=new User(username, MD5Util.md5(password),telephone);//开始注册业务UserRegister userRegister=new Dao.UserRegister();if(userRegister.isRepeatUsername(username)){request.getSession().setAttribute("messageShow","用户名重复");response.sendRedirect("Register.jsp");return;}if(!userRegister.isRightCode(phoneVerifyCode, (String) request.getSession().getAttribute("phoneCode"))){request.getSession().setAttribute("messageShow","验证码错误");response.sendRedirect("Register.jsp");return;}userRegister.insertUser(user);request.getSession().setAttribute("username",username);request.getRequestDispatcher("RegisterSuccess.jsp").forward(request,response);}
}

 

UserRegister--->实现业务层的接口，对数据库进行CRUD操作的类

public class UserRegister implements Service.UserRegister{private DataSource dataSource=new ComboPooledDataSource();private QueryRunner qr=new QueryRunner(dataSource);@Overridepublic boolean isRightCode(String code, String rightCode) {return code.equalsIgnoreCase(rightCode);}@Overridepublic boolean isRepeatUsername(String username) {User user=null;try {user = qr.query("select * from user where username=?", new BeanHandler<>(User.class), username);} catch (SQLException e) {e.printStackTrace();}return user!=null;}@Overridepublic void insertUser(User user) {try {qr.update("insert into user(username,password,telephone) values (?,?,?)",user.getUsername(),user.getPassword(),user.getTelephone());} catch (SQLException e) {e.printStackTrace();}}
}

 

　　　　以上为注册模块主要的代码，剩下的要么是实体类(User类用来封装用户输入的信息、CodeEntity类用来将手机验证码返回的jsonArray转为该对象)，要么是工具类(MD5加密密码)，要么就是业务层定义的接口(用户注册的功能设定)。

差不多就这样了，就不放上来了，这么多也不一定看的完..........代码臃肿，得治。。。注册短信验证码到这里就实现了，剩下邮件验证激活和登录......先放着。

 

收到的短信可以自己设置模板，但是要审核，不要刷的太频繁，不然o(￣ヘ￣o＃)---------->{"code":416,"msg":"mobile limit","obj":"4322605||+86-xxxxxxxxx"}，mobile limit,电话号码就xxxxx了。

　　注册成功后进入，邮箱激活界面，用户名可在注册的Sevlet中存session,在这个页面通过el获取-----.>

　　　　　　　　2018.02.02 记

 

转载于:https://www.cnblogs.com/Alice-Thinker/p/8406325.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/250989.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ES6-15 map与set

ES6-15 map与set

Promise、Proxy、Map、Set这些ES6新增的api无法用babel实现语法降级&#xff0c;需要使用到polyfill Set 成员是唯一的&#xff0c;不能重复有iterator接口&#xff0c;可迭代具有iterator接口的所有类型&#xff0c;都能作为new Set()的参数&#xff0c;如类数组、数组 con…
阅读更多...
ES6-16 WeakMap与WeakSet、proxy与reflect

ES6-16 WeakMap与WeakSet、proxy与reflect

WeakMap/WeakSet 原型上不存在遍历方法(没有部署iterator接口)成员只能是对象垃圾回收机制不考虑对成员对象的应用 WeakSet/WeakMap 中的对象都是弱引用&#xff0c;即垃圾回收机制不考虑 WeakSet 对该对象的引用&#xff0c;也就是说&#xff0c;如果其他对象都不再引用该对象…
阅读更多...
ES6-17 class与对象

ES6-17 class与对象

class 模拟类的方式语法糖&#xff08;把以前的写法换了一个方式&#xff09; 类内部的方法是不可枚举的 ES5用Object.assign拓展的原型属性是可枚举的 function Point(x, y) {this.x x;this.y y; } // 这样定义的原型上方法eat\drink是可枚举的 Point.prototype Object…
阅读更多...
算法 --- 二叉树的最大深度

算法 --- 二叉树的最大深度

思路: 1.二叉树的深度,等于Max(左子树最大深度,右子树最大深度) 1 2.节点不存在时,此时的深度为0 3.当节点存在,左右子树不存在时(此时为叶子节点) 返回1 /*** Definition for a binary tree node.* function TreeNode(val) {* this.val val;* this.left this.righ…
阅读更多...
ES6-18/19 异步的开端-promise

ES6-18/19 异步的开端-promise

ES6-18异步的开端-promise ES6-19 promise的使用方法和自定义promisify try catch只能捕获同步异常&#xff0c;不能捕获异步的 等待所有异步都执行完&#xff0c;打印结果&#xff0c;比较笨拙的方法&#xff0c;在每个异步操作加arr.length 3 && show(arr) Promis…
阅读更多...
算法 --- 平衡二叉树

算法 --- 平衡二叉树

解题思路: 1.首先写一个返回深度的函数d 2.写一个遍历函数t 3.在t中首先判断,r是否为空(为空则此时就是平衡二叉树,返回true),然后判断是否为叶子节点(r.left null && r.right null)若是则返回true,最后判断,其左子树的深度与右子树的深度之差是否大于1.若是则返回fal…
阅读更多...
【co】ES6-20/21 iterator与generator

【co】ES6-20/21 iterator与generator

ES6-20 iterator与generator ES6-21 async与await、ES6的模块化 try catch不能捕获异步异常 try catch是同步代码 try {setTimeout(() > {console.log(a)}) } catch (e) {console.log(e) }iterator 内部迭代器&#xff1a;系统定义好的迭代器接口&#xff08;如数组Symbol…
阅读更多...
驱动芯片

驱动芯片

一 LED驱动芯片&#xff1a; 1.1 TM1640:16位数码管驱动芯片&#xff0c;2线制控制&#xff08;CLK/DIN&#xff09;,SCLK低电平时DIN输入&#xff0c;而SCLK高电平时保持DIN保持不变&#xff1b;开始传输&#xff1a;SCLKH时DIN由高变低&#xff0c;停止传输SCLKH时DIN由由低变…
阅读更多...
confusion_matrix（混淆矩阵）

confusion_matrix（混淆矩阵）

作者&#xff1a;十岁的小男孩 凡心所向&#xff0c;素履可往 目录 监督学习—混淆矩阵 是什么&#xff1f;有什么用&#xff1f;怎么用&#xff1f; 非监督学习—匹配矩阵 混淆矩阵 矩阵每一列代表预测值&#xff0c;每一行代表的是实际的类别。这个名字来源于它可以非常容…
阅读更多...
Python 21 Django 实用小案例1

Python 21 Django 实用小案例1

实用案例 验证码与验证 KindEditor 组合搜索的实现 单例模式 beautifulsoup4 验证码与验证 需要安装Pillow模块 pip stall pillow1、首先需要借助pillow模块用来画一个验证码图形&#xff0c;这里单独封装了一个py文件&#xff0c;调用一个方法就好了 1 #!/user/bin/env python…
阅读更多...
数据恢复软件

数据恢复软件

链接&#xff1a;https://pan.baidu.com/s/1n6x5vhW-3SY8MAvvnqVtog 密码&#xff1a;thh0转载于:https://www.cnblogs.com/huanu/p/9452039.html
阅读更多...
VMware

VMware

1.VMware软件安装&#xff1a; https://jingyan.baidu.com/article/9f7e7ec09da5906f281554d6.html 2&#xff0c;镜像文件下载地址&#xff1a;http://www.cnbeta.com/articles/tech/566773.htm 有图形界面。 或是在官网&#xff1a;https://wiki.centos.org/Download 2.cento…
阅读更多...
【重要】ES6-23 JavaScript模块化

【重要】ES6-23 JavaScript模块化

前端js模块化的演变发展 模块化解决的问题 传统模块化、插件化 CommonJS AMD/CMD ES6模块化 ES6以前 没有js引擎 一开始js写在html的script标签里js内容增多&#xff0c;抽取出index.js文件&#xff0c;外部引入js再增加&#xff0c;index.html对应index.js index2.html对应ind…
阅读更多...
jquery --- 多选下拉框的移动(穿梭框)

jquery --- 多选下拉框的移动(穿梭框)

效果如下: 几个注意地方: 1.多选下拉框需要添加 multiple 2.获取选中的元素KaTeX parse error: Expected EOF, got # at position 3: (#̲id option:selec…(#id option:not(:selected)) 下面是代码的各个部分实现, 方便引用,最后是总体代码,方便理解 添加选中到右边: // …
阅读更多...
ES6-24 生成器与迭代器的应用

ES6-24 生成器与迭代器的应用

手写生成器 先done再false&#xff0c;不然index就提前了一步1 var arr [1,2] function generator(arr){var i 0;return{next(){var done i > arr.length ? true : false,value done ? undefined : arr[i];return {value : value,done : done} }} } var gen gener…
阅读更多...
jquery --- 收缩兄弟元素

jquery --- 收缩兄弟元素

点击高亮的收缩兄弟元素. 思路: 1.点击的其实是tr.(类为parent) 2.toggleClass可以切换样式 3.slblings(’.class’).toggle 可以根据其类来进行隐藏显示 代码如下: <!DOCTYPE html> <html> <head> <meta charset"utf-8"><style>.pa…
阅读更多...
Webpack基础

Webpack基础

path.resolve // 只要以/开头&#xff0c;就变为绝对路径 // ./和直接写效果相同 var path require("path") //引入node的path模块path.resolve(/foo/bar, ./baz) // returns /foo/bar/baz path.resolve(/foo/bar, baz) // returns /foo/bar/baz path.res…
阅读更多...
LeetCode：二叉树相关应用

LeetCode：二叉树相关应用

LeetCode&#xff1a;二叉树相关应用 基础知识 617.归并两个二叉树 题目 Given two binary trees and imagine that when you put one of them to cover the other, some nodes of the two trees are overlapped while the others are not. You need to merge them into a new …
阅读更多...
jquery --- 网页选项卡

jquery --- 网页选项卡

点击,不同的tab_menu,显示不同的tab_box 注意点: 1.获取ul下,当前li的编号. $(‘div ul li’).index(this) 2.显示ul下编号为$index的li -> $(‘ul li’).eq($index) <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <style&g…
阅读更多...
Webpack进阶（二）代码分割 Code Splitting

Webpack进阶（二）代码分割 Code Splitting

源代码index.js里包含2部分① 业务逻辑代码 1mb② 引入&#xff08;如lodash包&#xff09;的代码 1mb若更新了业务逻辑代码&#xff0c;但在浏览器运行时每次都下载2mb的index.js显然不合理&#xff0c;第三方包是不会变的 手动拆分 webpack.base.js entry: {main: path.re…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023