Redis的使用

1.搭建项目前台系统环境

        1.NUXT（前端框架 ）

定义：Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

        客户端访问服务端 服务端中tomcat和node.js进行访问会把数据一次性全部返回给客户端 有利于SEO.

         正常框架使用ajax： 异步交互，缺点 (不利于SEO -- 百度搜素排名是否靠前，匹配度降低。 )

NUXT环境目录结构

        1..nuxt  编译后的文件

        2.assets 静态资源 如：css，js

        3.components 项目使用的相关组件

         4.layouts 定义网页布局（先引入default.vue 头和尾的布局--->（<ifream/>）引入pages中的内容

        5.pages 项目中具体的页面

        6.nuxt.config.js 核心配置文件

2.整合前台系统

        nuxt中的路由：1.固定路由（路径写死，路径是不变的）

                                       在pages中创建文件夹 course 在course文件夹创建index.vue

                                 2.动态路由（ 每次生成的路由地址不一样根据点击不同来显示不同的内容）

                                    如果我们需要根据id查询一条记录，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名

在pages下的course目录下创建_id.vue

3.首页显示banner显示（轮播图）

        1.安装轮播图插件  npm install vue-awesome-swiper（注意版本问题）

        2.配置幻灯片插件

                （1）在 plugins 文件夹下新建文件

                 import Vue from 'vue'

                 import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'

                  Vue.use(VueAwesomeSwiper)

                （2）在nuxt.config.js添加组件

                plugins: [

                    { src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }

                  ],

                css: [

                    'swiper/dist/css/swiper.css'

                  ],

                （3）复制项目中使用的静态资源（assets目录中）

                （4）在defalt.vue中引入page页面下的内容

                （5）幻灯片插件和js切换效果

                        

<div v-swiper:mySwiper="swiperOption">

    <div class="swiper-wrapper">

        <div class="swiper-slide" style="background: #040B1B;">

            <a target="_blank" href="/">

                <img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">

            </a>

        </div>

        <div class="swiper-slide" style="background: #040B1B;">

            <a target="_blank" href="/">

                <img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">

            </a>

        </div>

    </div>

    <div class="swiper-pagination swiper-pagination-white"></div>

    <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>

    <div class="swiper-button-next swiper-button-white" slot="button-next"></div>

</div>

export default {

  data () {

    return {

      swiperOption: {

        //配置分页

        pagination: {

          el: '.swiper-pagination'//分页的dom节点

        },

        //配置导航

        navigation: {

          nextEl: '.swiper-button-next',//下一页dom节点

          prevEl: '.swiper-button-prev'//前一页dom节点

        }

      }

    }

  }

}

                       

4.NUXT不带axios需要自己下载封装

        1.npm install axios （下载axios）

        2.封装axios

                import axios from 'axios'

                const service = axios.create({

                    baseURL: 'http://localhost:9001',

                    timeout: 20000

                })

<span class="fr jgTag bg-green" v-if="Number(course.price) === 0">

           <i class="c-fff fsize12 f-fA">免费</i>

 </span>

<span class="fr jgTag bg-green"  v-else>

           <i class="c-fff fsize12 f-fA">不免费</i>

 </span>

export default service

5.首页数据使用redis缓存