重写B站(网页、后端、小程序)

1. 网页端

       1.1 框架 

            Vue + Element+UI + axios

        1.2 框架搭建步骤

搭建Vue             

        1.3 配置文件 main.js

        

import {createApp} from 'vue'
import ElementUi from 'element-plus'
import 'element-plus/dist/index.css';
import axios from "axios";
import router from './router'
import App from './App'const app = createApp(App)
app.use(ElementUi)
app.use(router)
app.config.globalProperties.$http = axios
app.config.globalProperties.$axios = axiosapp.mount('#app');

       1.4 配置路由 

                        1.4.1 添加 依赖 

npm install vue-router@4
import { createRouter, createWebHistory } from 'vue-router';import Home from '@/views/page/page';const routes = [{ path: '/page', component: Home }];const router = createRouter({history: createWebHistory(),routes});export default router;
                1.4.2 注意Vue 的钩子函数触发事件

        

                1.4.3 核心钩子

                        created : 首次进入刷新、一般进行首次的页面数据加载

                        mounted : 数据发生变更之后、重新加载

                        

2. 后端

        2.1 框架

                2.1.1 语言: JAVA

                2.2.2 开发框架 :

                        SpringBoot 2.0  、Spring cloud Finchley.SR1

        2.2 微服务

                2.2.1 结构

                            2.2.2 框架搭建步骤

2.3 微服务节点配置

        2.3.1 BlMan (父节点)

                2.3.1.1 blMan parent 父节点 POM 配置
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.bu</groupId><artifactId>blMan</artifactId><version>1.0-SNAPSHOT</version><packaging>pom</packaging><name>blMan</name><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><modules><module>mainApp</module><module>blUserApp</module><module>deploy</module></modules><dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>3.8.1</version><scope>test</scope></dependency><!--    spring boot 启动配置    --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><!--    注册中心 nacos    --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-nacos-discovery</artifactId><version>2.2.0.RELEASE</version></dependency><!--    远程调用 feign    --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-feign</artifactId><version>1.4.7.RELEASE</version></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><version>2.2.2.RELEASE</version><type>pom</type><scope>import</scope></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>Hoxton.SR1</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.2.0.RELEASE</version><executions><execution><id>repackage</id><goals></goals></execution></executions></plugin></plugins></build></project>

         2.3.2 mainApp 所有服务网关、权限管理平台

                 2.3.2.1 mainApp POM 配置
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><artifactId>mainApp</artifactId><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><parent><artifactId>blMan</artifactId><groupId>com.bu</groupId><version>1.0-SNAPSHOT</version></parent><dependencies><!--    mybatis 配置   --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.24</version></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.2</version></dependency><!--   redis      --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><version>2.2.0.RELEASE</version></dependency><!--    网关    --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency><!--    负载均衡    --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-ribbon</artifactId></dependency></dependencies></project>
                 2.3.2.2 mainApp 启动类配置
package com.bu;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;@SpringBootApplication
// 注册中心
@EnableDiscoveryClient
public class MainApp {public static void main(String[] args) {SpringApplication.run(MainApp.class, args);}
}
                 2.3.2.2 mainApp yml 配置文件
# 启动端口
server:port: 8991# 注册中心名
spring:application:name: main# redis 配置、无用户密码无需配置redis:host: localhostport: 6379# 数据源datasource:url: jdbc:mysql://localhost:3306/数据库?serveTimezone=GMT+8password: 用户密码username: 用户名driver-class-name: com.mysql.cj.jdbc.Drivercloud:cloud:#   注册中心地址nacos:discovery:server-addr: http://localhost:8848#   网关gateway:discovery:locator:enabled: true#      路由匹配规则routes:- id: deployuri: lb://deployApporder: 1predicates:- Path= /deploy/**filters:- StripPrefix=1

         2.3.3 deployApp 配置平台信息(页面配置)

                 2.3.3.1 deployApp POM 配置        

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><artifactId>deploy</artifactId><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.24</version></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.0</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.18</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency></dependencies><parent><artifactId>blMan</artifactId><groupId>com.bu</groupId><version>1.0-SNAPSHOT</version></parent>
</project>
                 2.3.3.2 deployApp 启动类 配置       
