[SpringBoot+VueJs] 1. 環(huán)境搭建

最近在工作期間，搭建了一個專項測試平臺。其中用到的一些web開發(fā)技能。這里想記錄下。準(zhǔn)備來逐步介紹用到的框架，及開源插件。

設(shè)想的目錄如下:

  1. 環(huán)境搭建
  2. 后端
    2.1 數(shù)據(jù)庫設(shè)計
    2.2 SpringBoot + Mybatis
    2.3 SpringBoot+RestfulAPI
  3. 前端
    3.1 VueJS 2.0 + Webpack工程介紹
    3.2 Admin-LTE介紹及使用
    3.3 VueJS一些基礎(chǔ)知識
    3.4 項目中用到的和VueJS的開源組件

1. 前言

其實沒有什么初衷，就是想學(xué)習(xí)一下現(xiàn)在項目中用到技術(shù)。一方面SpringBoot是我所在項目中后臺用到的Spring框架；另外一方面，前端開發(fā)現(xiàn)在也是用到一些MVVM的一些框架，想多了解了解。更有利于了解業(yè)務(wù)。

所以項目的整體框架，就是SpringBoot+VueJs

Spring boot
vuejs

2. 安裝環(huán)境

  • node.js:latest
  • npm:latest
  • oracle java-jdk:1.8
  • (Optional) A java IDE of your choice. I’m using intelliJ
  • maven:latest

上述的安裝過程就不贅述了。自己搭建好環(huán)境。

3. 文件夾結(jié)構(gòu)

配置好的文件夾結(jié)構(gòu)應(yīng)該如下圖所示：
app
├── frontend
│ ├── pom.xml
├── backend
│ ├── src
│ ├── pom.xml
├── pom.xml

下面一步一步，來創(chuàng)建這個文件夾目錄。

3.1 父文件夾pom文件

這里分兩個模板
顧名思義，F(xiàn)rontend是存前端代碼，Backend是存后端代碼。
不過總的parent工程是需要有個Pom來配置的。配置如下：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.xxxx.xxxx</groupId>
    <artifactId>minions</artifactId>
    <packaging>pom</packaging>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.3.RELEASE</version>
    </parent>

    <modules>
        <module>frontend</module>
        <module>backend</module>
    </modules>

    <repositories>
        <repository>
            <id>spring-snapshots</id>
            <url>http://repo.spring.io/libs-snapshot</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>spring-snapshots</id>
            <url>http://repo.spring.io/libs-snapshot</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>

    <properties>
        <main.basedir>${project.basedir}</main.basedir>
    </properties>
</project>

這里spring-boot-starter-parent，是springboot工程的啟動方式。所以要在父工程配置。

3.2 Frondend配置詳解

創(chuàng)建基于Maven的前端工程：

cd app
# 通過vue-cli建立一個名字為frontend的工程
vue init webpack frontend
cd frontend

#安裝所有依賴
# 這里推薦安裝Taobao的CNPM(https://npm.taobao.org/)，速度快嘛
cnpm install

#創(chuàng)建一個pom.xml
touch pom.xml

#通過npm命令啟動node server ：localhost:8080
npm run dev

如果這里進(jìn)展順利，你的瀏覽器會打開一個vue app，類似于下圖所示：

vue app

