云讯健身管理系统-11--NUXT和Redis

最新推荐文章于 2024-12-01 14:46:31 发布
原创 最新推荐文章于 2024-12-01 14:46:31 发布
· 3.2k 阅读 · 1 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用服务端渲染技术NUXT搭建前端系统环境，详细阐述了NUXT的环境初始化过程，包括下载、解压、配置插件、安装依赖等步骤。接着讨论了幻灯片插件的安装和配置，以及页面布局、路由设定。文章还涉及了首页数据获取，如banner数据的微服务实现，以及如何通过Redis进行数据缓存，包括Redis的集成、配置和接口改造，以提升系统性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、服务端渲染技术NUXT—搭建前台系统环境

1、什么是服务端渲染

服务端渲染又称**SSR (Server Side Render)**是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。
服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再进行页面内容的抓取。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
另外，使用服务器端渲染，我们可以获得更快的内容到达时间(time-to-content)，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验，对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。

2、什么是NUXT

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
官网网站： [https://zh.nuxtjs.org/]
在这里插入图片描述

二、NUXT环境初始化

1、下载压缩包

https://github.com/nuxt-community/starter-template/archive/master.zip

2、解压

在这里插入图片描述

3、安装ESLint

将自身项目下的.eslintrc.js配置文件复制到当前项目下
在这里插入图片描述
在这里插入图片描述

4、修改package.json

name、description、author（必须修改这里，否则项目无法安装）

 "name": "yunxun",
  "version": "1.0.0",
  "description": "{
   { 云讯健身前台网站 }}",
  "author": "{
   { luobinwang<519630764@qq.com> }}",
  "private": true,

4.1修改nuxt.config.js

