Space Cloud 基础待办事项应用开发实战-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00681/article/details/148550228

Space Cloud 基础待办事项应用开发实战

space-cloud Open source Firebase + Heroku to develop, scale and secure serverless apps on Kubernetes 项目地址: https://gitcode.com/gh_mirrors/sp/space-cloud

项目概述

Space Cloud 是一个开源的服务器平台，提供数据库、认证、实时功能等后端服务。本文将通过一个基础待办事项(TODO)应用的实现，展示如何使用 Space Cloud 的 JavaScript SDK 快速构建全栈应用。

环境准备

在开始之前，确保你已经：

安装并运行了 Space Cloud 服务
创建了一个名为"basic-todo-app"的项目
配置了 MongoDB 数据库连接

前端实现解析

1. 引入 Space API 库

在 HTML 头部引入 Space Cloud 的 JavaScript SDK：

<script src="https://spaceuptech.com/downloads/libraries/space-api.js"></script>

这个库提供了与 Space Cloud 后端交互的所有必要方法。

2. 初始化 API 客户端

在 JavaScript 代码中初始化 API 客户端：

var api = new Space.API("basic-todo-app", "http://localhost:4122");
var db = api.Mongo();

这里我们：

指定了项目名称"basic-todo-app"
设置 Space Cloud 服务地址为本地开发环境
获取 MongoDB 数据库操作接口

3. 用户认证功能实现

用户登录

function login() {
  var email = document.getElementById("txtEmail1").value;
  var pass = document.getElementById("txtPass1").value;
  
  db.signIn(email, pass).then(res => {
    if (res.status == 200) {
      api.setToken(res.data.token);
      userId = res.data.user._id;
      // 获取并显示用户待办事项
      loadTodos();
      alert("登录成功");
    } else {
      alert("登录失败");
    }
  });
}

登录流程解析：

获取用户输入的邮箱和密码
调用 signIn 方法进行认证
成功后保存 token 和用户 ID
加载用户的待办事项列表

用户注册

function signUp() {
  var email = document.getElementById("txtEmail2").value;
  var name = document.getElementById("txtName2").value;
  var pass = document.getElementById("txtPass2").value;
  
  db.signUp(email, name, pass, "default").then(res => {
    if (res.status == 200) {
      api.setToken(res.data.token);
      alert("注册成功");
    } else {
      alert("注册失败");
    }
  });
}

注册流程解析：

获取用户输入的邮箱、用户名和密码
调用 signUp 方法创建新用户
"default"参数指定用户角色

4. 待办事项功能实现

添加待办事项

function addTodo() {
  var todo = document.getElementById("txtTodo").value;
  
  db.insert("todos")
    .one({ todo: todo, userId: userId })
    .then(res => {
      if (res.status == 200) {
        printTodo(todo);
      }
    });
}

功能解析：

获取用户输入的待办事项内容
将事项插入到"todos"集合中
关联当前用户ID
成功后在前端显示新增事项

加载待办事项

function loadTodos() {
  db.get("todos")
    .where(Space.cond("userId", "==", userId))
    .all()
    .then(res => {
      if (res.status == 200) {
        res.data.result.forEach(element => {
          printTodo(element.todo);
        });
      }
    });
}

功能解析：

查询"todos"集合
使用条件筛选只获取当前用户的事项
遍历结果并在前端显示

显示待办事项

function printTodo(todo) {
  var list = document.getElementById("todos");
  var todos = list.innerHTML;
  todos += "<li>" + todo + "</li>";
  list.innerHTML = todos;
}