[SpringBoot+VueJs] 1. 环境搭建

2017-07-07 本文已影响2907人 professorLea

最近在工作期间，搭建了一个专项测试平台。其中用到的一些web开发技能。这里想记录下。准备来逐步介绍用到的框架，及开源插件。

设想的目录如下:

环境搭建
后端
2.1 数据库设计
2.2 SpringBoot + Mybatis
2.3 SpringBoot+RestfulAPI
前端
3.1 VueJS 2.0 + Webpack工程介绍
3.2 Admin-LTE介绍及使用
3.3 VueJS一些基础知识
3.4 项目中用到的和VueJS的开源组件

1. 前言

其实没有什么初衷，就是想学习一下现在项目中用到技术。一方面SpringBoot是我所在项目中后台用到的Spring框架；另外一方面，前端开发现在也是用到一些MVVM的一些框架，想多了解了解。更有利于了解业务。

所以项目的整体框架，就是SpringBoot+VueJs

Spring boot

vuejs

2. 安装环境

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

上述的安装过程就不赘述了。自己搭建好环境。

3. 文件夹结构

配置好的文件夹结构应该如下图所示：
app
├── frontend
│ ├── pom.xml
├── backend
│ ├── src
│ ├── pom.xml
├── pom.xml

下面一步一步，来创建这个文件夹目录。

3.1 父文件夹pom文件

这里分两个模板
顾名思义，Frontend是存前端代码，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配置详解

创建基于Maven的前端工程：

cd app
# 通过vue-cli建立一个名字为frontend的工程
vue init webpack frontend
cd frontend

#安装所有依赖
# 这里推荐安装Taobao的CNPM(https://npm.taobao.org/)，速度快嘛
cnpm install

#创建一个pom.xml
touch pom.xml

#通过npm命令启动node server ：localhost:8080
npm run dev

如果这里进展顺利，你的浏览器会打开一个vue app，类似于下图所示：

vue app

下一步创建一个pom.xml，通过maven来管理前端功能，包括：

使用mavenPlugin安装一个本地node，以避免不同的生产环境的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不难看出。做了

node&NPM安装，版本分别是v6.9.1 & v3.10.9
这是了仓库地址为：https://registry.npm.taobao.org
设置SSL（加密的，虽然具体我也不懂）
执行命令npm install。
执行npm run build

是不是熟悉的味道。和上面通过命令行来启动vue app是几乎一致的。除了npm run build。下面解释下：
一般来说，build过之后，根据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'),

聪明的同学到这里，可能会想到。对哦，我们是整个web发布。是不是有可能和前后端统一一个war有关系。

3.3 Backend配置详解

创建后端代码工程：

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 连接驱动依赖 -->
        <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>

从这一段可以看出：
执行了一个copy操作，把Frondend的target/dist里所有打包好的前端代码，copy到src/main/resources/public目录。这样，前后端就联调起来了。

<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

祝你搭建成功。