小傻羊7.29学习笔记——referSource的前端书写和AOP了解

7.29学习笔记——referSource的前端书写和AOP了解

• AOP的相关术语:

  1-通知(Advice):通知定义了切面是什么以及何时使用.描述了切面要完成的工作和何时需要执行这个工作.

  2-连接点(Joinpoint):程序能够应用通知的一个"时机",这些"时机"就是连接点,例如方法被调用时,异常被抛出时.

  3-切入点(Pointcut):通知定义了切面要发生的"故事"和时间,那么切入点就定义了"故事"发生的地点,例如某个类或方法的名称,Spring中允许我们方便的用正则表达式来指定

  4-切面(Aspect):通知和切入点共同组成了切面,时间,地点和要发生的"故事"

  5-引入(Introduction):引入允许我们向现有的类添加新的方法和属性(Spring提供了一个方法注入的功能)

  6-目标(Target):即被通知的对象,如果没有Aop,那么它的逻辑将要交叉别的事务逻辑,有了Aop之后它可以只关注自己要做的事(Aop让他做爱做的事)

  7-代理(Proxy):应用通知的对象,详细内容参见设计模式里面的代理模式

  8-织入(Weaving):把切面应用到目标对象来创建新的代理对象的过程,织入一般发生在如下几个时机:

  (1)编译时:当一个类文件被编译时进行织入,这需要特殊的编译器才可以做的到,例如Aspect的织入编译器

  (2)类加载时:使用特殊的ClassLoader在目标类被加载到程序之前增强类的字节代码

  (3)运行时:切面在运行的某个时刻被织入,SpringAop就是以这种方式织入切面的,原理应该是使用了JDK的动态代理技术

• 五种同通知类型

  @Before(前置通知)

  @After（后置通知）

  @AfterReturning(返回通知)

  @AfterThrowing(异常通知)

  @Around(环绕通知)

• AOP详解链接

  https://www.515code.com/posts/egs95cdu/

• 经典撸一遍index

  class ReferSource extends Component{
      //state数据
      state = {
          dataSouce: [],
          loading:false,
          website:'',
          options:[],
          rangPickerValue: getPreDat(1)[0],
          dns:[],
      }
      //columns数据
      columns=[{
          title:"来源类型",
          dataIndex:"description",
          fixed；'left',
          ellipsis:true,
      },{
          title:"浏览量（PV）",
          dataIndex:"pv",
          ellipsis:true,
      },{
          title:"访客数(UV)",
          dataIndex:"uv",
          ellipsisi:true,
      },{
          title:"Ip数",
          dataIndex:"ip",
          ellipsis:true,
      },
    ];
    //fetch方法  
    fetch = (params: {})=>{
        this.setState({loading:true});
        referList(params).then(data =>{
            if(data){
                if(data.errorCode!=200){
                    message.error(data.errorMsg);
                    this.setState({loading:false})
                }else{
                    this.setState({
                        loading: false,
                        dataSource: data.data.reList,
                        dns: data.data.dns,
                        webSite: data.data.dn,
                    })
                }
            }
        }).catch(function(err: any){
            console.log(err);
        });
    };
      
   componentDidMount(){
     this.fetch({});
   }  
   //OnChange方法
   onChangeSite = (dn) =>{
       this.setState({
           webSite: dn,
       });
   };
      
   onChangeTime = (dates: moment,dateStrings: string) = >{
       if(dateStrings != undefined){
           this.setState({
               rangePicekeValue: dates,
           });
       }
   };
     
  //查询按钮方法 search
  search = () =>{
          this.fetch({
              dn: this.state.webSite,
              time: this.state.rangePickerValue.format('YYYYMMDD'),
          });
      };
      
  //render()方法
   render(){
       const{dataSource,loading,website,dns,rangePickerValue} = this.state;
       return (
        <PageContainer>
          <ProTable<ReferResourceItem>
            headerTitle={
              <div>
                <Select
                  showSearch
                  optionFilterProp="children"
                  style={{ marginRight: 10 }}
                  placeholder={'请选择站点'}
                  showArrow={true}
                  allowClear={true}
                  value={webSite}
                  onChange={this.onChangeSite}
                >
                  {dns
                    ? dns.map((item) => (
                        <Select.Option key={item.value} value={item.value}>
                          {item.name}
                        </Select.Option>
                      ))
                    : null}
                </Select>
                <DatePicker
                  style={{ marginRight: 10 }}
                  onChange={this.onChangeTime}
                  defaultValue={rangePickerValue}
                />
                <Tooltip title="search">
                  <Button shape="circle" icon={<SearchOutlined />} onClick={this.search} />
                </Tooltip>
              </div>
            }
            rowKey={(record) => {
              return record.id;
            }}
            columns={this.columns}
            dataSource={dataSource}
            options={false}
            loading={loading}
            pagination={false}
            search={false}
            scroll={{ x: 1500, y: 500 }}
            bordered
          />
        </PageContainer>
      );
   }   
  }
              
  export default ReferSource;