前言

本系列文章的以学习为目的，结合Java中的spring、mybatis、maven和前端的vue等时下较为流行的开发技术，来实现一个简单的wiki项目，如果您对文中的开发思路或者行文观点有不同的意见，欢迎在文章下面留下您的观点。

---

目录

功能分析

首页

wiki首页核心功能能够类似百度的搜索功能那样，通过关键字检索问题、解决方案、专题、用户等。界面草图大致如下：

搜索列表页

点击搜索后，将检索的结果以类似GitHub搜索结果页面那样，展示出所有的包含关键字的问题、解决方案、专题和用户。界面草图大致如下：

这里需要说明下左侧的侧栏

• 当点击【问题&解决方案】时，显示【语言侧栏】，点击【专题】或【用户】则隐藏【语言侧栏】
• 当点击【语言侧栏】中的某项时，在结果中进一步筛选该语言下的结果，需要注意的是，语言栏中所有项的总和应该等于【问题&解决方案】项右侧的角标数字
• 右侧的排序可以选择根据时间排序或者根据星星数量（点赞量）排序。

当搜索结果为空 界面草图大致如下

顶部导航栏

• 点击【问题&解决方案】或点击【专题】的菜单的时候，打开的页面跟搜索页面一致，显示的数据应该是所有的数据问题、解决方案或者专题

问题详情页

详情页类似论坛的页面，呈现问题和所有的解决方案，并以点赞数越多的越靠前显示，被问题提出者采纳的解决方案被标记为最佳方案，草图如下所示：

问题下方的【我有更好的方案】可以折叠展开编辑器，在线编辑器能够被允许插入图片，带格式的文本，大致的界面如下：

这里的富文本编辑器为开源的 Editor.md 编辑器，点击 这里 可以下载 Editor.md 的开发包及其示例

用户相关页面

这两个页面是通过一个页面，通过页面下方的【立即注册】和【立即登录】来切换。
登录

注册

个人中心