创建一个简单的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文件

<?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 
https://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.7.8</version>
 <relativePath/> <!-- lookup parent from repository -->
 </parent>
 <groupId>com.example</groupId>
 <artifactId>springbootvue</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <name>springbootvue</name>
 <description>Demo project for Spring Boot</description>
 <properties>
 <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <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.2.1</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.28</version>
        </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>com.baomidou</groupId>
            <artifactId>mybatis-plus-core</artifactId>
            <version>3.5.3</version>
        </dependency>
    </dependencies>
 
    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
            </resource>
        </resources>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
</plugins>
 </build>
 </project>

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<user> 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<user> 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<user> 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<user> queryuserList() {
 return userMapper.queryuserList();
 }
 @Override
 public user queryUserByNameAndPwd(String username, String password) {
 return userMapper.queryUserByNameAndPwd(username,password);
 }
 }

usermapper.xml

 <?xml version="1.0" encoding="UTF8"?>
 <!DOCTYPE mapper
 PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.example.springbootvue.mapper.UserMapper">
 <select id="queryuserList" 
resultType="com.example.springbootvue.entity.user">
 select * from user
 </select>
 <select id="queryUserByNameAndPwd" 
resultType="com.example.springbootvue.entity.user">
select * from user where username=#{username} and password = #{password}
 </select>
</mapper>

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如下

 <template>
    <div class="home">
        {{ username }} 登录成功
    </div>
 </template>
 <script>
 export default {
     data() {
        return {
         
        }
     },
     
     created() {
         this.username = this.$route.query.username
     },
 }
 </script>
 <style>
    
</style>

在views文件夹下创建login.vue

 <template>
  <div class="login">
    <div class="mylogin" align="center">
      <h4>登录</h4>
      <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="0px"
      >
        <el-form-item label="" prop="account" style="margin-top: 10px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  placeholder="账号"
                  v-model="loginForm.account"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="" prop="passWord">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-lock"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  type="password"
                  placeholder="密码"
                  v-model="loginForm.passWord"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-top: 55px">
          <el-button type="primary" round class="submitBtn" @click="submitForm"
          >登录
          </el-button>
        </el-form-item>
        <div class="unlogin">
          <router-link :to="{ path: '/forgetpwd' }"> 忘记密码? </router-link>
          |
          <router-link :to="{ path: '/register' }">
            <a href="register.vue" target="_blank" align="right">注册新账号</a>
          </router-link>
        </div>
      </el-form>
    </div>
  </div>
 </template>
 <script>
 import { mapMutations } from "vuex";
 import axios from 'axios'
 
export default {
  name: "Login",
  data: function () {
    return {
      loginForm: {
        account: "",
        passWord: "",
      },
      loginRules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
 
  methods: {
    ...mapMutations(["changeLogin"]),
    submitForm() {
      const userAccount = this.loginForm.account;
      const userPassword = this.loginForm.passWord;
      const params = new URLSearchParams();
      params.append('username', userAccount);
      params.append('password', userPassword);
      // 发起一个post请求
      axios({
        method: 'post',
        url: 'http://localhost:8181/user/login',
        params: params
      }).then(resp=>{
          console.log(resp.data);
          if(resp.data != null && resp.data.id != null){
              this.$router.push('/home?username='+resp.data.username);
          }else{
              this.$message({
                        message: '账户不存在或密码错误',
                        type: 'warning'
                      });
          }
      });
      console.log("用户输入的账号为：", userAccount);
      console.log("用户输入的密码为：", userPassword);
 
    },
  },
 };
 </script>
 <style>
 .login {
 
  height: 100vh;
  background-image: linear-gradient(to bottom right, #3F5EFB, #42b983);
  overflow: hidden;
 
  width: 100vw;
  padding: 0;
  margin: 0;
 
  font-size: 16px;
  background-position: left top;
  background-color: #242645;
  color: #fff;
 
  position: relative;
 }
 
.mylogin {
  width: 240px;
  height: 280px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
background: linear-gradient(
 230deg,
 rgba(53, 57, 74, 0) 0%,
 rgb(0, 0, 0) 100%
 );
 }
 .inps input {
 border: none;
 color: #fff;
 background-color: transparent;
 font-size: 12px;
 }
 .submitBtn {
 background-color: transparent;
 color: #39f;
 width: 200px;
 }
 </style>

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修改如下

<template>
 <div id="app">
 <router-view/>
 </div>
 </template>

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

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

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

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

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

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