关于后端:前端菜鸟如何快速开发个人产品

我是车辙，我的掘金小册《SkyWalking：利用监控和链路跟踪》曾经上线啦，这是我的第一本电子书，欢送大家订阅。

大家好，我是车辙。在实现小册后的一段时间，我忽然想开发一款集体 H5 产品。在起初有这样想法的时候，心田其实还是有不少纠结的。

大家都晓得，尽管我是计算机专业，但我从毕业到当初工作 4 年工夫，基本上所有的工作都是和后端无关。惟一和前端沾边的学习技能还是在大学期间学的，那时候因为毕业设计是爬虫网站，次要用于小说的爬取和浏览。所以它的大部分内容还是当前端为主，前端界面非常简单，用了Bootstrap 布局和JavaScript。

如果要做一款 H5 产品，除了须要学习新的框架，像 Vue 或者React, 还得去学习Css 以及各种布局，兴许前面还得对其进行机型适配，想想就头大。

当初放弃前端的起因还是感觉 Css 太简单了，天底下怎么会有这么难的技术。数据结构和算法和它比都算简略的。

起初求教了前端的敌人和共事，他们通知我要做一款集体的产品是有速成的方法的，能够通过 CodeFun 疾速生成前端代码。至于后端和上线部署对我来说还是没有什么难度的。磕磕绊绊之下，我的产品在两周前终于搞定了，完结撒花。

文末有链接，大家能够去体验下

接下来，我会基于我的学习、踩坑经验，给那些后端精通、前端小白的程序员们提供一个产品疾速开发计划。

画设计稿

正经的互联网公司，在我的项目立项后。产品首先须要出一份原型，而后交由 UI 出一份设计稿，接着前端负责实现。对于咱们集体开发者而言，原型能够不必出，设计稿还是须要的。况且，多画图对咱们程序员还是很有帮忙的，不论是时序图还是流程图，还是设计稿，都能锤炼咱们的思维能力

我应用的设计工具是Figma，国外的一款设计平台。相比于 Axure，我更看重它的在线设计合作能力。如果对 Figma 不相熟的同学，能够参考 B 站的视频教程疾速学习，小破站牛逼！B 站地址

你能够疾速把这个 B 站视频看完，而后再用个半天，差不多就能靠 Figma 画出个设计稿了。如果须要 Logo 图标，能够去阿里妈妈的图标网站 iconfont 下载。地址

上面的就是我的产品设计稿了。

前端代码生成

画完设计稿，之前咱们提到过，能够通过 CodeFun 这个平台疾速生成前端代码，它的官网简介说是 UI 设计稿主动生成源代码。CodeFun 能够说和Figma 进行了深度绑定，它在Figma 中开发了一款插件，能够把 Figma 的产品设计稿上传到CodeFun 中。把我这边的设计稿上传后，能够看到在 CodeFun 中胜利生成了页面。

轻易点击一张设计稿，它就能帮咱们生成对应平台的程序代码，包含 Uniapp、Vue、微信小程序等。

然而接下来的抉择就犯了难，该抉择哪个平台? 因为我的平台定位是微信 H5，但不排除之后可能会复制到小程序。网上搜寻后，网友举荐了 UniApp 作为开发平台，它能把 UniApp 的原生代码转换成微信小程序、H5, 甚至 App 的代码，并且官网的文档足够丰盛，至多对于我来说足够了。

H5 开发

对于 Uniapp 的学习，B 站上视频一堆，只不过内容都很多，就算开着 2 倍速，也无奈在短时间内学会，看完说不定还会忘。所以咱们能够参考网上某马的入门教程，理解 Uniapp 的根本应用，不须要多，理解下根本配置和 Tabbar 的生成即可。

具体地址就不发了，可能会有给某马打广告的嫌疑

配置实现后，通过 微信小程序 开发工具，能有这个样子就差不多。

款式开发

接着把 CodeFun 生成的代码文件复制到 Uniapp，你认为这很简略的吗？其实这才是苦楚的开始。为什么这么说？

