随笔 - 217  文章 - 4  评论 - 4  阅读 - 23587

开学测试——河北省重大技术需求征集系统原型（2）

在开学测试中自己做的不是很理想，所以利用课余时间重新做了一份，新的版本基本符合要求。

首先是我套用的模板 Layui模板

登陆界面要求输入错误的话会弹出提示，这个在Servlet中使用JS实现

Login.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="Layui/layui/css/layui.css">
    <script type="text/javascript" src="Layui/layui/layui.js"></script>
    <script>
        onload = function () {
            document.getElementById("img").onclick = function () {
                this.src = "/CheckCode?time"+new Date().getTime();
            }
        }
    </script>
</head>
<body>
<form class="layui-form" action="/Login" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入手机号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" name="checkcode" lay-verify="required|phone" autocomplete="off" class="layui-input" placeholder="请输入验证码">
            </div>
            <img src="/CheckCode" id="img"></td>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn">登录</button>
            <button type="reset" class="layui-btn layui-btn-primary">重新输入</button>
            <button class="layui-btn layui-btn-primary"><a href="Register.html">注册</a></button>
        </div>
    </div>
</form>
</body>
</html>
复制代码
复制代码
package Servlet;

import Bean.User;
import dao.UserDaoImpl;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "Login", value = "/Login")
public class Login extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");

        String phone = request.getParameter("phone");
        String password = request.getParameter("password");
        String checkcode = request.getParameter("checkcode");

        User user = new User();
        user.setPhone(phone);
        user.setPassword(password);
        UserDaoImpl user1 = new UserDaoImpl();
        //获取生成的验证码
        HttpSession session = request.getSession();
        String checkCode_session = (String) session.getAttribute("checkCode_session");
        //删除session中的验证码，保证验证码一次有效
        session.removeAttribute("checkCode_session");
        if(checkCode_session != null && checkCode_session.equalsIgnoreCase(checkcode)){
            if(user1 != null){
//                response.getWriter().append("登陆成功");
                session.setAttribute("phone",phone);
                request.getRequestDispatcher("main.html").forward(request,response);
            }else{
                PrintWriter out = response.getWriter();
                out.println("<script type='text/javascript'> alert('密码错误，请重新录入');window.location.href='Login.html'</script>");
                out.println("</HTML>");
                out.flush();
                out.close();
            }
        }else{
            PrintWriter out = response.getWriter();
            out.println(" <script type='text/javascript'> alert('验证码码错误');window.location.href='Login.html'</script>");
            out.println("</HTML>");
            out.flush();
            out.close();
        }
    }
}
复制代码

接下来是注册页面，这个页面要求密码必须相同，不能不填，电话号码为11位数字，这个使用JS实现，首先先赋值id，在JS中进行判断

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="Layui/layui/css/layui.css">
    <script type="text/javascript" src="Layui/layui/layui.js"></script>
    <script> layui.use('form', function() { var form = layui.form; form.render(); }); </script>
    <script type="text/javascript">
        function checkPass() {
            var pwd1 = document.getElementById("pass").value;
            var pwd2 = document.getElementById("chong").value;
            if(pwd1 != pwd2){
                document.getElementById("errorpwd").style.display = "block";
            }else{
                document.getElementById("errorpwd").style.display = "none";
            }
        }
        function checkPhone() {
            var phone = document.getElementById("phone").value;
            if(phone.length != 11){
                document.getElementById("errors").style.display = "block";
            }else{
                document.getElementById("errors").style.display = "none";
            }
        }
    </script>
</head>
<body>
<form class="layui-form" action="/Register" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" id="pass" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">重复密码</label>
        <div class="layui-input-inline">
            <input type="password" onblur="return checkPass();" id="chong" name="password1" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <span id="errorpwd" style="display:none; color:red">两次输入密码不一致</span>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" onblur="return checkPhone();" id="phone" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <span id="errors" style="display:none; color:red">手机号码应该为11位</span>

    <div class="layui-form-item">
        <label class="layui-form-label">单位</label>
        <div class="layui-input-block">
            <input type="text" name="company" id="company" required  lay-verify="required" placeholder="请输入所在单位" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn">注册</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            <button class="layui-btn layui-btn-primary"><a href="Login.html">登录</a></button>
        </div>
    </div>
</form>
<script>
    function check() {
        var name = document.getElementById("name").value;
        var pass = document.getElementById("pass").value;
        var chong = document.getElementById("chong").value;
        var phone = document.getElementById("phone").value;
        var company = document.getElementById("company").value;
        if (name == '') {
            alert('姓名为空');
            name.focus();
            return false;
        }
        if (pass == '') {
            alert('密码为空');
            pass.focus();
            return false;
        }
        if (chong == '') {
            alert('重复密码为空');
            chong.focus();
            return false;
        }
        if (phone == '') {
            alert('手机号为空');
            phone.focus();
            return false;
        }
        if (company == '') {
            alert('单位为空');
            company.focus();
            return false;
        }
    }
</script>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>
复制代码

最后一个是系统管理主界面，核心是<iframe>标签

main.html

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layout 管理系统大布局 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="Layui/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">河北调研在线征集</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    个人
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/Login.html">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="zhengji.html" target="mainframe">需求征集</a></dd>
                        <dd><a href="/List" target="mainframe">浏览需求</a></dd>
                        <dd><a href="UpdateStatus.jsp" target="mainframe">需求审核</a></dd>
                        <dd><a href="Register.html" target="mainframe">用户注册</a></dd>
                        <dd><a href="updatepword.html" target="mainframe">修改密码</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe name="mainframe" src="zhengji.html" frameborder="0" width="1050" height="600"></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>
<script src="Layui/layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });
</script>
</body>
</html>
复制代码

有兴趣的伙伴可以看看我写的东西，有错的话帮忙指出

链接：下载
提取码：zzhx

posted on   跨越&尘世  阅读(28)  评论(0)  编辑  收藏  举报
相关博文：
· 开学测试——河北省重大技术需求征集系统原型
· 后台学习2
· 开学考试题目
· 今天开学测试——河北省重大技术需求征集系统原型
· 河北省重大技术需求征集系统原型
阅读排行：
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· DeepSeek在M芯片Mac上本地化部署
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

Powered by: 博客园 Copyright © 2025 跨越&尘世
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示