uniapp-含有后端的登录注册页面编写（一）-阿里云开发者社区

uniapp-含有后端的登录注册页面编写

创建数据库

数据库结构

表名：user

列名	数据类型	描述
id	int	自增ID
username	varchar	用户名
password	varchar	密码
nickname	varchar	昵称

这个方案只保留了id、username、password和nickname四个字段，以最简单的方式存储用户基本信息。需要注意的是，密码应该进行安全处理（如加密），避免泄露敏感信息。如果后续有新增信息需求，则可以随时更改表结构，添加相应的列即可。

数据库代码

-- 创建 usertable 数据库
CREATE DATABASE IF NOT EXISTS usertable;
-- 切换至 usertable 数据库
USE usertable;
-- 创建 user 表
CREATE TABLE IF NOT EXISTS user (
  id INT(11) NOT NULL AUTO_INCREMENT,
  username VARCHAR(100) NOT NULL UNIQUE,
  password VARCHAR(100) NOT NULL,
  nickname VARCHAR(100) NOT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- 添加一些测试数据
INSERT INTO user (username, password, nickname) VALUES ('user1', 'password1', '张三');
INSERT INTO user (username, password, nickname) VALUES ('user2', 'password2', '李四');
INSERT INTO user (username, password, nickname) VALUES ('user3', 'password3', '王五');

这段SQL代码用于创建一个名为user的表格，并且添加了一些简单的测试数据。其中，id列使用了自增主键约束，保证数据的唯一性。username列使用了unique约束，确保用户名的唯一性。请注意，utf8mb4是一种更高效和更通用的字符编码，支持更广泛的Unicode字符集，所以它比utf-8更推荐使用。

后端编写

创建项目（准备工作）

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.11</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>
  <groupId>com.example</groupId>
  <artifactId>userTable</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <name>userTable</name>
  <description>userTable</description>
  <properties>
    <java.version>1.8</java.version>
  </properties>
  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      <version>2.7.6</version>
    </dependency>
    <dependency>
      <groupId>org.springframework.data</groupId>
      <artifactId>spring-data-jpa</artifactId>
      <version>2.5.6</version>
    </dependency>
    <dependency>
      <groupId>org.hibernate</groupId>
      <artifactId>hibernate-core</artifactId>
      <version>5.6.3.Final</version>
    </dependency>
    <dependency>
      <groupId>javax.persistence</groupId>
      <artifactId>javax.persistence-api</artifactId>
      <version>2.2</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>2.3.0</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>2.3.0</version>
    </dependency>
    <dependency>
      <groupId>com.mysql</groupId>
      <artifactId>mysql-connector-j</artifactId>
      <scope>runtime</scope>
    </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-boot-starter</artifactId>
      <version>3.4.2</version>
    </dependency>
    <dependency>
      <groupId>org.apache.shiro</groupId>
      <artifactId>shiro-core</artifactId>
      <version>1.8.0</version>
    </dependency>
    <dependency>
      <groupId>io.jsonwebtoken</groupId>
      <artifactId>jjwt-api</artifactId>
      <version>0.11.2</version>
    </dependency>
    <!-- 如果要使用 jjwt 的实现，还需要添加以下依赖 -->
    <dependency>
      <groupId>io.jsonwebtoken</groupId>
      <artifactId>jjwt-impl</artifactId>
      <version>0.11.2</version>
      <scope>runtime</scope>
    </dependency>
    <dependency>
      <groupId>io.jsonwebtoken</groupId>
      <artifactId>jjwt-jackson</artifactId>
      <version>0.11.2</version>
      <scope>runtime</scope>
    </dependency>
    <!-- Hibernate Validator -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>
    <dependency>
      <groupId>org.apache.shiro</groupId>
      <artifactId>shiro-core</artifactId>
      <version>1.8.0</version>
    </dependency>
  </dependencies>
  <build>
    <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.properties

# ?????
spring.datasource.url=jdbc:mysql://localhost:3306/usertable?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# ???????
server.port=8081
# MyBatis-Plus ??
mybatis-plus.mapper-locations=classpath:/mapper/*.xml
mybatis-plus.type-aliases-package=com.example.demo.entity
mybatis-plus.global-config.db-config.id-type=auto
mybatis-plus.configuration.map-underscore-to-camel-case=true
mybatis-plus.configuration.use-generated-keys=true
mybatis-plus.configuration.map-enum-as-ordinal=false
mybatis-plus.configuration.enum-handler=com.baomidou.mybatisplus.extension.handlers.MybatisEnumTypeHandler

Bean

User

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
@TableName("user")  // 声明对应的数据库表名（user）
public class User {
    private Long id;
    private String username;
    private String password;
    private String nickname;
}

Result

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class Result {
    private Integer code;   // 状态码
    private String message; // 状态信息
    private Object data;    // 数据
}

config

CorsConfig

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                // 允许来自本地的8080端口发起的跨域请求
                registry.addMapping("/api/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE")
                    .allowCredentials(true).maxAge(3600);
            }
        };
    }
}

Mapper

UserMapper

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.usertable.Bean.User;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface UserMapper extends BaseMapper<User> {
}

Service

UserService

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;
import com.example.usertable.Bean.User;
public interface UserService extends IService<User> {
    /**
     * 分页查询用户列表
     */
    IPage<User> selectPage(Page<User> page);
    /**
     * 用户注册
     */
    boolean register(User user);
    /**
     * 用户登录
     */
    User login(String username, String password);
}

