做一个及其简易的web登录小程序

17 篇文章 1 订阅

1.通过继承自HttpServlet来实现登录

下面分为Java程序和HTML两个

package com.mgg.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 创建一个Servlet,处理验证登录的请求
 * 如果继承自HttpServlet类创建自己的Servlet类
 * 可以重写service方法,但是没必要,service在HttpServlet类中已经实现
 * 会根据请求提交的方式去调用doGet()或doPost()方法,所以直接重写doGet()或doPost()即可
 */
//@WebServlet注解说明该类是一个servlet类,具备处理请求的功能
//这里的配置和在web.xml中配置功能等效
//@WebServlet(name = "loginServlet",urlPatterns = "/ls")
@WebServlet("/ls")
public class LoginServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
        
        //1. 获取请求参数 request parameter
        String uname = req.getParameter("uname");
        String pwd = req.getParameter("pwd");

        //2. 执行业务逻辑,处理请求
        //3. 生成动态响应
        res.setContentType("text/html;charset=utf-8");
        PrintWriter out = res.getWriter();
        if ("Michael".equals(uname) && "1234".equals(pwd)) {
            out.println("<h1  style=\"color:green;text-align: center;\">登录成功," + uname + "</h1>");
        } else {
            out.println("<h1  style=\"color:red;text-align: center;\">登录失败</h1>");
        }
    }
}

html

<!DOCTYPE html>
<html>
    <head>
        <title>用户登录</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

        <div>
            <h1>用户登录</h1>
            <hr> <br> 
            <!--            
            表单的数据提交方式最常用的有两种:get和post
            1. get方式提交请求-默认方式
                get方式提交的参数会追加到地址栏的url后面
                get方式能发送的数据是有限制的,根据浏览器而定
                get方式主要是为了获取数据,也就是从服务器请求数据的时候使用
            2. post方式提交请求
                post方式提交的参数不会追加到url后面,而是作为请求正文的一部分发送给服务器
                post方式提交参数比get更安全一些
                post方式发送数据没有大小限制,但是要看服务器的处理能力
                post方式主要是为了提交数据给服务器,也就是做数据的增删改
            -->
            <form action="ls" method="get">
                账号:<input type="text" name="uname">
                <br><br>
                密码:<input type="password" name="pwd">
                <br><br>
                <input type="submit" value="登录">
            </form>
        </div>

    </body>
</html>

2.通过继承自GenericServlet实现

这个分为三部分.Java .html .xml
首先.java

package com.mgg.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.GenericServlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

/**
 * 创建一个Servlet,处理验证登录的请求
 * 继承自GenericServlet类创建自己的Servlet的话,只需要实现service方法即可
 * 如果需要在init()或destroy()等方法中编写代码,直接选择性地重写即可
 */
public class LoginServlet extends GenericServlet {

    @Override
    public void init(ServletConfig config) throws ServletException {
        System.out.println("初始化代码!");
    }

    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
        //1. 获取请求参数 request parameter
        String uname = req.getParameter("uname");
        String pwd = req.getParameter("pwd");

        //2. 执行业务逻辑,处理请求
        //3. 生成动态响应
        res.setContentType("text/html;charset=utf-8");
        PrintWriter out = res.getWriter();
        if ("Michael".equals(uname) && "1234".equals(pwd)) {
            out.println("<h1  style=\"color:green;text-align: center;\">登录成功" + uname + "</h1>");
        } else {
            out.println("<h1  style=\"color:red;text-align: center;\">登录失败</h1>");
        }
    }
}

.html

<!DOCTYPE html>
<html>
    <head>
        <title>用户登录</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>

        <div>
            <h1>用户登录</h1>
            <hr>
            <br> 
            <form action="ls">
                账号:<input type="text" name="uname">
                <br><br>
                密码:<input type="password" name="pwd">
                <br><br>
                <input type="submit" value="登录">
            </form>
        </div>

    </body>
</html>

.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
    <servlet>
        <description>处理登录验证的servlet</description>
        <servlet-name>loginServlet</servlet-name>
        <servlet-class>com.mgg.servlet.LoginServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>loginServlet</servlet-name>
        <url-pattern>/ls</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
</web-app>

3.通过实现Servlet接口

本方法与我之前发的那个及其简易的查询四级成绩的那个web小程序几乎一样,只需要改变部分内容,重复代码意义不大,有兴趣的盆友可以自己写一写

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
当然,下面是一个简易登录界面微信小程序的代码示例: ```html <!-- index.wxml --> <view class="container"> <view class="title">登录</view> <view class="input-container"> <input class="input" placeholder="请输入用户名" bindinput="handleUsernameInput" /> <input class="input" type="password" placeholder="请输入密码" bindinput="handlePasswordInput" /> </view> <button class="login-btn" bindtap="handleLogin">登录</button> </view> ``` ```css /* index.wxss */ .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .title { font-size: 24px; margin-bottom: 20px; } .input-container { margin-bottom: 20px; } .input { width: 200px; height: 30px; border: 1px solid #ccc; border-radius: 4px; padding: 5px; margin-bottom: 10px; } .login-btn { width: 100px; height: 30px; background-color: #007bff; color: #fff; border-radius: 4px; } ``` ```javascript // index.js Page({ data: { username: '', password: '' }, handleUsernameInput(e) { this.setData({ username: e.detail.value }); }, handlePasswordInput(e) { this.setData({ password: e.detail.value }); }, handleLogin() { // 在这里编写登录逻辑,可以发送请求到后端进行验证 console.log('用户名:', this.data.username); console.log('密码:', this.data.password); } }); ``` 以上代码实现了一个简单的登录界面,包括一个标题、两个输入框和一个登录按钮。用户输入用户名和密码后,点击登录按钮会触发`handleLogin`函数,你可以在该函数中编写登录逻辑,比如发送请求到后端进行验证。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值