[SpringBoot+VueJs] 1. 环境搭建

最近在工作期间，搭建了一个专项测试平台。其中用到的一些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来配置的。配置如下：



    4.0.0
    com.xxxx.xxxx
    minions
    pom
    1.0-SNAPSHOT

    
        org.springframework.boot
        spring-boot-starter-parent
        1.5.3.RELEASE
    

    
        frontend
        backend
    

    
        
            spring-snapshots
            http://repo.spring.io/libs-snapshot
            
                true
            
        
    
    
        
            spring-snapshots
            http://repo.spring.io/libs-snapshot
            
                true
            
        
    

    
        ${project.basedir}

这里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/，保证插件安装速度



  
    xxxxx
    com.xxxx.xxx
    1.0-SNAPSHOT
  

  4.0.0
  frontend

  
    
      
        com.github.eirslett
        frontend-maven-plugin
        1.2
        
          
          
            install node and npm
            
              install-node-and-npm
            
            
              v6.9.1
              3.10.9
              https://nodejs.org/dist/
              http://registry.npmjs.org/npm/-/
            
          

          
          
            npm set registry
            
              npm
            
            
              
              config set registry https://registry.npm.taobao.org
            
          

          
          
            npm set non-strict ssl
            
              npm
            
            
            
              config set strict-ssl false
            
          

          
          
            npm install
            
              npm
            
            
            generate-resources
            
            
              install
            
          

          
          
            npm run build
            
              npm
            
            
              run build

从上面的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



    
        minions
        com.netease.Mutest
        1.0-SNAPSHOT
    
    4.0.0

    backend
    
        1.2.0
        5.1.39
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-aop
        
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            ${mybatis-spring-boot}
        

        
        
            mysql
            mysql-connector-java
            ${mysql-connector}
        

        
            org.apache.commons
            commons-lang3
            3.4
        
        
            commons-dbcp
            commons-dbcp
            1.4
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
            
            
                maven-resources-plugin
                
                    
                        Copy App Content
                        generate-resources
                        
                            copy-resources
                        
                        
                            src/main/resources/public
                            true
                            
                                
     
             ${project.parent.basedir}/frontend/target/dist
                                    
                                        static/
                                        index.html
                                    
                                
                            
                        
                    
                
            
            
                org.apache.maven.plugins
                maven-compiler-plugin
                
                    1.8
                    1.8

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


                            copy-resources
                        
                        
                            src/main/resources/public
                            true
                            
                                
     
             ${project.parent.basedir}/frontend/target/dist
                                    
                                        static/
                                        index.html

最后你的文件夹目录是：
$ 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