直播平台怎么搭建，老司机带你了解

article/2025/8/20 12:09:23

直播平台怎么搭建，老司机带你了解

1.创建前端工程

直播平台怎么搭建毫无疑问，搭建一个项目的框架，那第一步肯定是得创建一个工程啦。cmd命令，输入vue create mylive ，然后一直回车就好了。然后等待一小会，我们的初始化工程就创建完成啦。

 

image-20200905154457722

 

 

直播平台怎么搭建，第二步接着我们使用编辑器打开我们刚刚创建好的项目。不用我提醒了吧，vs code天下无敌。这就是我们刚刚创建的工程啦。下图是我们的项目目录。

 

image-20200905154740703

 

 

然后我们可以在cmd中输入npm run serve，然后通过提示就可以打开相关的网站，看到我们初始化的配置啦。

 

 

 

2.初始化工程

小伙伴们看到上面的那个界面了嘛？是不是跟我们的最终目标完全不一致，让我们来一场棒子的整容手术，将它慢慢的整成我们最终想要看到的样子。

2.1 初始化相关插件模块

替换package.json文件中的内容，这里的话我们是把所有的插件模块都安装了，后面就不用一个个的安装啦，方便快捷，值得信赖！接着就是cmd中输入cnpm install安装插件啦。

{"name": "mylive","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve --open","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"axios": "^0.20.0","core-js": "^2.6.5","feather-common": "^1.0.0","flv.js": "^1.5.0","less": "^3.12.2","less-loader": "^7.0.0","node-sass": "^4.13.1","sass-loader": "^8.0.2","socket.io-client": "^2.3.0","view-design": "^4.1.1","vue": "^2.6.10","vue-baberrage": "^3.1.0","vue-router": "^3.1.3","vue-video-player": "^5.0.2","vuex": "^3.5.1"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-service": "~4.5.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","node-sass": "^4.13.1","style-resources-loader": "^1.3.3","vue-template-compiler": "^2.6.11"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/essential","eslint:recommended"],"parserOptions": {"parser": "babel-eslint"},"rules": {}},"browserslist": ["> 1%","last 2 versions","not dead"]

2.2 初始化ui框架

人靠衣装，人靠马鞍。既让咱们的老铁们都这么帅啦，总不能让自己写的程序变丑了，那样就烘托不了咱们高贵的气质了。所以，我们采用了业界中比较高大上的iview。在main.js 中加入以下几行（在new Vue()之前）。

//引入iview
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);
复制代码

既然都引入了这么好看的ui组件，怎能不进行一番测试呢？在app.vue中添加button组件。然后打开网页就可以看到效果啦~

 

image-20200905163456890

 

 

 

image-20200905163515034

 

 

2.3 初始化axios

在src/assets/js中创建http.js，然后初始化axios。

2.2 初始化ui框架

人靠衣装，人靠马鞍。既让咱们的老铁们都这么帅啦，总不能让自己写的程序变丑了，那样就烘托不了咱们高贵的气质了。所以，我们采用了业界中比较高大上的iview。在main.js 中加入以下几行（在new Vue()之前）。

//引入iview
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);
复制代码

既然都引入了这么好看的ui组件，怎能不进行一番测试呢？在app.vue中添加button组件。然后打开网页就可以看到效果啦~

 

image-20200905163456890

 

 

 

image-20200905163515034

 

 

2.3 初始化axios

在src/assets/js中创建http.js，然后初始化axios。

