JavaWeb小工程实战演练(二)

登录功能

1. 网页设计

同样我还是在模板之家下载了这样一个登录界面,自己就不设计页面了 o(* ̄▽ ̄*)o

在这里插入图片描述

2.后台代码设计

登录servlet:LoginServlet

package cn.hehewocao.Servlet;

import cn.hehewocao.Dao.AdminDao;
import cn.hehewocao.POJO.Admin;
import cn.hehewocao.Service.AdminService;
import cn.hehewocao.Service.AdminServiceImp;
import org.apache.commons.beanutils.BeanUtils;

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;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        Admin admin = new Admin();
        Map<String, String[]> parameterMap = req.getParameterMap();
        try {
            BeanUtils.populate(admin,parameterMap);//BeanUtils封装Admin对象
            AdminService as = new AdminServiceImp();
            admin = as.login(admin);//查找数据库
            if(admin!=null) {
                HttpSession session = req.getSession();
                session.setAttribute("admin", admin);//将改admin存入session
                resp.sendRedirect(req.getContextPath()+"/findServletByPage");//重定向到FindServletByPage开始查询用户信息
            }else {
                req.setAttribute("login_msg","用户名或密码错误!");//保存登录信息用以回显
                req.getRequestDispatcher("/index.jsp").forward(req,resp);
            }

        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

    }
}

AdminServiceImp()类:

package cn.hehewocao.Service;

import cn.hehewocao.Dao.AdminDao;
import cn.hehewocao.Dao.AdminDaoImp;
import cn.hehewocao.POJO.Admin;

/**
 *  管理员接口的实现类
 */

public class AdminServiceImp implements AdminService {
    @Override
    public Admin login(Admin admin) {
        return new AdminDaoImp().find(admin.getAdministrators(),admin.getPassword());
    }
}

AdminDaoImpl类:

package cn.hehewocao.Dao;

import cn.hehewocao.POJO.Admin;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import cn.hehewocao.JDBC.DBCPUtils;
import javax.sql.DataSource;
import java.sql.SQLException;

/**
 *  管理员数据访问层的实现类
 */
public class AdminDaoImp implements AdminDao {
    @Override
    public Admin find(String administrator,String password) {
        String sql = "select * from admin where administrator = ? and password = ?";
        QueryRunner qr = new QueryRunner((DataSource) DBCPUtils.getDateSource());
        Admin admin = new Admin();
        try {
           admin = qr.query(sql, new BeanHandler<Admin>(Admin.class), administrator,password);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return admin;
    }
}

3. JSP页面设计

JSP界面主要用于错误信息的回显。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>管理员登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <meta name="keywords"
          content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates"/>
    <link href="css/style.css" rel='stylesheet' type='text/css'/>
    <!--webfonts-->
    <link href='http://fonts.useso.com/css?family=PT+Sans:400,700,400italic,700italic|Oswald:400,300,700'
          rel='stylesheet' type='text/css'>
    <link href='http://fonts.useso.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
    <!--//webfonts-->
    <script src="http://ajax.useso.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<script>$(document).ready(function (c) {
    $('.close').on('click', function (c) {
        $('.login-form').fadeOut('slow', function (c) {
            $('.login-form').remove();
        });
    });
});
</script>
<!--SIGN UP-->
<h1>管理员登录</h1>
<div class="login-form">
    <div class="close"></div>
    <div class="head-info">
        <label class="lbl-1"> </label>
        <label class="lbl-2"> </label>
        <label class="lbl-3"> </label>
    </div>
    <div class="clear"></div>
    <div class="avtar">
        <img src="images/avtar.png"/>
    </div>
    <form action="${pageContext.request.contextPath}/loginServlet" method="post">
        <input type="text" name="administrators" class="text" value="Username" onfocus="this.value = '';"
               onblur="if (this.value == '') {this.value = 'Username';}">
        <div class="key">
            <input type="password" id ="password" name="password" value="Password" onfocus="this.value = '';"
                   onblur="if (this.value == '') {this.value = 'Password';}">
        </div>

        <%--<input type="text" name="checkcode" width="50px;"><img src="/hehewocao/checkCodeServlet" height="30px">--%>

        <div class="signin">
            <input type="submit" value="Login" >
        </div>
    </form>
</div>
<br>
<p align="center" style="color: red">
    <c:if test="${not empty login_msg}"><%--这里回显错误信息--%>
        ${login_msg}
    </c:if></p>
<div class="copy-rights">
    <p>Create By BOOM : 2495399053@qq.com</p>
</div>
</body>
</html>

好了,到此就完成了管理员登录的功能。
源码在我的GitHub上:git@github.com:hehewocao00544/JavaEE.git

发布了16 篇原创文章 · 获赞 15 · 访问量 5532
展开阅读全文

求大佬看看。控制台报calculate1 not define

03-26

``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Login</title> <!--<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">--> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!--<meta name="keywords" content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates" />--> <link href="css/style.css" rel='stylesheet' type='text/css' /> <!--webfonts--> <link href='http://fonts.useso.com/css?family=PT+Sans:400,700,400italic,700italic|Oswald:400,300,700' rel='stylesheet' type='text/html'> <link href='http://fonts.useso.com/css?family=Exo+2' rel='stylesheet' type='text/html'> <!--//webfonts--> <script src="js/jquery-1.9.1.min.js"></script> <script type="Javascript"> function calculate1() { $.ajax( { type: 'post', data: { mainScore: $("#mainScore").val(), studentAddScore: $("#studentAddScore").val(), cultureBuild: $("#cultureBuild").val(), reduceScore: $("#reduceScore").val(), }, url: "calculate.do", success: function (finalScore) { alert(finalScore); } } ); } </script> </head> <body> <!--SIGN UP--> <h1>五星文明专用计算器</h1> <div class="login-form"> <div class="close"></div> <div class="head-info"> <label class="lbl-1"> </label> <label class="lbl-2"> </label> <label class="lbl-3"> </label> </div> <div class="clear"></div> <div class="avtar"> <img src="images/avtar.png"/> </div> <!--<form action="/Calculate.do" method="post">--> <input type="text" class="text" id="mainScore" name="mainScore" placeholder="基本分"> <div class="key"> <input type="text" id="studentAddScore" name="studentAddScore" placeholder="楼栋学生加分"> </div> <div class="key"> <input type="text" id="cultureBuild" name="cultureBuild" placeholder="楼栋文化建设"> </div> <div class="key"> <input type="text" id="reduceScore" name="reduceScore" placeholder="减分项目"> </div> <button onclick="calculate1()">计算</button> </div> </body> </html> ``` 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览