实战：使用 Lumen 和 Vue 构建个人清单应用（一）环境准备和数据库设计这是我参与8月更文挑战的第27天，活动详情

这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

写在前面

本场 chat 将带你使用 PHP 框架 Lumen 和 Vue 构建一个清单类的单页应用，不仅可以让你初步学到相关的开发知识和流程，还可以自己动手开发一个清单软件，以清单的形式管理自己生活中的繁杂琐事，除此之外，我更希望你可以在本场 chat 的基础上，更新迭代，发布一款属于自己的应用，让更多人成为你的用户。由于篇幅限制，我将着重于整个开发的核心部分，内容太长的话看着也烦对吧。后续会有非常详细的课程，里面记录了包括从需求分析、环境搭建到项目上线，所有的操作流程。你可以理解为这是其中的一个精简版，把核心的内容抽离了出来，但是放心，这并不影响你上手并开发一款属于自己的产品。 chat 涉及到的两个项目，一个前端，一个后端，源代码和 DEMO 地址在文末，前端的篇幅较少，你可以直接拉取代码学习。

为什么是清单应用？

清单是一个非常好的规划个人时间和提升效率的一个生活方式，清单和思考结合，就是一种精英思维。清单可以让你成为一个足够自律的人。如果你有兴趣，向您推荐阿图葛文德的《清单人生》。其次，清单应用是一个可以很简单就实现的东西，在这节课中，我们只需要实现用户的注册登录退出、以及清单列表的增删改查即可，这就满足了清单使用的最低功能门槛。

需求分析

我们要做的软件不考虑任何商业性，它只是一个简单的清单应用，所以涉及的功能点也极其的精简，就是清单数据-代办事项的增删改查嘛，然后再加上用户系统，让用户可以自行注册然后使用这个清单应用，这就够了。好，我们有了大概的产品框架，那就开始梳理这款产品的功能，一共2个模块，8个功能点。

用户模块-登录功能（login）
用户模块-注册功能（register）
用户模块-资料设置（updateUserInfo）
用户模块-重置密码（resetPassword）
清单模块-新增代办事项-默认未完成（addTodo）
清单模块-更改待办事项为已完成（updateTodo）
清单模块-删除待办事项（delTodo）
清单模块-查看所有代办事项（未完成和已完成）（getTodoList）

环境准备

后端项目采用的是 Lumen6.0，所以按照文档的推荐，建议你配置以下环境：

PHP >= 7.2.x
OpenSSL PHP 扩展
PDO PHP 扩展
Mbstring PHP 扩展
Composer 包管理器前端项目使用 Vue-Cli3.0 构建，满足以下要求即可：
Node >= 8.12.0
Npm >= 6.4.1

安装 Lumen

在此之前，你需要搭建好 PHP 环境并且已经安装好了 Composer，建议你使用 Wamp 集成环境，配置稍微简单些，当然，你可以使用你喜欢的其它集成工具，接下来是我的表演，如果你能行，那就按照你的操作去做就是了，否则，就跟着我一步一步的实现~

通过 Composer 安装

在安装依赖的时候可能会很慢，可以先去喝杯咖啡，回来还没好的话，再来一杯吧那就。

composer create-project --prefer-dist laravel/lumen todo-api

生成 APP_KEY

安装完的第一件事，就是给你的应用生成一个 APP_KEY（应用程序密钥），如果 APP_KEY 没有被设置的话，你的用户 Session 和其它的加密数据都是不安全的（嗯，虽然我们这次没用到以密钥加密的数据）。在 AppConsoleCommands下新建 KeyGenerateCommand.php 文件，并粘贴以下内容：

<?php
 
namespace App\Console\Commands;
 
use Illuminate\Console\Command;
 
class KeyGenerateCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'key:generate';
 
    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Set the application key';
 
    /**
     * Execute the console command.
     *
     * @return void
     */
    public function handle()
    {
        $key = $this->generateRandomKey();
 
        file_put_contents(base_path('.env'), preg_replace(
            '/^APP_KEY=[\w]*/m',
            'APP_KEY='.$key,
            file_get_contents(base_path('.env'))
        ));
 
        $this->info("Application key [$key] set successfully.");
    }
 
    /**
     * Generate a random key for the application.
     *
     * @return string
     */
    protected function generateRandomKey()
    {
        return \Illuminate\Support\Str::random(32);
    }
 
}

然后修改 AppConsole 下的Kernel.php 文件，如图：

protected $commands = [
	'App\Console\Commands\KeyGenerateCommand',
];

打开终端输入生成 APP_KEY 的命令，生成成功。

php artisan key:generate

注意：Lumen 的解析地址需要设置为项目的 public 目录。

数据库设计

用户表

我们既然设计了用户登录/注册功能，那么就会有登录账号（email）和密码（password），以及一个随机生成的用户ID（11位字符），根据我们之前分析的需求，可以知道是账号和默认昵称（nick_name）是邮箱格式（email）,以及一个性别（sex）默认是男性。这里的 sex 字段采用整型（int）表示，1为男性，2为女性，而不是直接存字符串，这么做的好处是可以节省一定的数据库空间。此外，还需要增加 created_at和 updated_at两个字段，分别代表创建时间和更新时间，这是由于 Lumen 的模型设计会需要这两个字段，并且默认这两个字段名，在数据创建或更新的时候，Lumen 会自动的更新这两个字段的值。

清单表

清单表的主要内容有：用户 ID（user_id）、代办事项 ID（todo_id）、清单内容（content）以及清单状态（status）。用户 ID 需要和用户表的 ID 相对应，以便判断该条 todo 属于哪一个用户。todo_id生成跟用户 ID 一样，是长度为 11 的随机字符。我们用整型（int）来存储 todo 的状态 status。1 表示未完成，2 表示已完成。同样，清单表也有创建时间（created_at）和更新时间（updated_at）两个字段。

执行 SQL 语句

根据以上对用户表字段的分析，我们可以设计一个 todo_user 表，如下：

CREATE TABLE `todo_user`  (
  `id` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户ID',
  `nick_name` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '昵称，默认邮箱',
  `email` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '邮箱账号',
  `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '密码',
  `sex` int(1) NOT NULL COMMENT '性别，1-男性，2-女性',
  `created_at` datetime(0) NOT NULL COMMENT '创建时间',
  `updated_at` datetime(0) DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = MyISAM CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '用户表' ROW_FORMAT = Dynamic;

todo_list 表如下：

CREATE TABLE `todo_list`  (
  `user_id` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '用户ID',
  `todo_id` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '清单ID',
  `content` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '内容',
  `status` int(1) NOT NULL COMMENT '状态，1-未完成，2-已完成',
  `created_at` datetime(0) NOT NULL COMMENT '创建时间',
  `updated_at` datetime(0) DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`user_id`) USING BTREE
) ENGINE = MyISAM CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '清单表' ROW_FORMAT = Dynamic;

实战：使用 Lumen 和 Vue 构建个人清单应用（一）环境准备和数据库设计