Believe in technology, continuous learning, in the output of the nuggets, the first half of 2021 in the middle of the summary of the project to review a

1, Vue3 + TS learning

Test with Typescript + Vue3 from zero to one to launch the zhihu column

Created by Vue3+TS

I still took the MOOCs

Introduction to Learning Project

Vue3 + Typescript is the first of its kind on the web. It combines Typescript with new versions of Vuex and VuE-Router to complete complex projects that separate the front and back ends
Component library for the context to achieve a series of easy to difficult common component development, it can be said to learn a basic component library development.
Offers real back end API to bid farewell to mock data and provides Swagger online debugging queries.

The project address

The learning process has been committed to Github step by step. Each commit corresponds to each other, and the learning process can be broken down as a commit.

Write their own code is completely open source, you can study, secondary development. Of course, welcome to click Star⭐⭐⭐ [👉👉 project warehouse address] (github) [endeavors source link] (gitee)

Install dependencies

npm install

yarn
Copy the code

Run the local development environment

npm run serve
Copy the code

2. Koa learning

Koa-app KOA practical summary

1. Initialize the project and start the service

mkdir koa-app
npm init -y
git init

yarn add koa -S
yarn add nodemon -D

mkdir app
cd app
touch index.js
vi index.js

cd. to folder koa-app vi package.json add"scripts": "start": "nodemon app/index.js".# Start project
yarn start ==> server on localhost:9000
Copy the code

2. Submit

2.1 Submit the specification Commitizen

yarn add commitizen -D

add "scripts": "commit": "git add . && git-cz"

add "config": { "commitizen": { "path": "node_modules/cz-conventional-changelog" }}
Copy the code

2.2 Submit to Github & Gitee

The prerequisite is that both accounts have git permissions

git remote add github [email protected]:xn213/koa-app.git
git remote add gitee [email protected]:xn213/koa-app.git

yarn commit

# Submit separately
git push github
git push gitee
Copy the code

Easy upgrade: Commit to Both Github and Gitee

Modify the git/config

