手把手教你入门vue+springboot开发（一）--springboot入门

---

前言

因为工作原因，需要从C/S开发转到B/S开发，搞了10几年C/C++开发，现在需要从头开始学习B/S，好在我也是一个喜欢迎接挑战的人。B/S架构选择前后端分离开发的vue+springboot框架。从本篇开始，我将以一个入门新手的角色结合实战来详细记录vue+springboot的学习过程，供vue+springboot入门者参考。

---

一、springboot简介

目前B/S架构比较流行vue+springboot框架，前端使用vue开发，后端使用springboot开发，上手快，开发效率高，而且vue和springboot都能支持很多插件。我们先从springboot开始构建一个可运行的demo。
以往，Java开发者们为了构建一个项目常常需要将许多的框架组合起来使用，例如Hibernate和Spring等，这个过程复杂且耗时。这也就是Spring Boot应运而生的原因。
Spring Boot是由Pivotal团队提供的全新框架，其设计目标是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义模板化的配置。Spring Boot集成了大量常用的第三方库配置，比如jackson、jdbc、druid、tomcat等，Spring Boot应用中这些第三方库几乎可以零配置的使用。

二、构建一个demo

1.开发环境搭建

1）首先从IDEA官网下载ideaIU-2024版本安装
https://www.jetbrains.com/idea/download/?section=windows
这个版本只有30天试用期，需要破解的话可以自行百度一下。
2）安装MySQL，由于我的系统是windows11，从MySQL官网下载的安装包无法安装成功，如果MySQL安装包能够安装成功，可以忽略下面步骤。
可以从以下地址下载MySQL压缩包。
https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.44-winx64.zip
解压把mysql-5.7.44-winx64里面文件拷贝到C:\Program Files\MYSQL\mysql-5.7.44目录中
并在该目录编写my.ini

[mysql]
# 设置mysql客户端默认字符编码形式
default-character-set=utf8mb4

[mysqld]
#跳过密码登录
skip-grant-tables
#设置端口号，默认3306
port = 3306
# 设置mysql的安装目录
basedir=C:\Program Files\MYSQL\mysql-5.7.44
# 设置mysql数据库的数据存放目录
datadir=C:\Program Files\MYSQL\mysql-5.7.44\data
# 设置最大连接数
max_connections=200
# 允许连接失败的次数
max_connect_errors=10
# 服务端使用的字符集默认为utf8mb4
character-set-server=utf8mb4
# 创建新表时将使用的默认存储引擎
default-storage-engine=INNODB
# 默认使用“mysql_native_password”插件认证
#mysql_native_password
default_authentication_plugin=mysql_native_password

[client]
# 设置mysql客户端连接服务端时默认使用的端口
port=3306
default-character-set=utf8mb4

打开cmd，在C:\Program Files\MYSQL\mysql-5.7.44\bin目录执行

mysqld --install "MySql" --defaults-file="C:\Program Files\MYSQL\mysql-5.7.44\my.ini"
mysqld --initialize
net start mysql

MySQL服务就成功启动了。

2.创建数据表

1）打开cmd，按以下步骤在MySQL中创建数据表users（当然也可以把MySQL设置到环境变量中）

cd C:\Program Files\MySQL\mysql-5.7.44\bin
mysql -uroot -proot
create database testdb;
use testdb;
CREATE TABLE users (id int NOT NULL,userName varchar(64) NOT NULL,password varchar(64) NOT NULL,sex varchar(16),telephone varchar(32),PRIMARY KEY (id)) ENGINE=InnoDB DEFAULT CHARSET=utf8;

如下图：

2)插入数据
ideaIU提供了连接数据库工具，可以直接在ideaIU上连接数据库进行操作。在ideaIU右侧点击"Database"图标，然后点"+“，选择Data Source为MySQL,如下图：

然后会弹出MySQL的配置页面，输入User:root，Password:root，Database:testdb，其它可以不动，如下图：

点击“Test Connection”按钮测试连接数据库，显示连接成功。如下图：

然后选择"users"数据表，弹出users数据表操作界面，点击”+"增加记录，填写记录内容后点击"Submit"提交，如下图：