package com.bu;import org.mybatis.spring.annotation.MapperScan;
import org.mybatis.spring.annotation.MapperScans;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.client.discovery.EnableDiscoveryClient;@SpringBootApplication
@EnableDiscoveryClient
@MapperScan(basePackages = "com.bu.**.**.dao")
public class DeployMain {public static void main(String[] args) {SpringApplication.run(DeployMain.class, args);}
}
                 2.3.3.3 deployApp yml 配置       
spring:application:#   注册中心 微服务名称name: deployAppdatasource:url: jdbc:mysql://localhost:3306/数据库?serveTimezone=GMT+8password: 用户密码username: 用户driver-class-name: com.mysql.cj.jdbc.Drivercloud:nacos:discovery:server-addr: http://localhost:8848mybatis:mapper-locations: classpath:/mapper/**.xml
server:port: 8992

3. 小程序端 

        3.1 框架

                3.1.1 微信小程序、vantWeb

                3.1.2 创建小程序项目 (appId 在 微信小程序官网申请,不使用云服务开发)          

                3.1.3 默认页面

                3.1.4 引入 vant-webapp ui 包

                npm i @vant/weapp


上诉前端、手机端、后端框架搭建完成、开始页面编写。。。

4. vue 前端页面 布局、手机端页面布局

        4.1 页面设计开发

                4.1.1 首页

                        4.1.1.1 整体布局

                        4.1.1.2 采用 element-ui 重写

                                4.1.1.2.1 宏观布局

                        

4.1.1.2.2 导航栏设计

设计思路:这块内容处于整体页面正上方、width为100%、铺满上方

 UI代码要点:          

el-container 整体布局、el-header 表示当前元素处于上方
导航栏 使用 el-menu 设置
子元素 el-menu-item (单菜单、可依据router跳转) 、el-submenu (二级下拉菜单)

4.1.1.3 小程序首页大致布局设计
        最终效果:

        

        index.wxml
<scroll-view scroll-x="true" class="main_tb"><view class="head_title"><view>头像</view><view>搜索</view><view>游戏</view><view>消息</view></view><view class="head_nav" style="top: {{top}};"><view class="head_nav_title"><van-tabs  active="{{ active }}" line-width="0" ellipsis><van-tab wx:for="{{title_menu}}" wx:for-index="index" wx:for-item="title_"   title="{{title_.title_name}}"></van-tab></van-tabs></view><view class="head_nav_mark"></view><view class="head_nav_fixed">固定</view></view><view class="recommend">3</view><view class="vedio_main"><view class="vedio_main_one"></view><view class="vedio_main_one"></view><view class="vedio_main_one"></view><view class="vedio_main_one"></view></view></scroll-view>
        index.wxss
.main_tb {display: flex;justify-content: space-between;/* 竖向排列 */flex-direction: column;
}.head_title {height: 80rpx;background-color: red;display: flex;justify-content: space-between;align-items: center;
}.head_nav {height: 80rpx;background-color: rosybrown;display: flex;justify-content: start;flex-direction: row;align-items: center;position:fixed;
}.head_nav_title {width: 90%;height: 80rpx;
}.head_nav_fixed {width: 10%;height: 80rpx;position: fixed;
}
.head_nav_mark {width: 10%;height: 80rpx;
}.recommend {height: 400rpx;background-color: royalblue;margin: 30rpx;
}.vedio_main  {display: flex;justify-content:space-around;flex-direction: row;flex-wrap: wrap;
}.vedio_main .vedio_main_one {background-color: cadetblue;height: 300rpx;width: 45%;margin-top: 20rpx;
}
        index.json
{"usingComponents": {"van-tab": "@vant/weapp/tab/index","van-tabs": "@vant/weapp/tabs/index"},"enablePullDownRefresh": true,"onReachBottomDistance": 0
}
        index.js

