Vue与antd结合使用

什么是antd？

选择合适的官方文档

使用步骤

1. 在已有的antd项目中安装antd。

npm i --save ant-design-vue@next

2. 在入口文件中引入antd以及antd.css，并挂载到vue身上。

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
app.use(Antd);

3. 只需在组件的模板中直接使用即可。

添加图标

1. 在script标签中引入图标

import {
  HomeOutlined,
} from '@ant-design/icons-vue';

2. 注册组件

  components: {
    HomeOutlined
  }

3. 使用组件

<HomeOutlined />

4. 可以通过行内样式的形式来改变组件的样式

<HomeOutlined style="color: blue" />

5. 在按钮里加入图标（通过template）

<a-button type="primary" :size="size">
  <template #icon>
    <DownloadOutlined />
  </template>
  Download
</a-button>

表单组件

<template>
  <div>
    <ul class="input_list">
      <li>姓名：<a-input v-model:value="userinfo.username"></a-input></li>
      <li>年龄：<a-input v-model:value="userinfo.age"></a-input></li>
      <li>
        性别：
        <a-radio-group v-model:value="userinfo.sex">
          <a-radio value="男">男</a-radio>
          <a-radio value="女">女</a-radio>
        </a-radio-group>
      </li>
      <li>
        爱好：
        <span v-for="(item, index) in userinfo.hobbies" :key="index">
          <a-checkbox v-model:checked="item.checked">{{
            item.label
          }}</a-checkbox>
        </span>
      </li>
      <li>
        城市：
        <a-select
          v-model:value="userinfo.selectedCity"
          mode="tags"
          style="width: 300px"
          placeholder="选择城市"
          :options="userinfo.options"
        >
        </a-select>
      </li>
      <li>
        生日：
        <a-date-picker v-model:value="userinfo.birthday" @change="pickerChange" />
      </li>
    </ul>

    {{ userinfo }}
  </div>
</template>

<script>
import { defineComponent } from "vue";
import moment from 'moment';
const dateFormat = "YYYY-MM-DD";
export default defineComponent({
  data() {
    return {
      userinfo: {
        username: "",
        age: "",
        sex: "男",
        hobbies: [
          { label: "吃饭", checked: true },
          { label: "睡觉", checked: true },
          { label: "写代码", checked: false },
        ],
        options: [
          { value: "北京" },
          { value: "上海" },
          { value: "广州" },
          { value: "深圳" },
        ],
        selectedCity: ["北京"],
        birthday: moment('2021-01-03', dateFormat),
      },
    };
  },
  methods: {
    pickerChange(e) {
      // console.log(e._d)
      if (!e) return;
      var oDate = new Date(e._d);
      console.log(oDate.getTime());
    },
  },
});
</script>

<style lang="scss">
ul {
  list-style: none;
}

.input_list {
  padding: 10px;
  li {
    margin-bottom: 15px;
    & > input {
      width: 400px !important;
    }
  }
}
</style>

在Node.js中实现图片上传或文件

1. 安装第三方依赖

npm i --save multer

2. 引入multer模块

const multer = require('multer');

3. 配置storage

var storage = multer.diskStorage({
//配置上传的目录
destination: async (req, file, cb)=>{
    //1、获取当前日期 20200703
    let day=sd.format(new Date(), 'YYYYMMDD');
    // static/upload/20200703
    let dir=path.join("static/upload",day)
    //2、按照日期生成图片存储目录  mkdirp是一个异步方法
    await mkdirp(dir)   

    cb(null, dir) //上传之前目录必须存在
},
//修改上传后的文件名
filename: (req, file, cb)=> {
    //1、获取后缀名
    let extname= path.extname(file.originalname);
    //2、根据时间戳生成文件名
    cb(null, Date.now()+extname)
}

4. 使用multer

• tools.js

const multer = require('multer');
const path = require('path');
const sd = require('silly-datetime');
const mkdirp = require('mkdirp')
let tools={
    multer(){

        var storage = multer.diskStorage({
            //配置上传的目录
            destination: async (req, file, cb)=>{
                //1、获取当前日期 20200703
                let day=sd.format(new Date(), 'YYYYMMDD');
                // static/upload/20200703
                let dir=path.join("static/upload",day)
                //2、按照日期生成图片存储目录  mkdirp是一个异步方法
                await mkdirp(dir)   
                
                cb(null, dir) //上传之前目录必须存在
            },
            //修改上传后的文件名
            filename: (req, file, cb)=> {
                //1、获取后缀名
                let extname= path.extname(file.originalname);
                //2、根据时间戳生成文件名
                cb(null, Date.now()+extname)
            }
        })
        
        var upload = multer({ storage: storage })

        return upload;
        
    },
    md5(){

    }
}

module.exports=tools

• routers.js

router.post("/doAdd",tools.multer().single("pic"), (req, res) => {
    //获取表单传过来的数据    
    res.send({
        body: req.body,
        file: req.file
    });
})