antD+Vue后台管理项目总结

父组件调用子组件（Modal为例）

（1）在父组件中引入 子组件（addNoticeBoard.vue）

import addNoticeBoard from './module/addNoticeBoard'

（2）在export default 中的component中注册 addNoticeBoard
（3）在父组件< div >中添加组件标签< add-notice-board ref=“add”>< /add-notice-board >
（4）在父组件的点击按钮方法中

submit(){
    this.refs.add.showModal()
}

（5）在子组件中

method:{
    showModal(record){}
}

record时传入的参数，来自插槽 。

子组件调用父组件refreh绑定的方法

this.$emit("refresh")

父组件

<add-notic-board @refresh="handleOk" ref="add"></add-notic-board>

接口调用

（1）数据封装,调用接口

data(){
   form: { title: '', id: '', status: 1, content: '' }
}
 this.$api.marketingManage.noticeEdit(this.form).then(res => {
        if (res.status == 'ok') {
          this.$message.success(res.message.message)
          this.$emit('refresh')
        } else {
          this.$message.error(res.message.message)
        }
      })

插槽的使用

（1）在columns中 声明

  {
          title: '上架状态',
          dataIndex: 'status',
          width: 120,
          scopedSlots: { customRender: 'status' }
        },

（2）在< table >中使用< template >

        <template
          slot="status"
          slot-scope="text"
        >
          <a-badge :status="text == 1 ? 'processing' : 'default'" />
          <span>{{ statusMap[text] }} </span>
        </template>

在slot-scope=“text,record”中，第一个参数为当前项的值，第二个参数为整行数据的值。

 <a-badge :status="text == 1 ? 'processing' : 'default'" />

a-badge是antD中的徽标数样式

ES6中规范写法

例子：’ 是否 ${text}该公告 `

（最好查看ES6官方文档）

ES6箭头函数

// 正常函数写法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭头函数写法
var result = values.sort((a, b) => a - b);

①调用方法中调用接口用到this的 方法要改为箭头函数

OnOk:()=>{
...//代码块
}

②在Data中声明的要用this引用

修改数据之后的refresh

handleOK(bool=false){
this.refs.table.refresh(bool)
}

refresh()是页面更新的方法

数据重置

handleReset(){
this.form.resetFields()
//赋值语句
 const { package_name, image, author, heat, sort, status, count, rank_id } = this.record
 this.form = { package_name, image, author, heat, sort, status, count, rank_id }
}

时间格式 （moment文档）

{
          title: '更新时间',
          dataIndex: 'gmt_modified',
          customRender: record => this.$moment.unix(record).format('YYYY-MM-DD HH:mm:ss'),
          width: 120
        },

在一个界面打开另一个界面（路由）

<a-button @click="showConfirm(record)">查看榜单内容</a-button>

    showConfirm (record) {
      this.$router.push({
        name: 'rankListDetail',
        params: {
          rank_id: record.id
        }
      })
    }

获取路由网址id值

handleReset () {
      this.form.resetFields()
      this.queryParam = {
        name: '',
        user_id: this.$route.params.id,
        time: this.$route.query.time
      }

上传图片的功能

（1）引入外部文件

<script>
import UploadImage from '../../../components/UploadImage'
</script>

（2）在Data中声明

  components: {
    UploadImage
  },

（3）使用组件

<div>
          <a-form-item label="素材封面">
            <upload-image
              ref="image"
              @fnUploadSuccess="fnUploadSuccess"
              filed="image"
              :defaultFileList="defaultFileList"
              v-decorator="[
                'image',
                {
                  initialValue: constv.QINIU_IMAGE_CND_URL+form.image
                }
              ]"
            ></upload-image>
          </a-form-item>
        </div> 

（4）在UploadImage 中的index.vue上传图片的方法中

//成功是返回
this.$emit("fnUploadSuccess",this.field,res.key)

（5）在组件方法中接收参数

fnUploadSuccess (filed, key) {
      this.form.image = key
    },

上传图片问题-展示默认图片

（1）在UploadImage 中的index.vue中，有一个对象（数组）

defaultFileList:{
		type:array,
		default:()=>[ ]
},

（2）在生命周期函数中接收

created(){}
	this.filelist=this.defaultFileList

声明数组

	defaultFileList: [],

（3）在使用的组件中接收

	:defaultFileList="defaultFileList"

（4）在新增、编辑的判断那赋值

this.defaultFileList = [{
          uid: record.id,
          name: record.image,
          status: 'done',
          // url: this.constv.QINIU_IMAGE_CND_URL + record.image
          url: record.image
        }]

图片上传问题–不同id对应不同image

<a-modal
      v-model="visible"
      :title="`${isEdit == true ? '编辑' : '新增'}素材包`"
      :footer="null"
      :destroyOnClose="true"
    >

==:destroyOnClose=“true”==Modal中的API，作用：销毁Modal中的子元素。

github 提交

github提交规范

github命令行提交代码

① git status
②git add .
③git commit -m “(修改名称)”

github创建分支

命令：git checkout -b 分支名称

查看当前所有命令

命令：git branch

js实体文本转纯文本方法

 entityToString (entity) {
      var div = document.createElement('div')
      div.innerHTML = entity
      var res = div.innerText || div.textContent
      console.log(entity, '->', res, div.innerHTML)
      return res
    },

antD表单绑定和校验规则

（1）榜单绑定
（2）校验规则

<a-form-item label="标题">
        <a-input
          placeholder="请输入标题"
          style="margin:0px auto 20px"
          v-decorator="['title',{rules:[{required: true, message: '请输入标题'}],initialValue: form.title}]"
          @change="titleChange"
        />
      </a-form-item>

正则表达式

① 富文本编辑（显示文字前15字，如果有图片则显示【图片】）为例

<template
          slot="content"
          slot-scope="text"
          style="font-size:small;font-weight:normal !important"
        >
          <p
            v-html="disPlayChange(text)"
            class="content"
            style="font-size:small;font-weight:normal !important"
          > </p>

        </template>

   disPlayChange: function (val) {
      if (val.indexOf('<img') > -1) {
        return val.replace(/<img[^>]*>/, '[图片]')
      } else {
        return this.entityToString(val).substring(0, 15)
      }
    },

②正整数

<div>
          <a-form-item label="前端排序">
            <a-input
              v-decorator="[
                'sort',
                { rules: [ { required: true, message: '请输入前端排序（正整数）' },{initialValue: form.sort}] ,initialValue: form.sort,
                  getValueFromEvent:(event) => {
                    return event.target.value.replace(/^(0+)|[^\d]+/g,'')
                  }},

              ]"
              placeholder="请输入前端排序"
            />
          </a-form-item>
        </div>

wangEditor富文本编辑器

富文本编辑器上传图片到七牛