ServiceImpl

UserServiceImpl

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.usertable.Bean.User;
import com.example.usertable.Mapper.UserMapper;
import com.example.usertable.Service.UserService;
import lombok.AllArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;
@Service
@AllArgsConstructor
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    @Override
    public IPage<User> selectPage(Page<User> page) {
        return baseMapper.selectPage(page, null);
    }
    /**
     * 注册新用户（需先检查用户名是否已被使用）
     */
    @Override
    public boolean register(User user) {
        String username = user.getUsername();
        // 根据用户名查询用户
        User u = this.getOne(new QueryWrapper<User>().eq("username", username));
        if (u != null) {
            // 用户名已存在
            return false;
        } else {
            // 将用户保存到数据库
            return this.save(user);
        }
    }
    /**
     * 用户登录（根据用户名和密码查询用户）
     */
    @Override
    public User login(String username, String password) {
        if (StringUtils.isEmpty(username) || StringUtils.isEmpty(password)) {
            // 用户名和密码不能为空
            return null;
        }
        return this.getOne(new QueryWrapper<User>()
                .eq("username", username)
                .eq("password", password));
    }
}

Controller

UserController

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.usertable.Bean.Result;
import com.example.usertable.Bean.User;
import com.example.usertable.Service.UserService;
import lombok.AllArgsConstructor;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;
@AllArgsConstructor
@RestController
@RequestMapping("/users")
public class UserController {
    private final UserService userService;
    /**
     * 获取用户列表（分页）
     */
    @GetMapping("/")
    public Result list(@RequestParam(defaultValue = "1") Integer pageNum,
                       @RequestParam(defaultValue = "10") Integer pageSize) {
        // 构建分页对象
        Page<User> page = new Page<>(pageNum, pageSize);
        // 分页查询用户数据
        IPage<User> userPage = userService.page(page, null);
        return Result.builder()
                .code(200)
                .message("获取成功")
                .data(userPage)
                .build();
    }
    /**
     * 根据 ID 获取用户信息
     */
    @GetMapping("/{id}")
    public Result detail(@PathVariable Long id) {
        // 查询用户信息
        User user = userService.getById(id);
        if (user != null) {
            return Result.builder()
                    .code(200)
                    .message("获取成功")
                    .data(user)
                    .build();
        } else {
            return Result.builder()
                    .code(404)
                    .message("用户不存在")
                    .build();
        }
    }
    /**
     * 注册
     */
    @PostMapping("/register")
    public Result register(@RequestBody @Validated User user) {
        boolean success = userService.register(user);
        if (success) {
            return Result.builder()
                    .code(200)
                    .message("注册成功")
                    .data(user)
                    .build();
        } else {
            return Result.builder()
                    .code(500)
                    .message("用户名已存在")
                    .build();
        }
    }
    /**
     * 登录
     */
    @PostMapping("/login")
    public Result login(@RequestBody User user) {
        String username = user.getUsername();
        String password = user.getPassword();
        // 查询用户
        User loginUser = userService.login(username, password);
        if (loginUser != null) {
            return Result.builder()
                    .code(200)
                    .message("登录成功")
                    .data(loginUser)
                    .build();
        } else {
            return Result.builder()
                    .code(401)
                    .message("用户名或密码错误")
                    .build();
        }
    }
    /**
     * 新增用户
     */
    @PostMapping("/")
    public Result add(@RequestBody @Validated User user) {
        boolean success = userService.save(user);
        if (success) {
            return Result.builder()
                    .code(200)
                    .message("新增成功")
                    .data(user)
                    .build();
        } else {
            return Result.builder()
                    .code(500)
                    .message("新增失败")
                    .data(user)
                    .build();
        }
    }
    /**
     * 更新用户信息
     */
    @PutMapping("/{id}")
    public Result update(@PathVariable Long id, @RequestBody @Validated User user) {
        user.setId(id);
        boolean success = userService.updateById(user);
        if (success) {
            return Result.builder()
                    .code(200)
                    .message("更新成功")
                    .data(user)
                    .build();
        } else {
            return Result.builder()
                    .code(500)
                    .message("更新失败")
                    .data(user)
                    .build();
        }
    }
    /**
     * 删除用户
     */
    @DeleteMapping("/{id}")
    public Result delete(@PathVariable Long id) {
        boolean success = userService.removeById(id);
        if (success) {
            return Result.builder()
                    .code(200)
                    .message("删除成功")
                    .build();
        } else {
            return Result.builder()
                    .code(500)
                    .message("删除失败")
                    .build();
        }
    }
}

