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

相关文章
|
19天前
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
18 0
|
26天前
|
JSON JavaScript API
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
|
28天前
|
XML 前端开发 JavaScript
Vue3数据交互axios
Vue3数据交互axios
17 0
|
2月前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
2月前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
39 1
|
2月前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
33 0
|
2月前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
289 0
|
21天前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
17 1
|
3天前
|
JSON JavaScript 前端开发
Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
在Vue项目中,高效的前后端通信是构建丰富用户体验的关键。axios作为前端与后端沟通的桥梁,其重要性不言而喻。本文将带您领略axios的魅力,从基本概念、安装方法,到高级应用技巧,助您快速掌握在Vue中利用axios进行HTTP请求的精髓。我们不仅会探讨axios的基础用法,如GET、POST请求,还将深入探索跨域配置、全局注册以及设置拦截器等高级功能,助您轻松实现优雅的前后端通信。
|
29天前
|
JavaScript
vue对axios封装
vue对axios封装
30 2