前端 | 易学教程

求超大文件上传方案( php )

阅读更多关于求超大文件上传方案( php )

核心原理：该项目核心就是文件分块上传。前后端要高度配合，需要双方约定好一些数据，才能完成大文件分块，我们在项目中要重点解决的以下问题。 * 如何分片； * 如何合成一个文件； * 中断了从哪个分片开始。如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。如何合，在合之前，我们还得先解决一个问题，我们如何区分分块所属那个文件的。刚开始的时候，我是采用了前端生成了唯一uuid来做文件的标志，在每个分片请求上带上。不过后来在做秒传的时候我放弃了，采用了Md5来维护分块和文件关系。在服务端合并文件，和记录分块的问题，在这方面其实行业已经给了很好的解决方案了。参考迅雷，你会发现，每次下载中的时候，都会有两个文件，一个文件主体，另外一个就是文件临时文件，临时文件存储着每个分块对应字节位的状态。这些都是需要前后端密切联系才能做好，前端需要根据固定大小对文件进行分片，并且请求中要带上分片序号和大小。前端发送请求顺利到达后台后，服务器只需要按照请求数据中给的分片序号和每片分块大小（分片大小是固定且一样的）算出开始位置，与读取到的文件片段数据，写入文件即可。为了便于开发，我将服务端的业务逻辑进行了如下划分，分成初始化

前端学习笔记4-CSS入门二

阅读更多关于前端学习笔记4-CSS入门二

前言：虽然做了几个前端项目，但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱，在网上找了一些网站，用于空闲时间学习。在此做下学习笔记，以做复习使用。网站的课程讲的很好，很适合像我这样零基础的人学习，非常感谢网站的维护者，推荐下：绿叶学习网 1.控制字体的有，font-family（字体类型）、font-size（字体大小）、color（字体颜色）、font-weight（字体粗细）、font-style（字体斜体）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*font-family，字体类型，可写多个，中间逗号隔开，顺序匹配电脑上安装的字体*/ #f1{ font-family: 宋体; } #f2{ font-family: 微软雅黑,SansSerif,宋体; } /*font-size，字体大小，一般用px控制*/ #f3{ font-size: 24px; } /*color，字体颜色*/ #f4{ color: red; } /*font-weight，字体粗细，可用100-900，bold，normal*/ #f5{ font-weight: 400; } /*font-style

浅谈前后端分离与实践（一）

阅读更多关于浅谈前后端分离与实践（一）

一、起源（故事纯属虚构，如有雷同，纯属巧合）传说在很久很久以前，我们有志之士有了个创业的想法，于是乎开始了自己的创业之梦，但是人手不足啊，于是乎所有角色老子一个人全包了： Roles: PM, DBA, RD, FED, Designer, ... Skills: Linux, MySQL, JAVA, JavaScript, HTML, CSS, ... Tools: phpmyadmin, photoshop, powerpoint, ... 我们用 express 应用生成器来模拟一下传统开发（因为本人早已忘记java是怎么写的了，这里只是为了方便演示） $ npm install express-generator -g # 安装 express-generator $ express progressive # 初始化项目 $ cd progressive # 进入目录 $ npm install # 安装依赖 $ npm start # 启动项目然后我们愉快的打开了 localhost:3000 看到了我们的页面: 接着，我看是研究代码：发现我的模板引擎用的是 jade 是通过 nodejs 服务端进行动态渲染： // app.js app.set('view engine', 'jade'); 然后当我访问 localhost:3000 的时候，开始了界面渲染：

前端学习笔记3-CSS入门一

阅读更多关于前端学习笔记3-CSS入门一

前言：虽然做了几个前端项目，但是属于项目组的赶鸭上架。我的前端基础还是非常薄弱，在网上找了一些网站，用于空闲时间学习。在此做下学习笔记，以做复习使用。网站的课程讲的很好，很适合像我这样零基础的人学习，非常感谢网站的维护者，推荐下：绿叶学习网 1.CSS的3种引用方式： ---外部样式表，CSS代码和HTML代码分开存放，在HTML中通过link标签引入CSS。 CSS代码： div{ width: 200px; height: 200px; border: 1px solid red; } HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <link href="demo1.css" type="text/css" rel="stylesheet"> </head> <body> <div>快看我，我是外部</div> </body> </html> 效果展示： ---内部样式表， CSS代码写在HTML的head标签的style标签中： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-

react-mockjs

阅读更多关于 react-mockjs

2020-01-17 react-mockjs 使用最近参加了公司的一个新的项目，前后端同时开发，这时后端提供不了前端接口，那么就要靠咱们前端自己mock数据啦。用到mock 数据的工具是 mockjs ，就是这个。这里是github地址： https://github.com/nuysoft/Mock/wiki/Getting-Started # 安装 npm install mockjs # 导入 mockjsimport mockjs from 'mockjs'; const proxy = {'GET /api/getuser': (req, res) => res.send(mockjs.mock({ // /api/getuser 是我需要访问的接口名称 "code": 0, "content|1": [{ // content|1 content 是我最终想要拿到的数据 1是指生成一个content "id|+1": 1, "name": "@cname", "job|1": ["前端工程师", "前端助理", "前端专家", "运维专家", "后端工程师"], "jobNum|1": [1, 12, 34, 56, 23, 45, 56, 34, 56, 77, 4, 321, 443, 654, 231], "date": "@date", "jobHour

大前端与前后端分离

阅读更多关于大前端与前后端分离

