Java的新项目学成在线笔记-day12（七）

3 搜索前端开发 3.1 搜索页面
3.1.1 需求分析

上图是课程搜索前端的界面，用户通过前端向服务端发起搜索请求，搜索功能包括：
1、界面默认查询所有课程，并分页显示 2、通过一级分类和二分类搜索课程，选择一级分类后将显示下属的二级分类
3、通过关键字搜索课程 4、通过课程等级搜索课程 3.1.2 页面布局
nuxt.js将/layout/default.vue作为所有页面的默认布局，通常布局包括：页头、内容区、页尾

default.vue内容如下：
[mw_shl_code=applescript,true]<template>  
<div>   
  <Header /> 
    <nuxt/> 
    <Footer /> 
  </div> </template> <script>   import Footer from '../components/Footer.vue'   import Header from '../components/Header.vue'   export default {     components: {     
  Header,   
    Footer    
}   } </script> <style>  
</style>[/mw_shl_code]

3.1.3 Nginx代理配置
搜索页面中以/static开头的静态资源通过nginx解析，如下： /static/plugins：指向门户目录下的plugins目录。
/static/css：指向门户目录下的的css目录 修改Nginx中www.xuecheng.com虚拟主机的配置：

[mw_shl_code=applescript,true] 
<template> 
  <div>   
  <Header />  
   <nuxt/>    
<Footer /> 
  </div> </template> <script>
   import Footer from '../components/Footer.vue'   import Header from '../components/Header.vue'   export default {  
   components: {    
   Header,    
   Footer   
  }   } </script> <style> 
  </style>  
#静态资源，包括系统所需要的图片，js、css等静态资源 location /static/img/ {     
   alias   F:/develop/xc_portal_static/img/;
  location /static/css/ {      
  alias   F:/develop/xc_portal_static/css/;     
     }       
location /static/js/ {     
   alias   F:/develop/xc_portal_static/js/;   
       }     
  location /static/plugins/ {   
     alias   F:/develop/xc_portal_static/plugins/;    
      add_header Access‐Control‐Allow‐Origin http://ucenter.xuecheng.com;   
        add_header Access‐Control‐Allow‐Credentials true;    
        add_header Access‐Control‐Allow‐Methods GET;     
     } [/mw_shl_code]