目录
一、前言
1、技术实现:servlet,tomcat,html+ajav(axios),JSON,mybatis+mapper代理开发,JS,
2、数据库:Mysql
3、功能实现:1、账号注册,登录(增)2、修改个人信息(改)3、查看用户数据(管理员功能,查)4、注销账号(删)
4、思维导图
前端页面无设计,仅含html所需的一些标签和JS功能实现,未使用CSS,而且是看教学视频敲出来的,存在各种技术调用,且目前仍存在一些bug,但不影响使用。
二、上代码:
1、登录页面
最朴素的页面~
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>丘比特相亲</title>
</head>
<body>
<h1>来这里,遇到您的一生所爱!</h1>
<h1>每个渴望爱的人,都值得被珍爱</h1>
<h1 id="loginMsg">LOGIN IN</h1><a href="ManageLogin.html">管理员登录</a>
<div id ="loginDiv">
<form action="/loginServlet" method="get" id="form">
<p>Username:<input id="username" name="username" type="text">
<span id="username_err" style="display:none">用户名格式有误</span></p>
<p>Password:<input id="password" name="password" type="password">
<span id="password_err" style="display:none">密码格式有误</span></p>
<input type="submit" id="submit" name="submit" value="login up">
<!--<input type="reset" class="button" value="reset">-->
<a href="Register.html">没有账号?点击注册</a>
<a href="b.html">忘记密码?</a>
</form>
</div>
<script>
var usernameInput = document.getElementById("username");
usernameInput.onblur = function (){
var username = usernameInput.value.trim();
if(username.length >= 6 && username.length <= 12 || username.length == 0){
document.getElementById("username_err").style.display = 'none';
}else{
document.getElementById("username_err").style.display = 'block';
}
}
var passwordInput = document.getElementById("password");
passwordInput.onblur = function (){
var password = passwordInput.value.trim();
if(password.length >= 6 && password.length <= 14 || password.length == 0){
document.getElementById("password_err").style.display = 'none';
}else{
document.getElementById("password_err").style.display = 'block';
}
}
var cleck = document.getElementById("submit")
cleck.onclick = function () {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//向服务器发送请求
xhttp.open("GET", "http://localhost//bServlet", true);//true:异步,false:同步,默认为true,可以不写
xhttp.send();
//获取响应
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
if(this.responseText == "true"){
alert("登录成功!祝您早日脱单");
}else{
alert("账号或密码错误!请重试");
}
}
};
}
</script>
</body>
</html>
这里是最先写的,也是拘束==技术最不成熟时候,跟着视频瞎写,心里没架构,就直接采用提交表单到servlet(下面就是),再读取数据,刚开始写的时候没注意,账号也可以包含中文,但是servlet接受时候会出现乱码,就会导致其和数据库存储的账号不一致,后面写了一行
username = new String(username.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);
进行转码,但是效果也不太好,我也没有搞太懂底层是怎么处理的,只要账号不包含中文就没问题
package web.User;
import com.alibaba.fastjson.JSON;
import mapper.UserMapper;
import pojo.User;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import service.UserService;
import service.impl.UserServiceimpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.nio.charset.StandardCharsets;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
private final UserService userService = new UserServiceimpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
username = new String(username.getBytes(StandardCharsets.ISO_8859_1),StandardCharsets.UTF_8);
System.out.println(username);
System.out.println(password);
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
SqlSession sqlSession = sqlSessionFactory.openSession();
UserMapper userMapper = sqlSession.getMapper(UserMapper.class);
User user = userMapper.select(username,password);
sqlSession.close();
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
if(user != null){
HttpSession session = request.getSession();
session.setAttribute("flag","true");
request.getRequestDispatcher("usersss.html").forward(request,response);
}else{
HttpSession session = request.getSession();
session.setAttribute("flag","false");
request.getRequestDispatcher("Login.html").forward(request,response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
然后html页面的最后给提交按钮绑定了一个ajax请求,向另一个servlet(下面)发送以获取数据
package web.service;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
@WebServlet("/bServlet")
public class bServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
HttpSession session = request.getSession();
Object flag = session.getAttribute("flag");
response.getWriter().write(""+flag);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
其实这个html和两个servlet都是联系着的
html通过submit将数据传送到第一个servlet后,servlet读取其传输的账号密码,通过select方法查询数据库中相匹配的一组数据,继而返回一个user对象,若匹配,则user不为null,走if路,创建一个session对象true,且跳转至用户主界面,若无匹配项,则user为null,走else路,创建一个session对象false,再跳转至登录页,这中间有一个ajax请求访问到另一个servlet(第二个),这个servlet接受了第一个servlet传来的session值,其将对应值相应给html,再在JS中执行不同的逻辑
他这里这个弹窗其实是有一些bug的,账号或密码有误时每次都能提示,但是有时候无误也会弹出“账号或密码错误”的提示,然而当你点击确定后,能跳转到用户界面,只不过多了一个密码错误的提示,而“登录成功”很少弹出。
关于select方法,是采用mapper代理映射文件写的,简单语句采用注解方法
//验证登录
@Select("select * from user_table where username = #{username} and password = #{password}")
User select(@Param("username") String username, @Param("password") String password);
登录成功后就能看到用户界面
2、注册页面
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超2.5人优质单身男女的选择——丘比特相亲</title>
</head>
<div class="from-div">
<div class="reg-content">
<h1>60秒完成注册,幸福一辈子!</h1>
<span>已有帐号?</span><a href="Login.html">登录</a>
</div>
<hr>
<form action="" method="get">
<table>
<tr>
<td>我的性别:</td>
<td>
<input type="radio" name="sex" value="男" id="man" v-modle="value"><label for="man">男</label>
<input type="radio" name="sex" value="女" id="woman" v-modle="value"><label for="woman">女</label>
</td>
</tr>
<!--<tr>
<td>出生日期</td>
</tr>-->
<tr>
<td>婚姻状况:</td>
<td>
<input type="radio" name="status" value="离异" id="离异"><label for="离异">离异</label>
</td>
<td>
<input type="radio" name="status" value="未婚" id="未婚"><label for="未婚">未婚</label>
</td>
<td>
<input type="radio" name="status" value="丧偶" id="丧偶"><label for="丧偶">丧偶</label>
</td>
</tr>
<tr>
<td>兴趣爱好</td>
<td><input type="checkbox" id="1" name="interests" value="唱"><label for="1">唱</label></td>
<td><input type="checkbox" id="2" name="interests" value="跳"><label for="2">跳</label></td>
</tr>
<tr>
<td><input type="checkbox" id="3" name="interests" value="rap"><label for="3">rap</label></td>
<td><input type="checkbox" id="4" name="interests" value="打篮球"><label for="4">打篮球</label></td>
<td><input type="checkbox" id="5" name="interests" value="荔枝"><label for="5">荔枝</label></td>
</tr>
<tr>
<td><input type="checkbox" id="6" name="interests" value="苏珊"><label for="6">苏珊</label></td>
<td><input type="checkbox" id="7" name="interests" value="树枝"><label for="7">树枝</label></td>
<td><input type="checkbox" id="8" name="interests" value="香翅牢饭"><label for="8">香翅牢饭</label></td>
</tr>
<tr>
<td>常住地:</td>
<td><select name="address" id="address">
<option>请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="新乡">新乡</option>
<option value="南阳">南阳</option>
<option value="许昌">许昌</option>
<option value="平顶山">平顶山</option>
<option value="信阳">信阳</option>
<option value="洛阳">洛阳</option>
<option value="开封">开封</option>
</select></td>
</tr>
<tr>
<td>个人描述:</td>
<td><textarea cols="12" rows="3" name="desc" id="desc"></textarea></td>
</tr>
<tr>
<td><label for="username">用户名</label></td>
<td class="inputs">
<input name="username" type="text" id="username">
</td>
<td>
<span id="username_arr" style="display:none">用户名已存在</span>
<span id="username_err" style="display:none">用户名格式有误</span>
</td>
</tr>
<tr>
<td><label for="password">密码</label></td>
<td class="inputs">
<input name="password" type="password" id="password">
</td>
<td>
<span id="password_err" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td><label for="tel">电话号码:</label></td>
<td><input type="text" name="tel" id="tel"></td>
<td><span id = "tel_err" style="display: none">手机号有误</span></td>
</tr>
</table>
<input value="免 费 注 册" type="button" id="register">
<input value="恢 复 默 认" type="reset" >
</form>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>
<h4>相关搜索</h4><br>
<ul>
<li><a href="#">吃鸡蛋可以长高吗?</a><br></li>
<li><a href="#">头发掉的快怎么办?</a><br></li>
<li><a href="#">肾虚怎么补?</a><br></li>
<li><a href="#">胸小怎么办?</a><br></li>
<li><a href="#">头发老是油怎么办?</a><br></li>
<li><a href="#">高跟鞋磨脚怎么办?</a><br></li>
</ul>
</div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
//1、账号验证
var usernameInput = document.getElementById("username");
usernameInput.onblur = function (){
var username = usernameInput.value.trim();
if(username.length >= 6 && username.length <= 12 || username.length == 0){
//用户名合法,不提示
document.getElementById("username_err").style.display = 'none';
}else{
//用户名不合法,提示错误
document.getElementById("username_err").style.display = 'block';
}
}
//2、密码验证
var passwordInput = document.getElementById("password");
passwordInput.onblur = function (){
var password = passwordInput.value.trim();
if(password.length >= 6 && password.length <= 14 || password.length == 0){
document.getElementById("password_err").style.display = 'none';
}else{
document.getElementById("password_err").style.display = 'block';
}
}
//3、手机号验证
var telInput = document.getElementById("tel");
telInput.onblur = function (){
var tel = telInput.value.trim();
if(tel.length == 11 || tel.length == 0 ){
document.getElementById("tel_err").style.display = 'none';
}else{
document.getElementById("tel_err").style.display = 'block';
}
}
//创建核心对象
/*var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//向服务器发送请求
xhttp.open("GET", "ajax_info.txt", true);//true:异步,false:同步,默认为true,可以不写
xhttp.send();
//获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};*/
document.getElementById("register").onclick = function (){
var formData = {
username:"",
password:"",
address:"",
sex:"",
tel:"",
status:"",
desc:"",
interests:""
};
let username = document.getElementById("username").value;
formData.username = username;
let password = document.getElementById("password").value;
formData.password = password;
let address = document.getElementById("address").value;
formData.address = address;
let tel = document.getElementById("tel").value;
formData.tel = tel;
let desc = document.getElementById("desc").value;
formData.desc = desc;
let status = document.getElementsByName("status");
for(let i = 0;i < status.length; i++){
if(status[i].checked){
formData.status = status[i].value;
}
}
let sex = document.getElementsByName("sex");
for(let i = 0;i < sex.length;i++){
if(sex[i].checked){
formData.sex = sex[i].value;
}
}
let interests = document.getElementsByName("interests");
for(let i = 0;i < interests.length;i++){
if(interests[i].checked){
formData.interest += interests[i].value;
}
}
axios({
method:"post",
url:"http://localhost/registerServlet",
data:formData
}).then(function (resp){
//判断响应
if(resp.data == "success"){
alert("注册成功!请您返回登录");
location.href="http://localhost/Login.html"
}else{
alert("用户名已存在!请重试");
location.href="http://localhost/Register.html"
}
})
}
</script>
</body>
</html>
写这里时候又学到了一些新知识哈哈哈,笑人,现学现卖是吧,管他呢,能写出来就好了,赶得紧
也就是用摈弃了提交表单的方法,用axios将信息以JSON数据传送到servlet(下面),再在服务器里将JSON语句转换成Java对象,调用add方法,将其添加到数据库
package web.User;
import com.alibaba.fastjson.JSON;
import pojo.User;
import service.UserService;
import service.impl.UserServiceimpl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
@WebServlet("/registerServlet")
public class RegisterServlet extends HttpServlet {
private final UserService userService = new UserServiceimpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
BufferedReader br = request.getReader();
String params = br.readLine();
User user = JSON.parseObject(params, User.class);
String username = user.getUsername();
if(username!=null){
response.getWriter().write("no success");
}else{userService.add(user);
response.getWriter().write("success");}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
经过多次测试,这个没问题
add方法实现:同样使用mapper映射注解,不过这里写了service
//注册账户
@Insert("insert into user_table values(null,#{username},#{password},#{sex},#{address},#{status},#{tel},#{desc},#{interests})")
void add(User user);
这里定义一个接口,
void add(User user);
再定义实现类实现该方法,然后测试类可直接通过实现类名调用方法
@Override
public void add(User user) {
SqlSession sqlSession = factory.openSession();
UserMapper mapper = sqlSession.getMapper(UserMapper.class);
mapper.add(user);
sqlSession.commit();
sqlSession.close();
}
factory是写的一个工具类,里面是从官网复制过来的三行代码,什么sql语句
3、用户页面
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h1>欢迎来到同城相亲!年轻人的社交元宇宙</h1>
<a href="my.html">个人中心</a>
<br>
<br>
<a href="vip.html">您尚未开通会员服务,点我开通</a>
<br>
<h2>
<center>
<font color="#ffc0cb">有趣/</font>
<font color="#8a2be2">多元/</font>
<font color="#a52a2a">温暖/</font>
<font color="#7fff00">真实</font>
</center>
</h2>
<hr>
<br>
<a href="theSameCity.html">同城/</a>
<a href="theSameCity.html">附近</a>
<form action="/selectuserServlet">
输入用户名进行搜索:
<input type="text" name="username">
<input type="submit" value="搜索">
</form>
匹配对象:
<form action="">
性别:
<input type="text" name="sex"><br>
婚姻:
<input type="text" name="status"><br>
地址:
<input type="text" name="address"><br>
<input type="submit" value="开始匹配">
</form>
<hr>
<h1>个性推荐</h1>
<h3>根据您的兴趣爱好,为您匹配到以下兴趣相似的人哦!</h3>
<img id="bimg" border="0" src="imgs/1.jpeg" width="300" height="300">
<table border="1" cellspacing="0" width="100%">
<th>
<td>用户名</td>
<td>性别</td>
<td>常住地</td>
<td>婚姻状态</td>
<td>兴趣爱好</td>
<td>个人描述</td>
<td>更多功能</td>
</th>
<tr>
<td>1</td>
<td>唱跳rap打篮球</td>
<td>男</td>
<td>新疆</td>
<td>离异</td>
<td>暂无数据</td>
<td>暂无数据</td>
<td><a href="vip.html">发起聊天</a>
<a href="vip.html">不感兴趣</a>
</td>
</tr>
<tr>
<td>2</td>
<td>ikun520</td>
<td>女</td>
<td>上海</td>
<td>未婚</td>
<td>暂无数据</td>
<td>我是ikun</td>
<td><a href="vip.html">发起聊天</a>
<a href="vip.html">不感兴趣</a>
</td>
</tr>
<tr>
<td>3</td>
<td>520ikun</td>
<td>女</td>
<td>北京</td>
<td>离异</td>
<td>唱跳rap打篮球</td>
<td>我也是ikun</td>
<td><a href="vip.html">发起聊天</a>
<a href="vip.html">不感兴趣</a>
</td>
</tr>
<tr>
<td>4</td>
<td>gege520</td>
<td>男</td>
<td>广州</td>
<td>未婚</td>
<td>唱rap打篮球</td>
<td>ikun一枚~</td>
<td><a href="vip.html">发起聊天</a>
<a href="vip.html">不感兴趣</a>
</td>
</tr>
<tr>
<td>5</td>
<td>caixukun520</td>
<td>女</td>
<td>上海</td>
<td>丧偶</td>
<td>唱打篮球树枝</td>
<td>我爱蔡徐坤</td>
<td><a href="vip.html">发起聊天</a>
<a href="vip.html">不感兴趣</a>
</td>
</tr>
<tr>
<td>6</td>
<td>noloveikun</td>
<td>女</td>
<td>新乡</td>
<td>未婚</td>
<td>唱打篮球树枝</td>
<td>我不是ikun</td>
<td><a href="vip.html">发起聊天</a>
<a href="vip.html">不感兴趣</a>
</td>
</tr>
</table>
<br>
<hr>
<script>
function a(){
document.getElementById("bimg").src='imgs/1.jpeg';
}
function b(){
document.getElementById("bimg").src='imgs/2.jpeg';
}
function c(){
document.getElementById("bimg").src='imgs/3.jpeg';
}
function d(){
document.getElementById("bimg").src='imgs/4.jpeg';
}
function e(){
document.getElementById("bimg").src='imgs/5.jpeg';
}
function f(){
document.getElementById("bimg").src='imgs/6.jpeg';
}
let x = 6;
setInterval(function (){
if(x%6==0){
a();
}else if(x%6==1){
b();
}else if(x%6==2){
c();
}else if(x%6==3){
d();
}else if(x%6==4){
e();
}else if(x%6==5){
f();
}
x++;
},2000);
</script>
</body>
</html>
个人中心和开通会员分别定义超链接,同城和附近只是一个空壳,个性推荐里面几张图片用了一个定时器,每两秒会自动转换,下面的一些推荐是手打的哈哈哈,后面的“发起聊天”是跳转到开通会员界面,其实并没有会员系统,只是简单的一个超链接,你支付了以后还是普通用户~
点击那俩超链接会跳转到……
以下界面:
这俩算是抖机灵,个人中心和搜索都是实现了的
点击“个人中心”,跳转至以下页面~
输入正确账号即可查看个人信息~你问我为=为什么要输入账号?
package web.service;
import com.alibaba.fastjson.JSON;
import pojo.User;
import service.ManagerService;
import service.UserService;
import service.impl.ManagerServiceimpl;
import service.impl.UserServiceimpl;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/selectmeServlet")
public class SelectmeServlet extends HttpServlet {
private UserService userService = new UserServiceimpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
User u = userService.selectByUsername(username);
String jsonString = JSON.toJSONString(u);
response.setContentType("text/json;charset=utf-8");
response.setHeader("content-type","text/html");
PrintWriter writer = response.getWriter();
if(u!=null) {
writer.write("用户你好!,您的基本信息如下:");
response.getWriter().write("<br>");
response.getWriter().write("性别:" + u.getSex());
response.getWriter().write("<br>");
response.getWriter().write("地址:" + u.getAddress());
response.getWriter().write("<br>");
response.getWriter().write("电话:" + u.getTel());
response.getWriter().write("<br>");
response.getWriter().write("个人描述:" + u.getDesc());
response.getWriter().write("<br>");
response.getWriter().write("兴趣爱好:" + u.getInterests());
response.getWriter().write("<br>");
response.getWriter().write("婚姻状态:" + u.getStatus());
response.getWriter().write("<br>");
//response.getWriter().write("性别:" + u.getSex());
response.getWriter().write("<br>");
response.getWriter().write("<br>");
response.getWriter().write("<a href=Update.html>编辑个人信息</a>");
response.getWriter().write("<a href=delect.html>注销账号</a>");
}else{
response.getWriter().write("您输入的账号有误,请重试!");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
因为我要用你输入的这个账号调用方法去数据库里查信息,不然我不会查
当输入正确账号后即可查看:
同时在此页面可以进行修改个人信息和注销账号操作,修改个人信息里面可以修改密码
编辑信息:
代码实现:
package web.service;
import com.alibaba.fastjson.JSON;
import pojo.User;
import service.UserService;
import service.impl.UserServiceimpl;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.BufferedReader;
import java.io.IOException;
@WebServlet("/updateServlet")
public class updateServlet extends HttpServlet {
private final UserService userService = new UserServiceimpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/json;charset=utf-8");
response.setHeader("content-type","text/html");
BufferedReader br = request.getReader();
String params = br.readLine();
User user = JSON.parseObject(params, User.class);
if(user != null){
System.out.println(user);
String username = user.getUsername();
String sex = user.getSex();
String address = user.getAddress();
String desc = user.getDesc();
String interests = user.getInterests();
String status = user.getStatus();
String tel = user.getTel();
userService.update(sex,status,interests, desc,tel,address,username);
response.getWriter().write("success");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
能看到这个位置的人我就不再用箭头标流程了哈,前端页面的代码也不发了,比较简单
同理,再输入一遍账号,
修改密码:
代码实现:
package web.service;
import pojo.User;
import service.UserService;
import service.impl.UserServiceimpl;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/updatemimaServlet")
public class updatemimaServlet extends HttpServlet {
private UserService userService = new UserServiceimpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String ypassword = request.getParameter("ypassword");
String password = request.getParameter("password");
response.setContentType("text/json;charset=utf-8");
response.setHeader("content-type","text/html");
User u = userService.select(username, ypassword);
if(u!=null){
userService.updatepassword(username,password);
response.getWriter().write("<h3>密码修改成功!请重新登录</h3>");
}else{
/*response.getWriter().write("<script>" +"alter(用户名或密码错误!请重试)"+
"</script>");*/
response.getWriter().write("<h1>用户名或密码错误!请重试!</h1>");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
注销账号:
代码实现:
package web.service;
import pojo.User;
import service.ManagerService;
import service.UserService;
import service.impl.ManagerServiceimpl;
import service.impl.UserServiceimpl;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
@WebServlet("/deleteServlet")
public class deleteServlet extends HttpServlet {
private UserService userService = new UserServiceimpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
response.setContentType("text/json;charset=utf-8");
response.setHeader("content-type","text/html");
User u = userService.select(username, password);
if(u!=null){
userService.deleteByusername(username);
response.getWriter().write("<h3>注销成功!感谢您曾经来过~</h3>");
}else{
/*response.getWriter().write("<script>" +"alter(用户名或密码错误!请重试)"+
"</script>");*/
response.getWriter().write("<h1>用户名或密码错误!请重试!</h1>");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
突然想到这样可以把别人信息修改了,也是个bug吧
笑发财我了
搜索的话,内部调用了一个方法,根据用户名搜索用户,输入账号即可
代码实现:
package web.User;
import pojo.User;
import service.UserService;
import service.impl.UserServiceimpl;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/selectuserServlet")
public class selectuserServlet extends HttpServlet {
private final UserService userService = new UserServiceimpl();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
User u = userService.selectByUsername(username);
response.setContentType("text/json;charset=utf-8");
response.setHeader("content-type","text/html");
PrintWriter writer = response.getWriter();
if(u!=null) {
writer.write("为您搜索到以下信息:");
response.getWriter().write("<br>");
response.getWriter().write("性别:" + u.getSex());
response.getWriter().write("<br>");
response.getWriter().write("地址:" + u.getAddress());
response.getWriter().write("<br>");
response.getWriter().write("电话:" + u.getTel());
response.getWriter().write("<br>");
response.getWriter().write("个人描述:" + u.getDesc());
response.getWriter().write("<br>");
response.getWriter().write("兴趣爱好:" + u.getInterests());
response.getWriter().write("<br>");
response.getWriter().write("婚姻状态:" + u.getStatus());
response.getWriter().write("<br>");
//response.getWriter().write("性别:" + u.getSex());
response.getWriter().write("<br>");
response.getWriter().write("<br>");
response.getWriter().write("<a href=vip.html>发起聊天</a>");
response.getWriter().write("<br>");
response.getWriter().write("<a href=vip.html>加为好友</a>");
}else{
response.getWriter().write("用户不存在,请重试!");
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
还有一个匹配用户,原本想写模糊匹配的,但是我发现我建的库里面的数据都是准确数据……就不写了,删了
4、管理员界面
管理员不支持注册,一是因为我懒,二是不是谁都能当管理员
这个弹窗也是有点bug的,会弹错或不弹
代码实现:
package web.Manage;
import com.alibaba.fastjson.JSON;
import mapper.ManagerMapper;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import pojo.Manager;
import pojo.User;
import service.ManagerService;
import service.UserService;
import service.impl.ManagerServiceimpl;
import service.impl.UserServiceimpl;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/manageLoginServlet")
public class ManageLoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
String resource = "mybatis-config.xml";
InputStream inputStream = Resources.getResourceAsStream(resource);
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
SqlSession sqlSession = sqlSessionFactory.openSession();
ManagerMapper managerMapper = sqlSession.getMapper(ManagerMapper.class);
Manager manager = managerMapper.select(username,password);
sqlSession.close();
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
if(manager != null){
HttpSession session = request.getSession();
session.setAttribute("flag","true");
request.getRequestDispatcher("Manager.html").forward(request,response);
}else{
//flag = false;
HttpSession session = request.getSession();
session.setAttribute("flag","false");
request.getRequestDispatcher("ManageLogin.html").forward(request,response);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
跟前面那个登录一样,前端html页面有个ajax请求发往另一个servlet,这里不再解释了
登录后就是这样:朴素~
点击“用户数据”,即可查看
这里代码实现写了好久呢:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>所有用户数据总览</title>
</head>
<body>
<table id="userTable" border="1" cellspacing="0" width="100%">
<tr>
<th>序号</th>
<th>账号</th>
<th>性别</th>
<th>地址</th>
<th>状态</th>
<th>电话</th>
<th>个人描述</th>
<th>兴趣爱好</th>
</tr>
</table>
<script src="js/axios-0.18.0.js"></script>
<script>
window.onload = function (){
axios({
method:"get",
url:"http://localhost/selectServlet"
}).then(function (resp){
let users = resp.data;
let tableData = "<tr>\n" +
" <th>序号</th>\n" +
" <th>账号</th>\n" +
" <th>性别</th>\n" +
" <th>地址</th>\n" +
" <th>状态</th>\n" +
" <th>电话</th>\n" +
" <th>个人介绍</th>\n" +
" <th>兴趣爱好</th>\n" +
" </tr>";
for(let i = 0; i < users.length;i++){
let user = users[i];
tableData += "<tr align=\"center\">\n" +
" <td>"+(i+1)+"</td>\n" +
" <td>"+user.username+"</td>\n" +
" <td>"+user.sex+"</td>\n" +
" <td>"+user.address+"</td>\n" +
" <td>"+user.status+"</td>\n" +
" <td>"+user.tel+"</td>\n" +
" <td>"+user.desc+"</td>\n" +
" <td>"+user.interest+"</td>\n" +
" </tr>"
}
document.getElementById("userTable").innerHTML =tableData;
})
}
</script>
</body>
</html>
页面加载出来以后就会向服务器发送请求,服务器内调用selectAll方法,再返回数据,这里好像是第一次用axios,当时卡了有两天了
5、数据库设计
分为两个库,用户库和管理员库,管理员只包含账户密码,且只有一位,不多介绍,用户库就比较多包含账号、密码、性别、地址、状态、电话、个人描述(这里有一个小坑就是我刚开始这个列名写的是“desc”,触发了关键字,导致出了一个bug卡了挺长时间),兴趣爱好。所有数据全声明为varchar,后期不容易出错
大概就是这样,也就是实现了基本的增删改查,初学者,前后端信息传递也不太熟练,用的技术也是杂七杂八,从上周六到今天,刚好一周时间,写了这个小Demo,记录一下,以后再回来看看,其实还有不少想法,关于会员系统,可以设计一个flag,充值后改变这个flag的值来分辨,之时候就需要一个过滤器,会员可以访问聊天功能,普通用户则会被过滤掉,还有“记住我VX登录(当然不是真的qqvx)等等,还有验证码,验证码那个类我都建好了,不过太累了,不想整了,就这吧