wengqt-CSDN博客

原创数据可视化展示—用户词云

词云用户词云是用来来展示大量文本数据，由词汇组成类似云的彩色图形，铜虫用于展示数据中的标签等，它可以根据标签的权重来控制展示文字的大小，它有以下的优点：快速感知最突出的文字快速定位按字母顺序排列的文字中相对突出的部分本质上，词云是特殊的点图，就是在画布上绘制点，每一个点代表一个词，点的大小是权重，根据颜色区分类别，最后将点替换为文字，配置上旋转和图形即可。这里我们使用的是蚂蚁...

2018-06-10 13:10:32 3655 1

原创基于token的身份验证

关于tokenwhat is token？token相当于是一个令牌，在用户登录的时候由服务器端生成（基于用户名、时间戳、过期时间、发行者等信息进行签名），然后发放给客户端，客户端将令牌保存，在以后需要登录验证的请求中都需要将令牌发送到服务器端进行验证，如果验证成功，则返回数据。目前很多大型网站都在使用基于token的验证方式：github，Facebook，Twitter…why...

2018-06-09 16:34:34 5181 1

智库项目由于并没有使用webpack进行组件化开发，也没有使用npm进行依赖管理，这些都是历史原因。但是是用了es6的一些新语法，像模板字符串、class、let、const、promise等新语法，因为我们需要考虑兼容性问题，所以需要将所有的js文件进行编译转码，这里我们就用到了babel。首先，我们需要先全局安装babel：$ npm install babel-cli -g（在早期版本是in...

2018-06-03 19:27:04 991

原创文件上传的进度条

从用户的角度来说，非常希望能够看到传输的进度，所以在我们认为非常有必要加上文件上传的进度条。关于文件上传进度的api，在原生js中有可以使用XMLHttpRequest的progress事件：xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var percent = Math.floor(...

2018-06-01 22:30:51 1022

原创学院以及专业选择框的级联选择

在学院信息和专业信息的获取这有两种可行方案，一种是分开获取，先获取学院，再根据学院获取专业；另一种是直接获取到整个学院跟专业的映射，然后根据这个来在前端进行展示，无需二次请求。这两种方法各有利弊，但是在这里，第一种方法是不可行的，因为我们是要在一个列表里面选择专业，如果在分开获取的话，会出现很多网络请求来获取专业信息；还有就是，如果一下子修改两行数据的话，两行的学院不一样，那么专业获取的内容将会出...

2018-05-28 15:01:18 1555

原创 table表单的修改和保存

最近在修改展示文件信息和用户信息的表单，需求是能够点击按钮来修改，同时不影响数据的展示。最开始，我直接将可以修改的部分直接存放到输入框中，简单粗暴，可是非常影响美观，并且有严重的修改逻辑，因为采用的是react框架，并不能用id直接绑定input的节点来获取value，所以每一个可修改的节点都有一个onchange的方法来修改，但是最后的保存按钮并不能控制一整行修改的内容。因此需要对当前的修改结果...

2018-05-28 12:38:26 5372

原创对前端网络请求的封装

对于一个后台管理系统来说，封装网络请求是非常有必要的，这样可以有效的避免代码的重用，同时对一个工程化的项目来说，合理的封装有利于项目的管理和进展。在网络请求少的情况下，可以写一个文件管理请求路径：var API = { //common login:baseUrl+`/login.do`, logout:`${baseUrl}/logout.do`, registe...

2018-05-14 23:41:40 4521

原创实现站内信通知系统

站内信系统是位于个人中心的一个小模块，在用户登录之后，进入个人中心，有一个站内信的导航按钮，点击进入站内信即可查看站内通知。站内通知的展示分为两种，一种是已读同时，一种是未读通知。站内信的实现需要是基于用户名的，因此发送请求的时候需要加入用户名作为参数，这就是我们的接口文档，前后台分离开发时，都是按照接口文档来进行对接的。...

2018-05-10 21:40:22 21803 2

原创前端实现用canvas绘制pdf

项目中，有时候会需要文件的预览，由于大部分浏览器都原生支持pdf格式文件的预览，所以只需要使用a标签跳转到pdf路径就可以预览pdf文件了。同样，为了提高兼容性，我们可以引用jquery.media.js文件来加载pdf，当然，前提是你已经引用了jquery。$('#inner').media({ width: '100%', ...

2018-05-06 22:37:56 11178 3

原创谈谈React router4 的坑

作为一个使用react开发的单页面web程序，智库项目放弃了传统的后台返回来管理路径的方式，采用前端管理路径的方式进行渲染。在这里，我们使用react router 4，react router 4 相比以前的版本有一些改变，比如出现了react-router 和 react-router-dom两个包，将<Router>替换为<BrowserRouter>等等。。。现在来...

2018-05-05 20:55:15 457

原创文件上传的坑

在写文件上传接口的时候，我遇到了很多坑，以往使用jquery的ajax发送请求的content-type 都是默认的'application/json'，然而，发送文件需要使用formdata格式，所以我们需要将ajax中的contentType字段设置为false，然后还有需要注意的是，需要添加上一个字段processData设置为false，这里是为了对data参数进行序列化处理。现在，我们来...

2018-05-03 23:33:46 324

原创使用Ant Design 的form组件进行表单检验

对于一个后台管理系统来说，出现最为频繁的就是表单，在登录的时候、查询的时候都需要提交表单。那么，使用了Ant Design框架的form表单要如何提交呢？当我们打开Ant Design官网，打开表单的Demo的时候，发现代码怎么会那么多，又臭又长，比自己平时不用框架时候的表单写起来还麻烦。下面是官网上的一个简单的登录框的例子（可以看到代码是真的长）。那么长的代码真的有用吗？import { For...

2018-05-03 00:03:56 6101

原创 React组件通信——Event Bus

使用event bus进行非父子组件间的通信首先，我们来回顾一下React中组件通信的方式：父子组件之间的通信，一般是通过props来简单来说，就是通过一个将需要通信的变量a定义在父组件中，然后通过props来传递给子组件，如果子组件要更改这个变量，那么父组件就需要定义setA方法，然后也通过props传递给子组件，这样就完成了父子组件之间的通信。非父子组件之间的通信如果两...

2018-04-27 22:58:51 17486 2

原创 js监听一个变量的变化

监听一个变量的变化目前主流的前端框架（例如：react、vue）都有的共同特点是数据绑定，他们通过对一个变量的监听，来实现变量变化时候的动态响应。当网页中的数据发生了变化，便立即调用相关的回调函数来更变dom节点中的内容，来实现数据视图的更新。在智库这个项目中，由于种种原因，我们并没有用react和vue等框架，所以我们就需要使用其他的方法来实现数据流的绑定。现在常用的数据绑定的方式有...

2018-04-14 23:58:59 43262

wengqt的博客