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

相关文章
|
1月前
|
资源调度 JavaScript
|
1月前
|
缓存 JavaScript 搜索推荐
|
1月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
93 4
|
1月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
116 1
|
1月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
141 1
|
2月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
1月前
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
32 0
|
2月前
|
JavaScript
Vue3基础(21)___在axios.js中使用路由跳转
本文介绍了在Vue 3中如何在axios.js中使用路由跳转,通过直接引入路由实例并使用`router.push`实现页面跳转。
115 0