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

最新推荐文章于 2023-10-01 10:40:13 发布

程序彤

最新推荐文章于 2023-10-01 10:40:13 发布

阅读量157

点赞数

分类专栏： ssm项目

本文链接：https://blog.csdn.net/m0_47119598/article/details/112634596

版权

ssm项目专栏收录该内容

24 篇文章 0 订阅

订阅专栏

声明一个类管理静态常量

/**
 * 声明一个类管理静态常量
 * @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弹层提示框

导入layer.js文件
绑定点击事件不使用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
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录