创建一个简单的spring boot vue前后端分离项目

一、环境准备

此次实验需要的环境：jdk、maven、nvm 和 node.js

开发工具：idea 或者 Spring Tool Suite 4，前端可使用 HBuilder X，数据库 Mysql

下面提供 maven 安装与配置步骤和 nvm 安装与配置步骤：

1、maven 安装与配置

1.1 下载 maven 包

https://dlcdn.apache.org/maven/maven-3/3.9.5/binaries/apache-maven-3.9.5-bin.zip

1.2 解压到安装目录

1.3 将 maven 目录配置成环境变量

1.4 Cmd 打开命令窗口, 验证 maven: mvn -v

1.5 配置 setting 文件 打开 maven 目录，找到 conf 目录下 setting.xml，修改默认仓库路径

二、nvm 安装与配置

1、NVM 简介

在项目开发过程中，使用到 vue 框架技术，需要安装 node 下载项目依赖，但经常会遇到 node 版本不匹配 而导致无法正常下载，重新安装 node 却又很麻烦。为解决以上问题，nvm：一款 node 的版本管理工 具，能够管理 node 的安装和使用，使用简单，可下载指定 node 版本和切换使用不同版本，方便了 node 的使用。

2、NVM 安装

2.1 下载

安装包下载地址：https://github.com/coreybutler/nvm-windows/releases

windows 系统下载 nvm-setup.exe

2.2 安装

双击 nvm-setup.exe 开始安装（安装之前最好卸载计算机已经安装的 node）

选择 nvm 安装根路径

指定 nodejs 的安装路径（最好提前新建 nodejs 文件夹，在安装时选择 )

2.3 测试

打开命令行，输入 nvm -v 可查看版本, 即安装成功

3、NVM 使用

3.1 设置

设置下载源，修改 setting.txt 在安装根路径下编辑 setting.txt

添加以下两行镜像地址：

node_mirror:https://npm.taobao.org/mirrors/node/

npm_mirror: https://npm.taobao.org/mirrors/npm/

3.2 使用

1. nvm list available 显示可以安装的所有 node.js 的版本

2. nvm install 16.20.0 安装 node.js 的命名 version 是版本

3. nvm list 查看已安装的 node.js

4. nvm use 16.20.0 切换到使用指定的 nodejs 版本

*** 表示当前使用的 node 版本是 16.20.0

3.3 NVM 常用命令

nvm off // 禁用 node.js 版本管理 (不卸载任何东西)

nvm on // 启用 node.js 版本管理

nvm install // 安装 node.js 的命名，version 是版本号 例如：nvm install 8.12.0

nvm uninstall // 卸载 node.js 是的命令，卸载指定版本的 nodejs，当安装失败时卸载使用

nvm ls // 显示所有安装的 node.js 版本

nvm list available // 显示可以安装的所有 node.js 的版本

nvm use // 切换到使用指定的 nodejs 版本

nvm v // 显示 nvm 版本

nvm install stable // 安装最新稳定版

3.4 NVM 常见异常

1.nvm use 失效 无法使用 node

原因：在安装 nvm 的时候修改了 nodejs 的安装路径，但安装包并未在指定路径新建 nodejs 解决：在指定路径手动新建 nodejs 文件夹，重新安装并指定路径

三、搭建前后端分离项目

1、后端项目

1.1 数据库设计

1.2 新建 springboot 工程

第一种方式使用 idea 创建，File —> New Project —> Spring Initializr , 选择对应的配置。

如果 idea 没有 Spring Initializr , 或者本地 jdk 不支持 Spring Initializr 中 jdk 的选项可以采用第二种方式，访问 https://start.aliyun.com/

选择对应的配置，获取代码，然后导入 idea 或 Spring Tool Suite 4

1.3 项目结构以及代码

项目的总体结构如图：

