简单springMVC的web登入实现

最新推荐文章于 2024-08-04 18:43:48 发布

看出生就知道不一样

最新推荐文章于 2024-08-04 18:43:48 发布

阅读量334

点赞数

分类专栏： springmvc

本文链接：https://blog.csdn.net/weixin_42056943/article/details/90082595

版权

springmvc 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

环境需求

jar包

org.springframework.spring-webmvc
org.springframework.spring-aop

js

jquery.js

编译环境

Tomcat 8.5
jdk 8

编译工具

idea

搭建项目

菜单栏 file -> new -> project 打开 new project
如果本地有jar包，就是用第一个Use library导入架包。没有就选择Download下载架包。

点击next ，再输入项目名称

部署项目

项目的部署主要修改 web.xml
再 web->WEB-INF中找到web.xml

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 配置springMVC需要加载的配置文件 spring-web.xml-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
                  <!-- spring-web.xml  需要自己创建-->
            <param-value>classpath:spring-web.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
          <!-- 处理所有 url  -->
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>

配置spring-mvc.xml

在这里插入图片描述
创建文件夹re 右击创建的re文件夹 ->选择 Mark Directory as -> 点击 Test Resources Root
再新建一个spring-web.xml文件

spring-web.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans.xsd
	http://www.springframework.org/schema/context
	http://www.springframework.org/schema/context/spring-context.xsd
	http://www.springframework.org/schema/mvc
	http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

    <!-- 配置SpringMVC -->
    <!-- 1.开启SpringMVC注解模式 -->
    <!-- 简化配置： (1)自动注册DefaultAnootationHandlerMapping,AnotationMethodHandlerAdapter
        (2)提供一些列：数据绑定，数字和日期的format @NumberFormat, @DateTimeFormat, xml,json默认读写支持 -->
    <mvc:annotation-driven/>

    <!-- 2.静态资源默认servlet配置 (1)加入对静态资源的处理：js,gif,png (2)允许使用"/"做整体映射 -->
    <mvc:default-servlet-handler/>

    <!-- 3.配置jsp 显示ViewResolver -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
  	    <!-- jsp 文件所在的路径 -->
        <property name="prefix" value="/WEB-INF"/>
        <!-- 可以映射的文件类型 -->
        <property name="suffix" value=".jsp"/>
    </bean>

    <!-- 4.扫描web相关的bean      base-package是包的名称 -->
    <context:component-scan base-package="controller"/>
</beans>

编写controller层

理解为就是服务器和前端对接的地方
右击src 新建一个名称为 controller 的包
new -> package
在这里插入图片描述
再新建一个类 testController

testController

package controller;

import org.springframework.web.bind.annotation.*;

@RestController
public class testController {

    @RequestMapping(value = "/sign_in",
            method = RequestMethod.POST)
    public String sign_in(
            @RequestParam("name") String name,
            @RequestParam("pass") String pass){
        String n = "yyy",p = "123";
        System.out.println(name);
        if(!n.equals(name))
            return "1"; 
        else if(!p.equals(pass))
            return  "2";
        return "3";
    }
}

web界面

创建一个js文件夹将jquery.js 放在里面

在 index.jsp 中

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: OU
  Date: 2019/5/9
  Time: 19:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>

  <body>
  <a href="http://www.taobao.com">我自己</a>
    用户名：<input type="text" id="yh" ><br>
    密  码：<input type="password" id="mm"><br>
    <button onclick="login()" style="background-color: blue">登入</button>
  </body>
  <script src="js/jquery.js"></script>
<script>
  function login() {
      var name = $("#yh").val();
      var pass = $("#mm").val();
      console.log(name)
      console.log(pass)
    $.ajax({
        type:"post",
        url:"/sign_in",
        data:{
            name:$("#yh").val(),
            pass:$("#mm").val()
        },success:function (data) {
            alert(data)
        }
    })
  }
</script>
</html>