Frontend

在 web 开发领域，前后端分离越来越普遍，前后端之间的技术壁垒也随着提高。混合开发的年代，后端多多少少都要会写一些前端的代码，而现在后端已经越来越无法写前端的代码，如果后端想学习前端技术，该如何入手呢？接下来讲讲我的一些经验。 打破思想障碍 前端的发展十分迅速，且生态和标准十分割裂，这对专业的前端也是一个比较大的挑战，对于后端而言难度就更可想而知了。 幸运的是，我们如果只是想做前端入门并且能够开发一些普通的项目的为目标的话还是没有这么大的阻碍的。我们可以花费 20 % 的学习时间解决，80 % 的前端开发问题。剩下的 20% 开发问题，你可以有两个选择： 交给专业的前端去做 继续精进前端技术，自己解决 确定学习目标 学习前端主要有以下几个部分： CSS JS 框架 (VUE ,React, angular) CSS CSS 部分是前端很重要的一个部分，也是大多数后端都不是很擅长的部分，关于 CSS 部分，我们可以借助 UI 框架去解决问题，UI 框架会封装很多组件，我们只需要用相关组件进行布局即可。 CSS 布局就变得十分的重要了，好在现在前端有了 flex 布局，在兼容性和开发便利性上来说都对程序员十分友好，因此对于 flex 布局这部分应该要重点学习和掌握。 CSS 布局另一个比较重要的就是「定位」，因此「定位」这部分的知识也是需要重点掌握的。 掌握了 flex 和 「定位」两部分知识，基本上绝大多数的布局都没有什么问题了，配合上 UI 框架的加持基本上普通页面的开发就可以完成的七七八八了。 js 框架 一般想学习前端的朋友心中都会有自己想学习的框架了，这里建议挑选你周边前端在使用的一些框架，对于你后续的学习能有一些帮助。 学习方法 关于 CSS 的学习方法，主要是看文档和练习，把布局重点学习即可，下面介绍主要介绍一下 JS 框架的学习方法。 阅读文档 这部分可以根据自身掌握情况有选择的进行，如果你对所选 JS 框架，文档已经通读并且对文档结构有了一个掌握就可以跳过这部分。 文档不需要过于深度的掌握，有些概念不理解也可以跳过，随着后续开发的深入，你慢慢就会对一些难以理解的概念有所顿悟。 但是对于文档的结构需要熟练掌握，要做到你遇到问题你能知道到文档的哪个部分去找就可以了。 抄作业 找一个所选 JS 框架的后台管理系统，跟着管理系统文档框架进行一些管理后台功能的开发。 通过抄一些原本原理后台实现的功能，你会对整个前端代码的目录组织和后端通讯有一个比较完整的认识，同时对于 JS 框架的一些用法也会有更深入的了解。 更新一步 如果你对于管理后台的开发已经迎刃有余，那前端的 JS 框架，以及前后端通讯，还有一些基础的页面布局都有了一个系统的了解。接下来可以尝试写一个 H5 项目，进行一些移动端开发。 ...

今天帮助前端小伙伴解决了一下 jsonp 调用腾讯地图 WebService API 报错 Unexpected token : 的问题，这里记录一下解决过程 项目中使用 vue-jsonp 组件来解决跨域问题，使用流程如下 安装 jsonp npm install vue-jsonp main.js 引入 jsonp 组件 import Vue from 'vue' import VueJsonp from 'vue-jsonp' Vue.use(VueJsonp) 接口调用 const KEY =XXXXXXXXXXXXXX; //key 秘钥自己申请 let url = 'https://apis.map.qq.com/ws/geocoder/v1?&poi_options=address_format=short&get_poi=0'; let locationdata = lat+','+lng //纬度，经度 this.$jsonp(url,{ key:KEY, location:locationdata }) .then(json => { let address = json.result.address; console.log(address) //附近街道地址信息 }) .catch(err => { console.log(err) }) } 本来到了这里应该是完美无缺，开开心心的接受腾讯地图返回的信息就可以了，但是！！，出来了莫名其妙的问题，当请求接口是返回的确是 Unexpected token : 这样的错误。 问题排查 本着发现问题解决问题的程序员精神，开始了百度 ，谷歌的混合双打，依然没有找到问题的原因，只因为当时搜索的关键词为 Unexpected token : 虽然我本身不是做前端，但是我也清除这种错误一抓一大把，很难精准的把握到错误的具体位置，既然问题出现在了 jsonp 中那就了解一下 jsonp 的实现原理，和跨域原理，果然有重大发现下图中的一段话一句惊醒梦中人 ...