暂时未有相关云产品技术能力~
第一步,进入host文件sudo vim /etc/hosts第二步,进入编辑模式按E键,然后回车。第三步,启动编辑模式按I键,启动编辑模式。第四步,把以下命令添加到host文件内使用光标移动到空白处,复制以下命令,粘贴到空白处。# Github 151.101.185.194 github.global.ssl.fastly.net 140.82.114.4 github.com 151.101.112.133 assets-cdn.github.com 151.101.184.133 assets-cdn.github.com 185.199.108.153 documentcloud.github.com 192.30.253.118 gist.github.com 185.199.108.153 help.github.com 192.30.253.120 nodeload.github.com 151.101.112.133 raw.github.com 23.21.63.56 status.github.com 192.30.253.1668 training.github.com 192.30.253.112 www.github.com 151.101.13.194 github.global.ssl.fastly.net 151.101.12.133 avatars0.githubusercontent.com 151.101.112.133 avatars1.githubusercontent.com注意: 目前都是本地hosts配置了github.com的ip地址,如果访问github失败,或者访问网速慢,可能就是github的ip地址换了或者ip地址丢包严重。可以通过ping github.com 查看时长以及丢包率。如果需要修改github ip地址,可以通过github.com.ipaddress.com ,了解当前github.com的ip地址。第五步,退出编辑模式按esc键。第六步,保存并退出host文件键入以下命令。:wq第七步,刷新DNS键入以下命令。dscacheutil -flushcache第八步,测试github网址github.com/
前言今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!线上地址体验基于vue3.0和vue-vam-video,我开发了一款在线视频播放器。网址:https://www.maomin.club/site/videoplayer/源代码:https://github.com/maomincoding/videoplayer插件一览界面简约可配置流畅播放支持Vue2和Vue3支持m3u8格式支持多种事件NPM地址https://www.npmjs.com/package/vue-vam-video安装键入命令,即可安装。npm install vue-vam-video源码地址欢迎star!https://github.com/maomincoding/vue-vam-video配置参数properties: 视频属性videoStyle: 视频样式controlsConfig: 视频控制设置事件事件名称如何触发play媒体收到开始播放的请求pause暂停canplay播放可以开始ended媒体播放过一次就停止了waiting暂停播放以下载更多数据canplaythrough播放可以继续,不应中断。读取状态为3error下载过程中发生网络错误volumechangevolume或muted属性的值已更改emptied网络连接中断ratechange媒体播放速率更改empty发生错误,阻止媒体下载seeking播放已移动到新位置timeupdate当前时间非常规或意外更改stalled浏览器试图下载,但尚未收到数据abort下载中断案例<template> <div id="app"> <vam-video :properties="videoOption.properties" :videoStyle="videoOption.videoStyle" :controlsConfig="videoOption.controlsConfig" @play="playVideo" @canplay="canplayVideo" @pause="pauseVideo" ></vam-video> </div> </template> <script> import VamVideo from "vue-vam-video"; export default { name: "App", components: { VamVideo }, data: () => ({ videoOption: { properties: { poster: require("./assets/logo.png"), src: // "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/2A1343EFA/v3/6CC21C811065945606293295744/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", "https://tv.youkutv.cc/2019/11/12/mjkHyHycfh0LyS4r/playlist.m3u8", preload: "auto", // loop: "loop", // autoplay:"autoplay", // muted:true }, videoStyle: { // width: "1200px", // height: "600px", }, controlsConfig: { fullScreenTit:"全屏", EscfullScreenTit:"退出全屏", speedTit:"倍速", yinliangTit:"音量", jingyinTit:"静音", playTit:"播放", pauseTit:"暂停", fullScreen:true, speed:true, listen:true } }, }), methods:{ playVideo(){ console.log("play"); }, pauseVideo(){ console.log("pause"); }, canplayVideo(){ console.log("canplay"); } } }; </script>
授权登录<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo" class="fix">登录</button>//index.js //获取应用实例 var APPID ='xxx' var SECRET = 'xxx' const app = getApp() Page({ data: { list:[], userInfo:null }, //事件处理函数 onGotUserInfo:function (e) { if (e.detail.userInfo != undefined && app.globalData.isok == false) { console.log(e.detail.userInfo) wx.login({ success: function (data) { console.log('获取登录 Code:' + data.code) var postData = { code: data.code }; wx.request({ // url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + APPID + '&secret=' + SECRET + '&js_code=' + postData.code + '&grant_type=authorization_code', url: 'https://m.renyiwenzhen.com/rymember.php?mod=xcxlogin&code=' + postData.code + '&nickname=' + e.detail.userInfo.nickName, data: {}, header: { 'content-type': 'application/json' }, success: function (res) { // openid = res.data.openid //返回openid console.log(res.data); wx.setStorage({ key: "unionid", data: res.data.unionid }) wx.navigateTo({ url: '../archives/archives' }) }, fail: function () { console.log('1'); } }) }, fail: function () { console.log('登录获取Code失败!'); } }) } else if (app.globalData.isok==true) { wx.navigateTo({ url: '../archives/archives' }) } }, onLoad: function () { var that =this wx.request({ url: 'https://m.xxx.com/xcx_ajax.php?action=yimiaolist', //仅为示例,并非真实的接口地址 method: 'post', header: { 'content-type': 'application/json' // 默认值 }, success(res) { console.log(res.data) that.setData({ list: res.data }) } }) if (app.globalData.userInfo) { //获取用户信息是一个异步操作,在onLoad函数加载的时候app.js中的onLaunch可能还没有加载,所以需要判断是否获取成功 this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUser) { //判断canIUser的值是否为true,实则在判断微信小程序版本是否支持相关属性 app.userInfoReadyCallback = (res) => { // userInfoReadyCallback:userInfo的回调函数,声明一个回调函数,将回调函数传给app.js,userInfo加载完成后会执行这个回调函数,这个回调函数会将获取的getUserInfo的结果直接传回来 // 在app.js中获取用户信息之后调用这个函数,结果放在函数的参数中 this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { wx.getUserInfo({ //在老的版本中是可以直接调用授权接口并获取用户信息 success: (res) => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } } })每次检查是否授权//app.js App({ globalData: { userInfo: null, isok:false, unionid:null }, onLaunch: function () { /* 已授权之后,自动获取用户信息 */ // 判断是否授权 wx.getSetting({ success: (res) => { //箭头函数为了处理this的指向问题 if (res.authSetting["scope.userInfo"]) { console.log("已授权"); // 获取用户信息 wx.getUserInfo({ success: (res) => { //箭头函数为了处理this的指向问题 this.globalData.isok=true var that =this console.log(res.userInfo); //用户信息结果 wx.getStorage({ key: 'unionid', success(res) { that.globalData.unionid=res.data } }) this.globalData.userInfo = res.userInfo; if (this.userInfoReadyCallback) { //当index.js获取到了globalData就不需要回调函数了,所以回调函数需要做做一个判断,如果app.js中有和这个回调函数,那么就对这个函数进行调用,并将请求到的结果传到index.js中 this.userInfoReadyCallback(res.userInfo); } } }) } else{ console.log("未授权"); wx.removeStorage({ key: 'unionid' }) } } }) } })
安装iTerm2下载地址下载完呢,是一个安装包,双击打开就自动解压,打开解压后的程序就可以了。配置自动登录远程服务器打开呢,是一个命令行窗口,按下快捷键command + , 打开 Preferences窗口如下图所示,我添加了一个名叫maomin的选项栏,你也可以直接用Default,不过我推荐还是自己创建一个。好,我们先不管选项栏怎么配置,先跟着我,写一个脚本。取名server.sh(名字你随便起,推荐使用英文名,还有后缀是sh)。#!/usr/bin/expect set timeout 30 spawn ssh -p [lindex $argv 0] [lindex $argv 1]@[lindex $argv 2] expect { "(yes/no)?" {send "yes\n";exp_continue} "password:" {send "[lindex $argv 3]\n"} } interact好,写完了,我们放在那呢?打开自带的命令行工具。1、进入.ssh目录。cd .ssh2、新建一个名叫server.sh文件,文件名不一定跟我一样。touch server.sh3、编辑server.sh。vi server.sh4、按下i 进入插入模式,复制我上面写的脚本。然后按下Esc退出插入模式。 5、输入:wq 退出编辑。好了,然后我们去配置刚才的选项栏吧!我们直接跳到Command项。我们选择Command,然后在右边的框中,填入/bin/zsh在Send text at start 中填写,这里我用A、B、C、D分别代替要填的内容,别直接复制啊,哈哈。要不会出错,要注意他们之间要有空格哦!A 是端口号,一般是22。B 是用户名,一般是root。C 是服务器IP地址。D 是服务器密码。~/.ssh/server.sh A B C D完成了。以后打开iTerm2时,按下command + o,打开Profiles窗口,双击选项就可以了。就会自动登录了。好了,就这样吧!拜拜
前言我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下。第一步,购买云直播服务首先,你必须去阿里云或者腾讯云注册一个直播服务。也花不了几个钱,练手的话,几十块钱就够了。这里我拿阿里云举例,购买完了,配置好推流域名跟播流域名,下面我们将进行地址生成。记住下面生成的地址,下面会用到。第二步,下载本地推流工具obsproject.com/第三步,设置OBS在第一步中图片底部有推流地址,需要注意,分为两部分填入下方图所示。在AppName字段 为分界线分为两部分。输入完毕,点击确定,就好了。第四步,开启推流在OBS右方有个开启推流工具,第一次点开你会觉得黑屏,那是你没有 选择直播画面,在来源选项中,点击加号,选择对应来源,我这里选择的是显示器捕获。第五步,写代码安装hls.jsnpm i hls.js -S安装dplayer,你可以进入官网,配置更加丰富的api。npm i dplayer -S<!-- 现场课堂 --> <template> <div class="center"> <div class="live"> <div id="dplayer"></div> </div> </div> </template> <script> /* 我这里使用的是m3u8流,你们也可以选择其他方式,dplayer官网都有详细介绍。 */ let Hls = require('hls.js'); import DPlayer from 'dplayer'; export default { name: "Live", methods: { // 直播 live(){ const dp = new DPlayer({ live:true, container: document.getElementById('dplayer'), video: { url: 'https://live.carvedu.com/a/b.m3u8?auth_key=1589281526-0-0-02d0913b6a725efdb53f0deed823e418', // 示例地址 type: 'customHls', customType: { customHls: function (video, player) { const hls = new Hls(); hls.loadSource(video.src); hls.attachMedia(video); }, }, }, }); } }, mounted() { this.live(); }, }; </script> <style scoped> #dplayer{ width: 100%; height: 500px; } </style>结语以下为效果图:
1.下载mysql的repo源wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm2.安装mysql-community-release-el7-5.noarch.rpm包sudo rpm -ivh mysql-community-release-el7-5.noarch.rpm3.安装mysqlsudo yum install mysql-server根据提示安装就可以了,不过安装完成后没有密码,需要重置密码4.重置mysql密码mysql -u root登录时有可能报这样的错:ERROR 2002 (HY000): Can‘t connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock‘ : 使用下面的命令:sudo chown -R root:root /var/lib/mysql5、重启mysql服务service mysqld restart6、接下来登录重置密码mysql -u root //直接回车进入mysql控制台 mysql > use mysql; mysql > update user set password=password('123456') where user='root'; mysql > exit;
cd /etc/nginx/vim nginx.confserver { listen 80 default_server; listen [::]:80 default_server; server_name 域名; listen 443 ssl; root /usr/share/nginx/html; ssl_certificate cert/1_www.maomin.club_bundle.crt; ssl_certificate_key cert/2_www.maomin.club.key; ssl_session_timeout 5m; # Load configuration files for the default server block. include /etc/nginx/default.d/*.conf; location / { root /root/www/; index index.html index.htm; } location /chat/ { proxy_pass http://内网:3001/; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /upload/ { proxy_pass http://内网:8083/; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } }
第一步,在utils文件夹里新建一个filter.wxs文件var replaceStar = function (index) { var a switch (index) { case '1': a = '出生时' break; case '2': a = '1月龄' break; case '3': a = '2月龄' break; case '4': a = '3月龄' break; case '5': a = '4月龄' break; case '6': a = '5月龄' break; case '7': a = '6月龄' break; case '8': a = '8月龄' break; case '9': a = '9月龄' break; case '10': a = '1岁6月龄' break; case '11': a = '2岁' break; case '12': a = '3岁' break; case '13': a = '4岁' break; case '14': a = '6岁' break; } return a; } module.exports = { replaceStar: replaceStar }第二步,在需要的页面下使用<wxs src="../../utils/filter.wxs" module="filter" /> <view class="time">{{filter.replaceStar(index)}}</view>
tab栏可以滑动,切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度。下面是代码html<template> <view> <scroll-view class="scroll1" scroll-x="true"> <view :class="currentTab==index ? 'select' : ''" :data-current="index" @click="swichNav" v-for="(item,index) in scoll" :key='index'>{{item.txt}} </view> </scroll-view> <swiper :current="currentTab" @change="bindChange" class='swp' :style="{height:aheight?aheight+'px':'auto'}"> <swiper-item> <view class="list-item"> <view class="list" v-for="(item,index) in list" :key='index'> <view class="list-img"> <image :src="item.imgb" mode=""></image> </view> <view class="list-con"> <view>{{item.tit}}</view> <view class="list-foot"> <view> <image src="../../static/images/user.png" mode="" class="user"></image> <view class="username">{{item.user}}</view> </view> <view> <image src="../../static/images/love.png" mode="" class="like"></image> <view class="likenum">{{item.like}}</view> </view> </view> </view> </view> </view> </swiper-item> <swiper-item>玻尿酸</swiper-item> <swiper-item>水光针</swiper-item> <swiper-item>眼部</swiper-item> <swiper-item>鼻部</swiper-item> <swiper-item>瘦身塑型</swiper-item> </swiper> </view> </template>js<script> export default { data() { return { currentTab: 0, aheight: '', scoll: [{ txt: '精选' }, { txt: '玻尿酸' }, { txt: '水光针' }, { txt: '眼部' }, { txt: '鼻部' }, { txt: '瘦身塑型' }], } } onShow(){ // 动态获取滑动页面高度 const query = uni.createSelectorQuery().in(this); query.select('.list').boundingClientRect(data => { this.aheight = data.height }).exec(); }, methods: { // 滑动页面同步tab栏 bindChange: function(e) { this.currentTab = e.detail.current }, //点击tab切换 swichNav: function(e) { var that = this; if (this.currentTab === e.target.dataset.current) { return false; } else { this.currentTab = e.target.dataset.current } } } } <script>css<style scoped lang="less"> .scroll1 { width: 100%; white-space: nowrap; padding: 25rpx 0; & view { white-space: normal; display: inline-block; } & view:before { content: '|'; color: #f4f4f4; margin: 0 30rpx; } & view:first-child:before { display: none; } .select { color: #fb6583; } } .list-item { overflow: hidden; margin-left: -1%; .list { float: left; width: 48%; margin:20rpx 0 0 1%; border: solid 1px #eaeaea; background-color: #ffffff; border-radius: 12rpx; .list-img { image { object-fit: fill; width: 100%; border-top-left-radius: 12rpx; border-top-right-radius: 12rpx; height: 364rpx; } } .list-con { padding: 15rpx; .list-foot { margin-top: 20rpx; display: flex; justify-content: space-between; align-items: center; &>view { font-size: 26rpx; display: flex; align-items: center; } .username { color: #999999; margin-left: 10rpx; width: 150rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user { width: 50rpx; height: 50rpx; } .likenum { color: #333333; margin-left: 10rpx; } .like { width: 28rpx; height: 28rpx; } } } } } </style>
最近在使用Element ui 自定义主题时,遇到了问题,就是一直提示primordials is not defined。简言之,就是node版本的问题。所以需要降低node版本。卸载:1、卸载cnpmnpm uninstall cnpm -g2、卸载vue-clinpm uninstall @vue/cli -g3、卸载nodejs和删除文件C:\Program Files (x86)\nodejs C:\Program Files\nodejsC:\Users\Administrator\AppData\Roaming\npm C:\Users\Administrator\AppData\Roaming\npm-cache安装:1、安装稳定版nodehttps://nodejs.org/download/release/v11.15.0/node-v11.15.0-x64.msi2、安装淘宝镜像cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org3、安装vue-clicnpm install @vue/cli -g4、进入项目文件删除 package-lock.json文件和node_modules文件夹5、编辑package.json文件删除两行"element-theme": "^2.0.1", "element-theme-chalk": "^2.13.0",6、重新安装依赖cnpm icnpm i element-theme -gcnpm i element-theme-chalk -D8、初始化全局变量文件et -i9、创建theme文件夹et10、在main.js引入import '../theme/index.css'
一、 接口:https://www.maomin.club/fy/get/ 复制代码二、线上实例:线上链接三、实例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script> <script> $.ajax({ type: "get", url: "https://www.maomin.club/fy/get/", dataType: "json", success: function (res) { var made = JSON.parse(res); var madeData = made.component; var data = madeData[0]; console.log(data); } }) </script> </html> 复制代码四、文档:以下是主要参数,具体参数可以获取到数据之后,再详细探索。参数含义caseList国内省市疫情caseOutsideList国外市区疫情mapLastUpdatedTime更新时间summaryDataIn国内疫情summaryDataOut国外疫情trend数据趋势trumpet公告hotwords热词knowledges防疫知识gossips辟谣信息五、图例:
2022年05月