pom.xml 文件

 
 4.0.0
 
 org.springframework.boot
 spring-boot-starter-parent
 2.7.8
  
 
 com.example
 springbootvue
 0.0.1-SNAPSHOT
 springbootvue
 Demo project for Spring Boot
 
 1.8
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.2.1
        
        
            mysql
            mysql-connector-java
            8.0.28
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
            com.baomidou
            mybatis-plus-core
            3.5.3
        
    
 
    
        
            
                src/main/java
                
                    **/*.xml
                
            
        
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok
                        
                    
                
            

 
 

application.yml

spring:
 datasource:
 username: root
 password: 1qaz@WSX3edc
 url: jdbc:mysql://localhost:3306/course2023?
 allowMultiQueries=true&characterEncoding=UTF-8&characterSetResults=UTF
8&zeroDateTimeBehavior=convertToNull&useSSL=false
 driver-class-name: com.mysql.cj.jdbc.Driver
 server:
 port: 8181
 mybatis:
 type-aliases-package: com.example.springbootvue.entity
 mapper-locations: classpath:mapper/*.xml

UserController.java

package com.example.springbootvue.controller;
 import com.example.springbootvue.entity.user;
 import com.example.springbootvue.service.UserService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 import java.util.List;
 @RestController
 @RequestMapping("/user")
 public class UserController {
 @Autowired
 UserService userService;
 @GetMapping("/findAll")
 public List findAll() {return userService.queryuserList();
 }
 @GetMapping("/")
 public String test() {return "test";}
@PostMapping("/login")
 public user login(@RequestParam("username") String username,
 @RequestParam("password") String password) {return userService.queryUserByNameAndPwd(username, password);
 }
 }

user.java

package com.example.springbootvue.entity;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 import lombok.NoArgsConstructor;
 @Data
 @NoArgsConstructor
 @AllArgsConstructor
 public class user {
 private Integer id;
 private String username;
 private String password;
 }

UserMapper.java

 package com.example.springbootvue.mapper;
 import com.example.springbootvue.entity.user;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
 import org.springframework.stereotype.Repository;
 import java.util.List;
 @Mapper
 @Repository
 public interface UserMapper {public List queryuserList();
 public user queryUserByNameAndPwd(@Param("username")String username, 
@Param("password")String password);
 }

UserService.java

package com.example.springbootvue.service;
 import com.example.springbootvue.entity.user;
 import java.util.List;
 public interface UserService {public List queryuserList();
 public user queryUserByNameAndPwd(String username,String password);
 }

UserServiceImpl.java

 package com.example.springbootvue.service;
 import com.example.springbootvue.entity.user;
 import com.example.springbootvue.mapper.UserMapper;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import java.util.List;
 @Service
 public class UserServiceImpl implements UserService{
 @Autowired
 UserMapper userMapper;
 @Override
 public List queryuserList() {return userMapper.queryuserList();
 }
 @Override
 public user queryUserByNameAndPwd(String username, String password) {return userMapper.queryUserByNameAndPwd(username,password);
 }
 }

usermapper.xml

 
 
 
 
 select * from user
 
 
select * from user where username=#{username} and password = #{password}
 

CrosConfig.java

 package com.example.springbootvue.config;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.web.servlet.config.annotation.CorsRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 @Configuration
 public class CrosConfig implements WebMvcConfigurer {
 @Override
 public void addCorsMappings(CorsRegistry registry){registry.addMapping("/**")
 .allowedOriginPatterns("*")
 .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
 .allowCredentials(true)
 .maxAge(3600)
 .allowedHeaders("*");
 }
 }

运行 SpringbootvueApplication.java，启动成功后，在浏览器上面访问 localhost:8181/user/

2、前端项目

2.1 创建 vue 项目

首先创建一个文件夹，在地址栏输入 cmd, 按回车键，会出现下面的命令行窗口

输入 npm - v 和 node -v 查看是否安装

接着输入 npm install -g @vue/cli 来安装相关插件，如果出现如下图错误，是因为 npm 的官方源在国 外，下载很慢，下面我们将 npm 源切换成国内源。

下载淘宝镜像源：npm install -g cnpm –registry=https://registry.npm.taobao.org

把当前的源切换成淘宝的源：npm config set registry https://registry.npm.taobao.org

查看源是否切换成功：npm config get registry

继续安装 npm install -g @vue/cli

安装好之后输入 vue create myfirst(myfirst 是你要创建的项目的名称），回车。然后进入下图界面，选 择第三个，回车。

接着选择下图所示选项（上下箭头移动，空格键选中），接着回车

然后后面按我下图所选的即可

接着会加载一段时间（稍微等待一下）

然后我们可以按它的提示输入：

cd myfirst

npm run serve

在浏览器输入生成的链接得到下图，此时 vue 项目搭建完成

2.2 构建一个简单的登录界面

修改 router 文件夹下面的 index.js 如下

import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import login from "@/views/login";
 Vue.use(VueRouter)
 const routes = [
 {
 path: '/',
 name: 'login',
 component: login
 },
 {
 path: '/home',
 name: 'home',
 component: HomeView
 },
 {
 path: '/about',
 name: 'about',
 component: () => import(/* webpackChunkName: "about" */ 
'../views/AboutView.vue')
 }
 ]
 const router = new VueRouter({
 mode: 'history',
 base: process.env.BASE_URL,
 routes
 })
 export default router

修改 views 文件夹下面的 HomeView.vue 如下

在 views 文件夹下创建 login.vue

login.vue 要用到 axios 和 element-ui，所以我们要安装 axios 和 element-ui

npm install axios

npm install element-ui -S

在 main.js 中引入 element-ui

import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);

axios 可以在对应的页面引入

import axios from 'axios'

App.vue 修改如下

在终端输入指令 npm run serve 运行 vue 项目，点击生成的链接即可，然后输入账号和密码进行登录，登录后进入主页面

四、完成用户注册和查询功能

用户注册功能效果图如下：

点击注册新账号，跳转到注册页面

填写新账户密码，点击注册，注册成功之后跳转到登录页面，用新账户登录可以登录成功 查询功能效果：在登陆成功页面添加查询按钮

点击查询按钮，查询所有账户，效果如图所示