用户登录注册案例

该案例详述了如何使用Java、JSP、Servlet、JavaScript和MySQL数据库来实现用户登录注册功能。主要包括LoginServlet、RegisterServlet、CheckCodeServlet、User类以及Utils工具类的设计,同时提供了登录和注册界面的源码。
摘要由CSDN通过智能技术生成

用户登录注册案例

本案例基于MySQL数据库、JDBC、Servlet、JavaScript、JSP等技术制作完成。

案例效果图

一、登录界面

二、注册界面

三、源码

LoginServlet类

@WebServlet(name = "LoginServlet", value = "/login")
public class LoginServlet extends HttpServlet {
   
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   
        try {
   
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
            //获取用户提交的请求参数
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            //获取用户输入的验证码
            String userCode = request.getParameter("usercode");
            System.out.println(userCode);
            //去获取后台生成的验证码
            String  serverCode = (String) request.getSession().getAttribute("serverCode");
            System.out.println(serverCode);
            //为了保证验证码是一次性使用,取完之后,就销毁
            request.getSession().removeAttribute("serverCode");
            //比对
            if(userCode!=null&&userCode.length()==4&&userCode.equalsIgnoreCase(serverCode)){
   
                User user = new User();
                user.setUsername(username);
                user.setPassword(password);
                //登录
                User u = Utils.login(user);
                if (u != null) {
   
                    //用户勾选了记住密码
                    if (request.getParameter("remember") != null) {
   
                        Cookie uCookie = new Cookie("username", u.getUsername());
                        Cookie pCookie = new Cookie("password", u.getPassword());
                        uCookie.setMaxAge(60 * 3);
                        pCookie.setMaxAge(60 * 3);
                        response.addCookie(uCookie);
                        response.addCookie(pCookie);
                    }
                    //登录成功
                    request.getRequestDispatcher("/home.html").forward(request, response);
                } else {
   
                    //登录失败
                    request.setAttribute("msg", "用户名或密码错误");
                    request.getRequestDispatcher("/login.jsp").forward(request, response);
                }
            }else {
   
                request.setAttribute("msg2", "验证码输入错误");
                request.getRequestDispatcher("/login.jsp").forward(request, response);
            }

        } catch (Exception e) {
   
            e.printStackTrace();
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   
        this.doPost(request, response);
    }
}

RegisterServlet类

@WebServlet(name = "RegisterServlet", value = "/register")
public class RegisterServlet extends HttpServlet {
   
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
   
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
下面是一个简单的 Vue 用户登录注册案例: 在 Vue 项目中创建一个名为 Login.vue 的组件: ```html <template> <div> <h2>用户登录</h2> <form> <div> <label>用户名:</label> <input type="text" v-model="username" /> </div> <div> <label>密码:</label> <input type="password" v-model="password" /> </div> <button type="button" @click="login">登录</button> </form> <hr /> <h2>用户注册</h2> <form> <div> <label>用户名:</label> <input type="text" v-model="newUsername" /> </div> <div> <label>密码:</label> <input type="password" v-model="newPassword" /> </div> <button type="button" @click="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: "", password: "", newUsername: "", newPassword: "", }; }, methods: { login() { // 发送登录请求 console.log("用户名:" + this.username); console.log("密码:" + this.password); }, register() { // 发送注册请求 console.log("用户名:" + this.newUsername); console.log("密码:" + this.newPassword); }, }, }; </script> ``` 在 App.vue 中使用 Login 组件: ```html <template> <div id="app"> <login /> </div> </template> <script> import Login from "./components/Login.vue"; export default { components: { Login, }, }; </script> ``` 这是一个非常简单的登录注册案例,你可以根据自己的需求进行修改和完善。在实际项目中,你需要发送 AJAX 请求到后端服务器,进行用户登录和注册的处理。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值