后台开发总结

vue-property-decorator用法

csdn链接 blog.csdn.net/weixin_4411…

使用类的模式vue开发

export default class App extends Vue { 

    // 类修饰符
    public //公共
    private //私有属性  模板中也不能使用

}

@Component

@Component({
  name: "DiscountBase",
  components: { DataGrid, DicSelect }
})

@computed

  get ValA(){
     return 1;
     }

@Prop

//定义类型以及默认值
  @Prop({ type: Boolean, default: false })
  hasAll?: boolean;

@Watch

//监视使用字符串形式可以避免深层的对象嵌套写法
    @Watch("formData.channelCode", { deep: true })
  onChangeValue(newValue:boolean,oldValue:boolean) {
      console.log(11)
  }

axios封装

//直接使用继承方式 使用axios
class Discount extends HttpClient {}

  queryList(params: any) {
    return this.instance.post("/web/economizeCard/queryList", {
      params
    });
  }

//暴露
export default new Discount("http://172.29.30.95:8885");

vue作用域插槽

// 
 <template #default="scope">
     <span @click="hanlderState(scope.row)" class="colorAndCursor">{{
     scope.row.state === 0 ? "禁用" : "启用"
     }}</span>
 </template>

elment ui

表单校验

    (this.$refs.formData as any).validate((valid: boolean) => {
      if (valid) {
        console.log("succss");
      } else {
        console.log("error submit!!");
        return false;
      }
    });

新增与添加

数据回显方式:拿到当前行id发送数据详情接口,深拷贝进行赋值

//请求回来数据进行深拷贝赋值给表单数据,因为res数据形式对象嵌套数组
this.formData = cloneDeep(res.data);

pnpm

文档链接 pnpm.io/cli/install

问题

联调接口域名要找后端要,以及跨域问题后端处理,不然前端需要配置代理