本帖最后由 谷粒姐姐 于 2019-5-10 10:39 编辑
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 [url=http://ucenter.xuecheng.com]http://ucenter.xuecheng.com[/url];
add_header Access‐Control‐Allow‐Credentials true;
add_header Access‐Control‐Allow‐Methods GET;
}
| 
收藏
淘帖
踩
