This is the 16th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

Quickly create an Egg project

  1. Create a folder and custom name it
Mkdir User-defined nameCopy the code
  1. Go to the above folder and initialize egg
npm init egg --type=simple
Copy the code
  1. Install dependencies
npm install
Copy the code
  1. Run the project
npm run dev
Copy the code

The directory structure of an Egg

1. App folder

The App folder is our main project folder.

2. Config folder

The Config folder is where our main configuration files and plug-in configurations are located.

3. Logs folder

The logs folder is our log folder and is generally not applicable.

4. Node_modules folder

This is the folder where our module is installed.

5. Package. The json file

Dependencies downloaded by the current project, startup Settings, etc.

Egg convention specification

Where is the route written?

The route is written in router.js under the app

Where is the template written?

The template is written in the View folder under the App folder

Query the data, get the data where is written?

Write it in the Service folder under the app folder.

Where is the business logic written?

The Controller handles the business logic.

Where is the judgment permission written?

Write it in the Middleware folder under your Apps folder.

Where to put the static files?

Static files are placed in the public folder under the app folder.

Where is the extension?

App folder in the extend folder.

Configure the code hint for the Egg

  1. Install the eggJS plug-in

  1. If not, find the following file and change it to the following

{
    "egg-controller": {
            "scope": "javascript,typescript"."prefix": "egg controller"."body": [
                    "'use strict';"."const Controller = require('egg').Controller;"."class $1Controller extends Controller {"." async index() {"." const { ctx } = this;"." ctx.body = '$2';"."}"."}"."module.exports = $1Controller;",]."description": "Code hint for egg controller"
    },

    "egg-service": {
            "scope": "javascript,typescript"."prefix": "egg service"."body": [
                    "const Service = require('egg').Service;"."class $1Service extends Service {"." async find(uid) {"." const sql = ``;"." const data = await this.app.mysql.query(sql);"." return data;"."}"."}"."module.exports = $1Service;",]."description": "Code hint for egg controller"
    },

    "myjuqery": {
            "prefix": "myjuqery"."body": [
                    "< script SRC =" http://code.jquery.com/jquery-3.4.1.min.js "> < / script >"]."description": "Import juqery Toolkit"
    },

    "myaxios": {
            "prefix": "myaxios"."body": [
                    "<script src='https://unpkg.com/axios/dist/axios.min.js'></script>"]."description": "Importing the Axios Toolkit"
    },
    "react-class": {
            "scope": "javascript,typescript"."prefix": "reactclass"."body": [
                    "import React from 'react';"."import '.. /css/$1.css'".""."class $1 extends React.Component {"." render() {"." return ("."".");"."}"."}"."export default $1;",]."description": "Code hints for react class components"
    },
    "react-function": {
            "scope": "javascript,typescript"."prefix": "reactfunction"."body": [
                    "import React from 'react';".""."function $1() {"." return ("."".");"."}".""."export default $1;",]."description": "Code hints for the React function component"}}Copy the code

Egg How to obtain data processing data?

Egg Indicates the response data to the client.

this.ctx.body = 'xxx'
Copy the code

Egg Obtains the request parameters of the client

this.ctx.query
Copy the code

Configure dynamic routes and obtain parameters

  1. Dynamic Routing Configuration
router.get('/newslist/:id',controller.news.newslist);
Copy the code
  1. To obtain parameters
this.ctx.params
Copy the code

Note: After the dynamic route is configured, 404 is returned if the route is accessed without parameters.

Configuring the Template Engine

  1. Installing a plug-in
npm i egg-view-ejs --save
Copy the code
  1. Configuring the project
  • plugin.js
exports.ejs = {
    enable: true.package: 'egg-view-ejs'};Copy the code
  • config.default.js
// Configure the template engine
config.view = {
    mapping: {
        '.html': 'ejs',}};Copy the code
  1. Asynchronous call to render
await ctx.render('index.html')
Copy the code

The egg will automatically look for the index.html file in the view folder. Here is an example of index.html.

<h1>News page</h1>
<%=msg%>
<h2>Here is a for loop</h2>
<%
    for(let i = 0; i < list.length; i++) { %>
        <li><%=list[i]%></li>The < %} % >Copy the code

Access the static resources in the Egg project

Add public to the path.

<img src="/public/images/CSS.png" alt="">
Copy the code

Method for the controller to obtain data provided by the service

  • Controller/news.js
const list = await this.service.news.getNewsList();
await ctx.render('index.html',{
    msg,
    list
})
Copy the code
  • service/news.js
async getNewsList () {
    const list = [1.2.3.4]
    return list;
}
Copy the code

Note: Not only can a controller invoke data from a service, but a service can also invoke data from another service.