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