SSM(Vue3+ElementPlus+Axios+SSM前后端分离)【二】

简介: SSM(Vue3+ElementPlus+Axios+SSM前后端分离)【二】

SSM–基础环境搭建【二】


项目介绍


项目功能/界面


● SSM 整合项目界面


bd907d709e113726da5f591c0b7847d3.png


项目全局配置web.xml


  1. 配置furns_ssm\src\main\webapp\WEB-INF\web.xml , 和项目全局相关的
<!DOCTYPE web-app PUBLIC
        "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
    <display-name>Archetype Created Web Application</display-name>
    <!--  1、配置启动Spring容器:
        主要配置和业务逻辑有关的,比如数据源,事务控制等-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <!--
        ContextLoaderListener: 监听器
        1、ContextLoaderListener监听器作用是启动Web容器时,自动装配ApplicationContext的配置信息
        2、它实现了ServletContextListener接口,在web.xml配置该监听器,启动容器时,会默认执行它实现的方法
    -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <!--
    1、配置前端控制器/中央控制器/分发控制器
    2. 用户的请求都会经过它的处理
    3. 因为没有指定springmvc的配置文件,那么就会默认按照 servlet-name-servlet.xml 来获取
    4. 读取配置文件的原理,我在前面讲解springmvc时写过.
   -->
    <servlet>
        <servlet-name>springDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!--在web项目启动时,就自动的加载DispatcherServlet-->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springDispatcherServlet</servlet-name>
        <!--说明
            1. 这里我们配置的url-pattern是 / ,表示用户的请求都经过 DispatcherServlet
        -->
        <url-pattern>/</url-pattern>
    </servlet-mapping>
-->
    <!--配置Spring提供的过滤器,解决中文乱码问题,
    字符编码过滤器,一定要放在所有过滤器的最前面。
    解读
    1. forceRequestEncoding 配置成 true ,表示该过滤器会执行 request.setCharacterEncoding(encoding);
    2. forceRequestEncoding 配置成 true, 表示该过滤器会执行 response.setCharacterEncoding(encoding);
    -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <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>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!--配置HiddenHttpMethodFilter
       1. 使用Rest风格的URI,可以把页面发过来的post请求转为指定的delete或者put请求
       2. 配置url-pattern 是 /* 表示请求都经过 hiddenHttpMethodFilter过滤
   -->
    <filter>
        <filter-name>hiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>hiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>


  1. 如果web.xml 的 报红, 选择只是高亮syntax 即可, 本身没有问题,就是DTD 的约束

86ef52d82fee7f36531bedcab5685565.png


SpringMVC 配置


1、创建SpringMVC 的配置文件dispatcher-servlet.xml : 主要包含网站跳转逻辑的控制

1)配置前端控制器/中央控制器/分发控制器

2)用户的请求都会经过它的处理

3)因为没有指定springmvc的配置文件,那么就会默认按照 servlet-name-servlet.xml 来获取

4)读取配置文件的原理,前面讲解springmvc时写过.67020e7715ca5b54b4683794c823b111.png

先创建一个空的配置文件,后面在修改。

2 、创建furns_ssm\src\main\webapp\WEB-INF\dispatcher-servlet.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 https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!-- 解读
        1. 扫描com.nlc包
        2. use-default-filters="false" 禁用默认过滤规则
        3. context:include-filter 配置说明 只是扫描控制器
    -->
    <context:component-scan base-package="com.nlc.furn">
        <!--SpringMvc只是扫描Controller-->
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!--配置视图解析器[默认视图解析器]-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!--配置属性suffix 和 prefix-->
        <property name="prefix" value="/WEB-INF/views/"/>
        <property name="suffix" value=".html"/>
    </bean>
    <!--加入两个常规配置-->
    <!--支持SpringMVC的高级功能,比如JSR303校验, 映射动态请求-->
    <mvc:annotation-driven></mvc:annotation-driven>
    <!--将springmvc不能处理的请求,交给tomcat处理,比如css, js-->
    <mvc:default-servlet-handler/>
</beans>


image.png3、创建项目相关的包ca86fbf2f6a9abf73585207bef1a6877.png

4、配置扫描com.nlc 包的控制器

<!--
        1. 扫描com.nlc.furn包 [包括子包]
        2. context:include-filter 配置说明扫描控制器
    3. use-default-filters="false" 禁用默认过滤规则
    -->
  <context:component-scan base-package="com.nlc"  use-default-filters="false">
    <!-- SpringMVC 只扫描控制器-->
     <context:include-filter type="annotation"
     expression="org.springframework.stereotype.Controller"/>
  </context:component-scan>


5、配置视图解析器

<!-- 配置视图解析器,指定页面返回-->
<bean  class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/views/"></property>
    <property name="suffix" value=".html"></property>
</bean>


6、两个常规配置

<!-- 两个常规配置-->
<!-- 将SpringMVC 不能处理的请求交给Tomcat, 比如请求css,js 等-->
<mvc:default-servlet-handler/>
<!-- 能支持SpringMVC 高级功能,比如JSR303 校验,映射动态请求-->
<mvc:annotation-driven/>


7、完成测试

  1. 创建furns-ssm\src\main\java\com\nlc\furns\controller\TestController.java
@Controller
public class TestController {
    @RequestMapping("/hi")
    public String hi() {
        System.out.println("TestController-hi");
        return "hi";
    }
}


  1. 创建furns-ssm\src\main\webapp\WEB-INF\views\hi.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hi</title>
    </head>
    <body>
      <h1>hi, 成功~</h1>
    </body>
</html>


启动Tomcat , 浏览器输入http://localhost:8080/ssm/hi

68d3b6fe6c24fa23add50b9697d4401b.png

相关文章
|
17天前
|
JSON 前端开发 JavaScript
Vue3 Ajax(axios)
Vue3 Ajax(axios)
|
17天前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
17 0
|
8天前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
15天前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
17天前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
17 1
|
17天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
54 0
|
17天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
17天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
43 0
|
17天前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
21 0
|
17天前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件