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

最新推荐文章于 2023-09-18 11:45:59 发布

转载最新推荐文章于 2023-09-18 11:45:59 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lakeInHeart/p/7535054.html

文章标签：

#前端 #php #后端 #ViewUI

本文介绍了一种前端人员在不具备后端环境的情况下参与后台视图开发的方法，通过本地开发静态页面并结合后端模板语法实现动态化。此外，还介绍了前端工程化的实践，包括使用ES6+和browser-sync实现自动刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

开发流程

现在很多项目并没有实现前后端的分离，当本地没有安装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"

转载于:https://www.cnblogs.com/lakeInHeart/p/7535054.html