这里介绍如何使用前端 Vue 框架配合 Lealone 数据库内置的 RPC 和 ORM 框架开发一个简单的全栈微服务应用。

Lealone 的学习成本极低，下文只有启动 HttpServer 的代码需要引入 Lealone 的类，
其他应用开发人员负责编写的代码无需导入 Lealone 的任何东西(比如类、接口、注解)。

文章最后有完整的项目代码，可直接下载到本机上尝试。

1. 启动 http server

  1.     public static void startHttpServer() {
  2.         // 通过JDBC访问的数据库的URL
  3.         String jdbcUrl = "jdbc:lealone:embed:test";
  5.         // 静态资源文件的根目录，如果有多个可以用逗号分隔
  6.         String webRoot = "./web";
  8.         // 启动HttpServer，请在浏览器中打开下面这个URL进行测试:
  9.         // http://localhost:8080/fullStack.html
  10.         HttpServer server = new HttpServer();
  11.         server.setJdbcUrl(jdbcUrl);
  12.         server.setWebRoot(webRoot);
  13.         server.start();
  14.     }

2. 建表

  1. -- 创建表: user，会生成一个名为 User 的模型类
  2. create table if not exists user (
  3.   id long auto_increment primary key,
  4.   name varchar,
  5.   age int
  6. )
  7. package 'org.lealone.examples.fullstack.generated.model' -- User 类所在的包名
  8. generate code './src/main/java' -- User 类的源文件所在的根目录

这一步用于创建 user 表，加了新的扩展语法， 如果指定 generate code，会生成一个名为 User 的模型类：

  1. /**
  2.  * Model for table 'USER'.
  3.  *
  4.  * THIS IS A GENERATED OBJECT, DO NOT MODIFY THIS CLASS.
  5.  */
  6. public class User extends Model<User> {
  8.     public static final User dao = new User(null, ROOT_DAO);
  10.     public final PLong<User> id;
  11.     public final PString<User> name;
  12.     public final PInteger<User> age;
  14.     public User() {
  15.         this(null, REGULAR_MODEL);
  16.     }

User 模型类生成的代码是不用修改的，采用的是一种简化的充血模型， 可以基于模型类的字段来构建出跟普通 SQL 极其相似的类型安全的 DSL，下文会有用法演示。

3. 创建后端服务

  1. -- 创建服务: user_service，会生成一个对应的 UserService 接口
  2. create service if not exists user_service (
  3.   add_user(name varchar, age int) long, -- 定义 UserService 接口方法 add_user
  4.   find_by_name(name varchar) user -- 定义 UserService 接口方法 find_by_name
  5. )
  6. package 'org.lealone.examples.fullstack.generated.service' -- UserService 接口所在的包名
  7. implement by 'org.lealone.examples.fullstack.UserServiceImpl' -- UserService 接口的默认实现类
  8. generate code './src/main/java' -- UserService 接口源文件的根目录

这一步用于描述一个服务的相关信息，比如它有哪些可调用的方法， 会为每个服务生成一个对应的Java接口，并指定服务接口的默认实现类。 通过 create service 语句创建的服务在内部会被托管， 服务的注册与发现功能已经内置在框架当中，不需要再依赖其他第三方组件。

4. 实现后端服务

  1. package org.lealone.examples.fullstack;
  3. import org.lealone.examples.fullstack.generated.model.User;
  4. import org.lealone.examples.fullstack.generated.service.UserService;
  6. public class UserServiceImpl implements UserService {
  7.     @Override
  8.     public Long addUser(String name, Integer age) {
  9.         // 如果 name = 'zhh', age = 18
  10.         // 对应的sql是: insert into user(name, age) values('zhh', 18);
  11.         return new User().name.set(name).age.set(age).insert(); // 链式调用，insert()返回新增记录的 rowId
  12.     }
  14.     @Override
  15.     public User findByName(String name) {
  16.         // 如果 name = 'zhh'
  17.         // 对应的 sql 是: select * from user where name = 'zhh' limit 1
  18.         return User.dao.where().name.eq(name).findOne();
  19.     }
  20. }

服务实现类就是一个最普通的接口实现类，服务框架对服务实现类是无侵入的。

这里也演示了 Lealone ORM 框架的基本用法，ORM 框架对应用代码也是无侵入的。

Lealone ORM 框架的更多用法演示可以尝试一下这个 lealone-orm-demo

Lealone ORM 框架快速入门

5. 在前端使用后端服务

  1. <!doctype html>
  2. <html>
  4. <head>
  5.     <script src="sockjs-1.1.2.js"></script>
  6.     <script src="lealone-5.0.0.js"></script>
  7.     <script src="vue.min-2.3.3.js"></script>
  8. </head>
  10. <body lang="en">
  11.     <h1>full stack test</h1>
  13.     <div id="add">
  14.         name: <input v-model="name">
  15.         age <input v-model="age">
  16.         <button v-on:click="addUser">add</button>
  17.         <p>{{ message }}</p>
  18.     </div>
  20.     <div id="find"> 
  21.         name: <input v-model="name">
  22.         <button v-on:click="findByName">find</button>
  23.         <p>{{ message }}</p>
  24.     </div>
  26.     <script>
  27.     //获得一个服务代理
  28.     var userService = lealone.getService("user_service");
  30.     new Vue({
  31.         el: '#add',
  32.         data: {
  33.             name: "zhh",
  34.             age: "18",
  35.             message: ""
  36.         },
  37.         methods: {
  38.             addUser: function() {
  39.                 var that = this;
  40.                 //调用服务
  41.                 userService.addUser(this.name, this.age, function(id) {
  42.                     that.message = "add user: " + that.name + ", return id: " + id;
  43.                 });
  44.             }
  45.         }
  46.     });
  47.     new Vue({
  48.         el: '#find',
  49.         data: {
  50.             name: "zhh",
  51.             message: ""
  52.         },
  53.         methods: {
  54.             findByName: function() {
  55.                 var that = this;
  56.                 //调用服务
  57.                 userService.findByName(this.name, function(user) {
  58.                     that.message = "user: " + user;
  59.                 });
  60.             }
  61.         }
  62.     })
  63.     </script>
  64. </body>
  65. </html>

lealone-5.0.0.js 相当于一个 RPC 框架的客户端，通过 sockjs 与后端 RPC 框架通信， 通过 lealone.getService() 方法获得一个服务代理后就可以直接调用后端服务了。

6. 完整例子

下载项目 lealone-fullstack-demo

源码编译与打包请执行 build -p

运行执行 build -r

启动成功后，在浏览器中打开下面这个 URL 进行测试: http://localhost:8080/fullStack.html

7. 可能出现的问题

如果执行 build -p 找不到 Lealone 的依赖包， 需要下载以下项目的代码:

lealone-database

执行 build -i 把它们安装到本地的 maven 仓库即可。