简单的前端登录页面

springboot整合了springmvc的拦截功能。拦截了所有的请求。默认放行的资源是：resources/static/ 目录下所有静态资源。（不走controller控制器就能直接访问到资源）。

html页面如果放在resources/templates目录下，则需要走controller控制器，controller放行，允许该资源访问，该资源才能被访问到。否则就会报404错误（它不可以直接被访问）。

  mvc:
    view:
      prefix: /
      suffix: .html
    static-path-pattern: /**   # 静态文件请求匹配方式
  # 修改默认的静态寻址资源目录
  web:
    resources:
      static-locations: classpath:/templates/,classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/

controller 其他service dao自己根据情况写

 @PostMapping("/login")
    public Result login( @RequestBody Emp emp){
        Emp e =  empService.login(emp.getUsername(),emp.getPassword());
        if (e!=null){
            HashMap<String, Object> map = new HashMap<>();
            map.put("id",e.getId());
            map.put("username",emp.getUsername());
            map.put("name",e.getName());
            String jwt = JwtUtils.generateJwt(map);
            log.info("校验成功");
            return Result.success(jwt);
        }else {
            return Result.error("用户名或密码不正确");
        }
    }
    @PostMapping("/signIn")
    public Result signIn( @RequestBody Emp emp){
        Integer count =  empService.queryUserByUserName(emp.getUsername());
        if (count==0){
            if (empService.addEmp(emp)==1) {
                return Result.success("注册成功");
            }else {
                return Result.error("注册失败");
            }
        }else{
            return Result.error("用户名已存在");
        }
    }
    /**
     * 
     * @Description //TODO 前端离开name输入框异步请求查询用户名是否存在
     * @Date
     * @Param username
     * @return Integer
     **/
    @PostMapping("/queryUserByUserName")
    public Result queryUserByUserName( @RequestBody Emp emp){
        String username = emp.getUsername();
        Integer count =  empService.queryUserByUserName(username);
        if (count==0) {
            return Result.success("可用的用户名");

        }else {
            return Result.error("用户名已存在");
        }
    }

登录页面

<html>
<body>
<div class="wrapper">
    <!--    <form method="post">-->
    <div class="loginBox">
        <div class="loginBoxCenter">
            <p><label for="username">用户名：</label></p>
            <p><input type="text" id="username" name="text" class="loginInput" autofocus="autofocus"
                      required="required" autocomplete="off" placeholder="请输入邮箱/手机号" /></p>
            <!-- required 规定必需在提交之前填写输入字段-->


            <p><label for="password">密码：</label></p>
            <p><input type="password" id="password" name="password" class="loginInput" required="required"
                      placeholder="请输入密码" ></p>
            <p><a class="forgetLink" href="#">忘记密码?</a></p>
            <input id="remember" type="checkbox" name="remember">
            <label for="remember">记住登录状态</label>
        </div>
        <div class="loginBoxButtons">

            <button class="loginBtn" onclick="login()">登录</button>
            <button class="signBtn" onclick="location.href='/signIn.html'">新用户注册</button>
        </div>
    </div>
    <!--    </form>-->
</div>
</body>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="application/javascript">

    function login() {

        // alert("123")
        axios({
            method: "post",
            url: "http://localhost:8089/login",
            data:{
                username:document.getElementById('username').value, //放在函数外边取不到值
                password: document.getElementById('password').value
            }
           /* params: {  这种为拼接参数
                username:document.getElementById('username').value,
                password: document.getElementById('password').value
            }*/
        }).then(function (resp) {
            // alert(resp.data);
            if (resp.data.code === 1) {
                console.log("登录成功")
                window.location.href = "./system/home.html"
            }else {
                alert("用户名或密码错误")
                window.location.href = "/"
            }
        });
    }

</script>

</html>

