会飞的猪9527
0%

发表于 更新于 分类于

get和set的介绍

get 和 set方法可以使用在对象或者构造函数中，但不能出现在普通的function里。
vue中的计算属性computed默认使用的就是vue已经封装好的get方法。

get和set的使用方法

  1. get和set是方法，因为是方法，所以可以进行判断

  2. get一般是要返回的；而set是设置，不用返回

  3. get 和 set的方法名可以重名

  4. set方法必须要有形参，否则报错

  5. 如果调用对象内部的属性约定的命名方式是变量名前加_

对象的例子

阅读全文 »

发表于 更新于 分类于

父子组件传参

父组件在子组件上写上类似html标签的属性和属性值，子组件用props接收

1
2
3
4
5
6
7
8
9
10
11
12
13
// 父组件
class Parent extends React.Component {
  render() {
    return (<Child text="来自父组件的参数" />)
  }
}
// 子组件
class Child extends React.Component {
  render() {
    console.log(this.props.text);  // 来自父组件的参数
    return (<div>{this.props.text}</div>)
  }
}

打印结果是:

阅读全文 »

发表于 更新于 分类于

下载echarts

1
npm install echarts --save

全局引入Echarts

在/src/main.js中加入：

1
2
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

创建一个图表

阅读全文 »

发表于 更新于 分类于

一、path模块的引入

需要引入path模块才能使用path.resolve()和path.join()

1
const path = require('path');

二、path.resolve([from…],to)

作用：把一个路径或路径片段的序列解析为一个绝对路径。相当于执行cd操作。
path.resolve 中 'doc' 和 './doc' 等价，代表当前文件夹下。但是'/doc'代表的是根目录下的doc

阅读全文 »

发表于 更新于 分类于

一、要实现文件上传原理要用到的知识点

  • form enctype属性
  • multer模块
  • path模块

二、form enctype属性

注意

用form提交数据时，要提交的数据input标签都要有name属性，否则该值提交无效。

正常情况，form标签的enctype默认属性是 application/x-www-form-urlencoded 是以字符串形式传输的，这次实现文件上传要用到 multipart/form-data

1
2
3
4
<form action="http://localhost:3000" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <input type="submit" value="提交" class="btn btn-primary">
</form>

语法

<form enctype="value">

属性值

属性 描述
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 “+” 加号，但不对特殊字符编码。

三、multer模块

先安装 cnpm i multer --save
该模块是以中间件的形式存在的
用来接收form表单中的以文件形式上传的文件
例如：

1
2
3
const multer = require('multer');
server.listen(3000);
server.use(multer().any());

.any()代表可以接受任何文件类型
可以用req.files来查看接收的文件
例如：(req.files接收到的数据)

1
2
3
4
5
6
7
8
9
[ { fieldname: 'file',  // from表单中的name属性的属性值
    originalname: 'Adobe CC.ico',  // 上传的文件名字
    encoding: '7bit',      //文件编码
    mimetype: 'image/x-icon',    //文件的 MIME 类型
    destination: './save/',       //保存路径
    filename: '8b3222e43d3cbbe7ab159589256d1552',  //保存在 destination 中的文件名
    path: 'save\\8b3222e43d3cbbe7ab159589256d1552',//已上传文件的完整路径
    size: 36462   //文件大小（字节单位）   
    } ]

接收的文件是以数组的形式发送到后端的，数组里面只有一项，是对象

属性 描述
fieldname Field name 由表单指定
originalname 用户计算机上的文件的名称
encoding 文件编码
mimetype 文件的 MIME 类型
size 文件大小（字节单位）
destination 保存路径
filename 保存在 destination 中的文件名
path 已上传文件的完整路径
buffer 一个存放了整个文件的 Buffer

multer({dest:'地址'}) 自动帮你储存 - 名字自动改成hash值 防止重名
缺点：没有后缀
例子：

1
2
3
4
5
6
7
8
9
const mysql = require('mysql');
const express = require('express');
const multer = require('multer');
const app = express();
app.listen(3000)
app.use(multer({dest:'./images'}).any())
app.use('/files',(req,res)=>{
    console.log(req.files)
})

打印的信息：