修改title: ‘{ { name }}’、content: ‘{ {escape description }}’ —这里的设置最后会显示在页面标题栏和meta数据中

 head: {
   
    title: '云讯健身 - 跑步视频|瑜伽视频|足球视频|篮球视频-自我养成健身管理在线视频课程，姚明为你推荐',
    meta: [
      {
    charset: 'utf-8' },
      {
    name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
    hid: 'keywords', name: 'keywords', content: '云讯健身,健身在线视频教程,跑步视频|瑜伽视频|足球视频|篮球视频' },
      {
    hid: 'description', name: 'description', content: '云讯健身管理平台。截止目前,云讯健身线上、线下学习人次数以万计！业界最适合自学、代码量最大、案例最多、实战性最强、技术最前沿视频课程！' }
    ],
    link: [
      {
    rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

5. 在CMD命令提示终端中进入项目目录

6.安装依赖

npm install

在这里插入图片描述

7.测试运行

npm run dev

在这里插入图片描述

8. NUXT目录结构

（1）资源目录 assets
用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
（2）组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
（3）布局目录 layouts
用于组织应用的布局组件。
（4）页面目录 pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
（5）插件目录 plugins
用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
（6）nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

在这里插入图片描述

三、幻灯片插件

1、安装插件

npm install vue-awesome-swiper

在这里插入图片描述

2、配置插件

2.1在 plugins 文件夹下新建文件 nuxt-swiper-plugin.js，内容是


import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
Vue.use(VueAwesomeSwiper)

2.2 在 nuxt.config.js 文件中配置插件 将 plugins 和 css节点 复制到 module.exports节点下

module.exports = {
   
  // some nuxt config...
  plugins: [
    {
    src: '~/plugins/nuxt-swiper-plugin.js', ssr: false }
  ],
  css: [
    'swiper/dist/css/swiper.css'
  ]
}

四、页面布局

1.复制静态资源

将静态原型中的css、img、js、photo目录拷贝至assets目录下
将favicon.ico复制到static目录下
在这里插入图片描述

2.定义布局

我们可以把页头和页尾提取出来，形成布局页
修改layouts目录下default.vue，从静态页面中复制首页，修改了原始文件中的资源路径为~/assets/，将主内容区域的内容替换成
内容如下：

<template>

  <div class="in-wrap">
    <!-- 公共头引入 -->
    <header id="header">
      <section class="container">
        <h1 id="logo">
          <a href="#" title="谷粒学院">
            <img src="~/assets/img/logo.png" width="100%" alt="谷粒学院">
          </a>
        </h1>
        <div class="h-r-nsl">
          <ul class="nav">
            <router-link to="/" tag="li" active-class="current" exact>
              <a>首页</a>
            </router-link>
            <router-link to="/course" tag="li" active-class="current">
              <a>课程</a>
            </router-link>
             <router-link to="/teacher" tag="li" active-class="current">
              <a>名师</a>
            </router-link>
            <router-link to="/article" tag="li" active-class="current">
              <a>文章</a>
            </router-link>
            <router-link to="/qa" tag="li" active-class="current">
              <a>问答</a>
            </router-link>
          </ul>
          <!-- / nav -->
          <ul class="h-r-login">
            <li id="no-login">
              <a href="/sing_in" title="登录">
                <em class="icon18 login-icon">&nbsp;</em>
                <span class="vam ml5">登录</span>
              </a>
              |
              <a href="/sign_up" title="注册">
                <span class="vam ml5">注册</span>
              </a>
            </li>
            <li class="mr10 undis" id="is-login-one">
              <a href="#" title="消息" id="headerMsgCountId">
                <em class="icon18 news-icon">&nbsp;</em>
              </a>
              <q class="red-point" style="display: none">&nbsp;</q>
            </li>
            <li class="h-r-user undis" id="is-login-two">
              <a href="#" title>
                <img

                  src="~/assets/img/avatar-boy.gif"
                  width="30"
                  height="30"
                  class="vam picImg"
                  alt
                >
                <span class="vam disIb" id="userName"></span>
              </a>
              <a href="javascript:void(0)" title="退出" onclick="exit();" class="ml5">退出</a>
            </li>
            <!-- /未登录显示第1 li；登录后显示第2，3 li -->
          </ul>
          <aside class="h-r-search">
            <form action="#" method="post">
              <label class="h-r-s-box">
                <input type="text" placeholder="输入你想学的课程" name="queryCourse.courseName" value>
                <button type="submit" class="s-btn">
                  <em class="icon18">&nbsp;</em>
                </button>
              </label>
            </form>
          </aside>
        </div>
        <aside class="mw-nav-btn">
          <div class="mw-nav-icon"></div>
        </aside>
        <div class="clear"></div>
      </section>
    </header>
    <!-- /公共头引入 -->

    <nuxt/>
    <!-- 公共底引入 -->
    <footer id="footer">
      <section class="container">
        <div class>
          <h4 class="hLh30">
            <span class="fsize18 f-fM c-999">友情链接</span>
          </h4>
          <ul class="of flink-list">
            <li>
              <a href="http://www.baidu.com/" title="百度" target="_blank">百度</a>
            </li>
          </ul>
          <div class="clear"></div>
        </div>
        <div class="b-foot">
          <section class="fl col-7">
            <section class="mr20">
              <section class="b-f-link">
                <a href="#" title="关于我们" target="_blank">关于我们</a>|
                <a href="#" title="联系我们" target="_blank">联系我们</a>|
                <a href="#" title="帮助中心" target="_blank">帮助中心</a>|
                <a href="#" title="资源下载" target="_blank">资源下载</a>|
                <span>服务热线：010-56253825(北京) 0755-85293825(上海)</span>
                <span>Email：info@atguigu.com</span>
              </section>
              <section class="b-f-link mt10">
                <span>©2018课程版权均归云讯健身所有 京ICP备17055252号</span>
              </section>
            </section>
          </section>
          <aside class="fl col-3 tac mt15">
            <section class="gf-tx">
              <span>
                <img src="~/assets/img/wx-icon.png" alt>
              </span>
            </section>
            <section class="gf-tx">
              <span>
                <img src="~/assets/img/wb-icon.png" alt>
              </span>
            </section>
          </aside>
          <div class="clear"></div>
        </div>
      </section>
    </footer>
    <!-- /公共底引入 -->
  </div>
</template>
<script>
import "~/assets/css/reset.css";
import "~/assets/css/theme.css";
import "~/assets/css/global.css";
import "~/assets/css/web.css";
export default {
   };
</script>

<style>
html {
   
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*, *:before, *:after {
   
  box-sizing: border-box;
  margin: 0;
}

.button--green {
   
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
   
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
   
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
   
  color: #fff;
  background-color: #35495e;
}
</style>

3.幻灯片插件

<!-- 幻灯片 开始 -->
<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>
<!-- 幻灯片 结束 -->

<script>
export default {
   
  data () {
   
   	return {
   
      swiperOption: {
   
        //配置分页
        pagination: {
   
         el: '.swiper-pagination'//分页的dom节点
        },
        //配置导航
        navigation: {
   
          nextEl: '.swiper-button-next',//下一页dom节点
          prevEl: '.swiper-button-prev'//前一页dom节点
        }
      }
    }
  }
}
</script>

4、定义首页面

（不包含幻灯片）
修改pages/index.vue：
修改了原始文件中的资源路径为~/assets/
内容如下：

<template>
  
  <div>
    <!-- 幻灯片 开始 -->
  <div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">

          <div v-for="banner in bannerList" :key="banner.id" class="swiper-slide" style="background: #040B1B;">
              <a target="_blank" :href="banner.linkUrl">
                  <img :src="banner.imageUrl" :alt="banner.title">
              </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>
  <!-- 幻灯片 结束 -->
    
     <div id="aCoursesList">
      <!--
最低0.47元/天 解锁文章
redis 页面缓存html,在 Nuxt.js 中使用 Redis 缓存页面
weixin_39531037的博客
06-03 637
情况说明众所周知，在 SSR 服务中，渲染阶段是非常消耗渲染服务器资源的。比如网站的首页，会经常被访问到，如果每一次请求渲染服务器都要执行一遍渲染操作，不仅速度上要慢很多，而且在高并发状态下会出现性能瓶颈。这时，如果我们在页面第一次渲染完成后，就将这次的渲染结果缓存下来。当再次请求时直接把渲染好的渲染结果返回，就省了渲染、查询等一系列的操作。无疑对程序的性能和可用性上都是一次大的提升。那么在 Nu...
云讯健身管理系统-12--SSO单点登录、阿里云短信
leo10_Barcelona的博客
09-29 872
一、单点登录 1. 用户登录业务介绍 1.1 单一服务器模式—sessiong广播机制 早期单一服务器，用户认证，将其session复制 1.2. SSO(single sign on)模式 1.3. Token模式 业务流程图{用户访问业务时，必须登录的流程} 二、使用JWT进行跨域身份验证 1、传统用户身份验证 Internet服务无法与用户身份验证分开。一般过程如下： 1、用户向服务器发送用户名和密码。 2、验证服务器后，相关数据（如用户角色，登录时间等）将保存在当前会话中。 3、服务器向用户返
缓存服务器端使用的nuxt页面，使用redis-Node.js开发
05-27
Nuxt.js的模块，可以缓存使用redis在服务器中分发的页面。 nuxt-page-cache-with-redis Nuxt.js的模块，可以缓存使用redis在服务器中分发的页面。 该模块可以缓存渲染的页面，并在路由再次匹配时直接将其返回，以减少渲染服务器的资源消耗。 在nuxt.config.js中设置npm i nuxt-page-cache-with-redis --save用法：版本：“ 0.0.1”，模块：[[“” nuxt-page-cache-with-redis“，{expireTime： 60 * 60，redis：{
rabbitmq 的命令使用
加菲猫小站
05-28 162
翻译: bobning 编译和安装 ubuntu或debian下的安装非常简单 # apt-get install rabbitmq-server 默认的数据库内容 当第一次启动服务，检测数据库是否未初始化或者被删除，它会用下面的资源初始化一个新的数据库: 一个命名为 / 的虚拟宿主一个名为guest密码也为guest的用户，他拥有/虚拟宿主的所有权限 如果你的中间件是公开访...
NUXT搭建及Redis的基本使用
Nbdqsz的博客
08-18 1565
不免费
RabbitMQ命令行使用
JonWu0102的博客
07-06 1258
启动：rabbitmq-serverdocker exec -it $containerId bashrabbitmqctl add_user guest2 guest2rabbitmqctl set_user_tags guest2 administratorrabbitmqctl add_vhost guest2rabbitmqctl set_permissions -p guest2  gu...
必须要掌握的 RabbitMQ 操作命令
江南一点雨的专栏
12-06 4000
文章目录1. rabbitmqadmin2. rabbitmqadmin 的功能3.列出各种信息4. 一个完整的例子5. 命令一览6. 小结 关于 RabbitMQ 的管理，我们可以通过网页来进行，在松哥前面的文章中也和小伙伴们做了相关的介绍了： RabbitMQ 管理页面该如何使用 除了通过 Web 管理页面来进行管理之外，我们也可以通过命令行来进行管理，之前松哥在RabbitMQ 中的 VirtualHost 该如何理解一文中介绍过几个 RabbitMQ 管理命令。 也在另类玩法！使用 REST A
RabbitMQ 命令行
wspray的博客
12-18 690
开始RabbitMQ 命令行用户命令队列命令虚拟机命令应用和集群管理 RabbitMQ 命令行 持续更新中... 用户命令 操作 命令 添加用户 rabbitmqctl add_user username password 删除用户 rabbitmqctl delete_user username 修改密码 rabbitmqctl change_passwo...
Rabbitmq命令行
ZanShichun的博客
04-20 1053
用户命令 1.添加用户  rabbitmqctl add_user username password  2.删除用户  rabbitmqctl delete_user username  3.修改密码  rabbitmqctl change_password username newpassword  4.列出所有用户 rabbitmqctl list_u
健身房会员管理系统（c#.net）
01-08
此文档为完善后的c#.net期末课程设计，功能完善，包括数据库，下载即用。
RabbitMQ 客户端 连接、发送、接收处理消息
最新发布
lq
12-01 2078
(3) 如果 RabbitMQ 服务收到消息，就转发给 注册接收消息接口的 连接，如果接收的连接标记了 AutoDelete，那么发送给客户端后，RabbitMQ 就会将消息从消息队列中删除。而 RabbitMQ 的消费消息(接收消息) 也仅仅是接收消息，它不管是谁发的消息，只要是发送的 RabbitMQ 服务的消息，它都能接收，注册接收消息，我的客户端就会收到 RabbitMQ 发送过来的消息，消息中包含发送上来的消息内容，还有发送消息的 queue 名字。
RabbitMQ的使用详解
Zero摄氏度的博客
07-12 3525
MQ（message queue），本质是个队列，FIFO先入先出。只不过队列中放的是message，是一种跨进程的通信机制，用于上下游传递消息。在互联网架构中，MQ是一种非常常见的上下游解耦的消息通信服务。使用了MQ之后，消息发送上游只需要依赖MQ，不用依赖其他服务。
RabbitMQ常用操作命令
qq_38014879的博客
05-15 2228
RabbitMQ常用操作命令
开源健身房管理系统教程
gitblog_00736的博客
08-20 515
开源健身房管理系统教程 gym-management-system毕业设计，基于Spring Boot的健身房管理系统。项目地址:https://gitcode.com/gh_mirrors/gy/gym-management-system 项目介绍 开源健身房管理系统（Gym Management System）是一个旨在帮助健身房管理会员、课程、教练和财务的系统。该项目托管在GitHub上，...
RabbitMQ基础操作命令
Noonebirdyou的博客
01-21 6454
RabbitMQ基础操作命令
【RabbitMQ 项目】服务端：连接模块
weixin_74113106的博客
09-26 599
服务端：连接模块
RabbitMQ基本配置
weixin_45773628的博客
08-01 3762
可以理解为：一个Mysql又很多数据库,每一个数据库就相当于一个Virtual Hosts。本次整合需要创建2个springboot项目，一个为生产者，一个为消费者。2. 设置的rabbitMq的服务的主机 默认localhost。3. 设置的rabbitMq的服务的端口 默认5672。4. 设置的rabbitMq的服务的虚拟主机。生产者: --->按照JDBC思路。Fanout生产者的相关代码。Fanout消费者的相关代码。direct生产者模式。direct消费者模式。controller层。
开源项目分享-健身房管理系统
Brioal Is Hardworking
02-14 1165
今天给大家分享一个毕设级别的开源项目，强调毕设级别是想说这个项目规模较小，充其量只能当做大学生的毕设。 01 框架说明 该项目是一个微信小程序项目，包含完整的管理前端和服务后端。该项目后端采用SpringBoot+Mysql框架，小程序端是使用uni-app框架，管理前端是采用vue+ElementUi+Iview开发的。 02 小程序端截图 注册 登录 个人信息 个人中心 课程列表 课程详情 03 管理端截图 登录 课程管理 客户管.
Nuxt-Laravel模块：轻松集成Nuxt与Laravel框架
总结而言，nuxt-laravel是一个强大的模块，为开发者提供了在Laravel项目中集成Nuxt.js应用的能力，使得开发者可以在一个统一的环境中管理和维护前后端代码，同时享受Vue.js和Laravel框架带来的各种优势。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值