下一步創(chuàng)建一個pom.xml，通過maven來管理前端功能，包括：

  • 使用mavenPlugin安裝一個本地node，以避免不同的生產(chǎn)環(huán)境的node/npm版本問題?？梢詤⒖迹?frontend-maven-plugin
  • 指明npm的倉庫到：https://npm.taobao.org/， 保證插件安裝速度
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <parent>
    <artifactId>xxxxx</artifactId>
    <groupId>com.xxxx.xxx</groupId>
    <version>1.0-SNAPSHOT</version>
  </parent>

  <modelVersion>4.0.0</modelVersion>
  <artifactId>frontend</artifactId>

  <build>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.2</version>
        <executions>
          <!-- Install our node and npm version to run npm/node scripts-->
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v6.9.1</nodeVersion>
              <npmVersion>3.10.9</npmVersion>
              <nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot>
              <npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot>
            </configuration>
          </execution>

          <!-- Set NPM Registry -->
          <execution>
            <id>npm set registry</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <!--<arguments>config set registry https://registry.npmjs.org</arguments>-->
              <arguments>config set registry https://registry.npm.taobao.org</arguments>
            </configuration>
          </execution>

          <!-- Set SSL privilege -->
          <execution>
            <id>npm set non-strict ssl</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <!-- Optional configuration which provides for running any npm command -->
            <configuration>
              <arguments>config set strict-ssl false</arguments>
            </configuration>
          </execution>

          <!-- Install all project dependencies -->
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <!-- optional: default phase is "generate-resources" -->
            <phase>generate-resources</phase>
            <!-- Optional configuration which provides for running any npm command -->
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>

          <!-- Build and minify static files -->
          <execution>
            <id>npm run build</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>run build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
</project>

從上面的pom.xml不難看出。做了

  1. node&NPM安裝，版本分別是v6.9.1 & v3.10.9
  2. 這是了倉庫地址為：https://registry.npm.taobao.org
  3. 設(shè)置SSL（加密的，雖然具體我也不懂）
  4. 執(zhí)行命令npm install。
  5. 執(zhí)行npm run build

是不是熟悉的味道。和上面通過命令行來啟動vue app是幾乎一致的。除了npm run build。下面解釋下：
一般來說，build過之后，根據(jù)vue-cli生成的工程app/frontend/config/index.js
是直接打包到：
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),

也就是生成一個dist文件夾

我們這里稍微做一下修改：

index: path.resolve(__dirname, '../target/dist/index.html'),
assetsRoot: path.resolve(__dirname, '../target/dist'),

聰明的同學(xué)到這里，可能會想到。對哦，我們是整個web發(fā)布。是不是有可能和前后端統(tǒng)一一個war有關(guān)系。

3.3 Backend配置詳解

創(chuàng)建后端代碼工程：

cd app
mkdir backend
cd backend
mkdir -p src/main/resources
mkdir -p src/main/java/io/gitlab/randyyaj
mkdir -p src/test/java/io/gitlab/randyyaj
touch pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>minions</artifactId>
        <groupId>com.netease.Mutest</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>backend</artifactId>
    <properties>
        <mybatis-spring-boot>1.2.0</mybatis-spring-boot>
        <mysql-connector>5.1.39</mysql-connector>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>
        <!-- Spring Boot Test 依賴 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- Spring Boot Mybatis 依賴 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>${mybatis-spring-boot}</version>
        </dependency>

        <!-- MySQL 連接驅(qū)動依賴 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>${mysql-connector}</version>
        </dependency>

        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.4</version>
        </dependency>
        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
            <version>1.4</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>Copy App Content</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>src/main/resources/public</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
     
             <directory>${project.parent.basedir}/frontend/target/dist</directory>
                                    <includes>
                                        <include>static/</include>
                                        <include>index.html</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

從這一段可以看出：
執(zhí)行了一個copy操作，把Frondend的target/dist里所有打包好的前端代碼，copy到src/main/resources/public目錄。這樣，前后端就聯(lián)調(diào)起來了。

<goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>src/main/resources/public</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
     
             <directory>${project.parent.basedir}/frontend/target/dist</directory>
                                    <includes>
                                        <include>static/</include>
                                        <include>index.html</include>
                                    </includes>
                                </resource>
                            </resources>
                        </configuration>

最后你的文件夾目錄是：
$ tree -L 2
app
├── README.md
├── backend
│ ├── pom.xml
│ ├── src
│ └── target
├── frontend
│ ├── README.md
│ ├── build
│ ├── config
│ ├── etc
│ ├── index.html
│ ├── node
│ ├── node_modules
│ ├── package.json
│ ├── pom.xml
│ ├── src
│ ├── static
│ ├── target
│ └── test
└── pom.xml

最后怎么運行呢。

運行

cd app
mvn clean install

然后通過IDEA run就可以了：

image.png

祝你搭建成功。

源碼

Git Hub Demo

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容