SpringMVC---02

本文详细介绍SSM框架的搭建过程及应用场景,包括Spring、MyBatis和Spring MVC的配置与整合,以及如何通过这些技术实现前后端交互、数据持久化等功能。

补充

import

<import resource="classpath:applicationContext.xml" />

可以通过<import> 导入别的配置文件

重定向

返回"redirect:地址"。就可以重定向到指定地址

怎么给前端返回json数据

加入接口不希望跳转界面,希望返回一个json格式的数据,可以在这个接口上加@ResponseBody

如果我们希望一个Controller所有的方法都返回json格式的数据,这个时候可以使用@RestController代替@Controller

1、地址参数

在resful风格的接口中,会直接通过地址进行参数的传递,如,在进行详情查询的时候,我们需要传递参数id,这个时候id这个参数就可以放在地址中进行传递。

    @GetMapping("/detail/{id}/{name}")
    public String userDetailPage(@PathVariable Integer id, @PathVariable("name") String name) {
        System.out.println(id);
        System.out.println(name);
        return "user-detail";
    }

使用步骤:

  1. 定义参数
    1. 会在地址上通过{参数名}指定参数
  1. 获取参数
    1. 请求方法的参数中加上@PathVariable
  1. 传递参数,参数直接写在url里面
    1. /detail/id参数/name参数

2、设置SessionAttributes变量 

作用

可以多个请求之间共享数据,作用域是session作用域

package com.tledu.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.SessionAttributes;
import org.springframework.web.bind.support.SessionStatus;

@Controller
@RequestMapping(path="/hello")
@SessionAttributes(value= {"username","password","age"},types=
        {String.class,Integer.class})
public class HelloController {
    /**
     * 向session中存入值
     * @return
     */
    @RequestMapping(path="/save")
    public String save(Model model) {
        System.out.println("向session域中保存数据");
        model.addAttribute("username", "root");
        model.addAttribute("password", "123");
        model.addAttribute("age", 20);
        return "success";
    }
    /**
     * 从session中获取值
     * @return
     */
    @RequestMapping(path="/find")
    public String find(ModelMap modelMap) {
        String username = (String) modelMap.get("username");
        String password = (String) modelMap.get("password");
        Integer age = (Integer) modelMap.get("age");
        System.out.println(username + " : "+password +" : "+age);
        return "success";
    }
    /**
     * 清除值
     * @return
     */
    @RequestMapping(path="/delete")
    public String delete(SessionStatus status) {
        status.setComplete();
        return "success";
    }
}

怎么用

@SessionAttributes注解声明有哪些数据需要放在SessionAttributes中

通过model.addAttribute进行添加

通过model.getAttribute获取

通过SessionStatus status中status.setComplete();进行清除

3、SSM项目的搭建

引入依赖

<?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>com.tledu</groupId>
    <artifactId>student-manager</artifactId>
    <version>1.0-SNAPSHOT</version>
    <name>student-manager</name>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.source>1.8</maven.compiler.source>
        <junit.version>5.7.0</junit.version>
        <spring.version>5.2.5.RELEASE</spring.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-api</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.jupiter</groupId>
            <artifactId>junit-jupiter-engine</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>

        <!--Spring核心基础依赖-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-expression</artifactId>
            <version>${spring.version}</version>
        </dependency>


        <!-- 增加了切面 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.9.5</version>
        </dependency>

        <!-- spring jdbc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <!--spring mvc-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>

        <!--mybatis相关-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.4.5</version>
        </dependency>
        <!-- 与spring整合 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.3.1</version>
        </dependency>
        <!-- 数据库驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.12</version>
        </dependency>
        <!-- 连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.7</version>
        </dependency>
        <!--jstl, 标签库-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.1.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/taglibs/standard -->
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>
        <!--日志相关-->
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>


        <!--测试相关-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>


        <!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
        <!--通过注解生成get和set方法-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.12</version>
            <scope>provided</scope>
        </dependency>

        <!--
            json解析的依赖
                在我们接口返回实体类的时候,需要用到
        -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.3</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.3</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotations -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.3</version>
        </dependency>

        <!--alibaba提供的json工具,将对象和JSONObject相互转换-->
        <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.0</version>
            </plugin>
        </plugins>
    </build>
</project>

3.2 添加配置文件

