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>

執行結果如下：