Skip to content
TodoMVC sample project
JavaScript CSS Java HTML Shell
Branch: develop
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
hooks
oss-todomvc-app
oss-todomvc-gateway
oss-todomvc-jquery
oss-todomvc-react
oss-todomvc-sdk
oss-todomvc-security
oss-todomvc-thymeleaf
src/main/resources
.editorconfig
.gitconfig
.gitignore
.gitlab-ci.yml
.travis.yml
LICENSE
README.md
ci.sh
pom.xml

README.md


如果你正在通过git服务查看此文档,请移步项目网站或gitbook查看文档,因为git服务生成的文档链接有问题。


oss-todomvc

简介

TodoMVC介绍

TodoMVC项目旨在帮助前端在海量的MV框架中进行选择,它使用不同的最流行的JavaScript MV框架(例如Backbone、 Ember、AngularJS、Spine…)实现了一个相同的Todo应用。可以在TodoMVC的首页找到完整的框架实现列表,前端开发人员可以通过这个项目快速进入前端MV*框架的学习。

oss-todomvc项目介绍

oss-todomvc主要目的如下:

  • 作为完整的demo项目,介绍oss相关服务、框架库的基本使用
  • 演示不同的前端方案与后端接入方式的区别
  • 说明在接入oss的场景下,项目的基本架构、形态
  • 说明微服务场景下,针对软件的测试、构建、部署,我们提供的解决方案

我们选取了 todomvc 的 jquery 和 react 项目,同时我们创建了通过后端模板技术实现的 oss-todomvc-thymeleaf 项目.在原有TodoMVC项目的基础之上,我们扩充了如下功能:

  • 登录页面和登录/登出/用户身份认证逻辑
  • 从java后端获取数据,替代之前将存储放在localStorage的方案
  • 加入了错误反馈

从工程的角度,我们加入了如下实践:

  • 所有项目的Docker构建
  • 针对RPC场景下,集成测试时启动依赖服务的支持
  • 从ci到cd的best practise

架构与模块简介

oss-todomvc大体架构如下所示:

todomvc-serials-architecture

  • 绿色的箭头表示前后端、服务提供者和消费者之间的数据交互。
  • 红色虚线表示服务提供者和消费者在eureka上的注册与发现。
  • 橙色的箭头表示web服务从configserver上拉取配置信息。

oss-configserver && oss-eureka

oss-todomvc所有的web service统一从oss-configserver拉取配置,使用oss-eureka作为RPC框架。其中oss-todomvc-app作为服务提供者provider,oss-todomvc-thymeleaf 以及oss-todomvc-gateway作为服务消费者。

  • configserver是oss提供的配置中心服务。configserver启动之后会在eureka上注册自身。
  • eureka是oss提供的服务注册/发现的服务。接入OSS的RPC项目与eureka会有两方面的交互:
    • 从eureka获取configsrver的信息,然后再到configserver上面获取应用自身的配置;
    • 在eureka进行服务注册,以及通过名字发现服务提供者。

具体使用请参见相关文档。

oss-todomvc-app

oss-todomvc-appRESOURCE类型的项目,作为服务提供者,为所有的消费者提供基于认证的资源访问接口。

oss-todomvc-sdk

oss-todomvc-sdk作为oss-todomvc-app的客户端SDK,封装了对服务提供方资源请求的所有操作,供服务消费者调用。

oss-todomvc-security

oss-todomvc-security作为安全层,分别作用在oss-todomvc-apposs-todomvc-gatewayoss-todomvc-thymeleaf项目,提供用户登录认证的支持。

oss-todomvc-thymeleaf

  • 使用模板技术thymeleaf生成前端。
  • 作为服务消费者,通过oss-todomvc-sdk,向服务提供者发起请求。

oss-todomvc-gateway

  • oss-todomvc-gateway项目通过引入spring cloud zuul依赖,实现对oss-todomvc-app的代理请求。
  • 作为oss-todomvc-jquery项目和oss-todomvc-react项目的后端。

oss-todomvc-jquery

  • 基于todomvc的jquery项目
  • 多页面前端程序,未使用前端构建系统
  • 使用ajax向后端oss-todomvc-gateway发起请求
  • 项目打包成webjars形式,与oss-todomvc-gateway整合到一个jar包。

oss-todomvc-react

  • 基于todomvc的react项目
  • 单页面应用程序,使用wbepack作为构建系统
  • 开发中使用大量的es6以及es7 stageX标准。使用fetch + promise实现异步数据请求。
  • 项目打包成webjars形式,与oss-todomvc-gateway整合到一个jar包。

详细实现请阅读各模块文档。

本地启动

环境配置及启动 docker 容器

为方便用户快速接入,我们提供了todomvc系列的docker镜像。用户可以按照如下步骤在本机启动todomvc的docker容器:

  • 用户首先按照这篇文档设置本机的环境变量

  • 其次,需要按照这篇文档设置本机的环境变量,并启动相关的基础服务如configserver、eureka等。

  • 最后,在 oss-todomvc 目录通过如下命令启动:

    export DOCKER_REGISTRY=<公司内部docker-registry域名> &&
    docker-compose pull && docker-compose up -d

访问

测试用户名及密码:

  • 用户名: user0 ~ user9
  • 测试密码: password0 ~ password9

集成测试支持

TODO

测试及生产部署方案

TODO

References

  1. TodoMVC官网
  2. oss-todomvc-app文档
  3. oss-todomvc-sdk文档
  4. oss-todomvc-security文档
  5. oss-todomvc-thymeleaf文档
  6. oss-todomvc-gateway文档
  7. oss-todomvc-jquery文档
  8. oss-todomvc-react文档
You can’t perform that action at this time.