/** @description: 公共方法* @author: 小羽* @lastEditors: 小羽* @Date: 2020-09-06 15:24:07* @LastEditTime: 2020-09-06 16:25:28* @Copyright: 1.0.0*/class Common{//生成len位随机字符串getCode(len){var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];var nums = "";for (var i = 0; i < len; i++) {var id = parseInt(Math.random() * 62);nums += chars[id];}return nums;}//获取url中的单个数据getUrlParam(name){var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if(r!=null)return decodeURI(r[2]); return null;}//获取url中的所有数据getUrlParams(){let url = window.location.search;  //url中?之后的部分console.log(window.location)url = url.substring(1);    //去掉?let dataObj = {};if(url.indexOf('&')>-1){url = url.split('&');for(let i=0; i<url.length; i++){let arr = url[i].split('=');dataObj[arr[0]] = arr[1];}}else{url = url.split('=');dataObj[url[0]]= url[1];}return dataObj;}//队列myQueue(){let items = []this.list = ()=>{return items}//向队列的尾部添加元素this.enqueue = (ele)=>{items.push(ele)}//从队列的头部移除元素this.dequeue = (ele)=>{items.shift()}//返回队列最前面的项this.front = ()=>{return items[0]}//返回队列最后一项this.end = ()=>{return items[items.length-1]}//返回队列是否为空this.isEmpty = ()=>{return items.length === 0}//返回队列的长度this.size = () =>{return items.length}//打印队列this.print = () =>{console.log(items.toString())}}
}// 防抖 (只执行最后一次点击)
export const Debounce = (fn, t) => {let delay = t || 500;let timer;return function () {let args = arguments;if(timer){clearTimeout(timer);}timer = setTimeout(() => {timer = null;fn.apply(this, args);}, delay);}
};//节流(先执行一次，过了t/1000秒后，有操作再执行执行第二次))
export const Throttle = (fn, t) => {let last;let timer;let interval = t || 500;return function () {let args = arguments;let now = +new Date();if (last && now - last < interval) {clearTimeout(timer);timer = setTimeout(() => {last = now;fn.apply(this, args);}, interval);} else {last = now;fn.apply(this, args);}}
};const common = new Common();
export {common}
复制代码

在main.js中，将common.js注入到vue原型中。

 

image-20200907170208521

 

 

2.5.3 引入config.js

config.js是一个配置文件主要用来配置生产环境和开发环境中的不用url

