这样的网页效果如何实现呢？

V2EX = way to explore

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

现在注册

已注册用户请登录

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

大家好，我最近要写一个网站，第一次做前端的东西，这个需求不知道怎么做，希望有经验的大哥帮忙看一下：

工具：

后端使用 Spring
采用后端渲染，具体来说是 thymeleaf

需求：

网页的左边是导航栏，导航栏可以展开，里面有子菜单。
点开一个菜单，展开子菜单之后，有几个选项，任意点击某个子选项，右边就变成相应的内容，但是左边的展开状态是不变的，如果使用纯后端模板技术的话，刷新页面，左边的展开状态就变了，变成了完全闭合。
如果点击别的子选项，右边变成别的内容，再点击第一个子选项，里面以前写好的内容还在。

上面是需求部分，真心请教各位大神，这样的效果使用纯后端模板可以实现吗？如果能请指点我一下。如果不能的话，如何实现呢？非常非常感谢。

导航栏

选项

菜单

后端

15 条回复 • 2017-11-29 23:50:52 +08:00

enenaaa

2016-12-27 14:12:09 +08:00

1. 当然可以。
2. 可以实现，刷新页面时，在后端把 html 状态变一下就行了。
3. 不苛求的话也可以，定时提交保存。参考论坛或网页笔记的草稿功能

hujianxin

2016-12-27 14:18:19 +08:00

@enenaaa 感谢大哥回复。
第一点通过 js 我能实现的了。
现在第二点第三点还实现不了。我现在点击左边菜单，右边变化，是通过 `$("#text-content").load("page");` 这样的语法简单实现的，这样很菜。您说的那个后端把 html 状态变一下的策略，前端这部分代码还需要改变吗？
您说的第三点，是在第二点的基础上，定时保存吗？

另外，有没有类似的简单 demo ，简单项目啊。谢谢大哥

enenaaa

2016-12-27 14:31:34 +08:00

@hujianxin 其实我也不太懂。第 2 点可以用 bootstrap 的 collapse 组件，通过增添 in 类实现菜单展开和关闭。
保存的话，定时或检查到改动， ajax 提交就 ok 吧。

wyntergreg

2016-12-27 14:40:48 +08:00

这样玩很快就内存溢出了吧

Tuisku

2016-12-27 15:02:09 +08:00

最蠢的办法就是如你所用的点击左边右边通过 Ajax 把页面 load 进来状态保存就每个页面固定的需要保存的东西用 localStorage 存一下每次页面 load 完毕之后检查下有没有历史值有的话加载进来

最后说一句：毕设 /作业自己做自己 Google ，都是很简单的问题（因为我感觉这些需求特别像作业 /毕设，看错了还请见谅）

hujianxin

2016-12-27 15:54:44 +08:00

@enenaaa 好的，谢谢了，我在研究一下。

hujianxin

2016-12-27 15:57:36 +08:00

@Tuisku 多谢回复。我其实不是做毕业设计，我已经是研究生了（摔。不是计算机的，以前没写过前端。

你的回复对我很有用处，但是我不能全部明白，想具体请教一下。

你说我的办法是最不好的，然后后面说保存到 localstorage 里面。这算是在我的方法的基础上的解决方案吗？

如果是的话，还有没有别的解决方案呢？就是不用 load 的方法？多谢

Tuisku

2016-12-27 16:14:34 +08:00

@hujianxin
其实现在大票的框架都能满足你的这几个需求了，还要自己造轮子是不是有点麻烦，所以我才感觉像毕设（= =||）
我所说的用 Ajax 来 Load 页面加上页面状态保存在 localStorage 里面算是很蠢的办法了，好处就是你后端的代码基本不用动，主要是前端用 js 处理这一系列需求。
要不可以考虑下 iframe ，很多前端框架都是用 iframe 处理的。

（因为我后端，前端也不太熟悉。。

hujianxin

2016-12-27 16:21:51 +08:00

@Tuisku 好的，我去看看 iframe 可以不，我现在看到 html 就头疼，还是后端写起来流畅啊