添加applicationContext.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:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx" 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/aop
http://www.springframework.org/schema/aop/spring-aop-2.5.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--配置扫描注解-->
    <context:annotation-config/>
    <!--告诉spring,要扫描com.tledu包下面的注解-->
    <context:component-scan base-package="com.tledu.student_manager"/>
    <!--加上aop的约束-->
    <aop:aspectj-autoproxy/>

    <!--使用注解的方式进行MVC映射 -->
    <mvc:annotation-driven/>

    <!-- 视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <!--让spring去管理mybatis-->
    <!--需要把mybatis所需要的依赖,放到spring容器中-->
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <!-- 2) 数据库连接池 -->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        <!--最大连接数-->
        <property name="maxActive" value="${jdbc.max}"/>
        <!--初始空闲池的个数-->
        <property name="minIdle" value="${jdbc.min}"/>
    </bean>

    <!-- 3) 获取 SqlSessionFactory 工厂类-->
    <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml" />
    </bean>

    <!-- 4) 搜索有哪些 mapper 实现类,把mapper接口自动配置成 spring 中的 <bean>-->
    <bean id="scannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- name="basePackage":(起始)包名, 从这个包开始扫描-->
        <property name="basePackage" value="com.tledu.dao"/>
    </bean>

    <!-- 使使用注解配置的事务行为生效 -->
    <tx:annotation-driven transaction-manager="txManager"/><!-- 仍然需要一个PlatformTransactionManager -->
    <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- (这个需要的对象是在其他地方定义的) -->
        <property name="dataSource" ref="dataSource"/>
    </bean>
</beans>

添加jdbc.properties

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/erp16?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=GMT%2B8
jdbc.username=root
jdbc.password=root
jdbc.max=50
jdbc.min=10

添加mybatis-config.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <typeAliases>
        <package name="com.tledu.student_manager.model"/>
    </typeAliases>
    <mappers>
        <package name="com.tledu.student_manager.dao"/>
    </mappers>
</configuration>

添加log4j.properties配置

### Log4j配置 ###
#定义log4j的输出级别和输出目的地(目的地可以自定义名称,和后面的对应)
#[ level ] , appenderName1 , appenderName2
log4j.rootLogger=DEBUG,console,file
#-----------------------------------#
#1 定义日志输出目的地为控制台
log4j.appender.console = org.apache.log4j.ConsoleAppender
log4j.appender.console.Target = System.out
log4j.appender.console.Threshold=DEBUG
####可以灵活地指定日志输出格式,下面一行是指定具体的格式 ###
#%c: 输出日志信息所属的类目,通常就是所在类的全名
#%m: 输出代码中指定的消息,产生的日志具体信息
#%n: 输出一个回车换行符,Windows平台为"/r/n",Unix平台为"/n"输出日志信息换行
log4j.appender.console.layout = org.apache.log4j.PatternLayout
log4j.appender.console.layout.ConversionPattern=[%c]-%m%n
#-----------------------------------#
#2 文件大小到达指定尺寸的时候产生一个新的文件
log4j.appender.file = org.apache.log4j.RollingFileAppender
#日志文件输出目录
log4j.appender.file.File=log/info.log
#定义文件最大大小
log4j.appender.file.MaxFileSize=10mb
###输出日志信息###
#最低级别
log4j.appender.file.Threshold=ERROR
log4j.appender.file.layout=org.apache.log4j.PatternLayout
log4j.appender.file.layout.ConversionPattern=[%p][%d{yy-MM-dd}][%c]%m%n
#-----------------------------------#
#3 druid
log4j.logger.druid.sql=INFO
log4j.logger.druid.sql.DataSource=info
log4j.logger.druid.sql.Connection=info
log4j.logger.druid.sql.Statement=info
log4j.logger.druid.sql.ResultSet=info
#4 mybatis 显示SQL语句部分
log4j.logger.org.mybatis=DEBUG
#log4j.logger.cn.tibet.cas.dao=DEBUG
#log4j.logger.org.mybatis.common.jdbc.SimpleDataSource=DEBUG
#log4j.logger.org.mybatis.common.jdbc.ScriptRunner=DEBUG
#log4j.logger.org.mybatis.sqlmap.engine.impl.SqlMapClientDelegate=DEBUG
#log4j.logger.java.sql.Connection=DEBUG
log4j.logger.java.sql=DEBUG
log4j.logger.java.sql.Statement=DEBUG
log4j.logger.java.sql.ResultSet=DEBUG
log4j.logger.java.sql.PreparedStatement=DEBUG

