3 search front end development 3.1 search page
3.1.1 demand analysis

The above figure is the interface of the front end of course search. The user sends a search request to the server through the front end. The search function includes:
1. All courses are queried by default and displayed in pages. 2. Search courses by level 1 and level 2 classification. Select level 1 Classification to display the level 2 classification of subordinates
3. Search course by keyword 4. Search course by course level 3.1.2 page layout
nuxt.js takes / layout/default.vue as the default layout of all pages, usually including page header, content area and footer

default.vue The contents are as follows:
[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 agent configuration
The static resources starting with / static in the search page are parsed by nginx, as follows: / static/plugins: point to the plugins directory under the portal directory.
/static/css: point to the css directory under the portal directory to modify the configuration of the virtual host www.xuecheng.com in Nginx:

[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>  
#Static resources, including pictures required by the system, location /static/img / of static resources such as js and css{     
   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]