前端人员参与后台视图开发较好的实践

前端人员参与后台视图开发

开发流程

现在很多项目并没有实现前后端的分离，当本地没有安装java或者php等环境的时候，那开发就是一个难题。
如何解决这个问题？我们知晓N年前的前后端没有分离的时候，前端只是被称为页面仔，前端只开发出静态页面，开发完成之后就直接交给后端填写字段，实现动态网站。
既然不是一个标准的全栈工程师，再者后端开发也不是我们的任务，那么目前能够想到的好的、具有一定效率的开发方式就是：在本地开发出好的静态页面，然后在上传到服务器之后，将jsp or php 变量填入即可。
简易的流程如下：

`本地开发静态页面碎片`=>`本地静态页面自测`=>`将静态页面作为模块嵌入后台view`=>`利用后台模板语法实现“动态化”`

前端静态环境开发的搭建

前端工程化给前端的开发带来了巨大的便利，是潮流也是趋势，而且我们必须使用es6+以防技术的落后而被淘汰。
因为要考虑到“.html”文件的变更页需要刷新，browser-sync实现刷新功能。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="styles/base.less"  rel="stylesheet/less">
    <script src="./less.js" type="text/javascript"></script>
</head>

<body>
    sss
</body>
<script src="scripts/index.js"></script>

</html>

browser-sync

更改代码之后自动刷新浏览器
需要使用npm进行全局安装:npm install browser-sync -g,-g表示安装到全局
使用:browser-sync start --server --files "./index.html,app.css,./css/*.css,*.*"
--files参数指定要监视的文件，后面跟要监视的文件的文件路径以逗号分隔。

npm install -g browser-sync

browser-sync cli 的代码如下

browser-sync start --server --files "./index.html,css/*.css,js/*.js"