Page({data: {title_menu : [{title_code : 1,title_name : "直播"},{title_code : 2,title_name : "推荐"},{title_code : 3,title_name : "热门"},{title_code : 4,title_name : "动画"},{title_code : 5,title_name : "动画"},{title_code : 6,title_name : "动画"},{title_code : 7,title_name : "动画"},{title_code : 9,title_name : "动画"},{title_code : 10,title_name : "动画"},{title_code : 11,title_name : "动画"}],active : 2,top: "100rpx",},onPullDownRefresh() {console.log('触发了上拉刷新事件')this.setData({top:"100rpx"})},onReachBottom() {if(this.data.top !== 0) {this.setData({top:0})console.log("触底事件触发")}},  
})
        app.json 主配置文、包含一些tabbar(最下面的标签)、新增的一些页面
        标签获取网站 https://www.iconfont.cn/
{"pages": ["pages/index/index","pages/dynamic/dynamic","pages/publish/publish","pages/vip_shop/vip_shop","pages/mine/mine","pages/logs/logs"],"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "Weixin","navigationBarBackgroundColor": "#ffffff"},"componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents","usingComponents": {},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "./image/HOME.png","selectedIconPath": "./image/home_seleced.png"},{"pagePath": "pages/dynamic/dynamic","text": "动态","iconPath": "./image/miss_page_icon/fengche.png","selectedIconPath": "./image/selected_page_icon/fengche.png"},{"pagePath": "pages/publish/publish","text": "发布","iconPath": "./image/miss_page_icon/publish.png","selectedIconPath": "./image/selected_page_icon/publish.png"},{"pagePath": "pages/vip_shop/vip_shop","text": "会员购","iconPath": "./image/miss_page_icon/gouwubao.png","selectedIconPath": "./image/selected_page_icon/gouwubao.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "./image/miss_page_icon/dianshi.png","selectedIconPath": "./image/selected_page_icon/dianshi.png"}]}
}
4.1.1.4  后端服务搭建
        4.1.1.4.1 deploy 服务 部署配置信息

                

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><artifactId>deploy</artifactId><properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.24</version></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.0</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.18</version></dependency></dependencies><parent><artifactId>blMan</artifactId><groupId>com.bu</groupId><version>1.0-SNAPSHOT</version></parent>
</project>
spring:application:#   注册中心 微服务名称name: deployAppdatasource:url: jdbc:mysql://localhost:3306/自己新建的库?serveTimezone=GMT+8password: 密码username: 用户名driver-class-name: com.mysql.cj.jdbc.Drivercloud:nacos:discovery:server-addr: http://localhost:8848mybatis:mapper-locations: classpath:/mapper/**.xml
server:port: 8992

        项目地址: 地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/diannao/84089.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL数据 在 磁盘上是什么样子的

MySQL数据 在 磁盘上是什么样子的&#xff0c;取决于所使用的存储引擎。存储于引擎 是作用在 表! 上的。 存储引擎 百度百科是这样定义存储引擎的&#xff1a;MySQL 中的数据用各种不同的技术存储在文件&#xff08;或者内存&#xff09;中&#xff0c;这些不同的技术以及配套…

MySQL的相关操作

目录 一. 字符串函数 二. group by分组 2.1 作用 2.2 格式 2.3 举例 三. order by排序 3.1 格式 3.2 举例 四. limit 4.1 作用 4.2 举例 五. having 5.1 作用 5.2 举例 六. 正则表达式 七. 多表查询 7.1 定义 7.2 子查询 7.3 联合查询 纵向合并 7.4 交叉连…

