学成在线day12,搜索前端Nuxt.js（具体用法没搞懂）， 搜索前端开发

搜索前端Nuxt.js

SEO:总结就是，让百度的爬虫能爬到，我们想展示给用户看的词条，方便引流，推广。

2 Nuxt.js 介绍

1、用户打开浏览器，输入网址请求到Node.js
2、部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据
3、Nuxt.js获取到数据后进行服务端渲染
4、Nuxt.js将html网页响应给浏览器
Nuxt.js使用了哪些技术？
Nuxt.js使用Vue.js+webpack+Babel三大技术框架/组件，如下图：

Nuxt.js的特性有哪些？
基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES6/ES7 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器： SASS、LESS、 Stylus等等

3 Nuxt.js 基本使用（很复杂，没听懂。）

Nuxt.js 框架的基础路由自动生成：
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
Nuxt.js根据pages的目录结构及页面名称定义规范来生成路由
总结：user目录下创建one.vue文件，就生成一个路由访问地址：“user/one” 的URL

3.4.2 嵌套路由(没听懂)

案列以后懂了再来填。直接进入搜索前端改造。

3 搜索前端开发

上图是课程搜索前端的界面，用户通过前端向服务端发起搜索请求，搜索功能包括：
1、界面默认查询所有课程，并分页显示
2、通过一级分类和二分类搜索课程，选择一级分类后将显示下属的二级分类
3、通过关键字搜索课程
4、通过课程等级搜索课程

导入xc-ui-pc-portal前端工程
配置Nginx代：

#前端门户课程搜索,这个请求 Nuxt   
            location ^~ /course/search {
         
                proxy_pass http://dynamic_portal_server_pool;          
            }     
            #后端搜索服务,这个请求后端服务
            location /openapi/search/ {
         
                proxy_pass http://search_server_pool/search/;          
            }     
             #分类信息    
            location /static/category/ {
         
                proxy_pass http://static_server_pool;        
            }

            #开发环境webpack定时加载此文件
            location ^~ /__webpack_hmr {
    
                proxy_pass http://dynamic_portal_server_pool/__webpack_hmr;      
            }

            #开发环境nuxt访问_nuxt
            location ^~ /_nuxt/ {
    
                proxy_pass http://dynamic_portal_server_pool/_nuxt/;      
            }

#分类信息     
        location /static/category/ {
         
            alias  D:/a1/xuechengzaixianUI/develop/xuecheng/static/category/;        
        }

#前端动态门户
    upstream dynamic_portal_server_pool{
   
        server 127.0.0.1:10000 weight=10;        
    }
    #后台搜索（公开api）
    upstream search_server_pool{
       
       server 127.0.0.1:40100 weight=10;      
    } 

修改前端页面：（很复杂，具体不知道怎么说，具体修改过得地方，截图说明）
改好后的前端页面

<template>
  <div>
    <div class="learing-list">
      <div class="list-box">
        <ul>
          <li>关键字ss：</li>
          <ol>
            <li>{
   {
   keyword}}

              <nuxt-link v-if="keyword" class="title-link" :to="'/course/search?keyword=&mt='+mt+'&st=' + st+'&grade='+grade">
                &Chi;
              </nuxt-link>
            </li>
          </ol>
        </ul>
        <ul>
          <li>一级分类：</li>
          <li v-if="mt!=''"><nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&grade='+grade">全部</nuxt-link></li>
          <li class="all" v-else>全部</li>
          <ol>
            <li v-for="category_v in first_category">
              <nuxt-link  class="title-link all" :to="'/course/search?keyword='+keyword+'&mt=' + category_v.id" v-if="category_v.id == mt">{
   {
   category_v.name}}</nuxt-link>
              <nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt=' + category_v.id" v-else>{
   {
   category_v.name}}</nuxt-link>
            </li>
          </ol>
          <!--<ol>
            <li>数据分析</li>
            <li>机器学习工程</li>
            <li>前端开发工程</li>
          </ol>-->
        </ul>
        <ul>
          <li>二级分类：</li>
          <li v-if="st!=''"><nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&grade='+grade">全部</nuxt-link></li>
          <li class="all" v-else>全部</li>
          <ol v-if="second_category.length>0">
            <li v-for="category_v in second_category">
              <nuxt-link  class="title-link all" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&st=' + category_v.id" v-if="category_v.id == st">{
   {
   category_v.name}}</nuxt-link>
              <nuxt-link  class="title-link" :to="'/course/search?keyword='+keyword+'&mt='+mt+'&st=' + category_v.id" v-else>{
   {
   category_v.name}}</nuxt-link>
            </li>
            <!-- <li>大数据</li>
             <li>云计算</li>-->
          </ol