SpringMVC

学习视频：

动力节点

学习代码
Github

感谢！！！🙏这位老哥救我狗命

先上结果图：

这里是因为你的依赖包没有下载好，虽然你的pom.xml文件不报错，但是你的target---->WEB-INF里面lib目录下的依赖包不完整。所以大家可以看看你lib目录的依赖包是否完整
CSDN首先的结果

第二位老哥给出了这种情况的解决方法

先创建文件夹 directory

再添加library文件

真的要哭了改了两个小时，中午成功了，原因是没有把pom文件搞好

好家伙终于搞定了这个

这个也能显示了，原因是我忘记加#了，

jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有
元素

$("p.test").hide() - 隐藏所有 class="test" 的
元素

$("#test").hide() - 隐藏 id="test" 的元素

第一个例子

感觉是先搞定三个xml

maven pom xml
springmvc xml

创建 myspringmvc的xml

<!--添加包扫描-->
    <context:component-scan base-package="com.bjpowernode.controller"></context:component-scan>
    <!--添加视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--配置前缀-->
        <property name="prefix" value="/admin/"></property>
        <!--配置后缀-->
        <property name="suffix" value=".jsp"></property>
    </bean>

创建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">
<!--    注册mvc框架-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
<!--        url-pattern是指定拦截什么样的请求
            http://localhost:8080/demo.action
                这样的请求才会被拦截 -->
        <url-pattern>*.action</url-pattern>
    </servlet-mapping>
</web-app>

POM文件

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>test3-SpringMVC-HopeUse</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>


  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <!--添加springmvc的依赖-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
    <!--添加servlet的依赖-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>5.2.5.RELEASE</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>springmvc</finalName>
    <resources>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.xml</include>
          <include>**/*.properties</include>
        </includes>
      </resource>
      <resource>
        <directory>src/main/resources</directory>
        <includes>
          <include>**/*.xml</include>
          <include>**/*.properties</include>
        </includes>
      </resource>
    </resources>
  </build>
</project>

设置controller 也就是servlet

在webapp目录下新建admin目录,在admin目录下新建main.jsp页面,删除index.jsp页面,并新建,发送请求给服务器
开发控制器(Servlet),它是一个普通的类.

	  @Controller  //交给Spring去创建对象
	public class DemoAction {
	    /**
	     * 以前的Servlet的规范
	     * protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}
	     * action中所有的功能实现都是由方法来完成的
	     * action方法的规范
	     * 1)访问权限是public
	     * 2)方法的返回值任意
	     * 3)方法名称任意
	     * 4)方法可以没有参数,如果有可是任意类型
	     * 5)要使用@RequestMapping注解来声明一个访问的路径(名称)
	     *
	     */
	    @RequestMapping("/demo")
	    public String demo(){
	        System.out.println("服务器被访问到了.......");
	        return "main";  //可以直接跳到/admin/main.jsp页面上
	    }
	}

五种数据提交和获取方法

2022-09-01-16:34

index.jsp 网页代码：

<%--
  Created by IntelliJ IDEA.
  User: mcx
  Date: 2022/9/1
  Time: 09:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Hello</title>
</head>
<body>
<br><br>
<a href="${pageContext.request.contextPath}/demo.action">访问服务器</a>
<br>
<h2>
    方式一单个数据提交
</h2>
<form action="${pageContext.request.contextPath}/one.action" method="POST">
    姓名：<input name="myname"><br>
    年龄：<input name="age"><br>
    <input type="submit" value="提交">
</form>
<br>
<br>
<h2>方式二 对象封装提交</h2>
<form action="${pageContext.request.contextPath}/two.action">
    姓名：<input name="myname"><br>
    年龄：<input name="age"><br>
    <input type="submit" value="提交">
</form>

<br>
<br>
<h2>方式三 动态占位符提交</h2>
<a href="${pageContext.request.contextPath}/three/张三/22.action">第三种方式提交</a>
<br>
<br>
<h2>方式四 参数名称不一致</h2>
<form action="${pageContext.request.contextPath}/four.action">
    姓名：<input name="myname"><br>
    年龄：<input name="age"><br>
    <input type="submit" value="提交">
</form>
<br>
<br>
<h2>方式五 手工提取</h2>
<form action="${pageContext.request.contextPath}/five.action">
    姓名：<input name="myname"><br>
    年龄：<input name="age"><br>
    <input type="submit" value="提交">
</form>

</body>
</html>

action处理的class代码


package controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpServletRequest;

@Controller
public class DateSubmit {
    @RequestMapping("/one")
    //参数自动捕捉
    public String one(String myname,int age){
        System.out.println("myname is "+myname);
        System.out.println(age);
        return "main";
    }
    @RequestMapping("/two")
    public String two(User us){
        System.out.println(us);
        return "main";
    }
    @RequestMapping(value = "/three/{myname}/{age}")
    public String three(
        @PathVariable //路径上的参数进行获取如果名字不一样就是
                //@PathVariable("myname")这样，下面可以另外指定
        String myname,
        @PathVariable
        int age){
        System.out.println("myname = " + myname);
        System.out.println("age = " + age);
        return "main";
    }
    @RequestMapping("/four")
    public String four(
            @RequestParam("myname")
            String uname,
            int age){
        //  上面是传进来的是myname，但是我后端要用的是uname，/
        //  使用RequestParam即可。
        System.out.println("uname = " + uname);
        System.out.println(age);
        return "main";
    }
    @RequestMapping("/five")
    public String five(HttpServletRequest request){
        String myname = request.getParameter("myname");
        System.out.println("myname = " + myname);
        int age = Integer.parseInt(request.getParameter("age"));
        System.out.println("age = " + age);
        return "main";
    }
}

在web.xml配置了过滤器之后不会报中文

GET和POST不会报错了

<!--    web.xml -->


<!--    配置中文编码过滤器-->
    <filter>
        <filter-name>encode</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<!--   配置参数
            - encoding
            - forceRequestEncoding
            - forceResponseEncoding-->
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encode</filter-name>
        <url-pattern>/*</url-pattern>
<!--        所有请求都过滤-->
    </filter-mapping>
<!--   ️配置中文编码过滤器==========-->

AJAX

Jqeury简单初识

Query 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});
JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

ajax

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

ajax代码

<%--    导入jQuery函数库--%>
    <script src="js/jquery-3.6.1.js"></script>


<br><br><br>
<a href="javascript:showStu()">返回学生集合 </a>
<div id="mydiv">等待返回数据</div>
</body>
<script type="text/javascript">
    function showStu(){
        //使用jqueryAJAX的方法发送请求你
        $.ajax({
            url:"${pageContext.request.contextPath}/list.action",
            dataType:"json",
            type:"get",
            success:function (list) {
                var s="";
                $.each(list,
                    function (i,stu){
                    s+=stu.name+"---"+stu.age +"<br>";
                });
            //    上面是传进来的参数，有两个用，隔开了
                $("#mydiv").html(s);//显示在页面上
            }
        });
    }
</script>

posted @ 2022-08-31 19:57 Indullged 阅读(19) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Indullged Blogs