構建基於Java Spring Boot和Uniapp的心理小程式：從零到一的完整指南

自足發表於2024-07-20
JavaSpring BootAPP

構建基於Java Spring Boot和Uniapp的心理小程式：從零到一的完整指南

前言

大家好，今天我們來聊聊如何使用Java Spring Boot和Uniapp構建一個心理小程式。這個專案不僅能幫助你提升技術水平，還能為使用者提供心理健康支援。我們將從專案的整體架構開始，逐步深入到具體的程式碼實現。希望這篇文章能對你有所幫助。

專案架構

首先，我們需要明確專案的整體架構。這個心理小程式主要分為兩個部分：

  1. 後端服務：使用Java Spring Boot來處理業務邏輯和資料儲存。
  2. 前端小程式：使用Uniapp來構建使用者介面和互動。

環境準備

在開始之前，請確保你已經安裝了以下工具：

  • JDK 8或以上版本
  • Maven
  • Node.js
  • HBuilderX（用於開發Uniapp）

後端服務開發

建立Spring Boot專案

首先，我們使用Spring Initializr來生成一個Spring Boot專案。選擇以下依賴：

  • Spring Web
  • Spring Data JPA
  • MySQL Driver

生成專案後，解壓並匯入到你的IDE中。

配置資料庫

在application.properties檔案中配置資料庫連線：

spring.datasource.url=jdbc:mysql://localhost:3306/psychology_app
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.jpa.hibernate.ddl-auto=update
建立實體類

接下來，我們建立一個使用者實體類，用於儲存使用者資訊。

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    private String email;

    // Getters and Setters
}
建立Repository介面
public interface UserRepository extends JpaRepository<User, Long> {
    User findByUsername(String username);
}
建立服務層
@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    public User register(User user) {
        return userRepository.save(user);
    }

    public User login(String username, String password) {
        User user = userRepository.findByUsername(username);
        if (user != null && user.getPassword().equals(password)) {
            return user;
        }
        return null;
    }
}
建立控制器
@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public ResponseEntity<User> register(@RequestBody User user) {
        return ResponseEntity.ok(userService.register(user));
    }

    @PostMapping("/login")
    public ResponseEntity<User> login(@RequestBody Map<String, String> credentials) {
        User user = userService.login(credentials.get("username"), credentials.get("password"));
        if (user != null) {
            return ResponseEntity.ok(user);
        }
        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
    }
}

前端小程式開發

建立Uniapp專案

開啟HBuilderX，選擇“新建專案”，然後選擇“uni-app”模板。接下來，我們建立一個簡單的登入和註冊頁面。

登入頁面

在pages/login/login.vue中：

<template>
  <view class="content">
    <input v-model="username" placeholder="使用者名稱" />
    <input v-model="password" type="password" placeholder="密碼" />
    <button @click="login">登入</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      const response = await uni.request({
        url: 'http://localhost:8080/api/users/login',
        method: 'POST',
        data: {
          username: this.username,
          password: this.password
        }
      });
      if (response[1].statusCode === 200) {
        uni.showToast({
          title: '登入成功',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '登入失敗',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style>
/* 新增一些簡單的樣式 */
.content {
  padding: 20px;
}
</style>
註冊頁面

在pages/register/register.vue中：

<template>
  <view class="content">
    <input v-model="username" placeholder="使用者名稱" />
    <input v-model="password" type="password" placeholder="密碼" />
    <input v-model="email" placeholder="郵箱" />
    <button @click="register">註冊</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      email: ''
    };
  },
  methods: {
    async register() {
      const response = await uni.request({
        url: 'http://localhost:8080/api/users/register',
        method: 'POST',
        data: {
          username: this.username,
          password: this.password,
          email: this.email
        }
      });
      if (response[1].statusCode === 200) {
        uni.showToast({
          title: '註冊成功',
          icon: 'success'
        });
      } else {
        uni.showToast({
          title: '註冊失敗',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style>
/* 新增一些簡單的樣式 */
.content {
  padding: 20px;
}
</style>

結語

透過這篇文章，我們從零開始構建了一個基於Java Spring Boot和Uniapp的心理小程式。我們涵蓋了後端服務的搭建、資料庫配置、前端頁面的建立以及前後端的聯調。希望這篇文章能對你有所幫助，如果你有任何問題或建議，歡迎在評論區留言。

祝你編碼愉快！

百萬大學生都在用的AI寫論文工具，篇篇無重複👉: AI寫論文

相關文章