黑马程序员技术交流社区

标题: 【郑州校区】Java的新项目学成在线笔记-day12（七） [打印本页]

---

作者: 谷粒姐姐    时间: 2019-5-10 10:37
标题: 【郑州校区】Java的新项目学成在线笔记-day12（七）


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

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

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

<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>

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

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

 

<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;     

     } 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2