zmtssdy

zmtssdy 查看完整档案

南京编辑  |  填写毕业院校叶子科技  |  前端开发 编辑填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

zmtssdy 收藏了文章 · 2019-09-05

react dva 的 connect 与 @connect

connect 的使用

dva官方API connect

connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 Stateconnect 方法传入的第一个参数是 mapStateToProps 函数,该函数需要返回一个对象,用于建立 StateProps 的映射关系。】

简而言之,connect接收一个函数,返回一个函数。

第一个函数会注入全部的models,你需要返回一个新的对象,挑选该组件所需要的models

export default connect(({ user, login, global = {}, loading }) => ({
    currentUser: user.currentUser,
    collapsed: global.collapsed,
    fetchingNotices: loading.effects['global/fetchNotices'],
    notices: global.notices
}))(BasicLayout);


// 简化版
export default connect( 
  ({ user, login, global = {}, loading }) => {
        return {
          currentUser: user.currentUser,
          collapsed: global.collapsed,
          fetchingNotices: loading.effects['global/fetchNotices'],
          notices: global.notices
        }
  }
)(BasicLayout);

@connect 的使用

其实只是connect的装饰器、语法糖罢了。

// 将 model 和 component 串联起来
export default connect(({ user, login, global = {}, loading }) => ({
    currentUser: user.currentUser,
    collapsed: global.collapsed,
    fetchingNotices: loading.effects['global/fetchNotices'],
    notices: global.notices,
    menuData: login.menuData,         // by hzy
    redirectData: login.redirectData, // by hzy
}))(BasicLayout);

// 改为这样(export 的不再是connect,而是class组件本身。),也是可以执行的,但要注意@connect必须放在export default class前面:
// 将 model 和 component 串联起来
@connect(({ user, login, global = {}, loading }) => ({
  currentUser: user.currentUser,
  collapsed: global.collapsed,
  fetchingNotices: loading.effects['global/fetchNotices'],
  notices: global.notices,
  menuData: login.menuData,         // by hzy
  redirectData: login.redirectData, // by hzy
}))

export default class BasicLayout extends React.PureComponent { 
   // ...
}

@ 修饰器

@es7加入的功能,现在已经有很多项目开始使用

修饰器是一个对类进行处理的函数。修饰器函数的第一个参数,就是所要修饰的目标类。

例如在你以前的react项目中,用了react-redux你是这么写connect的:

const mapStateToProps = state => {
  return {
    user: state.user.user
  };
};