配置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">

    <servlet>
        <servlet-name>basic</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!--指定配置文件-->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <!--可以放在任何地方 -->
            <!--<param-value>/a/b/c/d/xxxxxxxxx.xml</param-value> -->
            <!--
                由于我们的配置文件在resource目录下,所以需要如下配置
             -->
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
    </servlet>

    <!--把所有的请求交给了spring mvc进行处理-->
    <servlet-mapping>
        <servlet-name>basic</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
  
</web-app>

3.3 添加对应模块的内容

添加对应Controller层、service层、dao层代码,完成增删改查的接口

注意事项

  1. 关于相应的包扫描路径都需要进行修改
  2. 由于使用了mybatis,并且在java中添加了xml文件,所以需要在maven中进行配置,让maven可以编译到java中的xml文件

注意访问配置文件的时候需要加上classpath前缀,这样才能访问到

3.4 编写前端界面 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户列表</title>
</head>
<body>
<c:forEach items="${userList}" var="item">
    ${item.name}
</c:forEach>
</body>
</html>

3.5 配置静态文件目录

在applicationContext.xml中配置<mvc:resources mapping="/resources/**" location="/resources/" />

4、添加拦截器

 对于我们的项目来说,我们有些资源是需要登录之后才能访问到的,这个时候就需要我们给项目添加统一的拦截器,来保证我们资源的安全性

创建鉴权拦截器 

public class AuthInterceptor extends HandlerInterceptorAdapter {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        HandlerMethod handlerMethod = (HandlerMethod) handler;
        // 获取请求需要执行的方法名
        String methodName = handlerMethod.getMethod().getName();
        // 判断当前请求是否和登录操作相关
        HttpSession session = request.getSession(true);
        User loginUser = (User) session.getAttribute("loginUser");
        if (loginUser == null) {
            response.sendRedirect(request.getContextPath() + "/");
            // 终止后续请求
            return false;
        }
        // 放行
        return super.preHandle(request, response, handler);
    }
}

在spring中配置拦截器

<mvc:interceptors>
        <mvc:interceptor>
            <!-- 以下配置中,必须按顺序配置:mapping > exclude-mapping > bean  -->
            <!-- 1.mapping:拦截路径 , 可以有多个mapping节点 -->
            <mvc:mapping path="/**"/>
           	<mvc:mapping path="/user/**"/>
            <!-- 不再拦截路径中的请求,完全不受理 -->
            <!-- 2.exclude-mapping:白名单,可以配置多个 -->
            <mvc:exclude-mapping path="/user/login" />
            <!-- 3.bean:配置拦截器类,只配置class即可 -->
            <bean class="com.tledu.student_manager.interceptor.AuthInterceptor"/>
        </mvc:interceptor>
    </mvc:interceptors>

实现登录

  1. 添加了登录界面,在登录界面里进行了表单提交
    1. 对应提交到user/login地址
  1. 在后台实现登录功能
    1. dao层根据用户名查询出用户
    2. 判断用户是否存在,不存在抛出用户不存在异常
    3. 存在判断密码是否正确,不正确抛出密码错误的异常
    4. 登录成功,将用户写入session
    5. 跳转页面
  1. 添加拦截器
    1. 在拦截器里,判断用户是否存在,如果不存在就跳转到首页
    2. 存在就放行
  1. 配置拦截器
    1. 配置哪些地址需要经过这个拦截器
    2. 配置那些地址是不需要拦截的

地址重定向

return "redirect:/user/list";

可以放回redirect: 进行地址重定向

5、添加异常处理

在项目运行过程中,难免会出现异常情况,这个时候,如果直接给用户显示一堆报错信息,就不太好了,针对系统的异常,我们往往需要统一进行处理,并且给用户进行一个比较友善的返回,这个时候就需要,我们进行统一的异常处理。

添加业务异常类

public class LoginException extends Exception {
    public LoginException() {
    }

    public LoginException(String message) {
        super(message);
    }
}

添加局部异常处理

 @ExceptionHandler(value = {LoginException.class})
