Vue和SSM前后端分離

1.1首先創建兩個文件夾

 

1.2初始化Vue項目

　　　　win + x進入命令提示符管理員

　　　　

 

1.3cd 到vue_books中

1.4輸入命令初始化Vue項目

vue init webpack vue_books

　　　　初始化時有一些選項

• Project name：項目名稱，默認 回車 即可
• Project description：項目描述，默認 回車 即可
• Author：項目作者，默認 回車 即可
• Install vue-router：是否安裝 vue-router，選擇 y安裝
• Use ESLint to lint your code：是否使用 ESLint 做代碼檢查，選擇 n 不安裝（后期需要再手動添加）
• Set up unit tests：單元測試相關，選擇 n 不安裝（后期需要再手動添加）
• Setup e2e tests with Nightwatch：單元測試相關，選擇 n 不安裝（后期需要再手動添加）
• Should we run npm install for you after the project has been created：創建完成后直接初始化，選擇 n，我們手動執行;運行結果!

1.5等待一會，出現這個后

 

 1.6輸入下面得指令，初始化並運行

cd vue_books
npm install
npm run dev

1.7編譯后提示部署在8080端口上

 

 1.8訪問成功

 

稍后用IDEA打開，接着部署后端

2.1創建Maven項目

 

 2.2導入依賴

<dependencies>
        <!--單元測試-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <!--數據庫驅動-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <!--數據庫連接池-->
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>
        <!--Servlet-JSP-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.2</version>
        </dependency>
        <!--spring整合mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.2</version>
        </dependency>

        <!--spring-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>

        <!--Jackon-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.8</version>
        </dependency>
    </dependencies>

    <!--Maven資源過濾設置-->
    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
    </build>

2.3創建項目結構，等下補全

 

 2.4創建實體類

構造，get，set，toString省略

    private int book_id;
    private String book_name;
    private double book_price;
    private String author;
    private Date shopDate;