Xiao Xiao entered the learning state again. At this time, xiao Xiao had recently contacted js related content, and then some TS related content, so xiao Xiao’s main learning content is TS.

Installation-dependent dependencies

Two dependencies are installed here, egg and TS

Install the ts

Make sure you have the NPM tools installed first. Global Installation of TS

npm install -g typescript
Copy the code

Test globally

$tsc-v Version 3.2.2Copy the code

This completes the installation of the local global TS

To install an egg

Here you implement a global installation of the Egg and initialize the dependent project. Creating a working directory

mkdir showcase && cd showcase
Copy the code

Install related dependencies

npm init egg --type=ts
Copy the code

Install dependencies

 npm i
Copy the code

Run the project

npm run dev
Copy the code

If the following message is displayed, the installation is complete

C:\Users\Administrator\Desktop\untitled4555\ Ming > NPM run dev > [email protected] dev C:\Users\Administrator\Desktop\untitled4555\ming > egg-bin dev [egg-ts-helper] create typings\app\controller\index.d.ts (5ms) [egg-ts-helper] create typings\config\index.d.ts (16ms) [egg-ts-helper] create typings\config\plugin.d.ts (10ms) [egg-ts-helper] create typings\app\service\index.d.ts (5ms) [egg-ts-helper] create typings\app\index.d.ts (2ms) 2020-07-31 14:27:49,701 INFO 12416 [master] node version V13.11.0 2020-07-31 14:27:49,703 INFO 12416 [master] egg Version 2.27.0 2020-07-31 14:27:59,512 INFO 12416 [master] Agent_worker #1:28076 started (9799ms) 2020-07-31 14:28:10469 INFO 12416 [master] Egg started on http://127.0.0.1:7001 (20 765ms)Copy the code

Visit the page as shown above

Writing controller

Write the corresponding controller directory as follows

Add a method for the corresponding class

public async show() {
    const { ctx } = this;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const page = ctx.query.page;
    console.log(page);
    const result = 'ming';
    console.log(result);
    await ctx.render('ming.tpl', result);
  }
Copy the code

Adding Related Routes

import { Application } from 'egg';

export default (app: Application) => {
  const { controller, router } = app;

  router.get('/', controller.home.index);
  router.get('/ming', controller.home.show);
};
Copy the code

Add a template rendering plug-in

Edit the default configuration file

import { EggAppConfig, EggAppInfo, PowerPartial } from 'egg'; export default (appInfo: EggAppInfo) => { const config = {} as PowerPartial<EggAppConfig>; // override config from framework / plugin // use for cookie sign key, should change to your own and keep security config.keys = appInfo.name + '_1596175919808_6331'; // add your egg config in here config.middleware = []; // add your special config in here const bizConfig = { sourceUrl: `https://github.com/eggjs/examples/tree/master/${appInfo.name}`, }; config.view = { defaultViewEngine: 'nunjucks', mapping: { '.tpl': 'nunjucks', }, }; // the return config will combines to EggAppConfig return { ... config, ... bizConfig, }; };Copy the code

Add related plug-ins

import { EggPlugin } from 'egg';

const plugin: EggPlugin = {
  nunjucks: {
    enable: true,
    package: 'egg-view-nunjucks',
  },
};

export default plugin;

Copy the code

Access the link

http://127.0.0.1:7001/ming
Copy the code

Template content appears

Service layer authoring

The relevant service layer is configured here.

Define related interfaces

export interface NewsItem {
  id: number;
  title: string;
}
Copy the code

Write the relevant controller

// eslint-disable-next-line @typescript-eslint/no-unused-vars public async list(name: number): Promise<NewsItem[]>{ name = name; return [{id:3, title: "ming"}] ; }Copy the code

Called in the control layer

 public async show() {
    const { ctx } = this;
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const page = ctx.query.page;
    console.log(page);
    const result = 'ming';
    console.log(result);
    await ctx.render('ming.tpl', result);
  }
Copy the code

Call to display results

At this point, the most basic service layer is completed

The middleware

Middleware is typically used for JWT validation related content. JWT is used here for the front and back end validation.

Create a new middleware directory

import { Context, Application, EggAppConfig } from "egg"; export default function uuidMiddleWare(options: EggAppConfig['uuid'], app: Application): any { return async (ctx: Context, next: () => Promise<any>) => {// name is the uUID attribute in config.default.js CTX = CTX; console.info(options.name); await next(); }; }Copy the code

Create relevant configuration files for middleware to read relevant content

 config.default.js 
 
Copy the code

import { EggAppConfig, EggAppInfo, PowerPartial } from 'egg'; export default (appInfo: EggAppInfo) => { const config = {} as PowerPartial<EggAppConfig>; // override config from framework / plugin // use for cookie sign key, should change to your own and keep security config.keys = appInfo.name + '_1596175919808_6331'; // add your egg config in here config.middleware = ['uuid']; // add your special config in here const bizConfig = { sourceUrl: `https://github.com/eggjs/examples/tree/master/${appInfo.name}`, local: { msg: 'local', }, uuid: { name: 'ebuuid', maxAge: 1000 * 60 * 60 * 24 * 365 * 10, }, }; config.view = { defaultViewEngine: 'nunjucks', mapping: { '.tpl': 'nunjucks', }, }; // the return config will combines to EggAppConfig return { ... config, ... bizConfig, }; };Copy the code

Read as follows