案例：同城相亲

快乐的数据库ㅤ

已于 2023-04-01 22:05:21 修改

阅读量338

点赞数 3

文章标签： mybatis java 开发语言

于 2023-04-01 19:59:57 首次发布

本文链接：https://blog.csdn.net/qq_74218023/article/details/129893122

版权

本文是一个初级Web应用的开发示例，涉及HTML、CSS、JavaScript、Servlet、Ajax、MyBatis等技术，实现了登录、注册、用户页面和管理员界面的功能。在数据库设计中，包括用户信息表和管理员表。代码中展示了数据验证、表单提交、数据交互以及简单的错误处理过程。

摘要由CSDN通过智能技术生成

一、前言

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）等等，还有验证码，验证码那个类我都建好了，不过太累了，不想整了，就这吧

快乐的数据库ㅤ

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
案例：同城相亲

大概就是这样，也就是实现了基本的增删改查，初学者，前后端信息传递也不太熟练，用的技术也是杂七杂八，从上周六到今天，刚好一周时间，写了这个小Demo，记录一下，以后再回来看看，其实还有不少想法，关于会员系统，可以设计一个flag，充值后改变这个flag的值来分辨，之时候就需要一个过滤器，会员可以访问聊天功能，普通用户则会被过滤掉，还有“记住我VX登录（当然不是真的qqvx）等等，还有验证码，验证码那个类我都建好了，不过太累了，不想整了，就这吧。
复制链接

扫一扫