「拥抱开源」我是个假的前端开发
正道的光 照在了大地上
“全栈”，就是个骗局。逼着开发人员在不同的技术栈上，疯狂的横跳。
本文讲述的是一个后端开发人员，如何进行前端的开发工作。。。
真香警告 ！
01 前端选型
前端，两个字简简单单。
不过当我看到主流的 React、Vue、Angular 等前端框架的时候。
简简单单。
软件技术里有一个小小的分类叫做前端技术。前端技术里有一个主流的分类叫做 React。React 有很多知识点，例如：JSX、元素渲染、组件、Props、State、生命周期等等。
考虑到时间、精力等各方面的原因。
本文不采用 React，而是采用学习曲线相对平滑的 Bootstrap + JQuery + html 来进行实现。
02 Bootstrap
Bootstrap 是一款国外开源的主流前端框架。它有着快速的、响应式布局，大量的预设组件，以及强大的 JavaScript 第三方组件库。
选用 Bootstrap 的原因，主要是它快，非常快，超级快。
下面的 DEMO 只花了不到 1h。
Bootstrap 文件内容
以上分别列举了文件的适用范围。其中，CSS 文件选用包含功能最多的 bootstrap.min.css。而 JS 文件则选用功能最少的 bootstrap.min.js。另外在引用最新的 JQuery.js 即可。
有的等不了 BUG 更新的同学可以选择 boostrap.css、bootstrap.js，必要的时候进行 BUG 修复。
Bootstrap 浏览器支持
不同的浏览器厂商，采用着不同的浏览器内核，再配上不停迭代的浏览器版本。
如果不借助主流前端框架的话，那么前端开发与调试真的是无敌的生坑。会生生的坑死很多前端开发者。
我现在还记得，前几年某些大银行的网银页面只认 IE8。当时的用户真的要裂开了。
Layout 支持
布局组件可以省略很多的人天，那些消耗在计算不同屏幕分辨率下的像素。
Components
大量的预设组件支持，可以快速构建一个页面。
Custom components
大量的自定义组件集合，可以直接拿来使用。
Bootstrap 的优秀内容还有很多，考虑到篇幅的原因这里不再继续展开。
有兴趣的同学，可以自己进行研究学习。
https://getbootstrap.com/
03 Processon
无计划，不成方圆。
在选定前端框架之后，我们还要画一个简单的设计图。
设计软件普遍都比较昂贵，这里使用可免费使用的 Processon 进行页面设计。
抛开复杂的业务需求，只是设计了一个超简洁的销售界面。仅包含了条码输入、移除条码、结账三个核心功能。
04 实现分析
常用的商业显示器，包含但不仅限于 11、12、13寸 Pad，13、15寸笔记本，20寸以上的外接显示器。
所以，我们需要一个 Layout 组件来自动适配前端页面的渲染宽度。
简单拆解页面之后，可以分为 4 个部分。每个部分的宽度都与外层 Layout 一致。
Bootstrap 大量的预设组件支持快捷的在线查询。
05 代码实现
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Simple POS</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- 最外层 Layout -->
<div class="container">
<div class="row">
<div class="col-sm">订单编号：</div>
<div class="col-sm">
<label id="orderNo">OD20200816000001</label>
</div>
<div class="col-sm">当前导购员：</div>
<div class="col-sm">
<select class="custom-select" id="inputGroupSelect03"
aria-label="Example select with button addon">
<option value="1" selected>金牌导购 - 泰罗</option>
<option value="2">银牌导购 - 哆啦A梦</option>
<option value="3">铜牌导购 - 朽木露琪亚</option>
</select>
</div>
<div class="col-sm">
<label id="systemName">开源 POS 系统</label>
</div>
</div>
<div class="row">
<div class="col-sm">SKU：</div>
<div class="col-sm">
<input id="sku" type="text" class="form-control" />
</div>
<div class="col-sm">
<button type="button" class="btn btn-primary">加入购物车（Enter）</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-secondary">移除购物车（F1）</button>
</div>
</div>
<div class="row">
<div class="col-sm">汇总：</div>
<div class="col-sm">
<label id="totalNum">X</label> 件，<label id="totalAmount">YYYY</label>
元。
</div>
</div>
<div class="row">
<div class="col-sm">
<button type="button" class="btn btn-danger btn-lg">结账（F2）</button>
</div>
</div>
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">货号</th>
<th scope="col">商品名称</th>
<th scope="col">尺码</th>
<th scope="col">颜色</th>
<th scope="col">吊牌金额</th>
<th scope="col">实际金额</th>
<th scope="col">数量</th>
<th scope="col">合计</th>
</tr>
</thead>
<tbody>
<tr id="tr-1">
<th scope="row">1</th>
<th scope="col" name="productNo"></th>
<th scope="col" name="productName"></th>
<th scope="col" name="sizeName"></th>
<th scope="col" name="colorName"></th>
<th scope="col" name="tagPrice"></th>
<th scope="col" name="retailPrice"></th>
<th scope="col" name="num"></th>
<th scope="col" name="total"></th>
</tr>
<tr id="tr-2">
<th scope="row">2</th>
<th scope="col" name="productNo"></th>
<th scope="col" name="productName"></th>
<th scope="col" name="sizeName"></th>
<th scope="col" name="colorName"></th>
<th scope="col" name="tagPrice"></th>
<th scope="col" name="retailPrice"></th>
<th scope="col" name="num"></th>
<th scope="col" name="total"></th>
</tr>
<tr id="tr-3">
<th scope="row">3</th>
<th scope="col" name="productNo"></th>
<th scope="col" name="productName"></th>
<th scope="col" name="sizeName"></th>
<th scope="col" name="colorName"></th>
<th scope="col" name="tagPrice"></th>
<th scope="col" name="retailPrice"></th>
<th scope="col" name="num"></th>
<th scope="col" name="total"></th>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</html>一个简易的前端就制作好了。
PS. 完整示例代码，见 https://github.com/FoamValue/oPos.git
06 小结
毕竟要快嘛，一个简易的前端制作好之后。接下来是页面元素样式优化、页面事件设置，以及最重要的前后端联调工作。
今天因为时间的关系，先写到这里。
夜深了，让我们下周再见。?
这个周末，又一次成功“强迫”自己学习。
感谢各位小伙伴的阅读，这里是一个技术人的学习与分享。
腾讯云开发者
