阶段一：练习版 - TodoList 教程

1 环境准备

下面四项都装好并能在终端里执行对应命令后，再进行后续步骤。

1.1 安装 Node.js

访问 nodejs.org 下载 LTS 版本

# 验证安装
node -v    # 显示 v20.x.x
npm -v     # 显示 10.x.x

1.2 安装 JDK 21

访问 adoptium.net 下载 JDK 21

java -version

1.3 安装 MySQL 8

访问 MySQL 官网下载 MySQL Community Server 8.0

CREATE DATABASE todo_jwt CHARACTER SET utf8mb4;

1.4 开发工具

2 创建 SpringBoot 项目

用 Spring 官方页面一键生成项目，下载解压后用 IDEA 打开即可。下表是页面上要选的选项，按表填写后点击生成。

提示访问 start.spring.io 在线创建

选项	值
Project	Maven Project
Language	Java
Spring Boot	3.2.x
Group	com.example
Artifact	todo-jwt

添加依赖：Spring Web、Spring Data JPA、MySQL Driver、Lombok

手动添加 MyBatis 和 JWT 需手动添加到 pom.xml。下面已给出完整 JWT 三依赖（api + impl + jackson），直接复制即可，避免编译报错。

<!-- MyBatis -->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>3.0.3</version>
</dependency>

<!-- JWT（三个依赖同版本，避免编译报错）-->
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-api</artifactId>
    <version>0.12.3</version>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-impl</artifactId>
    <version>0.12.3</version>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-jackson</artifactId>
    <version>0.12.3</version>
    <scope>runtime</scope>
</dependency>

3 数据库设计

在 MySQL 里新建库后，执行下面 SQL 建两张表：用户表存手机号与密码，待办表存待办内容与所属用户。

-- 用户表
CREATE TABLE user (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    phone VARCHAR(20) UNIQUE,
    password VARCHAR(100)
);

-- 待办表
CREATE TABLE todo (
    id BIGINT PRIMARY KEY AUTO_INCREMENT,
    phone VARCHAR(20),
    content VARCHAR(255),
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP
);

4 配置数据库

在项目的 src/main/resources 下找到 application.properties，修改为你的数据库地址、用户名和密码：

# 数据库连接
spring.datasource.url=jdbc:mysql://localhost:3306/todo_jwt
spring.datasource.username=root
spring.datasource.password=root123

# JPA
spring.jpa.hibernate.ddl-auto=update

