SpringBoot+Vue.js 实现前后端分离搭建 复制可用

1. 项目所需环境

Java: JDK1.8以上版本

Maven: apache-maven-3.5.4

服务器端框架：Spring-boot+Mybatis

前端框架：Vue.js v2.6 

服务器端开发工具：IntelliJ IDEA 2019.1 x64

前端开发工具：JetBrains WebStorm 2019.1 x64

2. 后台环境搭建（IntelliJ IDEA）

2.1 创建SpringBoot项目 

步骤："File"->"New"->"Project..."->"Spring Initializr" ->点击"Next"按钮

 

2.2 创建项目结构，选择jdk版本（使用jdk8.0）

2.3 选择项目需要的依赖后，点击"Next"按钮，下一步后点击"Finish"按钮

2.4 项目结构 

2.5 修改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">
    <modelVersion>4.0.0</modelVersion>
    <!--SpringBoot约定-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.3.RELEASE</version>
        <relativePath/> <!--
    lookup parent
    from repository -->
    </parent>
    <!--项目信息-->
    <groupId>com.neuedu.bootshop</groupId>
    <artifactId>bootshop</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
    <name>bootshop</name>
    <description>Demo project for
        Spring Boot
    </description>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <!--        <dependency>
                    <groupId>org.springframework.boot</groupId>
                                <artifactId>spring-boot-starter-jdbc</artifactId>
                            </dependency>-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.4</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.datatype</groupId>
            <artifactId>jackson-datatype-joda</artifactId>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.module</groupId>
            <artifactId>jackson-module-parameter-names</artifactId>
        </dependency>
        <!--MyBatis分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>
        <!--使用alibaba公司的的druid数据库连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.9</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <!--
mybatis generator逆向工程
自动生成代码插件 -->
            <plugin>
                <groupId>org.mybatis.generator</groupId>
                <artifactId>mybatis-generator-maven-plugin</artifactId>
                <version>1.3.2</version>
                <configuration>
                    <configurationFile>$

                        {
                        basedir
                        }/src/main/resources/generator/generatorConfig.xml
                    </configurationFile>
                    <overwrite>true</overwrite>
                    <verbose>true</verbose>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

2.6 删除resources文件夹下的application.properties文件并添加新的application.yml文件