网络安全-等级保护(等保) 2-7-3 GB/T 25058—2019 第7章 安全设计与实施

############################################################################### 对于安全厂家而言&#xff0c;最关心的内容在本章节&#xff0c;根据已确定的安全总体方案&#xff0c;完成技术措施和管理措施的详细设计和实施&#xff0c;包含具体的安全产品和管理要求。…

【Spring Boot】配置实战指南:Properties与YML的深度对比与最佳实践

目录 1.前言 2.正文 2.1配置文件的格式 2.2properties 2.2.1基础语法 2.2.2value读取配置文件 2.2.3缺点 2.3yml 2.3.1基础语法 2.3.2配置不同数据类型 2.3.3配置读取 2.3.4配置对象和集合 2.3.5优缺点 2.4综合练习&#xff1a;验证码案例 2.4.1分析需求 2.4.2…

20250519使用TF卡将NanoPi NEO core开发板刷机为Ubuntu core22.04.3系统完成之后执行poweroff自动关机

1、h3-sd-friendlycore-xenial-4.14-armhf-20210618.img.gz 在WIN10下使用7-ZIP解压缩/ubuntu20.04下使用tar 2、Win32DiskImager.exe 写如32GB的TF卡。【以管理员身份运行】 3、TF卡如果已经做过会有3个磁盘分区&#xff0c;可以使用SD Card Formatter/SDCardFormatterv5_WinE…

编译Qt5.15.16并启用pdf模块

编译Qt5.15.16并启用pdf模块 标题1.目录设置 -q-bulid –qt-everywhere-src-5.15.16 –bulid cd bulid 必须&#xff0c;否则会提示Project ERROR: You cannot configure qt separately within a top-level build. create .qmake.stash and .qmake.super in build folder …

“智”斗秸秆焚烧,考拉悠然以科技之力筑牢生态安全防线

清晨&#xff0c;薄雾笼罩着辽阔的田野&#xff0c;农民们开始了一天的劳作。然而&#xff0c;随着收割季的到来&#xff0c;秸秆焚烧问题也逐渐浮现&#xff0c;成为威胁空气质量与生态安全的隐患。传统监管方式往往显得力不从心&#xff0c;效率低下的困境亟待突破。在此背景…

Nockchain项目部署教程

Nockchain头矿窗口正在打开&#xff0c;不拼设备&#xff0c;现在部署&#xff0c;马上就要开挖了。 一、项目介绍 Nockchain 是结合了POW和ZKVM的区块链协议。 主要特点&#xff1a; 1&#xff09;计算存储新域名空间三位一体架构&#xff0c;高吞吐量 2&#xff09;使用No…

2025年气候持续大风,消纳减少,如何保收益?东润能源整体解决方案持续保收益保增长

引言 随着全球气候变化加剧,2025年极端天气频发,风资源丰富但电网消纳能力不足的问题日益突出,导致许多风电项目面临限电、收益下滑的挑战。如何在复杂的气候和电力市场环境下保障投资收益,成为行业关注的焦点。东润能源凭借领先的技术创新和综合能源解决方案,为风电行业…

2023河南CCPC省赛vp部分补题

A 模拟 暴力 对每个合法的前缀&#xff0c;判断后缀是不是合法 int a[29]; void solve(){string s;cin>>s;int t-1;if(s.size()1){return cout<<"NaN"<<endl,void();}for(int i0;i<27;i) a[i]0;for(int i0;i<s.size();i){a[s[i]-a];if(…

【2025保姆级】Open-WebUI五大功能区首曝!第一篇:管理员面板深度拆解,手把手讲解配置AI管理中枢

【2025保姆级】Open-WebUI五大功能区首曝&#xff01;第一篇&#xff1a;管理员面板深度拆解&#xff0c;手把手讲解&配置AI管理中枢 一、引言二、用户2.1 概述2.2 权限组 三、竞技场评估四、函数五、设置5.1 通用5.1.1 身份验证5.1.2 功能 5.2 外部连接5.2.1 OpenAI API5.…