# MyBatis
mybatis.mapper-locations=classpath:mapper/*.xml

5 实体类

实体类对应数据库表，用注解标明主键、字段长度等，JPA 会按此建表或更新表。

User.java

package com.example.todojwt.entity;

import jakarta.persistence.*;
import lombok.Data;

@Data
@Entity
@Table(name = "user")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(unique = true, length = 20)
    private String phone;

    private String password;
}

Todo.java

package com.example.todojwt.entity;

import jakarta.persistence.*;
import java.time.LocalDateTime;

@Data
@Entity
@Table(name = "todo")
public class Todo {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(length = 20)
    private String phone;

    @Column(length = 255)
    private String content;

    private LocalDateTime createTime;
}

6 JPA Repository

Repository 是“访问数据库的接口”，不用写 SQL 也能按方法名查数据（如 findByPhone）。

UserRepository.java

package com.example.todojwt.repository;

import com.example.todojwt.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.Optional;

public interface UserRepository extends JpaRepository<User, Long> {
    Optional<User> findByPhone(String phone);
}

TodoRepository.java

package com.example.todojwt.repository;

import com.example.todojwt.entity.Todo;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;

public interface TodoRepository extends JpaRepository<Todo, Long> {
    List<Todo> findByPhoneOrderByCreateTimeDesc(String phone);
}

7 JWT 工具类

JWT 是什么？ 登录成功后服务器签发的一串加密字符串（Token），之后请求接口时在请求头里带上 Authorization: Bearer <token>，即可证明“我是谁”，无需每次传账号密码。

package com.example.todojwt.util;

import io.jsonwebtoken.*;
import io.jsonwebtoken.security.Keys;
import java.nio.charset.StandardCharsets;
import java.util.Date;

public class JwtUtil {
    private static final String SECRET = "your-256-bit-secret-key-here-must-be-long";
    private static final long EXPIRE_TIME = 24 * 60 * 60 * 1000L;

    // 生成 Token
    public static String generateToken(String phone) {
        return Jwts.builder()
            .subject(phone)
            .issuedAt(new Date())
            .expiration(new Date(System.currentTimeMillis() + EXPIRE_TIME))
            .signWith(Keys.hmacShaKeyFor(SECRET.getBytes(StandardCharsets.UTF_8)))
            .compact();
    }

    // 解析 Token
    public static String parseToken(String token) {
        return Jwts.parser()
            .verifyWith(Keys.hmacShaKeyFor(SECRET.getBytes(StandardCharsets.UTF_8)))
            .build().parseSignedClaims(token).getPayload().getSubject();
    }

    // 验证 Token
    public static boolean validateToken(String token) {
        try {
            Jwts.parser().verifyWith(Keys.hmacShaKeyFor(SECRET.getBytes(StandardCharsets.UTF_8)))
                .build().parseSignedClaims(token);
            return true;
        } catch (JwtException e) {
            return false;
        }
    }
}

安全提醒 生产环境密钥放环境变量，不要硬编码！

8 Controller

AuthController.java

package com.example.todojwt.controller;

import com.example.todojwt.entity.User;
import com.example.todojwt.repository.UserRepository;
import com.example.todojwt.util.JwtUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.Map;
import java.util.Optional;

@RestController
@RequestMapping("/api")
public class AuthController {
    @Autowired UserRepository userRepository;

    @PostMapping("/register")
    public Map<String, Object> register(@RequestBody User user) {
        Map<String, Object> r = new HashMap<>();
        if (userRepository.findByPhone(user.getPhone()).isPresent()) {
            r.put("code", 400); r.put("message", "手机号已注册");
            return r;
        }
        userRepository.save(user);
        r.put("code", 200); r.put("message", "注册成功");
        return r;
    }

    @PostMapping("/login")
    public Map<String, Object> login(@RequestBody User user) {
        Map<String, Object> r = new HashMap<>();
        Optional<User> db = userRepository.findByPhone(user.getPhone());
        if (db.isEmpty() || !db.get().getPassword().equals(user.getPassword())) {
            r.put("code", 401); r.put("message", "手机号或密码错误");
            return r;
        }
        r.put("code", 200);
        r.put("message", "登录成功");
        r.put("token", JwtUtil.generateToken(user.getPhone()));
        return r;
    }
}

TodoController.java

package com.example.todojwt.controller;

import com.example.todojwt.entity.Todo;
import com.example.todojwt.repository.TodoRepository;
import com.example.todojwt.util.JwtUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/api/todo")
public class TodoController {
    @Autowired TodoRepository todoRepository;

    @PostMapping
    public Map<String, Object> add(@RequestBody Todo todo,
                                          @RequestHeader("Authorization") String auth) {
        Map<String, Object> r = new HashMap<>();
        String token = auth.replace("Bearer ", "");
        if (!JwtUtil.validateToken(token)) {
            r.put("code", 401); r.put("message", "Token无效");
            return r;
        }
        todo.setPhone(JwtUtil.parseToken(token));
        todoRepository.save(todo);
        r.put("code", 200); r.put("message", "添加成功");
        return r;
    }

    @GetMapping
    public Map<String, Object> list(@RequestHeader("Authorization") String auth) {
        Map<String, Object> r = new HashMap<>();
        String token = auth.replace("Bearer ", "");
        if (!JwtUtil.validateToken(token)) {
            r.put("code", 401); r.put("message", "Token无效");
            return r;
        }
        List<Todo> todos = todoRepository.findByPhoneOrderByCreateTimeDesc(JwtUtil.parseToken(token));
        r.put("code", 200); r.put("data", todos);
        return r;
    }
}

9 前端：Taro 小程序或 React Native（二选一）

后端接口已就绪，前端任选其一即可：Taro 出微信小程序，React Native 出 iOS/Android 应用，请求同一套 /api/login、/api/todo。

方案一：Taro 小程序

# 全局安装 Taro
npm install -g @tarojs/cli

# 初始化项目
taro init todo-mini
cd todo-mini
npm install

# 启动开发
npm run dev:weapp

登录页 - pages/index/index.vue

<template>
  <view>
    <input v-model="phone" placeholder="手机号">
    <input v-model="password" password placeholder="密码">
    <button @click="login">登录</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';

const phone = ref('');
const password = ref('');

const login = async () => {
  const res = await Taro.request({
    url: 'http://localhost:8080/api/login',
    method: 'POST',
    data: { phone: phone.value, password: password.value }
  });
  if (res.data.code === 200) {
    Taro.setStorageSync('token', res.data.token);
    Taro.navigateTo({ url: '/pages/todo/index' });
  }
};
</script>

待办页 - pages/todo/index.vue

<template>
  <view>
    <input v-model="content" placeholder="添加待办">
    <button @click="addTodo">添加</button>
    <view v-for="item in todos" :key="item.id">
      {{ item.content }}
    </view>
  </view>
</template>

<script setup>
import { ref, onShow } from 'vue';
import Taro from '@tarojs/taro';

const content = ref('');
const todos = ref([]);

const addTodo = async () => {
  const token = Taro.getStorageSync('token');
  await Taro.request({
    url: 'http://localhost:8080/api/todo',
    method: 'POST',
    data: { content: content.value },
    header: { Authorization: `Bearer ${token}` }
  });
  content.value = '';
  loadTodos();
};

const loadTodos = async () => {
  const token = Taro.getStorageSync('token');
  const res = await Taro.request({
    url: 'http://localhost:8080/api/todo',
    header: { Authorization: `Bearer ${token}` }
  });
  todos.value = res.data.data || [];
};

onShow(loadTodos);
</script>

方案二：React Native（iOS/Android）

Expo 和 React Native 的关系与区别

React Native（RN）：用 React 写 iOS/Android 的框架，需配 Xcode/Android Studio 和原生环境才能跑。
Expo：基于 React Native 的「工具链 + 运行时」，不装 Xcode/Android Studio 也能用模拟器或手机扫码跑；内置很多能力（存储、相机等），适合入门和多数业务。
关系：Expo 底层就是 RN，组件写法、调接口方式一致。下面提供两种创建方式，推荐新手用 Expo；需要深度原生定制时再选裸 RN 或 Expo 的 dev client。

创建项目（二选一）

# 方式 A：Expo（推荐，无需 Xcode/Android Studio）
npx create-expo-app@latest TodoRN
cd TodoRN
npx expo install @react-native-async-storage/async-storage

# 方式 B：裸 React Native（需已装 Xcode / Android Studio）
npx @react-native-community/cli@latest init TodoRN --pm npm
cd TodoRN
npm install @react-native-async-storage/async-storage

下面登录/待办代码 Expo 与裸 RN 通用，都是 React 组件 + fetch + AsyncStorage。

登录页示例（App.js 或单独登录屏）：

import React, { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const API = 'http://localhost:8080';  // 真机改为电脑 IP，如 http://192.168.1.100:8080

export default function LoginScreen({ onLogin }) {
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');

  const login = async () => {
    const res = await fetch(`${API}/api/login`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ phone, password })
    });
    const data = await res.json();
    if (data.code === 200) {
      await AsyncStorage.setItem('token', data.token);
      onLogin?.();
    } else Alert.alert('登录失败', data.message);
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput placeholder="手机号" value={phone} onChangeText={setPhone} />
      <TextInput placeholder="密码" value={password} onChangeText={setPassword} secureTextEntry />
      <Button title="登录" onPress={login} />
    </View>
  );
}

待办页示例（带 Token 请求）：

const [todos, setTodos] = useState([]);
const [content, setContent] = useState('');

const loadTodos = async () => {
  const token = await AsyncStorage.getItem('token');
  const res = await fetch(`${API}/api/todo`, {
    headers: { 'Authorization': `Bearer ${token}` }
  });
  const data = await res.json();
  if (data.code === 200) setTodos(data.data || []);
};

const addTodo = async () => {
  const token = await AsyncStorage.getItem('token');
  await fetch(`${API}/api/todo`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
    body: JSON.stringify({ content })
  });
  setContent('');
  loadTodos();
};
// 进入页面时 useEffect(() => { loadTodos(); }, []); 渲染用 FlatList 或 map(todos)

React Native 请求本机接口 模拟器可用 http://localhost:8080；真机需改为电脑局域网 IP（如 http://192.168.1.100:8080），且手机与电脑同一 WiFi。

Expo 如何运行 npx expo start 后，用 iOS 模拟器、Android 模拟器或手机扫二维码即可（手机需装 Expo Go App）。无需单独安装 Xcode/Android Studio。

10 运行测试

IDEA 启动 SpringBoot 项目
Taro：运行 npm run dev:weapp，微信开发者工具打开 todo-mini 项目目录
React Native：若用 Expo，在 TodoRN 目录运行 npx expo start，用模拟器或手机扫码打开；若用裸 RN，运行 npm start 后再新开终端 npx react-native run-android 或 run-ios（需先装 Android Studio / Xcode）
先注册，再登录，添加待办

小程序请求本地接口 开发者工具中需勾选「不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书」，否则请求 localhost 会被拦截。

阶段一完成！ 最小闭环：注册→登录→JWT→增删改查

阶段一：练习版（最小闭环）

1 环境准备

1.1 安装 Node.js

1.2 安装 JDK 21

1.3 安装 MySQL 8

1.4 开发工具

2 创建 SpringBoot 项目

3 数据库设计

4 配置数据库

5 实体类

User.java

Todo.java

6 JPA Repository

UserRepository.java

TodoRepository.java

7 JWT 工具类

8 Controller

AuthController.java

TodoController.java

9 前端：Taro 小程序 或 React Native（二选一）

方案一：Taro 小程序

登录页 - pages/index/index.vue

待办页 - pages/todo/index.vue

方案二：React Native（iOS/Android）

10 运行测试

9 前端：Taro 小程序或 React Native（二选一）

TodoList 教程访问登录