server:
  port:   #端口号
    spring:
  datasource:
  name: shop #数据库名称
  type: com.alibaba.druid.pool.DruidDataSource
  #druid相关配置
  druid:
  #监控统计拦截的filters
  filters: stat
  driver-class-name: com.mysql.jdbc.Driver
  #基本属性
  url: jdbc:mysql://localhost:3306/shop?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true
  username: root
  password: root
  #配置初始化大小/最小/最大
  initial-size:                     min-idle:                     max-active:                     #获取连接等待超时时间
  max-wait:                     #间隔多久进行一次检测，检测需要关闭的空闲连接
  time-between-eviction-runs-millis:                     #一个连接在池中最小生存的时间
  min-evictable-idle-time-millis:                     validation-query: SELECT 'x'
  test-while-idle: true
  test-on-borrow: false
  test-on-return: false
  #打开PSCache，并指定每个连接上PSCache的大小。oracle设为true，mysql设为false。分库分表较多推荐设置为false
  pool-prepared-statements: false
  max-pool-prepared-statement-per-connection-size:                     ## 该配置节点为独立的节点，有很多同学容易将这个配置放在spring的节点下，导致配置无法被识别
  mybatis:
  mapper-locations: classpath:mapper/*.xml  #注意：一定要对应mapper映射xml文件的所在路径
  type-aliases-package: com.bootshop.entity  # 注意：对应实体类的路径（类别名）
  #pagehelper
  pagehelper:
    helperDialect: mysql
    reasonable: true
    supportMethodsArguments: true
    params: count=countSql
    returnPageInfo: check

2.7 测试自动生成的BootshopApplication.java文件

  import org.mybatis.spring.annotation.MapperScan;
  import org.springframework.boot.SpringApplication;
  import org.springframework.boot.autoconfigure.SpringBootApplication;
  @SpringBootApplication
  @MapperScan("com.bootshop.mapper")
  public class BootshopApplication {
      public static void main(String[] args) {
                  SpringApplication.run(BootshopApplication.class, args);
                  System.out.println("Hello SpringBoot");//测试用
              }
  }

 

成功后控制台会打印  “Hello SpringBoot”

中间日志省略

 

中间若出现异常请调试，输出“红框”中结果为“成功”

2.9 使用Mybatis逆向工程创建

配置pom.xml文件中generator插件所需要的配置文件

${basedir}/src/main/resources/generator/generatorConfig.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>
    <!-- 数据库驱动:选择你的本地硬盘上面的数据库驱动包-->
    <classPathEntry
            location="C:\apache-maven-3.5.4-bin\LocalWareHouse\mysql\mysql-connector-java\5.1.46\mysql-connector-java-5.1.46.jar"/>
    <context id="DB2Tables" targetRuntime="MyBatis3">
        <commentGenerator>
            <property name="suppressDate" value="true"/>
            <!-- 是否去除自动生成的注释 true：是 ： false:否 -->
            <property name="suppressAllComments" value="true"/>
        </commentGenerator>
        <!--数据库链接URL，用户名、密码 -->
        <jdbcConnection driverClass="com.mysql.jdbc.Driver" connectionURL="jdbc:mysql://localhost/shop" userId="root"
                        password="root">
        </jdbcConnection>
        <javaTypeResolver>
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>
        <!-- 生成模型的包名和位置-->
        <javaModelGenerator targetPackage="com.bootshop.entity" targetProject="src/main/java">
            <property name="enableSubPackages" value="true"/>
            <property name="trimStrings" value="true"/>
        </javaModelGenerator>
        <!-- 生成映射文件.xml位置 请在该路径下创建mapper文件夹-->
        <sqlMapGenerator targetPackage="mapper" targetProject="src/main/resources">
            <property name="enableSubPackages" value="true"/>
        </sqlMapGenerator>
        <!-- 生成DAO的包名和位置-->
        <javaClientGenerator type="XMLMAPPER" targetPackage="com.bootshop.mapper" targetProject="src/main/java">
            <property name="enableSubPackages" value="true"/>
        </javaClientGenerator>
        <!-- 要生成的表 tableName是数据库中的表名或视图名 domainObjectName是实体类名-->
        <table tableName="t_user" domainObjectName="User" enableCountByExample="false" enableUpdateByExample="false"
               enableDeleteByExample="false" enableSelectByExample="false" selectByExampleQueryId="false"></table>
    </context>
</generatorConfiguration>

配置好后，找到

继续手动添加配置

点击运行。（注意：同一张表不要多次运行，因为mapper映射文件会生成多次代码）

如下图表示没有报错运行代码生成成功。

查看项目结构，蓝色框为新增的文件

2.10 创建MyResultVO、UserMapper、UserService、UserServiceImpl，UserController文件

MyResultVO.java

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class MyResultVO {//通用的实体类
    private int code;
    private String msg;
    private List<?> list;
    private Object obj;
}
          

修改UserMapper.java 添加登录方法

import java.util.List;

public interface UserMapper {
    int deleteByPrimaryKey(Integer id);

    int insert(User record);

    int insertSelective(User record);

    User selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(User record);

    int updateByPrimaryKey(User record);

    /**
     * 登录的方法
     *
     * @param user
     * @return
     */
    List<User> login(User user);
}

修改UserMapper.xml，添加对应的sql

<!--登录SQL语句-->
<select id="login"parameterType="User"resultType="User">
        select*from t_user where username=#{username}and password=#{password}
</select>

新建UserService.java

public interface UserService {
    /**
     * 登录成功或者失败，将给出的信息存入VO的list中
     */
    MyResultVO login(User user);
}

新建UserServiceImpl.java

import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

@Service(value = "userService")
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;

    @Override
    public MyResultVO login(User user) {
        List<User> list = userMapper.login(user);
        //System.out.println(list);
        MyResultVO resultVO = new MyResultVO();
        if (list.size() != 0) {
            resultVO.setCode(0);
            resultVO.setMsg("登录成功");
            resultVO.setList(list);
            resultVO.setObj(list.get(0));
        } else {
            resultVO.setCode(1);
            resultVO.setMsg("登录失败");
        }
        return resultVO;
    }
}

新建UserController.java

import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

@RestController
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;

    @ResponseBody
    @PostMapping("/login")
    public MyResultVO login(@RequestBody User user) {
        System.out.println("用户名为：" + user.getUsername());
        System.out.println("密码为：" + user.getPassword());
        return userService.login(user);
    }
}

