SpringMvc项目的创建(前后端分离和不分离)

1、前后端不分离

1、首先创建一个maven项目，选对jdk版本然后点击next

 然后输入项目名和保存位置点击finish

2、然后在pom中写打包方式，发布的都是war如图:

  让idea自动创建一个webapp目录

 3、在java目录下创建文件如下图：

 4、然后在pom中导入需要用到的依赖

可以去这两个网址下载https://mvnrepository.com/和https://maven.aliyun.com/mvn

需要用到的依赖有springmvc的(spring-webmvc)、servlet的（javax.servlet-api）、fastjson的(fastjson)、lombok的(lombok)、还有一个就是自己写的数据库封装

的(自己写就是数据库驱动)(mysql-connector-java)和注解的(javax.annotation-api)和jsp(javax.servlet.jsp-api)包和jstl(jstl)包.。

5、然后配置DispatcherServlet

首先在web.xml中加入配置信息,代码的具体作用在之前的spring环境搭建文章中提到过，这里带过

<servlet>
        <servlet-name>mvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>namespace</param-name>
            <param-value>springmvc</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>mvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
</servlet>

然后在创建namespace名字的配置文件(这两个的模板和代码作用在环境搭建的文章中都发过，这里直接用)

<mvc:annotation-driven>
        <mvc:message-converters register-defaults="false">//默认消息转化器去掉然后转json
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter"></bean>
        </mvc:message-converters>

    </mvc:annotation-driven>
    <context:component-scan base-package="com.neuedu.controller"></context:component-scan>
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"></property>
        <property name="prefix" value="/WEB-INF/pages/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>

6、要想把对象放入IOC容器还需要在程序启动的时候来读取配置文件(在web.xml中配置)

<!--服务器启动的时候，通过监听器来读取配置文件-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <listener>
        <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>

顺便过滤一下乱码

<!--乱码拦截器-->
    <filter>
        <filter-name>charsetfilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <!--把编码过滤成utf-8-->
            <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>charsetfilter</filter-name>
        <url-pattern>*</url-pattern>
    </filter-mapping>

7、然后在resource目录下创建applicationContext.xml文件（和springmvc.xml模板一样）,然后加入IOC容器扫描

<context:component-scan base-package="com.lyt.service"></context:component-scan>
    <context:component-scan base-package="com.lyt.dao"></context:component-scan>

8、环境基本就搭建完成了，然后来编写代码，演示一个简单的例子

总结构如下图：

 先创建一个实体类pojo，在里面写实体类User包含三个属性id、username、likes

然后编写他的dao层，接口中有一个查询所有用户的方法，具体实现类如下

@Controller//可以放入IOC容器
public class UserDaoImpl implements UserDao {
    @Override
    public List<User> list() {
        return JdbcUtil.executeQuery("select * from user",User.class);//调用封装好的jdbc工具
    }
}

然后写他的service层，接口中有一个查询所有用户的方法，来看具体实现类

@Service//可以放入IOC容器
public class UserServiceImpl implements UserService {
    @Resource
    UserDao userDao;

    @Override
    public List<User> list() {
        return userDao.list();
    }
}

最后写controller层

@Controller
public class user {
    @Resource
    UserService userService;

    @GetMapping("/index")
    String index(ModelMap modelMap){
        modelMap.addAttribute("list",userService.list());
        return "index";
    }
}

然后创建一个index.jsp(目录一定要跟springmvc.xml中配置的视图解析器地址对应上)

内容如下

然后配置一下Tomcat：

先点击+来找到tomcat的local

然后配置相关信息（端口号80的话就不用再地址中写了）

如果用热部署的话就修改一下这里

运行测试结果如下：

 这样就说明访问成功了，前面的代码具体含义在之前的文章中都介绍过了，模糊的可以去看看之前的部分。

2、前后端分离

前三步和1一样，第四步不用导入jsp(javax.servlet.jsp-api)包和jstl(jstl)包.

在配置DispatcherServlet的时候注意如下几个问题

1、配置文件的路径可以用calsspath来表示，就是java或者resource下(应为编译后这两个文件就会合并)

2、这里不用配置视图解析器，但是配置一下编码问题和跨域问题

 <mvc:annotation-driven>
        <mvc:message-converters register-defaults="false">
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
            <property name="supportedMediaTypes">
                <list>
                    <value>application/json;charset=utf-8;</value>
                </list>
            </property>
        </bean>
        </mvc:message-converters>

    </mvc:annotation-driven>
<!--解决跨域问题,/**就是可以走多层基本不会用/*一层结构-->
    <mvc:cors>
        <mvc:mapping path="/**"></mvc:mapping>
    </mvc:cors>

第六步和第七步也是一样的

下面演示一下具体的例子，具体结构和上一个也是基本类似的

但是需要改的是controller类，要把UserController改成下面的：

@RestController
public class user {
    @Resource
    UserService userService;

    @GetMapping("/user/index")
    List<User> list(){
        return userService.list();
    }
}

这个时候返回的就是json数据了，要用ajax去请求，这个时候在写一个ajax，具体位置就无所谓了，内容如下：

<head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            #wrap{
                width:90vw;
                height:90vh;    
                position:absolute;
                left:5vw;
                top:5vh;
            }
        </style>
        <script src="js/jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <div id="wrap"></div>
        <script>
            
                $.ajax({
                    url:'http://localhost:8848/user/index',
                    type:'get',
                    dataType:'json',
                    success:function(response){
                        console.log(response)
                    }
                    
                })
        </script>
    </body>

执行结果如下：