1. CodeFun 生成的动态代码齐全只能看，比如说它生成的文本框只是一个 Div + Css。你须要把它替换成对应的组件。因为咱们是 Uniapp 开发的，所以我倡议去它的官网找对应的组件会比拟快，而且兼容性也会更强。另外像一些绝对简单的组件，Scoll、DateTime、swiper-item 都须要咱们去替换掉。
2. 它生成的 Css 既多还简单, 重重嵌套，有时候一个简略的 View 会有 4、5 个款式。还有一些布局，比方 flex 布局，主轴和副轴是什么，对于前端小白的我，每次碰到不会的，都得去网上看下什么意思。为了避免遗记，我都会把它记下来，睡前再回顾一遍。
3. 有些 Uniapp 的组件和 CodeFun生成的代码会存在肯定抵触。比如说居中、字体等，这时候就得手动去调整款式。如果调不通，须要去批改组件源码。这对我来说可太难了，记得一开始改个左右居中对齐就花了我 3 个小时，差点就把我的急躁给熬没了。
4. CodeFun 生成的 css 因为不通语境，命名形式都是相似于:Section1、Section2、Group1、Group2 保护起来特地的麻烦。

所以说，主动生成代码其实也是存在不少弊病，只不过作为刚入门的老手，能帮忙咱们疾速开发，劣势还是大于劣势的。

事件开发

到这一步，产品其实曾经初具雏形。咱们要做的是给他增加各种事件以及和后端的交互。基本上这一步次要的难点在于 Vuex 和同步异步的应用，像 v-model、v-for、v-if 这种学习起来还是比较简单的。

其实我一开始次要就是用 LocalStorage 存储信息，感觉没有 Vuex 不也能开发嘛，不过随着页面间的交互多起来，问题就裸露了：我在 A 页面的批改了用户信息后，到 B 页面数据并没有随之变动。只好乖乖的去学Vuex。所以这里我倡议，如果你的我的项目页面较少，就用 LocaStorage 就完事了，如果页面较多且有交互，就用Vuex + localStorage。

剩下的还有同步异步问题就靠 Promise 去解决，这个货色一开始我特地了解不了，比方应用 await 关键字的应用场景。感觉后端的异步比前端还是要简略点。

额定问题

在开发过程中，还存在些额定的问题。

1. 比方微信受权问题，因为我是须要微信登录的，然而在 Hash 模式下因为 # 号导致了微信回调地址出错，所以我最初还是改成了 History 模式。至于这个引出的问题，咱们在部署环节再讲。
2. 一开始我认为微信受权须要实在的测试环境地址，打算通过内网穿透测试。前面才发现你能够批改本地 Host 发明个假的域名用于本地测试。

部署到服务器

在本地开发实现后，咱们须要部署到测试环境中。Uniapp 提供了一键构建打包的性能，间接应用就能够了。
而服务器我倡议购买腾讯云的，相比于阿里云更加便宜点，【吐槽下阿里云太贵了】。

而后腾讯云和宝塔是有单干的，用宝塔操作服务器、装置软件、保护软件什么的，的确比本人手动敲代码更简略。装置以下几个软件：

1. JDK11
2. MySQL

3. Nginx

   留神开明对应的防火墙端口，比方 MySQL 就须要开明 3306 端口，Redis 须要开明 6379 端口

这边的几个问题有：

1. 跨域问题：跨域次要就是因为域名、端口、协定不统一导致的。以前还没思考过为什么前端本地调试的时候没有跨域问题，原来是前端做了代理，帮忙咱们和后端进行了交互。然而在测试环境上就是些 Html 和 js 代码, 所以咱们能够通过 Nginx 帮忙咱们做这个代理。。
2. history 问题，因为 history 模式去除了 #，在刷新页面的时候会默认申请后端，然而后端没有这个接口，就导致了 404。所以咱们须要在 Nginx 通过try_files 进行配置，先去前端页面找，找不到再去申请后端服务器。

后端的部署，我举荐应用云效【我感觉是我目前为止体验最好的产品了】。全副部署实现后，产品就正式上线了。

OK，到这差不多就完结了。其实还有很多问题存在，比如说微信领取的 JS-SDK，组件封装等等，不过篇幅无限，就到此为止吧。最初奉上体验地址，心愿大家返回试用。前端小白的作品。

总结

通过这次实打实的体验前端同学的工作，我以前感觉前端简略的想法真是大错特错，前端的难度一点都不比后端低。像这次机型适配，我压根就没实现。。。

最初心愿大家多多点赞、珍藏。就和珍藏电子书一样，点赞、珍藏了，也就代表学会了，不要问我怎么理解的这么分明。

我是车辙，掘金小册《SkyWalking》作者，一名常被 HR 调侃为 XX 杨洋的互联网打工人，。

有须要 源码 的同学能够关注公众号《车辙的编程学习圈》支付，说不定什么时候这个产品也开源了，点击支付
本文由博客一文多发平台 OpenWrite 公布！