1
2
3
4
5
6
7
8
9
10
[ 
    { fieldname: 'f1',
    originalname: 'web.txt',
    encoding: '7bit',
    mimetype: 'text/plain',
    destination: './images',
    filename:'3e49baaa770dfd21acdfe64d6312b7dd', //转化成hash值
    path: 'images\\33ac0bc106b02c443e6096f45de68c14',
    size: 121 } 
]

效果图：
![1.png](/Express实现文件上传原理 form enctype属性 path模块 multer模块/1.png)

四、path模块

先安装 cnpm i path --save
path.parse(string)用来解析文件路径

1
2
3
const path = require('path');
let str = path.parse('C:\Users\m1883\Pictures\Icons\Adobe CC.ico');
console.log(str);

运行结果

1
2
3
4
5
6
{ root: 'C:',
  dir: 'C:',
  base: 'Usersm1883PicturesIconsAdobe CC.ico',
  ext: '.ico',
  name: 'Usersm1883PicturesIconsAdobe CC' 
  }

各个属性的描述

  • root 在什么根目录
  • dir 绝对地址
  • base 文件名+后缀
  • ext 后缀
  • name 文件名

五、最终代码

前端

1
2
3
4
<form action="http://localhost:3000" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <input type="submit" value="提交" class="btn btn-primary">
</form>

后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const express = require('express');
const fs = require('fs');
const multer = require('multer');
const path = require('path');
const server = express();
server.listen(3000);
server.use(multer({ dest: './save/' }).any());
server.use((req, res) => {
    fs.rename(req.files[0].path, req.files[0].path + path.parse(req.files[0].originalname).ext, (err) => {
        if (err) {
            console.log(err)
        } else {
            res.send('ok')
        }
    })
})

运行结果
![2.png](/Express实现文件上传原理 form enctype属性 path模块 multer模块/2.png)
![3.png](/Express实现文件上传原理 form enctype属性 path模块 multer模块/3.png)

若想要往数据库里传真正的文件名字需要，否则含有路径

1
path.parse(src).name+path.parse(req.files[0].originalname).ext;

第二种：直接在请求中完成

1
2
3
4
5
6
7
8
9
10
11
// 前端编辑页面上传的商品图片
const multer = require('multer');
const path = require("path");
//解析图片文件,并保存位置
const upload = (multer({ dest: path.resolve(__dirname, "../../static/product") }).any());
useRouter.post("/productIamge_upload", upload, (req, res) => {
    console.log(req.files)
    res.json({
        status: 0
    })
})

发表于 更新于 分类于

Vue.extend 和 vue-class-component

使用 TypeScript 写 Vue 组件时，有两种推荐形式：

  • Vue.extend()：使用基础 Vue 构造器，创建一个“子类”。此种写法与 Vue 单文件组件标准形式最为接近，唯一不同仅是组件选项需要被包裹在 Vue.extend() 中。
  • vue-class-component：通常与 vue-property-decorator 一起使用，提供一系列装饰器，能让我们书写类风格的 Vue 组件，和react写法很像，推荐这种写法，如果你会vue和react的话，用这种写法不容易对react的项目手生，不会react的话，用这种写法，会对后来对react的学习有很大的帮助。

    vue项目中安装

1
2
npm i -S vue-class-component 
npm i -S vue-property-decorator
阅读全文 »

发表于 更新于 分类于

用typeof能区别出string ， number ， boolean ， undefined ，object

instanceof

但是想要知道object是什么类型就要用 instanceof 操作符了
数组（Array），对象（Object），正则（RegExp），null ，Function 都属于对象

1
2
3
4
5
6
7
8
let arr = [1, 2, 3],
   obj = {},
   reg = /n$/,
   fun = function(){};
console.log(arr instanceof Array);
console.log(obj instanceof Object);
console.log(reg instanceof RegExp);
console.log(fun instanceof Function);

结果图：

阅读全文 »

发表于 更新于 分类于

一、属性

justify-content: space-between;
这个属性能够让子元素之间的间隔实现平均分配剩余空间,并没有让元素等分。

二、代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// html部分
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

// css 部分
    ul {
        display: flex;
        justify-content: space-between;
    }

    ul li {
        list-style: none;
        border: 1px solid #000;
    }
    ul :nth-child(1) {
        background-color: rgb(35, 238, 238);
    }
    ul :nth-child(2) {
        background-color: rgb(80, 252, 123);
    }
    ul :nth-child(3) {
        background-color: rgb(242, 245, 72);
    }

实现的效果

阅读全文 »