Rookie Edition (2017.11.28)

(1) Front end: Vue2 + Element UI

(2) Back-end: Node + Koa2

(3) Database: MongoDB + Mongoose

(4) Function: login (For other functions, please refer to the extension of login function)

Online address

Project initiation process:

1. After you have removed the project from GitHub, download the MongoDB installation package

MongoDB download

2. Install the MongoDB installation package and click Next

3. After MongoDB is installed, create a DB folder as the repository and a runmongo. bat file as the repository.

Runmongo.bat contains the following contents:



4. Invoke the cli in vue2-project and enter

npm installCopy the code

Press Enter and wait for the dependency package installation to complete.

Call the command line in koA2-project and type

npm installCopy the code

Press Enter and wait for the dependency package installation to complete

5. Double-click the runmongo. bat file to start the MongoDB service. If the following information is displayed, the MongoDB service is successfully started:



Do not close the command line window; otherwise, the service is also closed. Invoke the command line from the koA2-project root folder and enter

npm startCopy the code

Press Enter. If the console prints the following information, it succeeds:



6. Visit http://localhost:3000/initData/addAdmin in the browser, the following is the admin information successfully inserted into the database:



7. Invoke the cli in vue2-project and enter

npm run devCopy the code

Press Enter. The console displays the following information successfully:



8. The following page is displayed when you visit http://localhost:8080:

Click login to access the background admin information and the result is returned. If the jump succeeds, the background page is as follows:



Chicken soup cooked all day

As a front-end novice gatekeeper, I know the “do it yourself” principle, so in this article I will teach you how to get the project up and running, if the project is successfully running on your computer. Very good! You’re halfway there.

Next only need to carefully read this project code, and can be improved to expand, then the full stack is expected, the great cause can also ~