最近在工作期间，搭建了一个专项测试平台。其中用到的一些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
祝你搭建成功。
网友评论