一、大前端　　简单来说，大前端就是所有前端的统称，比如Android、iOS、web、Watch等，最接近用户的那一层也就是UI层，然后将其统一起来，就是大前端。大前端最大的特点在于一次开发，同时适用于所有平台，开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代，利用web不仅能开发出网站，更可以开发手机端web应用和移动端应用程序。　　由于node的出现，前端工程师不需要依赖于后端程序而直接运行，从而前后端分离起来。所以当开发一个新产品的时候服务只需要写一次，但是面向用户的产品可能有很多，例如网站、Android客户端、iOS客户端和微信小程序等。由于各个平台使用的技术栈都不一样，代码无法复用，非常浪费人力、物力。那么有没有什么技术能够解决这一痛点呢？大前端应运而生，其实大前端的主要核心就是跨平台技术，有了跨平台技术，各个平台的差异性就抹平了，开发者只需要一套技术栈就可以开发出适用于多个平台的客户端。　　目前的主流跨平台方案：Cordova/phoneGap、React Native、Weex、微信小程序、PWA和Flutter等，根据其原理性，可以分为四大类。 H5+原生（Cordova、Ionic、微信小程序） JavaScript开发+原生渲染（React Native、Weex、快应用）自绘UI+原生(Flutter)

微服务，为什么从前后端分离开始？

阅读更多关于微服务，为什么从前后端分离开始？

关注「 IT老兵哥」，赋能程序人生！既要低头赶路，又要抬头望天，科技是为人服务的，任何技术背后都有更深层次的考量，在本系列的第一篇文章中我们聊了微服务的本质，它是一种可以加速分工、促进合作的新协作机制。知其然，知其所以然，在第二篇文章中我们剖析了微服务为什么可以加速分工、促进合作，今天我们再接着来聊聊怎样开启微服务架构之旅。微服务到底改变了什么，你知道吗？微服务，为什么可以加速分工、促进合作？ 1. 从前后端分离开启微服务改造现在我们对微服务有了更深入的了解，也准备在构建新系统时采用这套新架构了，但它还是有些复杂度的，包括服务注册中心、统一配置中心、微服务网关、接入层网关、服务治理中心、调用链路追踪、分布式事务和分布式调度等众多组件。一口吃成胖子仅仅是一个美好的愿望，从单体式架构直接升级至全微服务架构，需要掌握这套全新的技术栈，对于缺乏前期铺垫的团队来说，学习曲线还是比较陡的，真正遇到的挑战往往超出想象的。心理学对此有专门的研究，我们探索陌生世界的动力源于兴趣，而兴趣就是好奇心和正向反馈。如果我们刚开始就把目标设定的太高太远，在坚持努力了一段时间之后，还无法达成目标的话，那我们就接收不到正向反馈。久而久之，好奇心就会消磨殆尽，兴趣也就随之消失了。最靠谱的方式就是段带式进阶，将一个非常宏大的目标拆解成多个阶段性目标。在当前能力水平下

【skillMap】前端工程师必备技能图谱

阅读更多关于【skillMap】前端工程师必备技能图谱

转载来自： https://github.com/TeamStuQ/skill-map 来源： CSDN 作者： RanMaxLi 链接： https://blog.csdn.net/oqqHun123/article/details/104014824

博客初心源于前端攻城狮

阅读更多关于博客初心源于前端攻城狮

初始博客的初衷源于“前端攻城狮”，有人很疑惑为啥因为它呢？那就让我们一起来了解“前端攻城狮”吧！首先，前端攻城狮是取得前端工程师的谐音！它是一个职位，对于这个职位有几个字可以概括：高薪，有前景，累，苦逼。前景：这个职位是近五年才兴起的一个职位，在之前是被鄙视的一个！有句话说得好风水轮流转，现在这个职位风生水起了，它的市场是可以说是供不应求！如何了解前端？　　前端是做什么的？　　--- 产品经理（PM或者叫PD）根据可行性调研后提需求，然后和视觉（UE）确定交互视觉稿，由前端和后端进行开发。后端负责数据和接口设计，前端负责页面呈现和交互功能　　前端工程师要会哪些东西？　　---前端不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等　　　　　　以上只是初步的说下这个职位...... 来源： https://www.cnblogs.com/rainheader/p/4573690.html

【番外】 Vue中使用ArcGIS JS API 4.14开发

阅读更多关于【番外】 Vue中使用ArcGIS JS API 4.14开发

一、概述在之前很长的一段时间中，使用ArcGIS JS API(以下简称“JS API”)开发WebGIS系统的时候，还是基于传统的前端框架和各种前端技术来开发，这些框架和技术各位使用过的大概有这些：Dojo、jQuery、Bootstrap、CommonJS等。用这些传统的技术框架结合JS API去开发的时候，我们引入JS API是在系统的HTML页面中通过<script>和<style>标签来引入，通常的做法是在主页(index.html)中引入，代码如下所示： <link rel="stylesheet" href="http://localhost/4.14/esri/themes/light/main.css" /> <script src="http://localhost/4.14/init.js"></script> 目前，随着前端技术的不断发展，React和Vue等前端开发技术已经成为了一名前端开发者的标配，作为GISer的我们也毫无例外，在开发许许多多的WebGIS项目系统时，我们都会去选择目前主流的这些开发技术，其中使用最多的就是React和Vue这两种。所以本文就主要介绍下我们如何使用Vue结合JS API去开发我们的项目系统。二、开始前的技术基础有一定的Vue基础知识，熟悉ES6(能看懂一个Vue文件中HTML标签、CSS代码、JS代码之前的联系就行

订阅前端