For the setup and initialization of the environment, please refer to the official document egg.js

The first important folder in your app

View, Controller, and Model are all in this file. Let’s take a look at the directory structure of this file

The directory structure

├ ─ ─ app | ├ ─ ─ the router. The js │ ├ ─ ─ controller │ | └ ─ ─ home. Js │ ├ ─ ─ service (optional) │ | └ ─ ─ the user. The js │ ├ ─ ─ middleware (optional) │ | └ ─ ─ response_time. Js │ ├ ─ ─ the schedule (optional) │ | └ ─ ─ my_task. Js │ ├ ─ ─ public (optional) │ | └ ─ ─ reset. CSS │ ├ ─ ─ the view (optional) │ | └ ─ ─ Home. The TPL │ └ ─ ─ the extend (optional) │ ├ ─ ─ helper. Js (optional) │ ├ ─ ─ request. Js (optional) │ ├ ─ ─ the response. The js (optional) │ ├ ─ ─ the context, js (optional) │ ├ ─ ─ Application. Js (optional) │ └ ─ ─ agent. The js (optional)Copy the code

router.js

The controller is called primarily based on the URL to display different pages

'use strict' // Enable strict mode
/** * @param {Egg.Application} app - egg application */
module.exports = app= > {
  router.get('/', controller.home.index);
  // When accessing /lists, the method index() of the lists. Js file in controller is found, rendering whatever is rendered in the method to the page
  router.get('/lists', controller.lists.index)
};
Copy the code

MVC framework-Controller file

Mainly responsible for business logic processing (simple business logic)

  • Create a new lists.js file in the Controller file
  • Used to control the display of lists paths
// controller/lists.js
'use strict' // Enable strict mode
// Get the Controller base class
const Controller = require('egg').Controller
// Specify that the name of ListsController must correspond to this file name lists. Js, uppercase lists +Controller
class ListsController extends Controller {
    // Use async before function
    async index() {
        // CTX is the Context instance currently requested
        const {ctx} = this
        // Access routing /lists page renders lists. Js
        ctx.body = 'lists.js'
        let result = 'lists.js'
        //.render() is used to render HTML pages asynchronously with await
        // The HTML file to which the first argument is rendered
        // The second argument uses the data passed to the page for presentation
        await ctx.render('lists.html', {result})
    }
}
// Must be exported
module.exports = ListsController
Copy the code

MVC framework-view file

It is used to display the view template page

  • Create a new lists.html file in view
  • The template page needs to rely on egg-view-EJs, using NPM download
<body>
    <div>
        <h2>News Details page</h2>
        <! -- <%=data%>// Receive the result data and display it<h3><%=result%></h3>
    </div>
</body>
Copy the code

MVC framework-service file

Work mainly with databases (query database, request data, complex business logic, data manipulation, etc.)

// Create a new file lists. Js
'use strict'
// Get the Service base class
const Service = require('egg').Service
// Instantiate the object with the same naming rules as controller
class ListsService extends Service {
    async getLists() {
        // Return data by fetching the interface
        // Use curl to retrieve remote data
        let url = this.config.api + 'appapi.php? a=getPortalList&catid=20&page=1'
        // this.ctx.curl retrits interface data
        let response = await this.ctx.curl(url)
        response = JSON.parse(response.data)
        // Return the data to the caller
        return response.result
    }
}
module.exports = ListsService
Copy the code

Modify the method in lists. Js in Controllerl to call the method in lists. Js in servce to get data

// controller/lists.js
    async index() {
        const {ctx} = this
        // Get getLists() data from lists.js in service
        let result = await this.service.lists.getLists()
        // Pass the data that needs to be displayed to the template
        await ctx.render('lists.html', {result})
    }
Copy the code

Modify lists. HTML file in view

<body> <div> <h2> News list data </h2> <ul> <! -- for loop syntax: <%for(let I =0; i<result.length; I ++){%> // loop element <%}%> --> <%for(let I =0; i<result.length; i++){%> <li> <a href="/listcontent? Aid = < % = result [I] aid % > "> < % = result [I] title % > < / a > / / helper formateTime () extension tool function < span > release time: <%=helper.formatTime(result[i].dateline)%></span> </li> <%}%> </ul> </div> </body>Copy the code

The above process is:

  • When the user accesses the address whose URL is /lists
  • Find controller.lists. Index by routing router.js 
    // router.js
router.get('/lists', controller.lists.index)
Copy the code
  • Call the index() function of lists. Js in the controller file to render the specified page lists
  • Lists.html renders the data needed for the page according to this.ctx.render(‘lists.html’, {result})

To be continued