记录3

来源：互联网发布：tiny core linux 中文编辑：程序博客网时间：2024/05/17 08:47

spring web 项目实战系列--搭建一个仿知乎的问答网站（三）

标签： springwebvelocity

目录(?)[+]

传送门
分析基本流程
- 1 添加QuestionDAO 的选取记录的方法
- 2 定义service
- 3 定义辅助数据结构
- 4 controller
- 5 前端模板修改
- 6 首页显示效果
遇到的一些问题

1. 传送门

spring web 项目实战系列–搭建一个仿知乎的问答网站（一）

spring web 项目实战系列–搭建一个仿知乎的问答网站（二)

spring web 项目实战系列–搭建一个仿知乎的问答网站（三）

spring web 项目实战系列–搭建一个仿知乎的问答网站（四）

spring web 项目实战系列–搭建一个仿知乎的问答网站（5）拦截器页面访问控制
项目工程地址： https://code.csdn.net/zhyh1435589631/my_zhihu/tree/master

这次主要实现首页展示的功能

2. 分析基本流程

我们这里需要对网站的首页做一个展示，本质上就是将之前定义的数据库中的question 和 user 表的数据传递给前端

2.1 添加QuestionDAO 的选取记录的方法

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">List<Question> selectLatestQuestions(    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Param</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"userId"</span>) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> userId,    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Param</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"offset"</span>) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> offset,                                     <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Param</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"limit"</span>) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> limit);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

2.2 定义service

