- 博客(18)
- 收藏
- 关注
RSS订阅原创 vue+node.js手把手教你搭建一个直播平台（六）
hello，好久不见呀！最近都快把小羽忙傻了都，头发也不见了好几根，555。。。其实我也不想消失辣么久的，老铁们原谅小羽呗，常言道帅哥肚里能撑船，对吧~话说真的好久没写博客了，久到小羽都忘了原来写了些什么了，哈哈哈。本期主要讲websocket实时通讯接口，是不是很期待呀~对了，鲁迅先生曾经说过的一句话：你tm别费话了，赶紧进入正题！！！1.websocket接口相关在src/api/下新建socket.js文件。在src/api/index.js中引入user.js。/* * @Descr
2020-12-14 20:57:51
1372
4
原创 vue+node.js手把手教你搭建一个直播平台（五）
hello，好久不见呀！老铁们，国庆过去了，该开始敲代码啦！赶紧瞧过来，告诉你们一个秘密，小羽悄咪咪的更新了~不用怕，这节的内容比较简单，刚刚跟祖国母亲过完生日，脑子里还是想着怎么玩呢，哈哈哈！！！所以这节主要讲最常见的登录注册接口接入【狗头保命】1.api接口相关在src/api/modules新建user.js文件。在src/api/index.js中引入user.js。/* * @description: 用户接口 * @author: 小羽 * @lastEditors: 小羽
2020-10-15 09:18:11
494
原创 vue+node.js手把手教你搭建一个直播平台（四）
上一期，帅气的小羽给老铁们介绍了直播平台的项目的前端页面的初步切图，这期就让小羽带大家接入直播相关的api接口。敲黑板！敲黑板！敲黑板！重点来啦~1.api接口相关在src目录下个新建api文件夹，api下新建modules文件夹和index.js文件。其中index.js是我们api的统一入口文件，modules中则是存放我们各个api接口。在index.js中统一收集所有的api接口，然后再main.js中将api接口挂载到vue的原型上，以后再所有的.vue文件下，我们都可以直接通过this.$a
2020-10-15 09:17:00
2849
原创 vue+node.js手把手教你搭建一个直播平台（三）
上一期，帅气的小羽给老铁们介绍了直播平台的项目的前端框架的搭建，这期就让小羽带大家切图，没错啦，就是老铁们心心念念的切图啦。补充上期遗漏的内容但是在正式开启这期内容前，先补充点上期的内容配置全局less在assets文件夹下新增style/common.less@primary-color:#2d8cf0;.live-line{ height: 1px; background: #eeeeee;}修改vue.config.js如下/* * @description:
2020-09-13 13:16:09
996
原创 vue+node.js手把手教你搭建一个直播平台（二）
上一期，帅气的小羽给老铁们介绍了直播平台的项目的后端搭建，这期就让小羽带大家来搭建一下前端的框架。1.创建前端工程毫无疑问，搭建一个项目的框架，那第一步肯定是得创建一个工程啦。cmd命令，输入vue create mylive ，然后一直回车就好了。然后等待一小会，我们的初始化工程就创建完成啦。接着我们使用编辑器打开我们刚刚创建好的项目。不用我提醒了吧，vs code天下无敌。这就是我们刚刚创建的工程啦。下图是我们的项目目录。然后我们可以在cmd中输入npm run serve，然后通过提示就可
2020-09-09 10:50:46
1451
原创 vue+node.js手把手教你搭建一个直播平台（一）
上一期，帅气的小羽给老铁们简单介绍了项目的功能以及需要用到的一些环境和工具，现在就让我们荡起双桨，撸起袖子，准备开始敲代码啦！！！先甩锅，小羽主要是搞前端开发的，所以这期张主要讲后端内容，可能讲的不太好，后端大佬求放过。有错误之处，请大佬们指出哈~后端项目初始化1.全局安装express脚手架额，这个应该是属于准备工作的。给忘记了，那就凑合放在这里吧，别打我，我知道错了，但我就是不改【狗头保命】cnpm install -g express-generator 2.新建工程打开cmd，cd
2020-09-07 09:52:28
2744
3
原创 vue+node.js手把手教你搭建一个直播平台（前言+准备工作）
vue+node.js手把手教你搭建一个直播平台（前言+准备工作）前言在前端，我猜小伙伴们做的第一个项目大多数都是跟购物商城/论坛相关的吧。帅气的小羽也不例外，大学期间的第一个项目也是商城，嗯，我们都一样。是不是有一种很腻的感觉，完全没有新意？那现在就让帅气的小羽带你走出这种感觉，手把手教你搭建一个直播平台！！！准备工作1.基础相关以下条款默认聪明的你是已经掌握的啦！！！（1）html5（2）css3（3）javascript（4）mysql数据库以及基础的增删改查语法（5）vue.js
2020-09-05 15:10:33
1212
1
原创 聊聊json数组的去重和排序
首先，我们得明确一下json数组是什么呢？像[{key:1,data:1},{key:2,data:2}]这样得数组，每一个值都是由json对象组成得数组，我们可以称为json数组。在进行json对象操作前我们需要了解以下几点内容1.栈内存和堆内存在js引擎中对变量的存储主要有两种位置，堆内存和栈内存。栈内存主要用于存储各种基本类型的变量，包括Boolean、Number、String、U...
2020-05-05 00:00:02
856
原创 关于不区分大小验证字符串是否相同的思路
笔者最近在做验证码验证时碰到该问题。纵观各大平台，一般验证码都是由数字+字母组成的，在验证时会忽略字母的大小写。如果直接采用==来进行比较的话，可以发现这样会区分字母的大小写，因此不符合要求。于是笔者就踏入了不区分大小比较字符串的坑里，想了很久都没有找到好的方法。其实笔者进入了误区，我们为什么一定要不区分大小进行比较呢？我们难道就不能将字符串全部转换成大写或者小写再进行比较吗？这样一...
2019-02-02 20:13:51
270
原创 JQuery动态创建悬浮窗
最近笔者在开发时想做一个文字提示的效果，最简单的方法就是直接使用title属性，但是使用这个属性的话，则无法更改样式，不够美观，不符合要求，在百度上逛了一圈发现好像悬浮窗都是先固定好然后在隐藏起来，然后通过更改display达到隐藏显示的效果。如果这个悬浮窗是解析某个片段，而悬浮窗一直固定在一个地方，这样看来就不太合适了。先上效果图（title和动态创建悬浮窗）主要是通过onMouseOve...
2019-01-23 15:56:34
1914
原创 关于高德地图api的使用（一）
最近笔者的项目打算添加周边服务的模块，因此尝试使用了高德地图。先上预览图，打开的时候会自动定位（这里是使用了浏览器ip定位，pc端可能不准）。随意点击会生成一个蓝色的标记，并且自动搜索附近的美食服务。初始定位（浏览器ip定位）AMap.plugin('AMap.Geolocation', function() { var geolocation = new AMa...
2018-10-26 12:56:02
1917
原创 python九行代码搞定百度翻译
笔者最近在做一个前端的翻译功能，用到了百度翻译的api，不过每月都有200万字的翻译限制。所以就开始用python爬虫来尝试爬取一下百度的翻译。 先进入百度的翻译页面，网址 http://fanyi.baidu.com/translate。然后进入开发者模式（F12），切换成手机模式。因为PC端的web在post提交数据的时候会有2个我们不好获取的参数（其中一个是token），但是手机版...
2018-10-19 16:51:55
1204
原创 百度菜品识别sdk的使用（PHP）
最近笔者尝试使用了一下百度的菜品识别功能，sdk可以在官网下载。没什么好说得，直接上代码。<?phpheader('Access-Control-Allow-Origin:*');require_once 'AipImageClassify.php';// 你的 APPID AK SKconst APP_ID = ' ';const API_KEY = ' ';const S...
2018-10-12 14:46:32
1212
原创 html换行（文本+符号）
这是笔者在做评论模块时发现的一个问题，记录一下。通常笔者在做换行处理时，都是使用word-break:break-all;可是这次出现了一点问题，如下图。可以发现，多个感叹号连在一起则无法换行。原来笔者也没发现过这个问题，所以也有点懵。不过有问题了，我们还是得去解决的。不过笔者逛了一圈百度，貌似都没有提及到这个问题的解决方法，只能靠自己了。在查阅了一轮资料后，发现：normal 使用浏览器...
2018-10-08 16:11:14
14487
原创 css3动画效果
为了方便开发，笔者写了几个css3的动画效果，并用gulp压缩一下。直接引用class即可，目前适配了IE8~10，火狐以及谷歌。链接：https://pan.baidu.com/s/1RCVmRmwAEiMv-DUbRsSokw 密码：j2si。演示gif图使用代码<!DOCTYPE html><html> <head> ...
2018-08-13 11:27:09
1515
2
原创 webpack打包工具的安装和使用
1.什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。2.安装webpackwin+r，输入cmd然后回车，进入命令提示符。 这里我们使用npm来安装webpack。（需要安装node.js，还...
2018-06-21 17:20:08
1782
原创 Gulp前端自动化工具的用法
Gulp简介gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的...
2018-06-03 11:28:33
794
原创 我的React之路
学习React不是一蹴而就的事情，入门似乎也没那么简单。但我觉得这一切都是值得的。这是我在学习React中的一些心得，希望能够帮助到大家！预览这是一个简单的用户管理系统，拥有增加、删除、更改的功能。样式先从最简单的样式讲起吧React可以使用两种样式，一种是普通的css，一种是在React中定义的样式。普通的css样式，通过className=""来引用<!--普通css样式-->&...
2018-06-03 01:18:50
21131
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人