preface

Using Node as backend support has been mature for a long time. We wanted to start from scratch, front-end + back-end + database + deployment. Recently PM wanted an internal requirements site, and the company’s backend bigs didn’t have time to write interfaces. 😝 Then let’s get started and have this project.

Pre-skills:

This project, not difficult, just need a little time and a little patience, can be mastered.

Here are the skills involved and the skills you need to know:

The backend: Koa (Build backend services based on KOA, Koa-router (KOA routing middleware) KOA-BodyParser (middleware that handles KOA POST request parameters) KOA-CORS (middleware that handles cross-domain issues) mysql (database, not much to say) front-end: Vue (vue-router) (VUE-CLI) axios (Ajax request library) Elder-UI (UI library)Copy the code

The project structure

└ ─ ─ needs ├ ─ ─ the client (front) │ ├ ─ ─ the build (vue - generated, cli project configuration) │ ├ ─ ─ the config (vue - cli generated, │ ├─ ├─ ├─ ├─ ├─ ├─ ├─ exercises │ ├─ ├─ router │ ├─ style Style (the public) │ │ └ ─ ─ views (each page) │ │ └ ─ ─ App. Vue (page entry) │ │ └ ─ ─ elementUI. Js (on-demand loaded elementUI) │ │ └ ─ ─ main. Js (entrance) │ ├ ─ ─ Needs (requirements to upload address) ├ ─ ─ server (backend) │ ├ ─ ─ contorllers (controller) │ ├ ─ ─ models (data layer) │ ├ ─ ─ routers (routing) │ ├ ─ ─ util (tools) │ ├ ─ ─ App.js (Project Entry) ├ ─ readme.mdCopy the code

The database

Two tables are required for this project

Needs table:

The user list:

Manual create can, SQL statement create line, anyway there is a database, there is a table OK

Back-end code implementation

The workflow of the back-end interface is as follows:

Access the API addresses >>> in the phones. call the callback functions >>> Call the callbacks in the controllers and call the database functions. Through the database operation method encapsulated in util, complete the database read and write operations, and return the corresponding data.Copy the code

1. Back-end entry file: Server /app.js

Introduce koA and related middleware, create a KOA object APP, use app.use to load each middleware and monitor port 3000. In this case, the exposed port is 3000. After the routing and database operations are completed, interface requests can be made through the http://localhost:3000/+ routing address

2. Routing file:

server/router/api.js

server/router/index.js

Introduce the KOA-Router, document the interface, and export the interface

MySQL database

  1. Main code:server/util/db.js

Mysql > create a connection pool with mysql.createPool; c create a connection pool with mysql.createPool; D create a connection pool with mysql.createPool; The SQL statement is executed through the Query method in the connection context in the callback, and the current connection is released upon execution

  1. Custom database operation methods:server/util/dbMethods.js

The andWhere function is used to process the concatenation of SQL statements with multiple optional parameters

4. Write the controller

server/controllers/needs.js

server/controllers/user.js

The corresponding callback function in the routing file calls the database-facing methods in models and returns the corresponding content to the interface

5. Write Models

server/models/needs.js

server/models/needs.js

In server/util/db.js, we define a method called query, which is used primarily.

It is possible to define a separate function in server/util/db.js, such as insertData(), deleteNeedById(), etc. This makes the code look more semantic and reduces coupling

Front-end code implementation

1, using VUE-CLI directly generate vUE template project, install dependencies and run

  vue init webpack needs

  cd needs

  npm install

  npm run dev
Copy the code

2. Write routing files

Routing file: client/SRC/router/index, js

3, page preparation, more code, not posted, attached to the portal

4. API docking

Axios configuration file: client/ SRC/API /axios.js Basically, the address of the interface and the interception of the request

Requirements related to the interface: client/SRC/API/modules/needs. Js

Related user interface: client/SRC/API/modules/user. Js

API entry file: client/ SRC/API /index.js

Front-end part is relatively simple, need to say not much, I believe that the big guys want to write a out, is also a matter of minutes ~

Go to Github for the complete code

If you find this article helpful, leave a start