Daily Reflections (2020/02/23)

Topic Overview

• Form Form is how to upload files
• Understanding of flex
• Ways in which the string is connected to

Subject to answer

Form Form is how to upload files

• Use HTML Form to upload files: name attribute is agreed with the backend file upload field

  <form action="http://localhost:3001/api/tools/upload" method="POST" enctype="multipart/form-data">
      <input type="file" name="fileToUpload">
      <button type="submit">Submit</button>
  </form>

• Node.js + express + multer backend file reception process implemented

  const express = require('express');
  const router = express.Router();
  const path = require('path')
  const multer = require('multer') // 图片上传模块
  
  var upload = multer({
    dest: path.join(__dirname, '../public/upload/'),
  })// 定义图片上传的临时目录
  router.post('/tools/upload', authLogin, upload.single('fileToUpload'), (req, res, next) => {
      let file = req.file
      // 处理文件
  });

• Principle: the file is converted into a stream of bytes, and then use the http transmission, the rear end and then accepted into the original binary file format. In the HTML form, you can upload a file with a unique control that <input type="file">. When a form contains <input type="file">, the form enctypemust be specified multipart/form-data(show form needs to upload binary data), method must be specified as a post, the browser can correctly encoded and multipart/form-dataformat to send the form data. multiple="multiple"Note You can upload multiple files at the same time. File transfer can also be used coded, the picture can be converted into a base64 then transmitted directly to the server after base64 decoding

Understanding of flex

• Basic concepts: The Flex layout element, called Flex containers (flex container), referred to as "container." It's all child elements automatically become a member of a container, called a Flex project (flex item), referred to as "project." After Flex set layout, child elements float, clear, and vertical-align property will fail

• Basic grammar: the container includes a property (6) disposed on the container and project properties on the item (6)

  Container Properties	use	The default value | Other
  flex-direction	Set spindle direction	row | row-reverse 、column、 column-reverse
  flex-wrap	Define how to wrap	nowrap | wrap 、wrap-reverse
  flew-flow	flew-direction \ flew-wrap shorthand	row nowrap
  justify-content	Set the spindle alignment	flex-start | flow-end、center、space-between、space-around
  align-items	Cross-axis alignment provided	stretch | flow-start、flow-end、center、baseline
  align-content	Set multi-line spindle alignment	stretch | flow-start、flow-end、center、space-between、space-around

  Project Properties	use	The default value | Other
  flow-grow	Setting an enlarged scale	0 | number
  flow-shrink	Setting the reduction ratio	1 | number
  flow-basis	Set the initial size	auto | length
  flow	flow-grow \flow-shrink\flow-basis的简写	0 1 auto
  align-self	Sets the alignment	auto | flex-start、flex-end、center、baseline、stretch
  order	Set the sort position	0 | integer (integer)

• understanding

  • Simple and practical

    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>

    .box{
        width: 1000px;
        height: 300px;
        margin: 0 auto;
        display: flex;/* 用在父元素上，弹性布局 */
        flex-direction: row;/* 默认row，垂直用column */
    }
    .box div {
        background: rgb(218, 189, 189);
        margin: 1px;
        flex: 1;/* 三个盒子三等分 */
        min-width:100px;
        max-height: 500px;/* 可用于限制小盒子的宽度和高度范围 */
    }
    .box div:last-child {
        flex: 2;/*分成四份，最后一个盒子2份，剩下两个盒子平均剩下两份  */
    }

  • justify-content attribute is used to define how to align the item on the spindle, particularly alignment direction about the axis, the major axis direction to be noted that flex-direction defined

  • align-items in the item attribute is used to define how to align the cross shaft, particularly a direction intersecting the alignment axis are, therefore to be noted that the major axis direction of flex-direction defined

  • Is to be understood flow-grow flow-shrink: flow-grow: When there is extra space is used to define whether the project enlarged; is insufficient to define the spatial flow-shrink, shrink if the project

  • It refers to a flex-basis items flex size prior to being placed in a container flex

  • flex-basis attribute is defined before allocating extra space, the project space occupied by the spindle

  • flow-shrink non-negative, order can be negative

  • order smaller the value, the more forward arrangement

  • align-self inherited parent element to auto align-items, if no parent element, equivalent to the stretch

  • Quick flex attribute value (flex properties are flex-grow, flex-shrink and flex-basis shorthand, the default value 0 1 auto. After two optional attributes)

    flex:auto   (=>1 1 auto) 
    flex:none   (=>0 0 auto)
    flex:1      (=>1 1 0%)  flex:2(=>2 1 0%) flex:2 3(=>2 3 0%)
    flex:50%    (=>1 1 50%)

  • Related Complete Tutorial: Flex layout Grammar

Ways in which the string is connected to

var a = "aaaa"
var b = "bbbbb"

// 方法一： “+”
var c = a + b
console.log("c:", c)

// 方法二： “join("")”
var d = []
d.push(a,b)
console.log("d:", d.join(""))

// 方法三：模版字符串 `${}`
var e = `${a}${b}`
console.log("e:", e)