管理系统的前端多页面怎么开发？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2150 天前的主题，其中的信息可能已经有所发展或是发生改变。

甲方明确要求不前后端分离，要求我们只出静态页面！！！因为我上手就是学的 angular。所以对静态页面不是太了解，目前的做法是写一个主页面，主页面里面有个 iframe，子页面都放到 iframe 里面。目前采用最原始的开发方式，jq+bs 的方式。请问除了这种方式还有其它方式方法吗

页面

iframe

静态

angular

30 条回复 • 2019-02-09 09:09:35 +08:00

ibegyourpardon

2019-01-05 19:18:36 +08:00

我最近在一个做的系统里用了一个古早的方法。（当然我以前不知道，或者是用的太少忘了。）

<div data-include="header" class="headerBox"></div>

然后 js 部分


<script>
$(function() {
var includes = $('[data-include]');
jQuery.each(includes, function() {
var file = 'views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>

模板文件路径为 views/header.html

可参考。

这个方法其实不是真正的组件化，但遇到 JS 做处理的时候，其实会有不少问题。
但如果只出静态页面，就要你写个样子出来的话，JS 主要处理一些 DOM 的话，这个方法能节省不少劳力。
又避免 iFrame 的一些问题。

lrz0lrz

2019-01-05 19:24:06 +08:00 via Android

用 vue 呀
或者如果不介意 jquery 的话，试试 layui

dremy

2019-01-05 19:26:30 +08:00 via iPhone

上手就是 angular，楼主是真的牛逼
静态页面难道不是 web 开发的基础吗，怎么学了框架连基础都不会了

suzic

2019-01-05 19:32:55 +08:00 via Android

可能是楼主想复杂了，不前后分离，只写静态页，那不就是把 htmk 结构和 css 写好给甲方就行了，数据渲染让他们自己做

ttentau1

2019-01-05 19:35:56 +08:00

@lrz0lrz #2 有考虑过 layui，不过甲方只要静态页，因为他们有 php 团队。他们的 php 团队做数据渲染。layui 他们 php 的人做数据渲染的时候可能会有问题

ttentau1

2019-01-05 19:37:11 +08:00

@dremy #3 之前学过 android、python、php。前端只会基础。后来找不到工作，到了朋友的外包公司。公司让学 angular。因为自己不是 0 基础，所以上手 angular 不算难

ttentau1

2019-01-05 19:38:48 +08:00

@suzic #4 对，就是这样的。甲方也是这样要求。不过我想问的是，除了用手写 jq+bs 这种最古老的方式开发之外。有没有其它的开发方式？

ttentau1

2019-01-05 19:41:09 +08:00

@ibegyourpardon #1 感谢，多提供了一种思路。不过目前 iframe 还没遇到大的问题，以后出问题可能会考虑这种思路

suzic

2019-01-05 20:26:35 +08:00 via Android

页面数据交互复杂就用 vue，不复杂用 jq+bs 足够

ttentau1

2019-01-05 20:35:18 +08:00

@suzic #9 你没看题，甲方只要我们出静态页面，数据是 php 来渲染

shintendo

2019-01-05 20:37:07 +08:00

@ttentau1
vue 写静态页面有什么问题么……或者说你要解决的是什么问题？

Chanran

2019-01-05 20:40:56 +08:00 via iPhone

Laravel+vue 了解一下

randyo

2019-01-05 20:51:11 +08:00 via Android

引入 Vue.min.js🤗

Biwood

2019-01-05 20:58:53 +08:00 via Android

既然不适合用 MVVM 框架为什么还要用 vue

Biwood

2019-01-05 21:04:42 +08:00 via Android

感觉现在很多人为了追潮流已经被框架绑架了，楼主这种需求明显直接用最原始的方式写页面最好，要么直接在 php 项目里面写，要么借助前端模板语法做组件化分，再借助构建工具打包，不一定要按照某个框架的开发方式进行。实在不行你就手动新建 html 文件，无非是多复制几下而已。

ttentau1

2019-01-05 21:25:47 +08:00

@Biwood #15 目前就是这样

ttentau1

2019-01-05 21:27:17 +08:00

不要劝我用 vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue 了，甲方明确要求，前后端不分离。。前端只出静态页面，然后给 php，php 渲染数据。能用 vue 我早用了。

Biwood

2019-01-05 21:54:08 +08:00

@ttentau1 其实这种后端渲染的项目，最好是在 php 程序的 view 层直接写页面，这样就可以用 php 语法划分和引入模块，只是需要在你的机子上配置 php 开发环境。用 node 工具来生成多个静态页的开发方式反而把事情搞麻烦了，虽然可以实现，但是明显增加了不必要的工作量，因为前端开发的时候划分过模块，生成静态页后发送给后端，后端开发人员又要重新划分模块，还不如直接在后端那边写。

ttentau1

2019-01-05 23:34:32 +08:00

@Biwood #18 两个团队，php 和前端是两个团队的人，不是一个公司的。

i945

2019-01-05 23:42:30 +08:00

为什么会瞧不起基础写法，你想想如果对方后方团队不会 vue，你用 vue 写了对方有多麻烦

ttentau1

2019-01-05 23:46:10 +08:00

@i945 #20 对的，php 的人不会 vue，所以谈的时候，我们有提过前后端分离，php 只提供接口的方式，被他们否了。他们可能是出于安全的考虑决定前后不分离

shapl

2019-01-06 00:04:43 +08:00

给个建议。。下个 php 环境一键安装包，然后本地用 jQuery+php 的 include("../header.php") 方式来写。

IvanLi127

2019-01-06 00:07:02 +08:00 via Android

我能想到的就是 jq+bs 了。。。萌新的我除了以前学习练手外，就没做过不分离的项目

ttentau1

2019-01-06 01:45:02 +08:00

@shapl #22 不能这样搞啊 - - ！，虽然我会写 php，但是甲方要求的就是静态页面 - -！

ttentau1

2019-01-06 01:46:10 +08:00

@IvanLi127 #23 哈哈，和我一样。我也是，入行后基本上都是前后分离的项目。这一下子叫我搞纯静态的页面，把我弄懵逼了

swulling

2019-01-06 02:23:19 +08:00 via iPhone

谁说 VUE 只能用来写前后端分离的项目啦，你拿它当 JQuery 用也没啥问题…

lrz0lrz

2019-01-06 10:18:17 +08:00 via Android

@ttentau1 这样子好像主要是 HTML+css，js 做的工作不多呀？难道 jq+bs 不能满足吗？
如果不满足这样的话，也可以用 gulp 或 webpack 进行预处理，继续写 ts+scss ；或者使用 require.js 之类的工具管理依赖。
就算不用 layui，也可以参考 layui 对模块的处理方式，和怎么用 iframe 划分页面。

WenJimmy

2019-01-07 14:37:48 +08:00

用 Vue 的 template，JS 里直接 var js 变量 = php 变量，以前我就这个干的，

meetguardian

2019-01-23 11:03:26 +08:00

不用 vue 不会写代码了？我现在有点看不懂了趋势了。。。

meszyouh

2019-02-09 09:09:35 +08:00 via Android

用 webpack + pug，多页面形式。