　　注册页面

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>登陆界面</title>
  <style>
    html {
      background-color: #B5DEF2;
    }

    .wrapper {
      margin: 140px 0 140px auto;
      width: 884px;
    }

    .loginBox {
      background-color: #F0F4F6;
      /*上divcolor*/
      border: 1px solid #BfD6E1;
      border-radius: 5px;
      color: #444;
      font: 14px 'Microsoft YaHei', '微软雅黑';
      margin: 0 auto;
      width: 388px
    }

    .loginBox .loginBoxCenter {
      border-bottom: 1px solid #DDE0E8;
      padding: 24px;
    }

    .loginBox .loginBoxCenter p {
      margin-bottom: 10px
    }

    .loginBox .loginBoxButtons {
      /*background-color: #F0F4F6;*/
      /*下divcolor*/
      border-top: 0px solid #FFF;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      line-height: 28px;
      overflow: hidden;
      padding: 20px 24px;
      vertical-align: center;
      filter: alpha(Opacity=80);
      -moz-opacity: 0.5;
      opacity: 0.5;
    }

    .loginBox .loginInput {
      border: 1px solid #D2D9dC;
      border-radius: 2px;
      color: #444;
      font: 12px 'Microsoft YaHei', '微软雅黑';
      padding: 8px 14px;
      margin-bottom: 8px;
      width: 310px;
    }

    .loginBox .loginInput:FOCUS {
      border: 1px solid #B7D4EA;
      box-shadow: 0 0 8px #B7D4EA;
    }

    .loginBox .loginBtn {
      background-image: -moz-linear-gradient(to bottom, blue, #85CFEE);
      border: 1px solid #98CCE7;
      border-radius: 20px;
      box-shadow: inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
      color: #444;
      /*登录*/
      cursor: pointer;
      float: right;
      font: bold 13px Arial;
      padding: 10px 50px;
    }

    .loginBox .loginBtn:HOVER {
      background-image: -moz-linear-gradient(to top, blue, #85CFEE);
    }

    .loginBox a.forgetLink {
      color: #ABABAB;
      cursor: pointer;
      float: right;
      font: 11px/20px Arial;
      text-decoration: none;
      vertical-align: middle;
      /*忘记密码*/
    }

    .loginBox a.forgetLink:HOVER {
      color: #000000;
      text-decoration: none;
      /*忘记密码*/
    }

    .loginBox input#remember {
      vertical-align: middle;
    }

    .loginBox label[for="remember"] {
      font: 11px Arial;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <!--    <form method="post">-->
  <div class="loginBox">
    <div class="loginBoxCenter">
      <p><label for="username">用户名：</label></p>
      <p><input type="text" id="username" name="text" class="loginInput" autofocus="autofocus"
                required="required" autocomplete="off" placeholder="请输入邮箱/手机号" /></p>
      <!-- required 规定必需在提交之前填写输入字段-->
      <p><label for="name">姓名：</label></p>
      <p><input type="text" id="name" name="text" class="loginInput" autofocus="autofocus"
                required="required" autocomplete="off" placeholder="请输入姓名" /></p>
      <p><label for="gender">性别：</label></p>
      <p><input type="text" id="gender" name="text" class="loginInput" autofocus="autofocus"
                required="required" autocomplete="off" placeholder="请输入性别" /></p>

      <p><label for="password">密码：</label></p>
      <p><input type="password" id="password" name="password" class="loginInput" required="required"
                placeholder="请输入密码" ></p>


    </div>
    <div class="loginBoxButtons">

      <button class="loginBtn" onclick="signIn()">新用户注册</button>
    </div>
  </div>
  <!--    </form>-->
</div>
</body>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="application/javascript">


  function signIn() {

    // alert("123")
    axios({
      method: "post",
      url: "http://localhost:8089/signIn",
      data:{
        username:document.getElementById('username').value, //放在函数外边取不到值
        password: document.getElementById('password').value,
        name: document.getElementById('name').value,
        gender: document.getElementById('gender').value,
      }
      /* params: {  这种为拼接参数
           username:document.getElementById('username').value,
           password: document.getElementById('password').value
       }*/
    }).then(function (resp) {
      // alert(resp.data);
      if (resp.data.code === 1) {
        alert("注册成功，请登录")
        window.location.href="/login.html"
      }else {
        alert("该用户已存在")
      }
    });
  }
</script>

</html>

posted @ 2023-04-28 00:07 myWang 阅读(336) 评论(0) 收藏举报

刷新页面返回顶部

myWang

简单的前端登录页面

公告