/** @description: * @author: 小羽* @github: https://github.com/lyff1006* @lastEditors: 小羽* @Date: 2020-09-01 20:20:07* @LastEditTime: 2020-09-07 15:24:43* @Copyright: 1.0.0*/
const env = process.env
const baseUrl = env.NODE_ENV==="development"?"http://127.0.0.1":"http://www.example.com"
const baseEnv = {env:env.NODE_ENV,//当前环境mode:env.VUE_APP_CURRENTMODE,//当前模式webUrl : env.VUE_APP_CURRENTMODE==="electron"?`${baseUrl}:8512`:"/webserve",socketUrl : {//barrage:`${baseUrl}:8511/barrage`,barrage:env.NODE_ENV==="development"?`${baseUrl}:8511/barrage`:`${baseUrl}/barrage`,},//livingUrl : env.NODE_ENV==="development"?`${baseUrl}:8000/live`:`${baseUrl}/live/live`livingUrl : env.NODE_ENV==="development"?`${baseUrl}:8000/live`:`${baseUrl}/live/live`}export default baseEnv

在main.js中将config.js注入到vue原型中。

 

image-20200907170258769

 

 

3.配置vue.config.js

在根目录下新建vue.config.js。用过vuecli3的老哥们应该都知道，这个文件是vuecli的默认文件，主要是用来配置与webpack相关的内容。

/** @description: * @author: 小羽* @github: https://github.com/lyff1006* @lastEditors: 小羽* @Date: 2019-10-09 21:55:04* @LastEditTime: 2020-09-07 15:31:10* @Copyright: 1.0.0*/function addStyleResource(rule) {rule.use('style-resource').loader('style-resources-loader').options({patterns: [path.resolve(__dirname, "./src/assets/style/common.less")]})
}module.exports = {//eslint开关lintOnSave: false,//生成环境是否生成map文件productionSourceMap: false,devServer: {host: '0.0.0.0',//代理配置proxy: {'/webserve': {target: 'http://127.0.0.1:8512',ws: true,changeOrigin: true,pathRewrite: {'^/webserve': ''}},},},chainWebpack: (config) => {//配置lessconst types = ['vue-modules', 'vue', 'normal-modules', 'normal']types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))},
}
复制代码

4.配置.gitinore

该文件是配置git相关的，主要提醒git，哪些文件需要上传到git仓库，那些文件不需要。非必须项，如果不使用git的老铁可以忽略哦~

.DS_Store
node_modules
/dist# local env files
.env.local
.env.*.local# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

上述就是直播平台怎么搭建的基本流程，小伙伴你学会了吗

本文转载自网络，感谢（小羽曜上进）的分享，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理


http://chatgpt.dhexx.cn/article/xBXeQC7r.shtml

相关文章

Nim问题和阶梯Nim（staircase nim）

Nim问题和阶梯Nim（staircase nim）

Nim问题和阶梯Nim&#xff08;staircase nim&#xff09; Nim问题&#xff1a; 有若干堆石子&#xff0c;每堆石子的数量都是有限的&#xff0c;合法的移动是“选择一堆石子并拿走若干颗&#xff08;不能不拿&#xff09;”&#xff0c;如果轮到某个人时所有的石子堆都已经被…
阅读更多...
B. Stairs(构造+规律寻找)Codeforces Round #671 (Div. 2)

B. Stairs(构造+规律寻找)Codeforces Round #671 (Div. 2)

原题链接&#xff1a; https://codeforces.com/contest/1419/problems 测试样例 input 4 1 8 6 1000000000000000000 output 1 2 1 30 Note In the first test case, it is possible to build only one staircase, that consists of 1 stair. It’s nice. That’s why the answ…
阅读更多...
《中英双解》leetCode Arranging Coins (排列硬币)

《中英双解》leetCode Arranging Coins (排列硬币)

Arranging Coins 难度简单182收藏分享切换为中文接收动态反馈 You have n coins and you want to build a staircase with these coins. The staircase consists of k rows where the ith row has exactly i coins. The last row of the staircase may be incomplete. Given th…
阅读更多...
house of cat

house of cat

2022强网杯 house of cat 跟着大佬的文章学习了一个新的利用手法 house of cat&#xff0c;原文链接&#xff1a;House of cat新型glibc中IO利用手法解析 && 第六届强网杯House of cat详解 利用条件&#xff1a; 1.能够任意写一个可控地址。 2.能够泄露堆地址和libc…
阅读更多...
我谈阶梯博弈(Staircase Nim)

我谈阶梯博弈(Staircase Nim)

今天在POJ做了一道博弈题..进而了解到了阶梯博弈...下面阐述一下我对于阶梯博弈的理解.. 首先是对阶梯博弈的阐述...博弈在一列阶梯上进行...每个阶梯上放着自然数个点..两个人进行阶梯博弈...每一步则是将一个集体上的若干个点( >1 )移到前面去..最后没有点可以移动的人输.…
阅读更多...
阶梯博弈（Staircase Nim）

阶梯博弈（Staircase Nim）

阶梯博弈&#xff01;&#xff01;&#xff01;下面阐述一下我对于阶梯博弈的理解.. 首先是对阶梯博弈的阐述...博弈在一列阶梯上进行...每个阶梯上放着自然数个点..两个人进行阶梯博弈...每一步则是将一个集体上的若干个点( >1 )移到前面去..最后没有点可以移动的人输.. 如…
阅读更多...
我谈阶梯博弈( Staircase Nim )

我谈阶梯博弈( Staircase Nim )

今天在POJ做了一道博弈题..进而了解到了阶梯博弈...下面阐述一下我对于阶梯博弈的理解.. 首先是对阶梯博弈的阐述...博弈在一列阶梯上进行...每个阶梯上放着自然数个点..两个人进行阶梯博弈...每一步则是将一个集体上的若干个点( >1 )移到前面去..最后没有点可以移动的人输.…
阅读更多...
Scala class和case class的区别

Scala class和case class的区别

在Scala中存在case class&#xff0c;它其实就是一个普通的class。但是它又和普通的class略有区别&#xff0c;如下&#xff1a; 　　1、初始化的时候可以不用new&#xff0c;当然你也可以加上&#xff0c;普通类一定需要加new&#xff1b; scala> case class Iteblog(name…
阅读更多...
hackerrank初级篇之staircase

hackerrank初级篇之staircase

题目说明&#xff1a; 示例代码&#xff1a; // staircase.cpp: 定义控制台应用程序的入口点。 // // n4 // # // ## // ### //#### // //#include "stdafx.h" #include <windows.h> #include <iostream> using namespace std;void staircase( int …
阅读更多...
Staircases

Staircases

Staircases Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/16384K (Java/Other) Total Submission(s) : 8 Accepted Submission(s) : 5 Problem Description One curious child has a set of N little bricks (5 ≤ N ≤ 500). From these bricks he buil…
阅读更多...
自旋锁是什么？

自旋锁是什么？

本文内容如有错误、不足之处&#xff0c;欢迎技术爱好者们一同探讨&#xff0c;在本文下面讨论区留言&#xff0c;感谢。 文章目录 定义特点和互斥锁比较适用场景 结论混合是什么意思&#xff1f; 结尾参考资料 定义 自旋锁 spin lock 下面内容摘自维基百科 在软件工程中&…
阅读更多...
【自旋锁】

【自旋锁】

1. 原理 PV操作原理 记录一个锁定状态(就是一个共享资源&#xff0c;基于原子操作) 2. 适用 1. 解决多cpu之间的竞态 2. 可以解决中断程序和普通程序之间的竞态(自旋锁可以用于中断上下文) 3. 加锁时间不宜过长 4. 获得自旋锁期间&#xff0c;不能进行调度(sleep) 例&#xff1…
阅读更多...
量子力学之电子自旋与四个量子数

量子力学之电子自旋与四个量子数

量子力学之电子自旋与四个量子数 前言一、电子自旋是什么&#xff1f;二、四个量子数1.主量子数 n2.角量子数*l*3.磁量子数ml4.自旋量子数ms 三.例题 前言 在笔者学习大学物理量子力学部分时&#xff0c;对此部分非常疑惑&#xff0c;弄明白之后写下来以供查看&#xff0c;水平…
阅读更多...
学习自旋电子学的笔记03：初试自旋波模拟

学习自旋电子学的笔记03：初试自旋波模拟

文章目录 前言一、初遇1.Figure S2 (a)2.图4-23.Figure S1 二、暂别1.FFT分析程序包&#xff1a;MFA简介2.使用练习MFA 三、重逢3.Figure S14.FIG.2 (a)5.FIG.2 (b)6.FIG.5 总结 _ _ 远行&#xff01; 前言 四月&#xff0c;过得四真的快啊&#xff0c;这是从入学到现在的第9个…
阅读更多...
深入理解CAS (自旋锁)

深入理解CAS (自旋锁)

文章目录 0. 导言1. 什么是CAS2. 保证原子操作2.1 CAS 实现自旋锁2.2 AtomicBoolean 中的CAS2.3 CAS使用场景 3. 锁的分类3.1 乐观锁3.2 悲观锁 4. CAS存在的问题4.1 ABA问题4.2 循环时间长开销大4.3 只能保证一个共享变量的原子操作 0. 导言 背景&#xff1a; 我们都知道&…
阅读更多...
CAS和自旋锁

CAS和自旋锁

什么是CAS CAS算法&#xff08;Compare And Swap&#xff09;&#xff0c;即比较并替换&#xff0c;是一种实现并发编程时常用到的算法&#xff0c;Java并发包中的很多类都使用了CAS算法。 CAS算法有3个基本操作数&#xff1a; 内存地址V旧的预期值A要修改的新值B CAS使用自…
阅读更多...
Java中的自旋锁，手动实现一个自旋锁

Java中的自旋锁，手动实现一个自旋锁

自旋锁 CAS是实现自旋锁的基础，CAS利用CPU指令保证了操作的原子性，已达到锁的效果。自旋是指尝试获取锁的线程不会立即阻塞，而是采用循环的方式去尝试获取锁， 当线程发现锁被占用时，会不断循环判断锁的状态，直到获取。这样的好处是减少线程上下文切换的消耗，缺点是循环…
阅读更多...
学习自旋电子学的笔记04：模拟自旋波在弯曲磁畴壁中传播

学习自旋电子学的笔记04：模拟自旋波在弯曲磁畴壁中传播

文章目录 前言零、笔记03中错误的补充改正1.保持电子的极化方向不变的原因2.Oxs_SpinXferEvolve类的额外补充说明3.时间演化器的时间步长相关补充说明 一、文章概述和要复现的微磁模拟1.文章概述2.要复现的微磁模拟 二、FIG.1三、 FIG.21. FIG.2(a-b)2. FIG.2(c-f) 四、 FIG.3五…
阅读更多...
CAS和自旋到底是一个概念吗？

CAS和自旋到底是一个概念吗？

问题: CAS是 compare and swap ,就是一个比较工作内存和主内存的值是否相同&#xff0c;相同的话&#xff0c;就用新值来替换这么一个操作。 但是&#xff0c;为什么好多地方都说这是自旋呢&#xff1f; 我理解比较一次的话&#xff0c;成功就返回true了&#xff0c;失败&am…
阅读更多...
CAS及CAS自旋

CAS及CAS自旋

1. CAS简介 比较并交换(compare and swap, CAS)&#xff0c;是原子操作的一种。在多线程没有锁的状态下&#xff0c;可以保证多个线程对同一个值的更新。 CAS可用于在多线程编程中实现不被打断的数据交换操作&#xff0c;从而避免多线程同时改写某一数据时由于执行顺序不确定…
阅读更多...
推荐文章

Copyright @ 2022~2023