SSM多模塊----Vue+Iview

時間 2019-11-17

標籤 ssm 多模塊 vue+iview vue iview 简体版

原文原文鏈接

https://github.com/Loudsa/student項目地址javascript

項目結構目錄css

在根目錄的pom文件引入如下幾個包：html

 <properties>
                <spring-version>5.1.0.RELEASE</spring-version>
                <jackson-version>2.9.7</jackson-version>
                <jstl-version>1.2</jstl-version>
                <mybatis-version>3.4.6</mybatis-version>
                <mybatis-spring-version>1.3.2</mybatis-spring-version>
                <c3p0-version>0.9.5.2</c3p0-version>
                <mysql-version>8.0.12</mysql-version>
            </properties>

            <dependencies>
                <!--1.Spring包-->
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-beans</artifactId>
                    <version>${spring-version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-context</artifactId>
                    <version>${spring-version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-core</artifactId>
                    <version>${spring-version}</version>
                </dependency>

                <!--1.Spring項目跟mybatic中融合須要的2個東西-->
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-tx</artifactId>
                    <version>${spring-version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-jdbc</artifactId>
                    <version>${spring-version}</version>
                </dependency>

                <!--2.SpringMVC的包-->
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-web</artifactId>
                    <version>${spring-version}</version>
                </dependency>
                <dependency>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-webmvc</artifactId>
                    <version>${spring-version}</version>
                </dependency>

                <!--2.SpringMVC中，ResponseBody時要用到的默認的JSON解析引擎-->
                <dependency>
                    <groupId>com.fasterxml.jackson.core</groupId>
                    <artifactId>jackson-databind</artifactId>
                    <version>${jackson-version}</version>
                </dependency>
                <dependency>
                    <groupId>com.fasterxml.jackson.core</groupId>
                    <artifactId>jackson-core</artifactId>
                    <version>${jackson-version}</version>
                </dependency>
                <dependency>
                    <groupId>com.fasterxml.jackson.core</groupId>
                    <artifactId>jackson-annotations</artifactId>
                    <version>${jackson-version}</version>
                </dependency>


                <!--4.JSP的JSTL依賴，若是不用，能夠不寫-->
                <dependency>
                    <groupId>javax.servlet</groupId>
                    <artifactId>jstl</artifactId>
                    <version>${jstl-version}</version>
                </dependency>

                <!--5.MyBatis的依賴包-->
                <dependency>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis</artifactId>
                    <version>${mybatis-version}</version>
                </dependency>

                <!--
                5.
                1.MyBatis的SqlSession提供指定的方法來處理編程式的事務（手動寫commit或rollback等代碼）
                2.但當使用mybatis-spring這個組件時，bean會使用Spring管理的SqlSession。
                Spring一般都是處理事務（不用程序員來寫commit）

                -->
                <dependency>
                    <groupId>org.mybatis</groupId>
                    <artifactId>mybatis-spring</artifactId>
                    <version>${mybatis-spring-version}</version>
                </dependency>

                <dependency>
                    <groupId>com.mchange</groupId>
                    <artifactId>c3p0</artifactId>
                    <version>${c3p0-version}</version>
                </dependency>
                <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
                <dependency>
                    <groupId>mysql</groupId>
                    <artifactId>mysql-connector-java</artifactId>
                    <version>8.0.18</version>
                </dependency>
            </dependencies>

在dao層中引入entity-module模塊vue

如上圖操做,在service層引入 entity和dao層java

在action層引入entity層和dao層mysql

將web層下的src目錄刪除，由於用不着jquery

在web層的 pom目錄中git

而後新建resources資源目錄，以及webapp網頁資源目錄程序員

緊接着，在web目錄的pom文件繼續添加github

<build>
         <resources>
             <resource>
                 <directory>resources</directory>
             </resource>
         </resources>
         <plugins>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-war-plugin</artifactId>
                 <version>3.2.2</version>
                 <configuration>
                     <webResources>
                         <resource>
                             <directory>webapp</directory>
                         </resource>
                     </webResources>
                 </configuration>
             </plugin>
         </plugins>
     </build>

在webapp目錄下新建WEB-INF在WEB-INF目錄下新建web.xml，插入以下代碼

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">

    <!--這是springmvc的配置-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
    </servlet>

    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--這是spring的配置-->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <!-- Spring監聽器 -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <!-- 字符編碼過濾器 -->
    <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>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!-- 容許返回html視圖 -->
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
</web-app>

在resources新建applicationContext.xml、jdbc.properties、springmvc.xml

分別插入以下代碼

applicationContext.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:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!-- 自動掃描 -->
    <context:component-scan base-package="com.nf" />
    <!-- 引入配置文件,spring2.5之後的寫法，以前的是bean class=org.springframework.beans.factory.config.PropertyPlaceholderConfigurer -->
    <context:property-placeholder location="classpath:jdbc.properties"></context:property-placeholder>
    <!--配置C3P0 dataSource-->
    <bean id="myDataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driverClassName}"></property>
        <property name="jdbcUrl" value="${jdbc.url}"></property>
        <property name="user" value="${jdbc.username}"></property>
        <property name="password" value="${jdbc.password}"></property>
        <!-- 鏈接池中保留的最小鏈接數，默認爲：3 -->
        <property name="minPoolSize" value="3" />
        <!-- 鏈接池中保留的最大鏈接數。默認值: 15 -->
        <property name="maxPoolSize" value="15" />
        <!-- 初始化鏈接池中的鏈接數，取值應在minPoolSize與maxPoolSize之間，默認爲3 -->
        <property name="initialPoolSize" value="3"/>
    </bean>

    <!--
    此處，SqlSessionFactory以及MapperScannerConfigurer就是書本12.4章的內容
    做用：實現書本第3章代碼，一行都不用寫，直接生成dao的實現類，不用任何編碼
    也不須要寫一行mybatis的代碼。
    ps.這就是依賴於spring神的幫助
    -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="myDataSource"></property>
        <property name="mapperLocations" value="classpath*:mapper/*.xml"></property>
    </bean>

    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--掃描dao層的接口interface-->
        <property name="basePackage" value="com.nf.dao" />
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
    </bean>
    <!--mapper xml文件就像實現類，它是怎麼知道對應哪一個dao層的接口的？-->

    <!--聲明式事務管理-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="myDataSource"></property>
    </bean>
    <tx:annotation-driven transaction-manager="transactionManager" proxy-target-class="true"></tx:annotation-driven>

</beans>

jdbc.properties

jdbc.driverClassName=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/myschool?serverTimezone=GMT%2B8&useSSL=false&allowPublicKeyRetrieval=true
jdbc.username=root
jdbc.password=123456

springmvc.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" xmlns:aop="http://www.springframework.org/schema/aop"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd">


    <context:component-scan base-package="com.nf">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Service" />
    </context:component-scan>

    <!--mvc:annotation-driven 是告訴springmvc須要解析：@ResponseBody-->
    <!--若是使用jackson，能夠不寫裏面的bean，由於是默認-->
    <mvc:annotation-driven></mvc:annotation-driven>

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/view/"></property>
        <property name="suffix" value=".html"></property>
    </bean>
    <mvc:annotation-driven/>
    <mvc:resources mapping="/css/**" location="/WEB-INF/css/"></mvc:resources>
    <mvc:resources mapping="/js/**" location="/WEB-INF/js/"></mvc:resources>
    <mvc:resources mapping="/img/**" location="/WEB-INF/img/"></mvc:resources>

</beans>

/**Student實體類**/
package com.nf.entity;

import com.fasterxml.jackson.annotation.JsonFormat;
import org.springframework.format.annotation.DateTimeFormat;

import java.sql.Date;

public class Student {
     
    private Integer id;
    private String userName;
    private String sex;
    @DateTimeFormat(pattern="yyyy-MM-dd")
    private Date birt;
    private Integer age;
    
    public Integer getAge() {
        return age;
    }
    public void setAge(Integer age) {
        this.age = age;
    }
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }
// 這個註解是爲了將json格式的日期轉爲正常格式
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
    public Date getBirt() {
        return birt;
    }
    public void setBirt(Date birt) {
        this.birt = birt;
    }
    
    
    
}

StudentDao接口

public interface StudentDao {
    
    public List<Student> getAllStudents();

}

StudentMapper.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.nf.dao.StudentDao">


    <resultMap id="stuAll" type="com.nf.entity.Student">
        <id property="userName" column="user_name"/>
        <result property="sex" column="sex"/>
        <result property="birt" column="birt"/>
        <result property="age" column="age"/>
    </resultMap>
    <select id="getAllStudents" resultMap="stuAll">
        select * from student
    </select>
</mapper>

的service

public interface StudentService {
    public List<Student> getAllStudents();
}

@Service

public class StudentServiceImpl implements StudentService {
    @Autowired
    private StudentDao studentDao;

    public List<Student> getAllStudents() {

        List<Student> stuList = studentDao.getAllStudents();
        
        
        Calendar calendar = Calendar.getInstance();//儲存的時間，就是如今
        int year_now = calendar.get( Calendar.YEAR );
        int month_now =calendar.get( Calendar.MONTH )+1;
        int day_now = calendar.get(Calendar.DAY_OF_MONTH);
        
        System.out.println(year_now);
        System.out.println(month_now);
        System.out.println(day_now);
        for (Student stu:stuList){
            calendar.setTime(stu.getBirt());
            int year_pass = calendar.get( Calendar.YEAR );
            int month_pass =calendar.get( Calendar.MONTH )+1;
            int day_pass = calendar.get(Calendar.DAY_OF_MONTH);
            int age = year_now - year_pass;
            //還沒生日
            if (month_now<month_pass) {
                age--;
            }else if((month_now==month_pass)&&(day_now<day_pass)){
                //不滿月
                age--;
            }
            stu.setAge(age);
        }
        return stuList;
    }

}

StudentAction

@Controller
public class StudentAction {

    @Autowired
    private StudentService studentService;
    @ResponseBody
    @RequestMapping("stuAll")
    private List getAllStudent() {
        return studentService.getAllStudents();
    }
    @RequestMapping("/index")
    private String index(){
        return "index";
    }
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<link rel="stylesheet" type="text/css" href="../css/iview.css"/>
<style>
    body {
        padding: 10px;
    }
</style>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/iview.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    $(function () {
        var myModel = {
            mycount: 100, mycols: [{title: '編號', key: 'id'}, {title: '姓名', key: 'userName'},
                {title: '性別', key: 'sex'}, {title: '出生日期', key: 'birt'}, {title: '年齡', key: 'age'}], stuList: []
        };
        var myViewModel = new Vue({
            data: myModel,
            el: "#myView"
        });

        $.ajax({
            type: "get",
            url: "stuAll",
            dataType: "json",
            success: function (res) {
                myModel.stuList = res;
            },
            error: function () {

            }
        });
    })
</script>
<body>
<div id="myView" style="width:100%;height:100%;">
    <i-table stripe border :columns="mycols" :data="stuList">

    </i-table>
</div>
</body>
</html>