启动项目，运行BootShopApplication.java

可以正常输出“Hello SpringBoot”即后台配置成功

3. 前台环境搭建

3.1 安装node.js

3.1.1 名词介绍

Node.js

• Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
• Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 
• Node.js 的包管理器 npm，是全球最大的开源库生态系统。

npm

• npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器(类似于java中的Maven)。
• npm的初衷：JavaScript开发人员更容易分享和重用代码。
• npm的使用场景：
  • 允许用户获取第三方包并使用。
  • 允许用户将自己编写的包或命令行程序进行发布分享。
  • npm版本查询：npm -v 

Webpack

• WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

 

官网中文网： www.nodejs.cn 

官网中文网： www.nodejs.cn 

下载：

下载完成，双击"傻瓜式安装"

安装完成

打开cmd到安装路径下，输入：node -v 查看是否安装成功

输出版本号则安装成功 v10.15.3

输入npm -v 得到 6.4.1

3.2 安装淘宝镜像

此镜像类似于阿里云的maven中央仓库镜像（下载比外网服务器要快）

在cmd中输入命令：（慢）

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果安装失败，可以使用npm cache clean 清理缓存，然后再重新安装。同样可以使用cnpm -v查看是否安装成功

然后使用cnpm 安装vue-cli和webpack:（很慢）

cnpm install -g vue-cli

最新的vue项目模板中，都带有webpack插件，所以这里可以不安装webpack

安装完成后，可以使用 vue-V（注意V要大写）查看是否安装成功 版本号为2.9.6

在硬盘中创建一个文件夹，输入 vue init webpack bootshop

等待N久后，完成

继续执行 cd bootshop  回车  npm run dev 回车

成功后访问localhost:8081，显示下图即为安装成功（请不要关闭cmd终端）

3.3 使用WebStorm创建项目

新建WebStorm项目

填写项目名称（自动会填写）

项目描述（自动会填写）

作者

Vue Build Runtime + Compiler

vue-rounter Yes

ESLint  No

Set up unit tests  No

Setup e2e tests with Nightwatch? No

 

选择新窗口打开新项目（等待安装吧）

创建好项目后，选中package.json 右键选择 show npm scripts

选择dev双击 即可进行测试。开启成功后会出现默认的端口8080，如果有后端服务器端口被占用，端口号为8081，接下来访问localhost:8081即可完成启动

3.4 编写前台代码

3.4.1 打开App.vue，编写登录模板

<style>
    #login {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
<template>
    <div id="login">
        <form>
            <label for="username">用户名</label><input type="text" v-model.trim="loginData.username" name="username">
            <label for="password">密码</label><input type="password" v-model.trim="loginData.password" name="password">
            <input type="button" value="登录" @click="doLogin">
        </form>
    </div>
</template>
<script>
    import utils from "./utils/utils"

    export default {
        name: 'login',
        data() {
            return {
                loginData: {
                    username: "",
                    password: "",
                }
            }
        },
        methods: {
            doLogin() {
                let success = (response) =
            >
                {
                    alert(response.data.msg);
                }
                utils.axiosMethod({
                    method: "post",
                    url: "/user/login",
                    data: this.loginData,
                    callback: success
                })
            }
        }
    }
</script>

3.4.2 在src下添加一个utils文件夹以及一个utils.js文件

import axios from 'axios'

const utils = {
        axiosMethod: (config) = > {
        axios({
                  method: config.method,
                  url: config.url,
                  params: config.params ? config.params : null,
    data
:
config.data ? config.data : null,
}).
then(config.callback).catch(config.catch ? config.catch : () = > {}
)
}
}
export default utils

3.4.3 添加跨域请求

在build文件夹下的webpack.base.conf.js文件中添加

devServer:{
          historyApiFallback: true,
              noInfo: true,
              overlay: true,
              proxy: {
                  '/user/*': {
                          target: 'http://localhost:8080/',//本地后台服务器地址
                              secure: false,
                              changeOrigin: true
                      }
              }
      }

截图如下，不要放错位置

此处的8080对应服务器端application.yml文件中的

安装跨域请求用的axios jar包，

终端输入命令 cnpm install axios --save-dev

 

重启前端服务器

登录成功

登录失败

大功告成！