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

[hujianxin]

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

工具：

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

需求：

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

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

[enenaaa]

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

[hujianxin]

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

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

[enenaaa]

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

[wyntergreg]

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

[Tuisku]

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

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

[hujianxin]

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

[hujianxin]

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

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

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

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

[Tuisku]

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

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

[hujianxin]

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

[loading]

写成 api 接口，用 ajax ，很容易实现。

[learnshare]

Angular/Vue/React ，虽然入门要花点时间，但用起来很合适

[wmhx]

iframe ???

[lxy42]

右边做成 iframe

[nakedou]

使用 angular 的 ng-view 很容易实现吧

[jack80342]

正在每天翻译一篇 Thymeleaf，欢迎 Fork，https://www.gitbook.com/book/jack80342/thymeleaf/details