3.创建项目

点击ideaIU左上角"Main Menu"新建项目

输入项目名称demo，Type选择Maven，JDK选择合适的，其它可以不变。

选择Web里的Spring Web

注意Spring Boot为3.3.0时MyBatis Framework无法选择，所以要把Spring Boot改为3.2.6，然后SQL里选择MyBatis Framework和MySQL Driver。

把resources文件夹下的application.properties改名为application.yml，右键点击application.properties文件如下图所示操作：


双击application.yml文件修改配置信息，可以把以下内容直接拷贝进去，注意testdb为数据库名，3306为MySQL端口，username为MySQL用户名，password为MySQL密码。

server:
  port: 8088

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/testdb?serverTimezone=Asia/Shanghai&characterEncoding=utf-8
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis:
  type-aliases-package: com.example.demo.bean

3.编写代码

右键点击"com.example.demo"文件夹，创建bean、controller、mapper、service四个Package。

分别在bean、controller、mapper、service下创建User.java、UserController.java、UserMapper.java、UserService.java、UserServiceImpl.java文件。

创建完成后目录结构如下：

我理解bean Package中应该是数据结构体类型定义，User.java跟users数据库内容保持一致，是users数据结构体类型定义，内容如下：

package com.example.demo.bean;

public class User {
    private String id;
    private String userName;
    private String password;
    private String sex;
    private String telephone;
    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }
}

controller Package中应该是处理前端的交互请求，UserController.java只实现了一个响应前端get /usr/selectAll请求的过程，内容如下：

package com.example.demo.controller;

import com.example.demo.bean.User;
import com.example.demo.service.UserService;
import com.example.demo.service.UserServiceImpl;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

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

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

    @RequestMapping(value = "/selectAll", method = RequestMethod.GET)
    public List<User> selectAll() {
        List<User> list = userService.selectAll();
        return list;
    }
}

mapper Package中应该是数据库的交互操作，比如增删改查，UserMapper.java只实现了查询users数据表记录，内容如下：

package com.example.demo.mapper;

import com.example.demo.bean.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface UserMapper {
    @Select({
            "select",
            "id, userName, password, sex, telephone",
            "from users"
    })
    List<User> selectAll();
}

service Package中应该是业务的处理过程，UserService.java是一个service接口基类，内容如下：

package com.example.demo.service;

import com.example.demo.bean.User;

import java.util.List;

public interface UserService {
    public List<User> selectAll();
}

UserServiceImpl.java是UserService的派生类，实现查询用户信息的业务，如果不是数据库交互场景，比如是从其它服务器获取数据，也应该在这个类中实现业务，内容如下：

package com.example.demo.service;

import com.example.demo.bean.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

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

    @Override
    public List<User> selectAll() {
        return userMapper.selectAll();
    }
}

3.测试验证

在resources的static目录下创建index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .result{
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            height: 300px;
            background-color: rgba(0,0,0,.8);
            color: white;
            text-align: center;
            letter-spacing: 2px;
            padding-top: 20px;
            font-size: 18px;
            line-height: 28px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<button style="display: block;margin: 20px auto;width: 160px;height: 60px;" onclick="getAll()">查看用户信息</button>
<div class="result" id="result"></div>
<script>
    function getAll(){
        $.ajax({
            type: "get",
            url: "user/selectAll",
            data: {
            },
            success:function (data) {
                console.log(data)
                $("#result").empty()
                for(var i = 0;i < data.length;i++){
                    $("#result").append(JSON.stringify(data[i]) + "<br>")
                }
            },
        });
    }
</script>
</body>
</html>

运行项目，然后在浏览器中打开“http://localhost:8088/”，点击“查看用户信息”，能够查到数据库中的记录，如下图所示：

按照前面介绍的方法直接在users数据表中增加一条记录，然后再点击一下“查看用户信息”就可以查到两条记录。

---

总结

本篇只是先用springboot创建一个简单demo，后续我们将在这个demo基础上进一步完善它，在此过程中来加深理解vue+springboot框架。