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

3 搜索前端开发 3.1 搜索页面
3.1.1 需求分析
Java的新项目学成在线笔记-day12（七）
上图是课程搜索前端的界面，用户通过前端向服务端发起搜索请求，搜索功能包括：
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 [url=http://ucenter.xuecheng.com]http://ucenter.xuecheng.com[/url];

add_header Access‐Control‐Allow‐Credentials true;

add_header Access‐Control‐Allow‐Methods GET;

}