[remote "origin"]
	url = [email protected]:xn213/koa-app.git
	url = [email protected]:xn213/koa-app.git
	fetch = +refs/heads/*:refs/remotes/origin/*
Copy the code

When committing to Gitee for the first time, alias: gp == git push will prompt as shown in the figure below.

Git remote gitee = git remote gitee = Git remote Gitee , to submit using the following command

git push --set-upstream origin master
Copy the code

This command adds the following fields to.git/config

[branch "master"]
	remote = origin
	merge = refs/heads/master
Copy the code

3. Modify the route

3.1 Detaching the Routing Module

yarn add koa-router -S

cd app
mkdir router
touch index.js
touch routes.js
Copy the code

4. Parameter analysis, extract middleware

4.1 KOA-compose simplifies middleware references

yarn add koa-compose koa-bodyparser -S
The koA-compose plugin simplifies the writing of middleware references.
The plugin koa-BodyParser handles parameters in the body of a POST request
Copy the code

// app/index.js
const compose = require('koa-compose')
const MD = require('./middlewares/')

const app = new Koa()

app.use(compose(MD))
Copy the code

// controllers/test.js
ctx.body = ctx.request.body
Copy the code

Here post request can not get the body parameter, go to Wheels > plug-ins

4.2 KOA-BodyParser processes POST request parameters

// >app
mkdir middlewares
touch index.js

# Note: Koa-bodyParser processes should be placed before routes
Copy the code

4.3 `formidable`To deal with`Upload a file`

The KoA-BodyParser plugin parses only four types of data [‘ JSON ‘, ‘form’, ‘text’, ‘XML’], and does not get files when uploading them. Courtesy of the plug-in formidable documentation

yarn add formidable -S
Copy the code

// middlewares/formidable.js
const Formidable = require('formidable')

const { tempFilePath } = require('.. /config')

module.exports = () = > {
  return async function (ctx, next) {
    const form = new Formidable({
      multiples: true.// Remove the path to save the uploaded temporary files to config/base for some configurations
      // uploadDir: `${process.cwd()}/${tempFilePath}`
      uploadDir: tempFilePath,
    })

    await new Promise((reslove, reject) = > {
      form.parse(ctx.req, (err, fields, files) = > {
        if (err) {
          reject(err)
        } else {
          // The binary content-type is not added to the request header
          ctx.request.body = fields
          ctx.request.files = files
          reslove()
        }
      })
    })

    await next()
  }
}
Copy the code

// Middlewares /index.js introduces registration exposure
const formidable = require('./formidable')
const mdFormidable = formidable()
module.exports = [mdFormidable, mdKoaBody, mdRoute, mdRouterAllowed]
Copy the code

Note: Koa Docs: content-type

In addition, pull out the configuration file and add the configuration file directory: app/config

// config/index.js
const base = require('./base')
const dev = require('./dev')
const pre = require('./pre')
const pro = require('./pro')

const env = process.env.NODE_ENV || 'dev'

const configMap = {
  dev,
  pre,
  pro,
}

module.exports = Object.assign(base, configMap[env])
Copy the code

5. Utility functions and constant configurations are detached from the mount context

Write utility functions app/utils/index.js & test.js

cd app
mkdir utils
cdJs vi index.js I Edit the file. Enter: :wq to save the file and exitCopy the code

// utils/index.js
const testUtils = require('./test')

module.exports = {
  testUtils,
}
Copy the code

Touch test.js vi test.js I Edit inputCopy the code

// utils/test.js
const test = 'test utils string'

module.exports = testUtils = () = > {
  return test
}
Copy the code

Mount to the App Context context

// app/index.js.const config = require('./config')
const utils = require('./utils')

app.context.utils = config
app.context.utils = utils
...
Copy the code

6. Unified return format & error handling

6.1 Unified Return Format for success or failure

successful

// app/middlewares/response.js
const response = () = > {
  return async (ctx, next) => {
    ctx.res.fail = ({ code, data, msg }) = > {
      ctx.body = {
        code,
        data,
        msg,
      }
    }
    ctx.res.success = (msg) = > {
      ctx.body = {
        code: 0,
        data,
        msg: msg || 'success',}}await next()
  }
}
module.exports = response
Copy the code

failure

// app/middlewares/error.js
const error = () = > {
  return async (ctx, next) => {
    try {
      await next()
      if (ctx.status === 200) {
        ctx.res.success()
      }
    } catch (err) {
      if (err.code) {
        ctx.res.fail({ code: err.code, msg: err.message })
      } else {
        // Program runtime error
        ctx.app.emit('error', err, ctx)
      }
    }
  }
}
module.exports = error
Copy the code

inmiddlewares/index.jsThe introduction of

const response = require('./response')
const error = require('./error')

const mdResHandler = response()
const mdErrHandler = error()

module.exports = [mdFormidable, mdKoaBody, mdResHandler, mdErrHandler, mdRoute, mdRouterAllowed]
Copy the code

6.2 Error Handling

The program was incorrectly used at runtimekoaError handling events are required inapp/index.jsconfiguration

All return values are intercepted in middlewares/error.js. If the status code is 200, the return is wrapped in a successful utility. If not, there are two cases: one that we throw ourselves, which contains a business error code (in which case we return with a failed utility). For the second case, we need to modify the startup file app/index.js and add the following code:

// The program itself is wrong
app.on('error' (err, ctx) => {
  if(ctx) {
    ctx.body = {
      code: 9000.msg: Program runtime error:${err.message}`}}})Copy the code

Test this out: Incontrollers/test.jsAdd the following code:

2.1. Successful

// controllers/test.js
const getList = async () => {
  ctx.body = 'Return result'
}
Copy the code

Request the interface and return the following value. The controller we defined returned successfully

2.2. Business throws an error

// controllers/test.js
const getList = async (ctx) => {
  const data = ' '
  // Throw failure in business
  ctx.utils.assert(data, ctx.utils.throwError(10001.'Verification code invalid'))
  ctx.body = 'Return result'
}
Copy the code

2.3. The program itself reports an error

In this case, add a line a = b, where B is not defined, then it is an error of the program itself, and trigger koA Error event

const getList = async (ctx) => {
  const a = b
  ctx.body = 'Return result'
}
Copy the code

7. Cross-domain processing`@koa/cors`

Use the plugin @KOA /cors NPM / @KOA /cors

App /middlewares/index.js to introduce, instantiate, export

// middlewares/index.js cross-domain processing
const cors = require('@koa/cors')
const mdCors = cors({
  origin: The '*'.credentials: true.allowMethods: ['GET'.'HEAD'.'PUT'.'POST'.'DELETE'.'PATCH'],})module.exports = [
  mdFormidable,
  mdKoaBody,
  mdCors,
  mdResHandler,
  mdErrorHandler,
  mdRoute,
  mdRouterAllowed,
]
Copy the code

8. Add logs`log4js`

Plug-in: log4js

// middlewares/log.js
const log4js = require('log4js')
const { flag, level, outDir } = require('.. /config').logConfig

log4js.configure({
  appenders: {
    cheese: {
      type: 'file'.filename: `${outDir}/receive.log`,}},categories: {
    default: {
      appenders: ['cheese'].level: 'info',}},pm2: true,})const logger = log4js.getLogger()
logger.level = level

module.exports = () = > {
  return async (ctx, next) => {
    const { method, path, origin, query, body, headers, ip } = ctx.request
    const data = {
      method,
      path,
      origin,
      query,
      body,
      ip,
      headers,
    }
    await next()
    if (flag) {
      const { status, params } = ctx
      data.status = status
      data.params = params
      data.result = ctx.body || 'no content'
      if(ctx.body.code ! = =0) {
        logger.error(JSON.stringify(data))
      } else {
        logger.info(JSON.stringify(data))
      }
    }
  }
}
Copy the code

App /middlewares/index.js introduction/registration/configuration

const log = require('./log')
const mdLogger = log()

module.exports = [
  mdFormidable,
  mdKoaBody,
  mdCors,
  mdLogger,
  mdResHandler,
  mdErrHandler,
  mdRoute,
  mdRouterAllowed
]
Copy the code

The nuggets years | 2021 theme activities I grow half of the campaign is under way on the road…

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue3+TS project review – Believe in technology, endless learning | summary in 2021

1, Vue3 + TS learning

Introduction to Learning Project

The project address

Install dependencies

Run the local development environment

2. Koa learning

Koa-app KOA practical summary

1. Initialize the project and start the service

2. Submit

2.1 Submit the specification Commitizen

2.2 Submit to Github & Gitee

3. Modify the route

3.1 Detaching the Routing Module

4. Parameter analysis, extract middleware

4.1 KOA-compose simplifies middleware references

4.2 KOA-BodyParser processes POST request parameters

4.3 `formidable`To deal with`Upload a file`

5. Utility functions and constant configurations are detached from the mount context

6. Unified return format & error handling

6.1 Unified Return Format for success or failure

6.2 Error Handling

7. Cross-domain processing`@koa/cors`

8. Add logs`log4js`

Vue3+TS project review – Believe in technology, endless learning | summary in 2021

1, Vue3 + TS learning

Introduction to Learning Project

The project address

Install dependencies

Run the local development environment

2. Koa learning

Koa-app KOA practical summary

1. Initialize the project and start the service

2. Submit

2.1 Submit the specification Commitizen

2.2 Submit to Github & Gitee

3. Modify the route

3.1 Detaching the Routing Module

4. Parameter analysis, extract middleware

4.1 KOA-compose simplifies middleware references

4.2 KOA-BodyParser processes POST request parameters

4.3 formidableTo deal withUpload a file

5. Utility functions and constant configurations are detached from the mount context

6. Unified return format & error handling

6.1 Unified Return Format for success or failure

6.2 Error Handling

7. Cross-domain processing@koa/cors

8. Add logslog4js

Related Posts

My first experience as a project manager

Front-end development: Summary of the use of json.stringify () and json.parse () in JavaScript

[Front-end Performance Optimization Guide] 5.3 – Optimize your image resources

4.3 `formidable`To deal with`Upload a file`

7. Cross-domain processing`@koa/cors`

8. Add logs`log4js`