This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

Writing in the front

This chat will take you to use PHP framework Lumen and Vue to build a single page application of list class. Not only can you learn the relevant development knowledge and process initially, but also you can develop a list software by yourself to manage the complicated trivia in your life in the form of a list. In addition, I hope you can update and iterate on the basis of chat and release an app of your own so that more people can become your users. Due to space constraints, I’m going to focus on the core of the entire development. There will be a very detailed course in the future, which records all the operational processes from requirement analysis, environment construction to project launch. You can think of it as a stripped-down version that takes away the core content, but rest assured, it doesn’t stop you from getting into the game and developing your own product. Chat involves two projects, a front end, a back end, source code and DEMO address at the end of the article, the front end is less, you can directly pull the code to learn.

Why a manifest application?

Lists are a very good way of life to plan personal time and improve efficiency. The combination of lists and thinking is a kind of elite thinking. Lists can help you become a disciplined person. If you’re interested, I recommend Artugwende’s List Life. Secondly, the list application is something that can be easily implemented. In this lesson, we only need to implement user registration, login and exit, and add, delete, change and check the list list, which meets the minimum function threshold of the list.

Demand analysis

The software we’re going to do is not commercial in any way, it’s just a simple list application, so the function points involved are very simple, just list data – add, delete, change and check items, and then add a user system, so that users can register and use the list application, that’s all. Ok, we have a general product framework, so let’s start sorting out the functions of this product. There are 2 modules and 8 function points in total.

  • User module – Login function (login)
  • User Module – Registration Function (register)
  • User Module – Data Settings (updateUserInfo)
  • User Module – Reset password (resetPassword)
  • List module – New to-do list – Default not completed (addTodo)
  • List module – Change the to-do list to completed (updateTodo)
  • List module – Delete to-do list (delTodo)
  • List module – View all items (unfinished and completed) (getTodoList)

Environment to prepare

The back-end project uses Lumen6.0, so it is recommended that you configure the following environment according to the documentation:

  • PHP > = 7.2 x
  • OpenSSL PHP extensions
  • The PDO PHP extensions
  • Mbstring PHP extensions
  • Composer package manager

The front-end project is constructed with VUE-CLI3.0, which meets the following requirements:

  • The Node > = 8.12.0
  • Npm > = 6.4.1

Install the Lumen

To do this, you need to set up PHP and already have Composer installed. I recommend you to use the Wamp integration environment, which is a little easier to configure. Of course, you can use any other integration tools you like. Follow me step by step to achieve ~

Install by Composer

It may be slow to install dependencies, so go for a cup of coffee, and if you’re not ready, have another cup.

composer create-project --prefer-dist laravel/lumen todo-api
Copy the code

Generate APP_KEY

The first thing you need to do is generate an APP_KEY for your app. If APP_KEY is not set, your user Session and other encrypted data are not secure (well, we didn’t use encrypted data this time). Create a new KeyGenerateCommand. PHP file under AppConsoleCommands and paste the following:


      
 
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); }}Copy the code

Then modify the kernel. PHP file under AppConsole, as shown in the figure below:

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

Open the terminal and enter the command to generate APP_KEY. The command is successfully generated.

php artisan key:generate
Copy the code

Note: The Lumen resolution address needs to be set to the project’s public directory.

Database design

The users table

Now that we have designed the user login/registration function, there will be the login account (email) and password (password), and a randomly generated user ID (11 characters). According to the requirements of our previous analysis, You can know that the account and default nickname (nick_name) are in the email format (email), and one gender (sex) is male by default. The sex field is represented by an int (1 for male, 2 for female), rather than a string. This saves some database space. In addition, two fields created_AT and updated_AT need to be added, representing the creation time and update time respectively. This is because Lumen model design requires these two fields, and these two fields are named by default. Lumen will automatically update the values of these two fields when data is created or updated.

List of tables

The main contents of a list are user_id, Todo_id, Content, and Status. The user ID needs to correspond to the ID of the user table to determine which user the todo belongs to. Todo_id generates a random character of length 11, like the user ID. We use an int to store the status of toDO. 1 indicates unfinished, and 2 indicates completed. Similarly, the manifest table has created time (CREATED_AT) and update time (updated_AT) fields.

Execute SQL statement

Based on the above analysis of user table fields, we can design a todo_user table as follows:

CREATE TABLE `todo_user`  (
  `id` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'user ID',
  `nick_name` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'Nickname, default mailbox',
  `email` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'Email Account',
  `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'password',
  `sex` int(1) NOT NULL COMMENT 'Sex, 1- male, 2- female',
  `created_at` datetime(0) NOT NULL COMMENT 'Creation time',
  `updated_at` datetime(0) DEFAULT NULL COMMENT 'Update Time'.PRIMARY KEY (`id`) USING BTREE
) ENGINE = MyISAM CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = 'User table' ROW_FORMAT = Dynamic;
Copy the code

The todo_list is as follows:

CREATE TABLE `todo_list`  (
  `user_id` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'user ID',
  `todo_id` varchar(11) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'listing ID',
  `content` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT 'content',
  `status` int(1) NOT NULL COMMENT 'Status, 1- incomplete, 2- Completed',
  `created_at` datetime(0) NOT NULL COMMENT 'Creation time',
  `updated_at` datetime(0) DEFAULT NULL COMMENT 'Update Time'.PRIMARY KEY (`user_id`) USING BTREE
) ENGINE = MyISAM CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = 'List list' ROW_FORMAT = Dynamic;
Copy the code

Welcome to other articles

  • Internationalize your website with Vite2+Vue3 | August Update Challenge
  • Actual combat: The front-end interface request parameters are confused
  • Practice: Implement a Message component with Vue3
  • Actual combat: Vue3 Image components, incidentally support lazy loading
  • What updates does One Piece, vue.js 3.0 bring
  • An article digests the major new features of ES7, ES8, and ES9
  • Common problems and solutions for technical teams
  • Introduction to 10 common new features in ES6
  • Vue3 script Setup syntax is really cool