Springboot+vue前后端分离项目搭建

一、准备工作

Spring Boot项目开发环境与工具：

• jdk
• maven
• idea

Vue项目开发环境：

• nodejs
• vscode

后端技术栈：

• SpringBoot
• mybatis plus
• postgresql

前端技术栈：

• vue
• element-ui
• axios

二、项目骨架搭建

2.1 后端框架搭建——idea利用Maven搭建springboot项目

• 创建maven项目，不必选择项目骨架，直接单击Next按钮
• 配置项目名称、项目位置、组织名称、模块名称、项目版本号等信息
• 添加依赖，spring-boot-starter-parent

<?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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.1</version>
        <!-- 提供一些maven配置，同时提供了dependency0management，可以使开发者在引入其他依赖时不必输入版本号，方便依赖管理 -->
    </parent>
    <groupId>org.example</groupId>
    <artifactId>woa</artifactId>
    <version>1.0-SNAPSHOT</version>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

</project>

• 编写启动类

package org.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.context.annotation.ComponentScan;

// @SpringBootApplication 包括 @SpringBootConfiguration、@EnableAutoConfiguration、
// @ComponentScan
@EnableAutoConfiguration
// @EnableAutoConfiguration注解表示开启自动化配置，由于项目汇总添加了spring-boot-starter-web依赖
// 因此在开启了自动化配置后会自动进行Spring和Spring MVC的配置
@ComponentScan
// @ComponentScan包扫描
public class App {
    // 在Java项目的main方法中，通过SpringApplication中的run方法启动项目，第一个参数传入App.class
    // 告诉Spring哪个是主要组件，第二个参数是运行时输入的其他参数
    public static void main(String[] args){
        SpringApplication.run(App.class,args);
    }
}

• 创建一个控制器，提供“/hello”接口

  package org.example.controller;
  
  import org.springframework.web.bind.annotation.GetMapping;
  import org.springframework.web.bind.annotation.RestController;
  
  @RestController
  // @RestController 包含@ResponseBody/@Controller
  public class HelloController {
  
      @GetMapping("/hello")
      public String hello(){
          return "hello spring boot";
      }
  }
  

• 启动项目，测试

2.2 前端框架搭建——vue-cli4搭建vue项目

安装cnpm

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

安装脚手架

cnpm install -g @vue/cli

清空缓存处理

npm cache clean --force

创建项目

• 进入目标目录，选择自定义方式创建目录

vue create 项目名
// 这里面呢回车别按太快,空格是勾选,回车是下一步

• 选择需要的配置项

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
( ) Choose Vue Version //选择Vue版本 
( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试

• 选择vue版本

• 路由是否使用history模式，选否的话则使用hash模式，两个模式最直观的区别就是hash模式带了一个很丑的#，而history模式没有

• 选择css预处理器，node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现
  

• 选择Eslint代码验证规则，即javascript代码检测工具
  

• 选择什么时候进行代码规则检测，保存即检测还是commit的时候检测
  

• 选择如何存放配置，存在在单独的配置文件中还是统一存放在package.json文件中

• 是否保存当前配置

• 若保存当前配置，为当前配置起一个别名
  

• 等待创建项目，按照提示命令启动项目
  
  

• 验证项目是否创建成功
  

• 引入element-ui

  cnpm install element-ui -S