需要注意的是，我们一般都是使用分层结构，利用 controller 控制 service， service 调用 dao， dao 处理数据库

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Service</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">QuestionService</span> {</span>    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Autowired</span>    QuestionDAO questionDAO;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> List<Question> <span class="hljs-title" style="box-sizing: border-box;">getLatestQuestions</span>(){        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> questionDAO.selectLatestQuestions(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>);    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Service</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">UserService</span> {</span>    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Autowired</span>    UserDAO userDAO;    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> User <span class="hljs-title" style="box-sizing: border-box;">selectById</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> id){        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> userDAO.selectById(id);    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

2.3 定义辅助数据结构

我们这里选用这个ViewObject 数据结构，用来作为前后端数据传递的容器，因为，在首页展示中，问题的展现形式都是一致的，因而，他们需要的数据类型也是类似的，所以，使用一个 ViewObject 可以简化处理的复杂度。

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** * Created by ThinkPad User on 2016/7/22. */</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ViewObject</span> {</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Map<String, Object> objs = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> HashMap<String, Object>();    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> Object <span class="hljs-title" style="box-sizing: border-box;">get</span>(String key) {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> objs.get(key);    }    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">set</span>(String key, Object obj) {        objs.put(key, obj);    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

2.4 controller

至此，我们就可以通过 Model 向前端传递一个List<Question>的数据结构，前端只需要遍历这个数据结构中的内容，进行展示即可

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/** * Created by ThinkPad User on 2016/7/21. */</span><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Controller</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">IndexController</span> {</span>    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Autowired</span>    QuestionService questionService;    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Autowired</span>    UserService userService;    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@RequestMapping</span>(path = {<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"index"</span>}, method = RequestMethod.GET)    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> String <span class="hljs-title" style="box-sizing: border-box;">index</span>(Model model, HttpSession httpSession){        List<Question> questions = questionService.getLatestQuestions();        List<ViewObject> vos = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ArrayList<ViewObject>();        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">for</span> (Question question : questions){            ViewObject vo = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> ViewObject();            vo.set(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"question"</span>, question);            vo.set(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"user"</span>, userService.selectById(question.getUserId()));            vos.add(vo);        }        model.addAttribute(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"vos"</span>, vos);        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"index"</span>;    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li></ul>

2.5 前端模板修改

类似于 flask 中的jinja 模板， spring 中采用的是 velocity 模板类型，使用这个模板可以类似java 一样进行数据处理
我们找到相应的代码需要填入的部分，进行变量替换即可， ps：这里采用了 velocity 中的 toolbox 模块
将以下代码命名为 toolbox.xml 放置到resources 目录下，并在 application.properties 中写入
spring.velocity.toolbox-config-location=toolbox.xml即可完成这个模块的配置，* 而这个模块主要用来规范化时间的显示形式*

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">toolbox</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">tool</span>></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">key</span>></span>date<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">key</span>></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">scope</span>></span>application<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">scope</span>></span>        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">class</span>></span>org.apache.velocity.tools.generic.DateTool<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">class</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">tool</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">toolbox</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

部分代码如下：

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#foreach($vo in $vos)</span>                        <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"feed-item folding feed-item-hook feed-item-2                        "</span> feed-<span class="hljs-property" style="box-sizing: border-box;">item</span>-a=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span> data-type=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"a"</span> <span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"feed-2"</span> data-za-module=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"FeedItem"</span> data-za-index=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>>                            <meta itemprop=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ZReactor"</span> data-<span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"389034"</span> data-meta=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"{&quot;source_type&quot;: &quot;promotion_answer&quot;, &quot;voteups&quot;: 4168, &quot;comments&quot;: 69, &quot;source&quot;: []}"</span>>                            <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"feed-item-inner"</span>>                                <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"avatar"</span>>                                    <a title=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"$!{vo.user.username}"</span> data-tip=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"p$t$amuro1230"</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zm-item-link-avatar"</span> target=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"_blank"</span> href=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"https://nowcoder.com/people/amuro1230"</span>>                                        <img src=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"$!{vo.user.headUrl}"</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zm-item-img-avatar"</span>></a>                                </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"feed-main"</span>>                                    <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"feed-content"</span> data-za-module=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"AnswerItem"</span>>                                        <meta itemprop=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"answer-id"</span> content=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"389034"</span>>                                        <meta itemprop=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"answer-url-token"</span> content=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"13174385"</span>>                                        <h2 <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"feed-title"</span>>                                            <a <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"question_link"</span> target=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"_blank"</span> href=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/question/$!{vo.question.id}"</span>>$!{vo.question.title}</a></h2>                                        <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"feed-question-detail-item"</span>>                                            <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"question-description-plain zm-editable-content"</span>></<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                        </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                        <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"expandable entry-body"</span>>                                            <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zm-item-vote"</span>>                                                <a <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zm-item-vote-count js-expand js-vote-count"</span> href=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"javascript:;"</span> data-bind-votecount=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">""</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4168</span></a></<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                            <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zm-item-answer-author-info"</span>>                                                <a <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"author-link"</span> data-tip=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"p$b$amuro1230"</span> target=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"_blank"</span> href=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/user/$!{vo.user.id}"</span>>$!{vo.user.username}</a>                                                ，$!<span class="hljs-type" style="box-sizing: border-box;">date</span>.format('yyyy-MM-dd HH:mm:ss', $!{vo.question.createdDate})</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                            <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zm-item-vote-info"</span> data-votecount=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"4168"</span> data-za-module=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"VoteInfo"</span>>                                                <span <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"voters text"</span>>                                                    <a href=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#"</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"more text"</span>>                                                        <span <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"js-voteCount"</span>><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4168</span></span>&nbsp;人赞同</a></span>                                            </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                            <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zm-item-rich-text expandable js-collapse-body"</span> data-resourceid=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"123114"</span> data-action=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/answer/content"</span> data-author-<span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"李淼"</span> data-entry-url=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/question/19857995/answer/13174385"</span>>                                                <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zh-summary summary clearfix"</span>>$!{vo.question.content}</<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                            </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                        </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                        <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"feed-meta"</span>>                                            <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zm-item-meta answer-actions clearfix js-contentActions"</span>>                                                <<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"zm-meta-panel"</span>>                                                    <a data-follow=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"q:link"</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"follow-link zg-follow meta-item"</span> href=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"javascript:;"</span> <span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"sfb-123114"</span>>                                                        <i <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"z-icon-follow"</span>></i>关注问题</a>                                                    <a href=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#"</span> <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"addcomment"</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"meta-item toggle-comment js-toggleCommentBox"</span>>                                                        <i <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"z-icon-comment"</span>></i>${vo.question.commentCount} 条评论</a>                                                    <button <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"meta-item item-collapse js-collapse"</span>>                                                        <i <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"z-icon-fold"</span>></i>收起</button>                                                </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                            </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                        </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                    </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                                </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                            </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                        </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">div</span>>                        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#end</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li></ul>

2.6 首页显示效果

至此，后端传递到前端的数据完成渲染
这里写图片描述

3. 遇到的一些问题

这个问题主要在于：
没有找到userId，因为我们这个函数是使用 xml 配置的，需要使用@Param 注解来提取xml 中的userId 变量
这个原因主要在于数据没有传递到前端，我们一开始的方法中，并不是采用的get, set 方法，导致数据没有能够传递进入，将方法名改一下，即可
关于静态图片的展示问题，通过测试，我们发现对static 目录下的静态文件，不需要添加/static 前缀，默认即可直接引用

0 0