彤筹网ssm(二)Day02之管理员登录页面(至此基于maven父子工程的ssm环境搭建完毕)

声明一个类管理静态常量

/**
 * 声明一个类管理静态常量
 * @Author Li Weitong
 * @Date 2021/1/14 18:56
 */
public class TongchouConstant {
    public static final String ATTR_NAME_EXCEPTION = "exception"; // exception
    public static final String MESSAGE_LOGIN_FAILED = "抱歉,账号密码错误,登陆失败,请重新输入!";
    public static final String MESSAGE_LOGIN_ACCT_ALREADY_IN_USE = "抱歉,此账号正在被使用!";
    public static final String MESSAGE_ACCESS_FORBIDEN = "请登录之后再访问!";

}

配置view-controller

将管理员登录页面写在WEB-INF下,现在直接访问其内部资源自然是访问不到的。
现使用基于注解的方式不必写handler方法,直接把请求地址的视图名称关联起来。
方式一:

@RequestMapping("/admin/to/login/page")
public String toLoginPage(){
	return "admin-login";
}

方式二:
一行配置替代了4行java代码

<mvc:view-controller path="/admin/to/login/page" view-name="admin-login"/>

使用layer弹层提示框

  1. 导入layer.js文件
  2. 绑定点击事件不使用alert,而使用layer.msg(“Layer的弹框”)

截止项目搭建最终完成时的主页

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" isErrorPage="true" %>
<html>
<head>
    <title>主页</title>
<%--    base标签大坑,前面的斜杠必须去除,后面的斜杠必须保留,今后的所有地址,如果想参考base标签,开头不能写斜杠--%>
<%--    总结:
        1.端口号前面的冒号不能省略。
        2.contextPath前面不能写/
        3.contextPath后面必须写/
        4.不能以/开头
--%>
    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
<%--
D:\学习\尚硅谷javaWeb\尚筹网+源码等\代码\代码\day03\atcrowdfunding01-admin-parent\atcrowdfunding02-admin-webui\src\main\webapp
--%>
    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script src="layer/layer.js"></script>
    <script>
        $(function () {
            $("#btnSendArray").click(function () {
                var array = [1,2,3,4,5];
                var jsonString = JSON.stringify(array);
                console.log(array);
                console.log(array.length);
                console.log(jsonString);
                console.log(jsonString.length);
                $.ajax({
                   url:"sendarray",
                    type:"post",
                    dataType:"text",
                    data:jsonString,
                    contentType:"application/json;charset=UTF-8", // 请求体的内容类型
                    success:function (data) {
                       alert(data)
                    },
                    error:function (data) {
                       alert(data)
                    }
                });
            });
            $("#btn2").click(function () {
                layer.msg("Layer的弹框")
            });
        });
    </script>
</head>
<body>
<a href="testssm">跳转</a><hr>
<button id="btnSendArray">send array</button>
<button id="btn2">layer弹层</button>
</body>
</html>

管理员登录页面

<%--User: 24390 Date: 2021/1/14 Time: 20:25--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" isErrorPage="true" %>
<html>
<head>
    <title>主页</title>
    <%--    base标签大坑,前面的斜杠必须去除,后面的斜杠必须保留,今后的所有地址,如果想参考base标签,开头不能写斜杠
        总结:1.端口号前面的冒号不能省略。2.contextPath前面不能写/3.contextPath后面必须写/4.不能以/开头
    --%>
    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <style>

    </style>
    <title>彤筹网-管理员登录</title>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a class="navbar-brand" href="index.html" style="font-size: 32px;">彤筹网-创意产品众筹平台</a>
                </div>
            </div>
        </div>
    </nav>
    <div class="container">
<%--        springmvc配置文件31行--%>
        <form action="/admin/do/login" method="post" class="form-signin" role="form">
            <h2 class="form-signin-heading">
                <i class="glyphicon glyphicon-log-in"></i> 管理员登录
            </h2>
            <p>${requestScope.exception.message }</p>
            <div class="form-group has-success has-feedback">
<%--                管理员账号loginAcct--%>
                <input type="text" name="loginAcct" value="zyb" class="form-control" id="inputSuccess1"
                       placeholder="请输入登录账号" autofocus> <span
                    class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-success has-feedback">
<%--                管理员密码userPswd--%>
                <input type="text" name="userPswd" value="123456" class="form-control" id="inputSuccess2"
                       placeholder="请输入登录密码" style="margin-top: 10px;"> <span
                    class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <button type="submit" class="btn btn-lg btn-success btn-block">登录</button>
        </form>
    </div>
</body>
</html>

输入http://localhost:8080/admin/to/login/page,从而访问admin-login.jsp

<mvc:view-controller path="/admin/to/login/page" view-name="admin-login"/>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值