Javaの新しいプロジェクト学成オンラインノート-day 4(六)

4.1ページプレビュー開発4.1.1需要分析ページが発行前にページプレビューを追加する手順で、ユーザーがページの内容が正しいかどうかをチェックしやすい.ページプレビューの流れは以下の通りである:1、ユーザーはcmsフロントエンドに入り、「ページプレビュー」をクリックしてブラウザでcmsページプレビューリンクを要求する.2、cmsは、ページidに基づいてDataUrlを問合せ、データモデルの取得をリモートで要求する.3、cmsはページidに基づいてページテンプレートの内容4、cmsを照会してページ静化を行う.
5、cmsは静態化されたコンテンツをブラウザに応答する.6、ブラウザでページの内容を展示し、ページプレビューの機能を実現する.4.1.2構築環境cmsサービスにfreemarkerを統合する必要がある:1、CMSサービスにfreemarkerを加入する依存

    org.springframework.boot  
  spring‐boot‐starter‐freemarker

2、アプリケーションで.yml構成freemarker

spring:
  freemarker:  
  cache: false 
#      ，
      
   settings:   
   template_update_delay: 0

4.1.3サービスの静的化方法は、静的化テストの章ですでに実装されています.4.1.4 Controllerはサービスの静態化方法を呼び出し、静態化内容をresponseを介してブラウザ表示作成CmsPagePreviewControllerクラスに出力し、ページプレビュー:ページidを要求し、ページのテンプレート情報、データモデルurlをクエリーし、テンプレートとデータに基づいて静態化内容を生成し、ブラウザに出力する.

@Controller public class CmsPagePreviewController extends BaseController {  
  @Autowired    
 PageService pageService;     
  //     id  
  @RequestMapping(value="/cms/preview/{pageId}",method = RequestMethod.GET)

public void preview(@PathVariable("pageId")String pageId){     
   String pageHtml = pageService.getPageHtml(pageId);    
     if(StringUtils.isNotEmpty(pageHtml)){   
         try {   
             ServletOutputStream outputStream = response.getOutputStream();    
             outputStream.write(pageHtml.getBytes("utf‐8"));      
       } catch (IOException e) {       
         e.printStackTrace();      
       }      
    } 
   }
 }

4.2ページプレビューテスト4.2.1構成Nginxエージェントは、nginxを介して静的リソース(css、ピクチャなど)を要求するために、nginxエージェントを介してページプレビューを行う.www.xuecheng.com仮想ホスト構成:

#    
 location /cms/preview/ {
  proxy_pass http://cms_server_pool/cms/preview/;    
  }

構成cms_server_poolはリクエストをcmsに転送します.

#cms     
 upstream cms_server_pool{ server 127.0.0.1:31001 weight=10; 
     }

nginxプロファイルを再ロードします.cmsからpageはページを探してテストします.注意:ページ構成は必ず正しく、正しいテンプレートidとdataUrlを設定する必要があります.ブラウザで開く:http://www.xuecheng.com/cms/preview/5a795ac7dd573c04508f3a565 a 795 ac 7 dd 573 c 04508 f 3 a 56:ラウンドチャートページのid
4.2.2「ページプレビュー」リンクを追加ページリストに「ページプレビュー」リンクを追加page_を変更list.vue:

previewメソッドの追加://ページプレビューpreview(pageId){window.open("http://www.xuecheng.com/cms/preview/'+pageId},効果:
輪番図ページの「ページプレビュー」をクリックし、ページ効果をプレビューします.
転載先:https://blog.51cto.com/13517854/2340600