Postman测试

测试所有的接口

以下是基于8081端口号的 Postman 测试：

1. 获取用户列表（分页）

请求地址：http://localhost:8081/users/

请求方法：GET

请求参数：

参数名称	参数类型	是否必须	默认值	参数说明
pageNum	Integer	否	1	当前页码
pageSize	Integer	否	10	每页记录数

成功响应：

{
    "code": 200,
    "message": "获取成功",
    "data": {
        "records": [
            {
                "id": 1,
                "username": "user1",
                "password": "password1",
                "nickname": "张三"
            },
            {
                "id": 2,
                "username": "user2",
                "password": "password2",
                "nickname": "李四"
            },
            {
                "id": 3,
                "username": "user3",
                "password": "password3",
                "nickname": "王五"
            }
        ],
        "total": 0,
        "size": 10,
        "current": 1,
        "orders": [],
        "optimizeCountSql": true,
        "hitCount": false,
        "countId": null,
        "maxLimit": null,
        "searchCount": true,
        "pages": 0
    }
}

2. 根据 ID 获取用户信息

请求地址：http://localhost:8081/users/{id}

请求方法：GET

请求路径参数：

参数名称	参数类型	是否必须	示例值	参数说明
id	Long	是	1	用户 ID

成功响应：

{
    "code": 200,
    "message": "获取成功",
    "data": {
        "id": 1,
        "username": "user1",
        "password": "password1",
        "nickname": "张三"
    }
}

3. 注册

请求地址：http://localhost:8081/users/register

请求方法：POST

请求参数：

参数名称	参数类型	是否必须	示例值	参数说明
username	String	是	user-11	用户名
password	String	是	pass-11	密码
nickname	String	否	lihua	昵名

请求示例：

{
    "username": "user-11",
    "password": "pass-11",
    "nickname":"lihua"
}

成功响应：

{
    "code": 200,
    "message": "注册成功",
    "data": {
        "id": 4,
        "username": "user-11",
        "password": "pass-11",
        "nickname": "lihua"
    }
}

失败响应：

{
    "code": 500,
    "message": "用户名已存在"
}

4. 登录

请求地址：http://localhost:8081/users/login

请求方法：POST

请求参数：

参数名称	参数类型	是否必须	示例值	参数说明
username	String	是	user-1	用户名
password	String	是	pass-1	密码

请求示例：

{
    "username": "user2",
    "password": "password2"
}

成功响应：

{
    "code": 200,
    "message": "登录成功",
    "data": {
        "password": "password2",
        "nickname": "李四",
        "id": 2,
        "username": "user2"
    }
}

失败响应：

{
    "code": 401,
    "message": "用户名或密码错误",
    "data": null
}

5. 新增用户

请求地址：http://localhost:8081/users/

请求方法：POST

请求参数：

参数名称	参数类型	是否必须	示例值	参数说明
username	String	是	user-12	用户名
password	String	是	pass-12	密码
nickname	String	否	小李	昵名

请求示例：

{
    "username": "user-12",
    "password": "pass-12",
    "nickname": "小李"
}

成功响应：

{
    "code": 200,
    "message": "新增成功",
    "data": {
        "id": 5,
        "username": "user-12",
        "password": "pass-12",
        "nickname": "小李"
    }
}

失败响应：

{
    "code": 500,
    "message": "新增失败"
}

uniapp-含有后端的登录注册页面编写（二）：https://developer.aliyun.com/article/1421016

uniapp-含有后端的登录注册页面编写（一）