const mapDispatchToProps = (dispatch) => ({
  usersAction: bindActionCreators(userAction, dispatch),
  dispatch: dispatch
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

那么现在用上es7的修饰器,你可以改成这样:

@connect(state => ({
    user: state.user.user,
  }),
  dispatch => ({
    ...bindActionCreators({
      usersAction: usersAction
    }, dispatch)
  })
)
export default class Main extends Component {

}

当然,如果你用dva或者redux-saga,你甚至不用在connect里写dispatch,可以这么写

@connect(state => ({
    user: state.user.user,
  }),
)
export default class Main extends Component {
    componentDidMount () {
        this.props.dispatch({
            type: 'user/saveUser',
        })
    }
}
查看原文

zmtssdy 发布了文章 · 2019-09-05

react dva 的 connect 与 @connect

connect 的使用

dva官方API connect

connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 Stateconnect 方法传入的第一个参数是 mapStateToProps 函数,该函数需要返回一个对象,用于建立 StateProps 的映射关系。】

简而言之,connect接收一个函数,返回一个函数。

第一个函数会注入全部的models,你需要返回一个新的对象,挑选该组件所需要的models

export default connect(({ user, login, global = {}, loading }) => ({
    currentUser: user.currentUser,
    collapsed: global.collapsed,
    fetchingNotices: loading.effects['global/fetchNotices'],
    notices: global.notices
}))(BasicLayout);


// 简化版
export default connect( 
  ({ user, login, global = {}, loading }) => {
        return {
          currentUser: user.currentUser,
          collapsed: global.collapsed,
          fetchingNotices: loading.effects['global/fetchNotices'],
          notices: global.notices
        }
  }
)(BasicLayout);

@connect 的使用

其实只是connect的装饰器、语法糖罢了。

// 将 model 和 component 串联起来
export default connect(({ user, login, global = {}, loading }) => ({
    currentUser: user.currentUser,
    collapsed: global.collapsed,
    fetchingNotices: loading.effects['global/fetchNotices'],
    notices: global.notices,
    menuData: login.menuData,         // by hzy
    redirectData: login.redirectData, // by hzy
}))(BasicLayout);

// 改为这样(export 的不再是connect,而是class组件本身。),也是可以执行的,但要注意@connect必须放在export default class前面:
// 将 model 和 component 串联起来
@connect(({ user, login, global = {}, loading }) => ({
  currentUser: user.currentUser,
  collapsed: global.collapsed,
  fetchingNotices: loading.effects['global/fetchNotices'],
  notices: global.notices,
  menuData: login.menuData,         // by hzy
  redirectData: login.redirectData, // by hzy
}))

export default class BasicLayout extends React.PureComponent { 
   // ...
}

@ 修饰器

@es7加入的功能,现在已经有很多项目开始使用

修饰器是一个对类进行处理的函数。修饰器函数的第一个参数,就是所要修饰的目标类。

例如在你以前的react项目中,用了react-redux你是这么写connect的:

const mapStateToProps = state => {
  return {
    user: state.user.user
  };
};

const mapDispatchToProps = (dispatch) => ({
  usersAction: bindActionCreators(userAction, dispatch),
  dispatch: dispatch
});

export default connect(mapStateToProps, mapDispatchToProps)(Header);

那么现在用上es7的修饰器,你可以改成这样:

@connect(state => ({
    user: state.user.user,
  }),
  dispatch => ({
    ...bindActionCreators({
      usersAction: usersAction
    }, dispatch)
  })
)
export default class Main extends Component {

}

当然,如果你用dva或者redux-saga,你甚至不用在connect里写dispatch,可以这么写

@connect(state => ({
    user: state.user.user,
  }),
)
export default class Main extends Component {
    componentDidMount () {
        this.props.dispatch({
            type: 'user/saveUser',
        })
    }
}
查看原文

赞 7 收藏 5 评论 0

zmtssdy 收藏了文章 · 2019-08-27

Ant Design Pro 入门到实战手册 【2020】

zmtssdy 收藏了文章 · 2019-08-26

Ant Desing Pro2.0(一)项目初始化

1.写在前面

最近做毕设的时候发现网络上关于ant designpro2.0版本的基础入门资料太少,我一个后端开发人员当时入门也是跌跌撞撞,现在我将我所学的分享出来,避免大家少走一些弯路。

2.开发环境

你的本地环境需要安装 node 和 git。ant desing pro框架基于 ES2015+、React、UmiJS、dva、g2 和 antd,提前了解和学习这些知识会非常有帮助。

3.参考资料

  1. 参考ant design pro
  2. 参考DvaJs

4.目录地址

  1. Ant Desing Pro2.0(一)项目初始化
  2. Ant Desing Pro2.0(二)新增页面
  3. Ant Desing Pro2.0(三)设置代理
  4. Ant Desing Pro2.0(四)与服务端交互

1.下载项目源码

从github上面下载源码,代码如下


git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
cd my-project

下载好的项目如图
clipboard.png

2.删除无关代码

2.1下图是删除跟开发无关的文件夹以及无关的文件后的效果

clipboard.png

2.2删除package.json中其他无关的npm命令行

删除前

clipboard.png
删除后,图片中有个注意事项请关注以下

clipboard.png

3.安装依赖以及启动项目

ps:我这里采用『WebStorm』开发
1.在当前目录输入以下命令

> nmp install

clipboard.png

> nmp start


运行后浏览器会自动打开出现如下界面

clipboard.png

这样第一部分的项目导入就算完成了

查看原文

zmtssdy 收藏了文章 · 2019-08-26

Ant Desing Pro2.0(二)新增页面

1.参考资料

  1. 参考ant design pro
  2. 参考DvaJs

2.目录地址

  1. Ant Desing Pro2.0(一)项目初始化
  2. Ant Desing Pro2.0(二)新增页面
  3. Ant Desing Pro2.0(三)设置代理
  4. Ant Desing Pro2.0(四)与服务端交互

1.新增页面

1.1 在src->pages->『新建文件夹』NewPage->『新建js文件』NewPage.js 和 『新建less文件』NewPage.less

clipboard.png

1.2填入如下代码

// 这是NewPage.js内容
import React, { PureComponent } from "react";
//面包屑
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
// 引入less
import styles from "./NewPage.less";

class NewPage extends PureComponent {
  render() {
    return (
      <PageHeaderWrapper>
        <div>
          HELLO WORD!
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default NewPage;

clipboard.png

// 这是NewPage.less内容
//样式文件默认使用 CSS Modules,如果需要,你可以在样式文件的头部引入 antd 样式变量文件:
//这样可以很方便地获取 antd 样式变量并在你的文件里使用,有利于保持页面的一致性,也方便实现定制主题。
@import "~antd/lib/style/themes/default.less";

2.配置路由

2.1 在config->router.config.js->『47行新增如下内容』

  // 这行是新增的内容
  {
    path: "/newPage",
    icon: "file",
    name: "newPage",
    routes: [
      {
        path: "/newPage/newPage",
        name: "newPage",
        component: "./NewPage/NewPage"
      }
    ],
  },
  ![clipboard.png](/img/bVbppqB)

clipboard.png

2.2 做完如上步骤其实功能是完成了,但是pro 2.x版本中加入了菜单国际化中。所以你刚刚的页面如下

clipboard.png

这不是我们想要的效果,让我在进行修改修改
在src->locales->zh-CN->menu.js->『11行新增如下内容』


'menu.newPage': '新增菜单',
'menu.newPage.newPage': '新增页面',

clipboard.png

3.查看效果

3.1运行效果

clipboard.png

3.2让我做一道连线题把

clipboard.png

查看原文

zmtssdy 收藏了文章 · 2019-08-26

Ant Desing Pro2.0(三)设置代理

1.参考资料

  1. 参考ant design pro
  2. 参考DvaJs

2.目录地址

  1. Ant Desing Pro2.0(一)项目初始化
  2. Ant Desing Pro2.0(二)新增页面
  3. Ant Desing Pro2.0(三)设置代理
  4. Ant Desing Pro2.0(四)与服务端交互


1.修改文件

1.1 在config->config.js->『将82行和88行的注释打开』

clipboard.png

  proxy: {
    '/server/api/': { // 代理前缀,请求格式:http://localhost:8000/server/api/资源地址,将所有以/server/api 开头的所有路由都代理到目标地址
      target: 'http://www.example.com', // 代理目标地址
      changeOrigin: true, // 是否跨域访问
      pathRewrite: { '^/server': '' }, // 最终请求时候忽略掉server
    },
  },
  


举个例子吧
1.有个接口 http://www.example.com/api/test,请求之后会返回{"message":"200"}
2.按照上面的的代理配置ant desing pro会发一个『http://localhost:8000/server/api/test』请求,
之后会去掉『http://localhost:8000/api/test』
最终代理成『http://www.example.com/api/test』

2.测试问题

如何测试呢?我准备放在后面更服务器进行交互的时候再说

查看原文

zmtssdy 收藏了文章 · 2019-08-26

Ant Desing Pro2.0(四)与服务端交互

1.参考资料

  1. 参考ant design pro
  2. 参考DvaJs

2.目录地址

  1. Ant Desing Pro2.0(一)项目初始化
  2. Ant Desing Pro2.0(二)新增页面
  3. Ant Desing Pro2.0(三)设置代理
  4. Ant Desing Pro2.0(四)与服务端交互

1 新建页面

1.1 在src->pages->『新建文件夹』NewPage->『新建js文件』NewPage.js 和 『新建less文件』NewPage.less

clipboard.png

1.2 在NewPage.js填入如下代码
// 必须引入
import React, { PureComponent } from "react";
//面包屑
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
// 引入阿里dva框架,不然不能和服务端交互,必须引入
import { connect } from "dva";
// 引入less
import styles from "./NewPage.less";

// 这个注解解释起来有点麻烦,但要注意以下几点
// 1.@connect必须放在export default class前面
// 2.这个不写,你在这个页面里面获取不到服务器返回给你的数据
// 3.采用解构赋值的方式,第一个参数newPage是命名空间,我们数据就是从这里拿到的
@connect(({ newPage, loading }) => ({
  data: newPage.data, // 将data赋值给
  loading: loading
}))

class NewPage extends PureComponent {
  // componentWillMount渲染之前调用,一般处理ajax异步回来的数据,
  // 等下面render渲染的时候好绑定
  componentWillMount() {
    console.log("渲染之前调用");
    console.log("之调用一次");
  }

  // 每次调用render之前渲染
  componentDidMount() {
    // 分发器,用dispatch一定要写@connect注解
    const { dispatch } = this.props;
    // 分发器调用models发起请求,具体流程是dispatch=>models=>services
    dispatch({
      // newPage命名空间,fetch是该文件中的方法,对应src/models/newPage.js,因为newPage的namespace的值newPage
      type: "newPage/fetch",
      // 参数,一般采用json格式
      payload: { a: "1", b: "2" }
    });
  }

  render() {
    // 这里也采用了解构赋值
    let { data } = this.props;
    return (
      <PageHeaderWrapper>
        <div>
          姓名:{data.userName}<br/>
          学号:{data.studentNo}<br/>
          年龄:{data.age}<br/>
          性别:{data.sex}<br/>
        </div>
      </PageHeaderWrapper>
    );
  }
}

export default NewPage;
1.3 在NewPage.less填入如下代码
//样式文件默认使用 CSS Modules,如果需要,你可以在样式文件的头部引入 antd 样式变量文件:
//这样可以很方便地获取 antd 样式变量并在你的文件里使用,有利于保持页面的一致性,也方便实现定制主题。
@import "~antd/lib/style/themes/default.less";

2 创建Models

2.1 在src->models->『新建js文件』NewPage.js

clipboard.png

2.2 填入以下代码
// 导入接口文件,并采用解构的方式,
// 将newPage.js的文件里面的queryUser1赋值给这里的queryUser1
import { queryUser1 } from "@/services/newPage";

export default {
  namespace: "newPage",

  //  State 是储存数据的地方,收到 Action 以后,会更新数据。
  state: {
    data: {}
  },

  effects: {
    /**
     * @param payload 参数
     * @param call 执行异步函数调用接口
     * @param put 发出一个 Action,类似于 dispatch 将服务端返回的数据传递给上面的state
     * @returns {IterableIterator<*>}
     */* fetch({ payload }, { call, put }) {
      // 访问之前可以做一些操作
      const response = yield call(queryUser1, payload);
      // 拿到数据之后可以做一些操作
      yield put({
        // 这行对应下面的reducers处理函数名字
        type: "save",
        // 这是将最后的处理数据传递给下面的reducers函数
        payload: response
      });
    }

    // * fetch2({ payload }, { call, put }) {
    //   const response = yield call(queryCurrent);
    //   yield put({
    //     type: "saveCurrentUser",
    //     payload: response
    //   });
    // }
  },

  reducers: {
    /**
     *
     * @param state
     * @param action
     * @returns {{[p: string]: *}}
     */
    save(state, action) {
      console.log(action);
      return {
        ...state, // es6三点运算符合,有点模糊解释不清楚
        data: action.payload // 上面与服务器交互完的数据赋值给data,这里的data 对应最上面 state 里面的data
      };
    }
  }
};

3 创建services

3.1 在src->services->『新建js文件』NewPage.js
   

clipboard.png

3.2 填入以下代码
// json序列化的工具
import { stringify } from "qs";
// ant 自己封装好的发送ajax请求的工具
import request from "@/utils/request";


// get请求 注意 ` 这个符号 不是这种 ’号
export async function queryUser1(params) {
  // stringify这个将json序列化 比如 {"a":1,"b":2} 转换成 a=1&b=2
  return request(`/server/api/test/user?${stringify(params)}`);
}

// post请求 注意 ` 这个符号 不是这种 ’号
export async function queryUser2(params) {
  return request(`/server/api//test/user?${params}`, {
    method: "POST"
  });
}

4 修改代理文件

4.1 由于前面有介绍,这里详细介绍,只贴出代码

clipboard.png

4.2 具体代码
  proxy: {
    // 代理以访问 /server/api 开头的所有路由
    '/server/api/': {
      // 代理的目标地址
      target: 'http://localhost:8080',
      // 开启跨域访问
      changeOrigin: true,
      // 发送请求的时候,去掉server
      pathRewrite: { '^/server': '' },
    },
  },

5 创建后端应用

5.1 我这里采用springboot创建的一个简单应用,由于怕跑题创建步骤不在详细,贴出关键代码

clipboard.png

5.2 具体代码
package com.example.demo.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@RestController
@RequestMapping("api/test")
public class TestController {

    @RequestMapping("user")
    public Map<String, Object> user(String a, String b) {

        Map<String, Object> map = new HashMap<>();
        map.put("userName", "张三");
        map.put("age", 18);
        map.put("studentNo", "111111111111");
        map.put("sex", "男");
        return map;
    }
}

6 访问效果

clipboard.png

clipboard.png

7 大概流程

7.1 引用pro官网的话
1.UI 组件交互操作;
2.调用 model 的 effect;
3.调用统一管理的 service 请求函数;
4.使用封装的 request.js 发送请求;
5.获取服务端返回;
6.然后调用 reducer 改变 state;
7.更新 model。
7.2 我的理解

clipboard.png

7.3 其实是支付宝的Dva框架

clipboard.png

dva传送门

查看原文

zmtssdy 关注了标签 · 2019-08-26

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 138282

zmtssdy 关注了标签 · 2019-08-26

vue.js

Reactive Components for Modern Web Interfaces.

Vue.js 是一个用于创建 web 交互界面的。其特点是

  • 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动 自动追踪依赖的模板表达式和计算属性。
  • 组件化 用解耦、可复用的组件来构造界面。
  • 轻量 ~24kb min+gzip,无依赖。
  • 快速 精确有效的异步批量 DOM 更新。
  • 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

官网:https://vuejs.org
GitHub:https://github.com/vuejs/vue

关注 100349

zmtssdy 关注了标签 · 2019-08-26

node.js

图片描述
Node 是一个 Javascript 运行环境(runtime)。实际上它是对 Google V8 引擎(应用于 Google Chrome 浏览器)进行了封装。V8 引擎执行 Javascript 的速度非常快,性能非常好。Node 对一些特殊用例进行了优化,提供了替代的 API,使得 V8 在非浏览器环境下运行得更好。例如,在服务器环境中,处理二进制数据通常是必不可少的,但 Javascript 对此支持不足,因此,V8.Node 增加了 Buffer 类,方便并且高效地 处理二进制数据。因此,Node 不仅仅简单的使用了 V8,还对其进行了优化,使其在各环境下更加给力。

关注 81773

认证与成就

  • 获得 6 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-08-26
个人主页被 128 人浏览