public String handlerException(LoginException e, HttpServletRequest request) {
        // 需要手动设置错误信息到页面
        request.setAttribute("e", e);
        return "error";
}

添加全局异常处理

@ControllerAdvice
public class TestController {
    @ExceptionHandler(value = {LoginException.class})
    public String handlerException(LoginException e, HttpServletRequest request) {
        // 需要手动设置错误信息到页面
        request.setAttribute("e", "e");
        return "error";
    }
}

通过@ControllerAdvice这个注解可以对Controller进行增强,可以添加全局异常处理

根据不同的场景的,返回不同的内容

@ExceptionHandler(value = {Exception.class})
    public ModelAndView error(Exception e, HttpServletRequest request, HttpServletResponse response) {
        if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
            // ajax调用
            e.printStackTrace();
            String sOut = "";
            StackTraceElement[] trace = e.getStackTrace();
            for (StackTraceElement s : trace) {
                sOut += "\tat " + s + "\r\n";
            }

            AjaxResult<String> ajaxResult = new AjaxResult<String>(500,sOut);
            JSONObject jsonObject = JSONObject.parseObject(JSON.toJSONString(ajaxResult));
            return new ModelAndView(new MappingJackson2JsonView(),jsonObject);
        } else {
            Map<String,Object> map = new HashMap<>();
            map.put("error", e);
            // 网站访问
            return new ModelAndView("error",map);
        }
    }

6、文件上传功能的实现

引入文件上传的maven依赖

			<dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.2</version>
        </dependency>

添加文件上传配置文件

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--单位b-->
        <property name="maxUploadSize" value="5000000000"/>
    </bean>

定义文件上传的接口

@PostMapping("/upload")
    public String upload(MultipartFile file, HttpServletRequest request) {
        if (file.isEmpty()) {
            // 为空就不搭理了
            return "error";
        }
        // 说明上传了
        // getRealPath 获取指定目录的绝对路径,比如 E:/xxx/xx/xx 找的是TomCat下的路径,不是工作空间
        // 重新编译后就消失了
        String realpath = request.getServletContext().getRealPath(
                "/resources/upload");
        // E:\SortWare\Work\apache-tomcat-7.0.93\webapps\SpringMVC_02_User\resources\
        // upload/
        // System.out.println(realpath);
        // getOriginalFilename 获取文件名和后缀名
        File destFile = new File(realpath + "/"
                + System.currentTimeMillis() + file.getOriginalFilename());
        // org.apache.commons.io.FileUtils
        try {
            // 第一个参数是文件源的流
            // 第二个参数是到哪去
            FileUtils
                    .copyInputStreamToFile(file.getInputStream(), destFile);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "success";
    }

流程:

  1. 引入依赖
  2. 配置文件上传bean
  3. 定义接口 
    1. MultipartFile 接收前端传过来的文件
    2. 知道文件放在什么位置
      1. request.getServletContext.getRealPath("/resources/image")
      2. 最终生成的文件
        1. 需要创建File
      1. 把流写到最终生成文件里
  1. 通过地址访问到这个图片
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>用户维护</title>
        <script src="${pageContext.request.contextPath}/resources/js/jquery-1.7.2.js"></script>
    </head>
    <body>
    <input id="file" type="file">
    <button id="uploadBtn">上传</button>
    <div id="imageBox">
    
    </div>
    <script>
        $("#uploadBtn").click(function () {
            console.log("文件上传");
            // 获取文件
            var files = $("#file").prop("files");
            if (files.length == 0) {
                alert("请选择文件");
                return;
            }
            var file = $("#file").prop("files")[0];
            // 进行文件上传的操作
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: "${pageContext.request.contextPath}/user/upload/avatar",
                type: "POST",
                data: formData,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType: false,
                // 告诉jQuery不要去处理发送的数据
                processData: false,
                success(res) {
                    console.log(res);
                    $("#imageBox").append(`
                        <div>
                            <img src="${pageContext.request.contextPath}` + res.data + `"/>
                        </div>`
                    )
                }
            });
        });
    </script>
    </body>
    </html>
    

    配置地址映射

    idea配置

     

    tomcat地址映射

    修改配置文件conf/server.xml

    在Host下添加

    <Context path="/upload" docBase="D:\upload"></Context>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值