传智黑马Java学成在线项目第3天讲义-CMS页面管理开发一

╰半夏微凉° 2022-12-27 09:21 87阅读 0赞

**1 ****自定义条件查询**  
**1.1 ****需求分析**  
在页面输入查询条件，查询符合条件的页面信息。  
查询条件如下：  
站点Id：精确匹配  
模板Id：精确匹配  
页面别名：模糊匹配  
...  
**1.2 ****服务端**  
**1.2.1 Dao**

> 使用 CmsPageRepository中的findAll(Example<S> var1, Pageable var2)方法实现，无需定义。

下边测试fifindAll方法实现自定义条件查询：

**1.2.2 Service**  
在PageService的fifindlist方法中增加自定义条件查询代码

<table style="width:700px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">21</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">22</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">23</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">24</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">25</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">26</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">27</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">28</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">29</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">30</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">31</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">32</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">33</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">34</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">35</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">36</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">37</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">38</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">39</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">40</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">41</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">42</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">43</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">44</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">45</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">46</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">47</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">48</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">49</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">50</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">51</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">52</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">53</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">54</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">55</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">56</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">57</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">58</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">59</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">60</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">61</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">62</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">63</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>*</code> 
      <code>*</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>*</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>页面列表分页查询</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>*</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>@param page 当前页码</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>*</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>@param size 页面显示个数</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>*</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>@param queryPageRequest 查询条件</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>*</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>@</code> 
      <code>return</code> 
      <code>页面列表</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>*</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>public QueryResponseResult findList</code> 
      <code>(</code> 
      <code>int page</code> 
      <code>,</code> 
      <code>int size</code> 
      <code>,</code> 
      <code>QueryPageRequest queryPageRequest</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>条件匹配器</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>页面名称模糊查询，需要自定义字符串的匹配器实现模糊查询</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>ExampleMatcher exampleMatcher </code> 
      <code>=</code> 
      <code>ExampleMatcher.matching</code> 
      <code>(</code> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.withMatcher</code> 
      <code>(</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageAliase</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>,</code> 
      <code>ExampleMatcher.GenericPropertyMatchers.</code> 
      <code>contains</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>条件值</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>CmsPage cmsPage</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>new</code> 
      <code>CmsPage</code> 
      <code>(</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>站点ID</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>if</code> 
      <code>(</code> 
      <code>StringUtils.isNotEmpty</code> 
      <code>(</code> 
      <code>queryPageRequest.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getSiteId</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPage.setSiteId</code> 
      <code>(</code> 
      <code>queryPageRequest.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getSiteId</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>页面别名</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>if</code> 
      <code>(</code> 
      <code>StringUtils.isNotEmpty</code> 
      <code>(</code> 
      <code>queryPageRequest.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getPageAliase</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPage.setPageAliase</code> 
      <code>(</code> 
      <code>queryPageRequest.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getPageAliase</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>创建条件实例</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>Example</code> 
      <code>&lt;</code> 
      <code>CmsPage</code> 
      <code>&gt;</code> 
      <code>example</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>Example.</code> 
      <code>of</code> 
      <code>(</code> 
      <code>cmsPage</code> 
      <code>,</code> 
      <code>exampleMatcher</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>页码</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>page</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>page</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>1</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>分页对象</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>Pageable pageable</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>new</code> 
      <code>PageRequest</code> 
      <code>(</code> 
      <code>page</code> 
      <code>,</code> 
      <code>size</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>分页查询</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>Page</code> 
      <code>&lt;</code> 
      <code>CmsPage</code> 
      <code>&gt;</code> 
      <code>all </code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPageRepository</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.findAll</code> 
      <code>(</code> 
      <code>example</code> 
      <code>,</code> 
      <code>pageable</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>QueryResult</code> 
      <code>&lt;</code> 
      <code>CmsPage</code> 
      <code>&gt;</code> 
      <code>cmsPageQueryResult</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>new</code> 
      <code>QueryResult</code> 
      <code>&lt;</code> 
      <code>CmsPage</code> 
      <code>&gt;</code> 
      <code>(</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPageQueryResult.setList</code> 
      <code>(</code> 
      <code>all.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getContent</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPageQueryResult.setTotal</code> 
      <code>(</code> 
      <code>all.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getTotalElements</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>返回结果</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>return</code> 
      <code>new</code> 
      <code>QueryResponseResult</code> 
      <code>(</code> 
      <code>CommonCode.SUCCESS</code> 
      <code>,</code> 
      <code>cmsPageQueryResult</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**1.2.3 Controller**  
无需修改  
**1.2.4 ****测试**  
使用SwaggerUI测试  
![615a47aa12d96a9c1625c1df828be833.png][]  
  
**1.3 ****前端**  
**1.3.1 ****页面**  
1、增加查询表单

<table style="width:700px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">21</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">22</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">23</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">24</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">25</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">26</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">27</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">28</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">29</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">30</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">31</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">32</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">33</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">34</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">35</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">36</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">37</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">38</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">39</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">40</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">41</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">42</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">43</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">44</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">45</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">46</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">47</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">48</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">49</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">50</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">51</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">52</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">53</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">54</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">55</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">56</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">57</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">58</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">59</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">60</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">61</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">62</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">63</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">64</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">65</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">66</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">67</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">68</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">69</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">70</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">71</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">72</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">73</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">74</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">75</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">76</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">77</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">78</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">79</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">80</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">81</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">82</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">83</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">84</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">85</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">86</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">87</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">88</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">89</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">90</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">91</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">92</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">93</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">94</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">95</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">96</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>!</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>查询表单</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form </code> 
      <code>:</code> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>select</code> 
      <code>v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params.siteId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>placeholder</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>请选择站点</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>option</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>for</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item in siteList</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>:</code> 
      <code>key</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item.siteId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>:</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item.siteName</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>:</code> 
      <code>value</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item.siteId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>select</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>页面别名：</code> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageAliase</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>style</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>width: 100px</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>button</code> 
      <code>type</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>primary</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>on</code> 
      <code>:</code> 
      <code>click</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>query</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>size</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>small</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>查询</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>button</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

2、数据模型对象  
增加siteList、pageAliase、siteId，如下：

3、在钩子方法中 构建siteList站点列表

**1.3.2 Api****调用**  
1、向服务端传递查询条件，修改 cms.js，如下：

2、页面调用api方法

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>查询</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>query</code> 
      <code>:</code> 
      <code>function </code> 
      <code>(</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsApi.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>page_list</code> 
      <code>(</code> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>page</code> 
      <code>,</code> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params.size</code> 
      <code>,</code> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params</code> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.</code> 
      <code>then</code> 
      <code>(</code> 
      <code>(</code> 
      <code>res</code> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>console.</code> 
      <code>log</code> 
      <code>(</code> 
      <code>res</code> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.total </code> 
      <code>=</code> 
      <code>res.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>queryResult.total</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
      <code>list</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>res.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>queryResult.</code> 
      <code>list</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

测试如下：  
![f1e8ba6f4e4f0b9aa2ce1569bd91f969.png][]

**2 ****新增页面**  
**2.1 ****新增页面接口定义**  
1、定义响应模型

2、定义添加Api  
在api工程中添加接口：

**2.2 ****新增页面服务端开发**  
**2.2.1 ****页面唯****一****索引**  
在cms\_page集中上创建页面名称、站点Id、页面webpath为唯一索引  
**2.2.2 Dao**  
1、添加根据页面名称、站点Id、页面webpath查询页面方法，此方法用于校验页面是否存在

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">2</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">3</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">4</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">5</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>public interface CmsPageRepository extends MongoRepository</code> 
      <code>&lt;</code> 
      <code>CmsPage</code> 
      <code>,</code> 
      <code>String</code> 
      <code>&gt;</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>根据页面名称、站点</code> 
      <code>id</code> 
      <code>、页面访问路径查询</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>CmsPage findByPageNameAndSiteIdAndPageWebPath</code> 
      <code>(</code> 
      <code>String pageName</code> 
      <code>,</code> 
      <code>String siteId</code> 
      <code>,</code> 
      <code>String</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageWebPath</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>。。。</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

2、使用 CmsPageRepository提供的save方法 。  
**2.2.3 Service**  
//添加页面

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>public CmsPageResult </code> 
      <code>add</code> 
      <code>(</code> 
      <code>CmsPage cmsPage</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>校验页面是否存在，根据页面名称、站点Id、页面webpath查询</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>CmsPage cmsPage</code> 
      <code>1</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPageRepository</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.findByPageNameAndSiteIdAndPageWebPath</code> 
      <code>(</code> 
      <code>cmsPage.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getPageName</code> 
      <code>(</code> 
      <code>)</code> 
      <code>,</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPage.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getSiteId</code> 
      <code>(</code> 
      <code>)</code> 
      <code>,</code> 
      <code>cmsPage.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getPageWebPath</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>if</code> 
      <code>(</code> 
      <code>cmsPage</code> 
      <code>1</code> 
      <code>=</code> 
      <code>=</code> 
      <code>null</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPage.setPageId</code> 
      <code>(</code> 
      <code>null</code> 
      <code>)</code> 
      <code>;</code> 
      <code>/</code> 
      <code>/</code> 
      <code>添加页面主键由spring </code> 
      <code>data</code> 
      <code>自动生成</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPageRepository</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.</code> 
      <code>save</code> 
      <code>(</code> 
      <code>cmsPage</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>返回结果</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>CmsPageResult cmsPageResult</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>new</code> 
      <code>CmsPageResult</code> 
      <code>(</code> 
      <code>CommonCode.SUCCESS</code> 
      <code>,</code> 
      <code>cmsPage</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>return</code> 
      <code>cmsPageResult;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>return</code> 
      <code>new</code> 
      <code>CmsPageResult</code> 
      <code>(</code> 
      <code>CommonCode.FAIL</code> 
      <code>,</code> 
      <code>null</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**2.2.4 Controller**  
//添加页面

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">2</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">3</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">4</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">5</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">6</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">7</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">8</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">9</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>@Override</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>@PostMapping</code> 
      <code>(</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/add</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>public CmsPageResult </code> 
      <code>add</code> 
      <code>(</code> 
      <code>@RequestBody CmsPage cmsPage</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>return</code> 
      <code>pageService.</code> 
      <code>add</code> 
      <code>(</code> 
      <code>cmsPage</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**2.2.5 ****接口测试**  
使用postman测试  
  
post请求：http://localhost:31001/cms/page/add  
请求内容为json数据，测试数据如下：

![1361f0c20cd8c555e1a3c453c4f68f3e.png][]  
![96f5c29b5aa6bcc0cdfaac78ff84bbff.png][]

**2.3 ****新增页面前端开发**  
**2.3.1 ****新增页面**  
**2.3.1.1 ****编写****page\_add.vue****页面**  
使用Element\-UI的form组件编写添加表单内容，页面效果如下：  
![505e766e2c5378a8f7a25d45a221b923.png][]  
1、创建page\_add.vue页面  
2、配置路由  
在cms模块的路由文件中配置“添加页面”的路由：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>{ </code> 
      <code>path</code> 
      <code>:</code> 
      <code>'</code> 
      <code>/</code> 
      <code>cms</code> 
      <code>/</code> 
      <code>page</code> 
      <code>/</code> 
      <code>add</code> 
      <code>'</code> 
      <code>,</code> 
      <code>name</code> 
      <code>:</code> 
      <code>'新增页面'</code> 
      <code>,</code> 
      <code>component</code> 
      <code>:</code> 
      <code>page_add</code> 
      <code>,</code> 
      <code>hidden</code> 
      <code>:</code> 
      <code>true</code> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

注意：由于“添加页面”不需要显示为一个菜单，这里hidden设置为true隐藏菜单。  
测试，在浏览器地址栏输入http://localhost:11000/\#/cms/page/add  
3、在页面列表添加“添加页面”的按钮实际情况是用户进入页面查询列表，点击“新增页面”按钮进入新增页面窗口。  
在查询按钮的旁边添加：

说明：router\-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是<a标签。  
to：目标路由地址  
4、完善页面内容：  
代码如下：

<table style="width:700px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">001</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">002</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">003</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">004</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">005</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">006</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">007</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">008</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">009</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">010</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">011</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">012</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">013</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">014</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">015</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">016</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">017</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">018</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">019</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">020</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">021</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">022</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">023</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">024</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">025</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">026</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">027</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">028</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">029</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">030</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">031</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">032</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">033</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">034</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">035</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">036</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">037</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">038</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">039</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">040</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">041</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">042</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">043</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">044</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">045</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">046</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">047</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">048</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">049</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">050</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">051</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">052</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">053</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">054</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">055</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">056</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">057</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">058</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">059</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">060</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">061</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">062</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">063</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">064</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">065</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">066</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">067</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">068</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">069</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">070</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">071</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">072</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">073</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">074</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">075</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">076</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">077</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">078</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">079</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">080</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">081</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">082</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">083</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">084</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">085</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">086</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">087</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">088</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">089</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">090</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">091</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">092</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">093</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">094</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">095</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">096</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">097</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">098</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">099</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">100</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">101</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">102</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">103</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">104</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">105</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">106</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">107</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">108</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">109</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">110</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">111</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">112</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">113</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">114</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">115</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">116</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">117</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">118</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">119</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">120</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">121</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">122</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">123</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">124</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">125</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">126</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">127</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">128</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">129</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">130</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">131</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">132</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">133</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">134</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">135</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">136</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">137</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">138</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">139</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">140</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">141</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">142</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">143</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">144</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">145</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">146</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">147</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">148</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">149</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">150</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">151</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">152</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">153</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">154</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">155</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">156</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">157</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">158</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">159</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">160</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">161</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">162</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">163</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">164</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">165</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">166</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">167</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">168</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">169</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">170</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">171</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">172</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">173</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">174</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">175</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">176</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">177</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">178</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">179</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">180</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">181</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">182</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">183</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">184</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">185</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">186</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">187</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">188</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">189</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">190</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">191</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">192</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">193</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">194</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">195</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">196</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">197</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">198</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">199</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">200</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">201</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">202</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">203</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">204</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">205</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">206</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">207</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">208</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">209</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">210</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">211</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">212</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">213</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">214</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">215</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">216</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">217</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">218</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">219</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">220</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">221</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">222</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">223</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">224</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">225</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">226</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">227</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">228</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">229</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">230</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">231</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">232</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">233</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">234</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">235</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">236</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">237</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">238</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">239</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">240</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">241</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">242</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">243</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">244</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">245</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">246</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">247</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">248</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">249</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">250</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">251</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">252</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">253</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">254</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">255</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">256</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">257</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">258</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">259</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">260</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">261</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">262</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">263</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">264</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">265</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">266</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">267</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">268</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">269</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">270</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">271</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">272</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">273</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">274</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">275</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">276</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">277</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">278</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">279</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">280</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">281</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">282</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">283</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">284</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">285</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">286</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">287</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">288</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">289</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">290</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">291</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">292</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">293</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">294</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">295</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">296</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">297</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">298</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">299</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">300</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">301</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">302</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">303</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">304</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">305</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">306</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">307</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">308</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">309</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">310</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">311</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">312</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">313</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">314</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">315</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">316</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">317</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">318</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">319</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">320</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">321</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">322</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">323</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">324</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">325</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">326</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">327</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">328</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">329</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">330</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">331</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">332</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">333</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">334</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">335</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">336</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">337</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">338</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">339</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">340</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">341</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">342</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">343</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">344</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">345</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">346</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">347</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">348</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">349</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">350</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">351</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">352</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">353</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">354</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">355</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">356</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">357</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">358</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">359</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">360</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">361</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">362</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">363</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">364</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">365</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">366</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">367</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">368</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">369</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">370</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">371</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">372</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">373</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">374</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">375</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">376</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">377</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">378</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">379</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">380</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">381</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">382</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">383</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">384</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">385</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">386</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">387</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">388</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">389</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">390</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">391</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">392</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">393</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">394</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">395</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">396</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">397</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">398</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">399</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">400</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">401</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">402</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">403</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">404</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">405</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">406</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">407</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">408</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">409</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">410</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">411</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">412</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">413</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">414</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">415</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">416</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">417</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">418</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">419</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form </code> 
      <code>:</code> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>label</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>width</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>80px</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>所属站点</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>prop</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>siteId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>select</code> 
      <code>v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm.siteId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>placeholder</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>请选择站点</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>option</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>for</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item in siteList</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>:</code> 
      <code>key</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item.siteId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>:</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item.siteName</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>:</code> 
      <code>value</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item.siteId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>select</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>选择模版</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>prop</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>templateId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>select</code> 
      <code>v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm.templateId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>placeholder</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>请选择</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>option</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>for</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item in templateList</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>:</code> 
      <code>key</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item.templateId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>:</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item.templateName</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>:</code> 
      <code>value</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item.templateId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>option</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>select</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>页面名称</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>prop</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageName</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageName</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>auto</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>complete</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>off</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>别名</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>prop</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageAliase</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageAliase</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>auto</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>complete</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>off</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>访问路径</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>prop</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageWebPath</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageWebPath</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>auto</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>complete</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>off</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>物理路径</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>prop</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pagePhysicalPath</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pagePhysicalPath</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>auto</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>complete</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>off</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>input</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>类型</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>radio</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>group</code> 
      <code>v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageType</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>radio </code> 
      <code>class</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>radio</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>0</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>静态</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>radio</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>radio </code> 
      <code>class</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>radio</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>1</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>动态</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>radio</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>radio</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>group</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>label</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>创建时间</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>date</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>picker type</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>datetime</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>placeholder</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>创建时间</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>v</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>model</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageCreateTime</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>date</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>picker</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>item</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>form</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>slot</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>footer</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>class</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>dialog</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>footer</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>button</code> 
      <code>type</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>primary</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>@click</code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>addSubmit</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>"</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>提交</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>‐</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>button</code> 
      <code>&gt;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Form Attributes说明：  
model 表单数据对象  
rules 表单验证规则  
Form\-Item Attributes说明：  
prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的  
label 标签文本  
详情属性及事件参考http://element.eleme.io/\#/zh  
\-  
CN/component/form  
5、数据对象

6、站点及模板数据（先使用静态数据）  
在created钩子方法中定义，created是在html渲染之前执行，这里推荐使用created。

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">21</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">22</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>created</code> 
      <code>:</code> 
      <code>function</code> 
      <code>(</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>[mw_shl_code</code> 
      <code>=</code> 
      <code>applescript</code> 
      <code>,</code> 
      <code>true</code> 
      <code>]</code> 
      <code>/</code> 
      <code>/</code> 
      <code>初始化站点列表</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.siteList</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>[</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>siteId</code> 
      <code>:</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>5</code> 
      <code>a</code> 
      <code>751</code> 
      <code>fab</code> 
      <code>6</code> 
      <code>abb</code> 
      <code>5044</code> 
      <code>e</code> 
      <code>0</code> 
      <code>d</code> 
      <code>19</code> 
      <code>ea</code> 
      <code>1</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>,</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>siteName</code> 
      <code>:</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>门户主站</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
      <code>,</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>siteId</code> 
      <code>:</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>102</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>,</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

siteName:
    '
    测试站
    '
    }
    ]
    //模板列表
    this.templateList
    =
    [
    {
    templateId:
    '
    5a962b52b00ffc514038faf7
    '
    ,
    templateName:
    '
    首页
    '
    },
    {
    templateId:
    '
    5a962bf8b00ffc514038fafa
    '
    ,
    templateName:
    '
    轮播图
    '
    }
    ]
    }[/mw_shl_code]

7、测试预览  
新增页面按钮：  
![8f4ad2b767567b97977f4cfdb34d1205.png][]

**2.3.1.2 ****添加返回**  
进入新增页面后只能通过菜单再次进入页面列表，可以在新增页面添加“返回”按钮，点击返回按钮返回到页面列表。  
1) 新增页面按钮带上参数

\[AppleScript\]  *纯文本查看*  *复制代码*

[?][Link 1]

说明：query表示在路由url上带上参数  
2）定义返回方法  
在page\_add.vue上定义返回按钮

\[AppleScript\]  *纯文本查看*  *复制代码*

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el‐</code> 
      <code>button</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"primary"</code> 
      <code>@click</code> 
      <code>=</code> 
      <code>"go_back"</code> 
      <code>&gt;</code> 
      <code>返回</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el‐</code> 
      <code>button</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在page\_add.vue上定义返回方法

\[AppleScript\]  *纯文本查看*  *复制代码*

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">21</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>go_back</code> 
      <code>(</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$router.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>push</code> 
      <code>(</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>path</code> 
      <code>:</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>cms</code> 
      <code>/</code> 
      <code>page</code> 
      <code>/</code> 
      <code>list</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>,</code> 
      <code>query</code> 
      <code>:</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>page</code> 
      <code>:</code> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>query</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>page</code> 
      <code>,</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>siteId</code> 
      <code>:</code> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>query</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.siteId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

说明：this.$route.query 表示取出路由上的参数列表，有两个取路由参数的方法：

\[AppleScript\]  *纯文本查看*  *复制代码*

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>a、通过在路由上添加</code> 
      <code>key</code> 
      <code>/</code> 
      <code>value</code> 
      <code>串使用this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>query来取参数，例如：</code> 
      <code>/</code> 
      <code>router</code> 
      <code>1</code> 
      <code>?</code> 
      <code>id</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>123</code> 
      <code>,</code> 
      <code>/</code> 
      <code>router</code> 
      <code>1</code> 
      <code>?</code> 
      <code>id</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>456</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>可以通过this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>query</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.</code> 
      <code>id</code> 
      <code>获取参数</code> 
      <code>id</code> 
      <code>的值。</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>b、通过将参数作为路由</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>一</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>部分进行传参数使用this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params来获取，例如：定义的路由为</code> 
      <code>/</code> 
      <code>router</code> 
      <code>1</code> 
      <code>/</code> 
      <code>:</code> 
      <code>id</code> 
      <code>，请</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>求</code> 
      <code>/</code> 
      <code>router</code> 
      <code>1</code> 
      <code>/</code> 
      <code>123</code> 
      <code>时可以通过this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params.</code> 
      <code>id</code> 
      <code>来获取，此种情况用this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>query</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.</code> 
      <code>id</code> 
      <code>是拿不到的。</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

3）查询列表支持回显  
进入查询列表，从url中获取页码和站点id并赋值给数据模型对象，从而实现页面回显。  
url例子：http://localhost:12000/\#/cms/page/list?page=2&siteId=5a751fab6abb5044e0d19ea1

\[AppleScript\]  *纯文本查看*  *复制代码*

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">21</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>created</code> 
      <code>(</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>从路由上获取参数</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>page</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>Number.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>parseInt</code> 
      <code>(</code> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>query</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>page||</code> 
      <code>1</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params.siteId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>query</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.siteId||</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>''</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.....</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

小技巧：使用 ||返回第  
一  
个有效值  
**2.3.1.3 ****表单校验**  
1、配置校验规则：  
Element\-UI的Form组件提供表单校验的方法：  
在form属性上配置rules（表单验证规则）

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el‐form </code> 
      <code>:</code> 
      <code>model</code> 
      <code>=</code> 
      <code>"pageForm"</code> 
      <code>:</code> 
      <code>rules</code> 
      <code>=</code> 
      <code>"pageFormRules"</code> 
      <code>label</code> 
      <code>‐width</code> 
      <code>=</code> 
      <code>"80px"</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在数据模型中配置校验规则：

2、点击提交按钮触发校验  
1)在form表单上添加 ref属性（ref="pageForm"）在校验时引用此表单对象

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el‐form </code> 
      <code>:</code> 
      <code>model</code> 
      <code>=</code> 
      <code>"pageForm"</code> 
      <code>:</code> 
      <code>rules</code> 
      <code>=</code> 
      <code>"pageFormRules"</code> 
      <code>label</code> 
      <code>‐width</code> 
      <code>=</code> 
      <code>"80px"</code> 
      <code>ref</code> 
      <code>=</code> 
      <code>"pageForm"</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

2）执行校验

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$refs.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm.validate</code> 
      <code>(</code> 
      <code>(</code> 
      <code>valid</code> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>if</code> 
      <code>(</code> 
      <code>valid</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>alert</code> 
      <code>(</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>提交</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
      <code>else</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>alert</code> 
      <code>(</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>校验失败</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>'</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>return</code> 
      <code>false</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
      <code>)</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**2.3.2 Api****调用**  
1、在cms.js中定义page\_add方法。

2、添加事件  
本功能使用到两个UI组件：  
1、使用element\-ui的message\-box组件弹出确认提交窗口

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>this.$confirm</code> 
      <code>(</code> 
      <code>'确认提交吗？'</code> 
      <code>,</code> 
      <code>'提示'</code> 
      <code>,</code> 
      <code>{ </code> 
      <code>}</code> 
      <code>)</code> 
      <code>.</code> 
      <code>then</code> 
      <code>(</code> 
      <code>(</code> 
      <code>)</code> 
      <code>=</code> 
      <code>&gt;</code> 
      <code>{ </code> 
      <code>｝）</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

2、使用 message组件提示操作结果

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>this.$</code> 
      <code>message</code> 
      <code>(</code> 
      <code>{ </code> 
      <code>message</code> 
      <code>:</code> 
      <code>'提交成功'</code> 
      <code>,</code> 
      <code>type</code> 
      <code>:</code> 
      <code>'success'</code> 
      <code>}</code> 
      <code>)</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

完整的代码如下：

下边是测试：  
1、进入页面列表页面  
  
![ecc42d036879b0cbfa8f99d163f22b67.png][]  
2、点击“增加页面”按钮  
  
![eab0bbadc3b03fbb8ab4b361d52f36a1.png][]  
3.输入页面信息点击提交。

**3 ****修改页面**  
修改页面用户操作流程：  
1、用户进入修改页面，在页面上显示了修改页面的信息  
2、用户修改页面的内容，点击“提交”，提示“修改成功”或“修改失败”  
**3.1 ****修改页面接口定义**  
修改页面需要定义的API如下：

说明：提交数据使用post、put都可以，只是根据http方法的规范，put方法是对服务器指定资源进行修改，所以这里使用put方法对页面修改进行修改。  
**3.2 ****修改页面服务端开发**  
**3.2.1Dao**  
使用 Spring Data提供的fifindById方法完成根据主键查询 。  
使用 Spring Data提供的save方法完成数据保存 。  
**3.2.2Service**

<table style="width:700px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">21</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">22</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">23</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">24</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">25</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">26</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">27</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">28</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">29</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">30</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">31</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">32</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">33</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">34</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">35</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">36</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">37</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">38</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">39</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">40</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">41</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">42</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">43</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">44</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">45</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">46</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">47</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">48</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">49</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">50</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">51</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">52</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">53</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">54</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">55</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>根据</code> 
      <code>id</code> 
      <code>查询页面</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>public CmsPage getById</code> 
      <code>(</code> 
      <code>String </code> 
      <code>id</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>Optional</code> 
      <code>&lt;</code> 
      <code>CmsPage</code> 
      <code>&gt;</code> 
      <code>optional </code> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPageRepository</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.findById</code> 
      <code>(</code> 
      <code>id</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>if</code> 
      <code>(</code> 
      <code>optional.isPresent</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>return</code> 
      <code>optional.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>get</code> 
      <code>(</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>返回空</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>return</code> 
      <code>null;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>更新页面信息</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>public CmsPageResult </code> 
      <code>update</code> 
      <code>(</code> 
      <code>String </code> 
      <code>id</code> 
      <code>,</code> 
      <code>CmsPage cmsPage</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>根据</code> 
      <code>id</code> 
      <code>查询页面信息</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>CmsPage one</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getById</code> 
      <code>(</code> 
      <code>id</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>if</code> 
      <code>(</code> 
      <code>one !</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>null</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>更新模板</code> 
      <code>id</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>one.setTemplateId</code> 
      <code>(</code> 
      <code>cmsPage.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getTemplateId</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>更新所属站点</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>one.setSiteId</code> 
      <code>(</code> 
      <code>cmsPage.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getSiteId</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>更新页面别名</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>one.setPageAliase</code> 
      <code>(</code> 
      <code>cmsPage.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getPageAliase</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>更新页面名称</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>one.setPageName</code> 
      <code>(</code> 
      <code>cmsPage.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getPageName</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>更新访问路径</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>one.setPageWebPath</code> 
      <code>(</code> 
      <code>cmsPage.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getPageWebPath</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>更新物理路径</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>one.setPagePhysicalPath</code> 
      <code>(</code> 
      <code>cmsPage.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>getPagePhysicalPath</code> 
      <code>(</code> 
      <code>)</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>执行更新</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>CmsPage </code> 
      <code>save</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsPageRepository</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.</code> 
      <code>save</code> 
      <code>(</code> 
      <code>one</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>if</code> 
      <code>(</code> 
      <code>save</code> 
      <code>!</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>null</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>返回成功</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>CmsPageResult cmsPageResult</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
      <code>new</code> 
      <code>CmsPageResult</code> 
      <code>(</code> 
      <code>CommonCode.SUCCESS</code> 
      <code>,</code> 
      <code>save</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>return</code> 
      <code>cmsPageResult;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>返回失败</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>return</code> 
      <code>new</code> 
      <code>CmsPageResult</code> 
      <code>(</code> 
      <code>CommonCode.FAIL</code> 
      <code>,</code> 
      <code>null</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**3.2.3Controller**  
1、根据id查询页面

2、保存页面信息

**3.3 ****修改页面前端开发**  
**3.3.1 ****页面处理流程**  
页面的处理流程如下：  
1、进入页面，通过钩子方法请求服务端获取页面信息，并赋值给数据模型对象  
2、页面信息通过数据绑定在表单显示  
3、用户修改信息点击“提交”请求服务端修改页面信息接口  
**3.3.3 ****修改页面**  
**3.3.3.1 ****编写****page\_edit****页面**  
修改页面的布局同添加页面，可以直接复制添加页面，在添加页面基础上修改。  
下边编写页面内容：  
1、编写page\_edit.vue  
页面布局同添加页面，略。  
2、配置路由  
进入修改页面传入pageId

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">2</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>import page_edit </code> 
      <code>from</code> 
      <code>'@</code> 
      <code>/</code> 
      <code>module</code> 
      <code>/</code> 
      <code>cms</code> 
      <code>/</code> 
      <code>page</code> 
      <code>/</code> 
      <code>page_edit.vue';</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>{ </code> 
      <code>path</code> 
      <code>:</code> 
      <code>'</code> 
      <code>/</code> 
      <code>cms</code> 
      <code>/</code> 
      <code>page</code> 
      <code>/</code> 
      <code>edit</code> 
      <code>/</code> 
      <code>:</code> 
      <code>pageId'</code> 
      <code>,</code> 
      <code>name</code> 
      <code>:</code> 
      <code>'修改页面'</code> 
      <code>,</code> 
      <code>component</code> 
      <code>:</code> 
      <code>page_edit</code> 
      <code>,</code> 
      <code>hidden</code> 
      <code>:</code> 
      <code>true</code> 
      <code>}</code> 
      <code>,</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

3、在页面列表添加  
“编辑”链接参考table组件的例子，在page\_list.vue上添加“操作”列

编写edit方法

4、测试预览  
![af664d8b1642c61ba049377cc515ed4c.png][]  
  
点击“编辑”打开修改页面窗口。  
**3.3.3.2 ****页面内容显示**  
本功能实现：进入修改页面立即显示要修改的页面信息。  
1、定义api方法

2、定义数据对象  
进入修改页面传入pageId参数，在数据模型中添加pageId。

3、在created钩子方法 中查询页面信息

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">01</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">02</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">03</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">04</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">05</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">06</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">07</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">08</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">09</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">10</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">11</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">12</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">13</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">14</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">15</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">16</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">17</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">18</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">19</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">20</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">21</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">22</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">23</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">24</span> 
    </div> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">25</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>created</code> 
      <code>:</code> 
      <code>function </code> 
      <code>(</code> 
      <code>)</code> 
      <code>{ </code> 
      <code>[</code> 
      <code>/</code> 
      <code>size][</code> 
      <code>/</code> 
      <code>font</code> 
      <code>]</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>[</code> 
      <code>font</code> 
      <code>=</code> 
      <code>微软雅黑][size</code> 
      <code>=</code> 
      <code>3</code> 
      <code>]</code> 
      <code>/</code> 
      <code>/</code> 
      <code>页面参数通过路由传入，这里通过this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params来获取</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageId</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>$route.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>params.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageId;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>/</code> 
      <code>/</code> 
      <code>根据主键查询页面信息</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>cmsApi.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>page_get</code> 
      <code>(</code> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageId</code> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>.</code> 
      <code>then</code> 
      <code>(</code> 
      <code>(</code> 
      <code>res</code> 
      <code>)</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>=</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>&gt;</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>console.</code> 
      <code>log</code> 
      <code>(</code> 
      <code>res</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>if</code> 
      <code>(</code> 
      <code>res.success</code> 
      <code>)</code> 
      <code>{ </code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>this.</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>pageForm </code> 
      <code>=</code> 
      <code>res.cmsPage;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
      <code>)</code> 
      <code>;</code> 
     </div> 
     <div style="margin-left:0px;"> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

4、预览页面回显效果  
![ebe9f35c778fd241766ee32de8dfee6f.png][]  
  
**3.3.4 Api****调用**  
1、定义api方法

2、提交按钮方法  
添加提交按钮事件：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <span style="color:#afafaf;">1</span> 
    </div> </td> 
   <td style="text-align:left;vertical-align:baseline;"> 
    <div style="margin-left:0px;"> 
     <div style="margin-left:0px;"> 
      <code>&lt;</code> 
      <code>el‐</code> 
      <code>button</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"primary"</code> 
      <code>@click</code> 
      <code>=</code> 
      <code>"editSubmit"</code> 
      <code>&gt;</code> 
      <code>提交</code> 
      <code>&lt;</code> 
      <code>/</code> 
      <code>el‐</code> 
      <code>button</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

3、提交按钮事件内容：

4、测试  
修改页面信息，点击提交。

推荐学习：

[20天企业开发实战品优购电商系统开发上（1-10天） ][20_1-10]

视频链接：http://yun.itheima.com/course/295.html?stt  
提取码：epxm

20天企业开发实战品优购电商系统开发下（11-20天+配置资料源码）  
视频链接：https://pan.baidu.com/s/1RJK9jumxt9MARAWohy1E3Q   
提取码：5b74  
资料链接：https://pan.baidu.com/s/1kXYpm76eJwqXnEpWE2pXMQ   
提取码：otpa

[615a47aa12d96a9c1625c1df828be833.png]: /images/20221120/002beea10eed4dee99bca71c56d717c3.png
[f1e8ba6f4e4f0b9aa2ce1569bd91f969.png]: /images/20221120/b41df2cefa3045f3b6ea315bad8d4d87.png
[1361f0c20cd8c555e1a3c453c4f68f3e.png]: https://img-blog.csdnimg.cn/img_convert/1361f0c20cd8c555e1a3c453c4f68f3e.png
[96f5c29b5aa6bcc0cdfaac78ff84bbff.png]: https://img-blog.csdnimg.cn/img_convert/96f5c29b5aa6bcc0cdfaac78ff84bbff.png
[505e766e2c5378a8f7a25d45a221b923.png]: https://img-blog.csdnimg.cn/img_convert/505e766e2c5378a8f7a25d45a221b923.png
[8f4ad2b767567b97977f4cfdb34d1205.png]: https://img-blog.csdnimg.cn/img_convert/8f4ad2b767567b97977f4cfdb34d1205.png
[Link 1]: http://bbs.itheima.com/#
[ecc42d036879b0cbfa8f99d163f22b67.png]: https://img-blog.csdnimg.cn/img_convert/ecc42d036879b0cbfa8f99d163f22b67.png
[eab0bbadc3b03fbb8ab4b361d52f36a1.png]: https://img-blog.csdnimg.cn/img_convert/eab0bbadc3b03fbb8ab4b361d52f36a1.png
[af664d8b1642c61ba049377cc515ed4c.png]: https://img-blog.csdnimg.cn/img_convert/af664d8b1642c61ba049377cc515ed4c.png
[ebe9f35c778fd241766ee32de8dfee6f.png]: https://img-blog.csdnimg.cn/img_convert/ebe9f35c778fd241766ee32de8dfee6f.png
[20_1-10]: http://yun.itheima.com/course/295.html?stt