docker上传镜像

向Docker Hub上传镜像&#xff0c;需要按照一定的步骤进行操作。 Docker Hub是Docker的官方镜像仓库&#xff0c;用户可以在其中存储、管理和部署Docker镜像。要向Docker Hub上传镜像&#xff0c;请遵循以下步骤&#xff1a; 创建Docker Hub账户&#xff1a; 访问Docker Hub官…

(十三)深入了解AVFoundation-采集:视频帧采集与实时滤镜处理

引言 在移动应用中&#xff0c;实时视频处理已成为视频拍摄、短视频、直播、美颜相机等功能的核心技术之一。从简单的滤镜叠加&#xff0c;到复杂的美颜、AR 特效&#xff0c;背后都离不开对每一帧图像的高效采集与处理。在前几篇文章中&#xff0c;我们已经实现了基本的视频采…

数字政务安全实战:等保2.0框架下OA系统防护全解析

近期在Python基础教学领域深入钻研函数机制、数据结构优化等内容时&#xff0c;深刻意识到信息安全作为技术基石的战略价值。在政务数字化转型浪潮中&#xff0c;Python凭借其高扩展性与丰富的安全生态库&#xff0c;成为构建政务OA系统安全防护体系的核心工具。本文将以等保2.…

Pytorch项目实战-2:花卉分类

一、前言 在深度学习项目中&#xff0c;数据集的处理和模型的训练、测试、预测是关键环节。本文将为小白详细介绍从数据集搜集、清洗、划分到模型训练、测试、预测以及模型结构查看的全流程&#xff0c;附带代码和操作说明&#xff0c;让你轻松上手&#xff01; 二、数据集 …

React Flow 边事件处理实战:鼠标事件、键盘操作及连接规则设置(附完整代码)

本文为《React Agent&#xff1a;从零开始构建 AI 智能体》专栏系列文章。 专栏地址&#xff1a;https://blog.csdn.net/suiyingy/category_12933485.html。项目地址&#xff1a;https://gitee.com/fgai/react-agent&#xff08;含完整代码示​例与实战源&#xff09;。完整介绍…

java小结(一)

java&#xff08;上&#xff09; 模块一 1.JDK,JRE,JVM 知识点 核心内容 易混淆点 JDK定义 Java Development Kit&#xff08;Java开发工具包&#xff09;&#xff0c;包含开发所需全部工具 JDK包含JRE的关系容易混淆 JRE定义 Java Runtime Environment&#xff08;Jav…

ddns-go安装介绍-强大的ipv6动态域名解析神器-家庭云计算专家

ddns-go 是一款轻量级开源动态域名解析工具&#xff0c;专注于解决动态IP环境下的域名绑定问题&#xff0c;尤其适配IPv6网络环境。其核心功能包括&#xff1a; 1.IPv6动态解析&#xff1a;自动检测本地IPv6地址变化&#xff08;支持网卡、接口或命令获取&#xff09;&#xf…

Docker-mongodb

拉取 MongoDB 镜像: docker pull mongo 创建容器并设置用户&#xff1a; 要挂载本地数据目录&#xff0c;请替换此路径: /Users/Allen/Env/AllenDocker/mongodb/data/db docker run -d --name local-mongodb \-e MONGO_INITDB_ROOT_USERNAMEadmin \-e MONGO_INITDB_ROOT_PA…

WooCommerce缓存教程 – 如何防止缓存破坏你的WooCommerce网站?

我们在以前的文章中探讨过如何加快你的WordPress网站的速度&#xff0c;并研究过各种形式的缓存。 然而&#xff0c;像那些使用WooCommerce的动态电子商务网站&#xff0c;在让缓存正常工作方面往往会面临重大挑战。 在本指南中&#xff0c;我们将告诉你如何为WooCommerce设置…