消息轮播js弹层效果

<div id="toast" style="position: fixed; z-index: 999; top: 10%; background: ; text-align: center; width: 100%; display:none;">
 <span id="toast_content" style="border-radius: 32px;background:rgba(0,0,0,.7);opacity: 0.9;padding: 8px 16px;font-size: 14px;color:#fff;"></span>
 </div>
 <script type="text/javascript">
 /* 消息提醒 */
 var area = ['北京', '广州', '郑州', '武汉', '珠海', '长沙', '淄博', '东莞', '昆山', '无锡', '阳江', '钦州', '天津', '厦门', '深圳', '株洲', '达州', '成都', '重庆', '北海', '福州', '梧州', '青海'];
 var person = ['赵先生', '吴先生', '高先生', '郑先生', '刘先生', '王先生', '刘先生', '李先生', '罗先生', '罗先生', '黄先生', '孙先生', '朱先生', '何先生', '朱先生', '白先生', '陈先生', '邓先生', '叶先生'];
 function showToast() {
 var areaIndex = Math.round(Math.random() * (area.length - 1));
 var personIndex = Math.round(Math.random() * (person.length - 1));
 $("#toast_content").text("来自" + area[areaIndex] + "的" + person[personIndex] + "购买了该产品");
 $("#toast").fadeIn();
 setTimeout("dismissToast()", 1500);
 }
 
 function dismissToast() {
 $("#toast").fadeOut();
 setTimeout("showToast()", 1500 + Math.round(Math.random() * 10000));
 }
 dismissToast();
</script>

抢购倒计时js特效

 

 

 

 

 

直接上代码示例

//html部分
<div data-v-a99540b0 class="time" >
 <span data-v-a99540b0></span><span data-v-a99540b0></span><span data-v-a99540b0></span>
</div>
//js部分
<script>
 let countDown = +'83017';
 let _int = setInterval(function(){
 let hours = Math.floor(countDown/60/60),
 minute = Math.floor((countDown - hours*3600)/60),
 second = countDown - (hours*3600 + minute*60),
 day = 0;
 _hours = ('00'+hours).slice(-2);
 _minute = ('00'+minute).slice(-2);
 _second = ('00'+second).slice(-2);
 let _cel = `<span data-v-a99540b0>${_hours}</span><span data-v-a99540b0>${_minute}</span><span data-v-a99540b0>${_second}</span>`;
 if(hours > 72){
 day = Math.floor(hours/24);
 hours = hours%24;
 _day = ('00'+day).slice(-2);
 _cel = `<span data-v-a99540b0>${_hours}</span><span data-v-a99540b0>${_minute}</span><span data-v-a99540b0>${_second}</span>`;;
 }
 if(day > 30){
 clearInterval(_int);return false;
 }
 $('.time').html(_cel);
 countDown--;
 },1000);
 </script>

[最近有点忙]vue多项目nginx部署,二级目录部署

【最近有点忙干货很多,慢慢来写】

有时候我们单页项目不一定要部署在根目录下,二级目录可能是您想要的,那么看下面步骤

1. 入口文件index.html文件修改

添加 <meta base=”/ weixin/”>

 

 

 

 

 

 

2. config/index.js文件修改

修改 assetsPublicPath: ‘/weixin/’

 

 

 

 

 

 

 

 

3.src/router/index.js文件修改

添加 base: ‘/weixin/’

 

 

 

 

最后 Nginx配置修改

server {
 listen 9900;
 server_name localhost;
 location /lend {
     try_files $uri $uri/ /weixin/index.html;
 }
 }

 

JS转换HTML转义符

刚用到,在这里记录一下

//去掉html标签
function removeHtmlTab(tab) {
   return tab.replace(/<[^<>]+?>/g,'');//删除所有HTML标签
}
//普通字符转换成转意符
function html2Escape(sHtml) {
   return sHtml.replace(/[<>&"]/g,function(c){return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];});
}
//转意符换成普通字符
function escape2Html(str) {
   var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
   return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
// &nbsp;转成空格
function nbsp2Space(str) {
   var arrEntities = {'nbsp' : ' '};
   return str.replace(/&(nbsp);/ig, function(all, t){return arrEntities[t]})
}
//回车转为br标签
function return2Br(str) {
   return str.replace(/\r?\n/g,"<br />");
}
//去除开头结尾换行,并将连续3次以上换行转换成2次换行
function trimBr(str) {
   str=str.replace(/((\s|&nbsp;)*\r?\n){3,}/g,"\r\n\r\n");//限制最多2次换行
   str=str.replace(/^((\s|&nbsp;)*\r?\n)+/g,'');//清除开头换行
   str=str.replace(/((\s|&nbsp;)*\r?\n)+$/g,'');//清除结尾换行
   return str;
}
// 将多个连续空格合并成一个空格
function mergeSpace(str) {
   str=str.replace(/(\s|&nbsp;)+/g,' ');
   return str;
}

Vue单页应用结合后台做第三方登录[QQ授权登录](二)

前言

第三方qq登录我们可以直接利用qq登录的JSdk很方便

文档说明:http://wiki.open.qq.com/wiki/website/JS_SDK%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E

示例代码文档:https://connect.qq.com/intro/login/jssdk-demo

流程

在vue入口index.html中头部引入qq的sdk,在其他页面钩子函数中即可使用qqskd的函数

qq登录流程比较简单,我就稍微说一下

1.在vue页面上点击qq登录跳转到授权页面

2.授权成功后进入回调页面

3.回调页面可以执行一下自己的逻辑,我这边回调页面弄得是后台页面,你也可以是前端的,回调中处理完自己逻辑后可以回跳回来

4.然后在页面中就可以检测到qq是否登录了,看下面代码

 

created(){
   this.test(this.code)
   this.testqq()
},
methods:{
   testqq(){
      if(QC.Login.check()){  //如果已登录
          //这里做自己逻辑处理
         });
      }

   }
}

Vue单页应用结合后台做第三方登录[微信扫一扫登录授权登录](一)

前言

在之前的mvc开发中,相信大家都也能很熟练的做出结合微信登录qq登录等的第三方登录,今天我这主要说一下前后端分离模式中的第三方登录流程

在说微信登录之前我首先跟大家说一下微信的access_token 在微信中access_token是有俩种的,大家一定要分别仔细,一个是网页授权获取到的access_token,这个token是一次性的,只能获取到一个微信用户信息,是与微信用户一对一的关系,而另外一个基础access_token是专门请求获取token接口拿到的,这个有效期是7200s,大家一定要区分开这俩个token.在今天所说的微信登录中

我首先用一幅图说明一下大致流程(扫一扫登录和微信内授权登录流程大致一样)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

网站应用微信登录开发指南

微信文档:

https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=f4f77621bb28701905b55092c32eab02b718d258&lang=zh_CN

扫一扫登录,大致流程我图中已经给出来了,其实这只是一个流程,并不是最简单的,只要你明白了,你也可以有你自己的流程

前端跳转到微信扫一扫界面

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

在回调的url中,我们可以拿到code,然后把这个code给前端,让前端拿着code去请求我们登录接口,然后成功直接返回登录信息前端直接保存即可

 

vue2 过滤器 | 过滤时间 Monent.js的使用

第一步:安装

npm install moment --save 

第二步:在main.js中引用

import moment from 'moment/moment'

第三步:在main.js中添加过滤器

Vue.filter('moment', function (value, formatString) {
    formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
    // return moment(value).format(formatString); // value可以是普通日期 20170723
    return moment.unix(value).format(formatString); // 这是时间戳转时间
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

第四步: 在vue页面中使用过滤器

<template>
  <div id="app">
      <div>
        {{ datetime | moment }}
      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      datetime: '1500799859'
    }
  }
}
</script>

elementUI Message 独立引入的用法

今天在做项目时候,用到了 elementUI 的 Message 组件。因为我是按需 import 引入的方法,结果按照原本的文档API代码不生效。

查看文档之后有俩种引入方法:

全局引入

import ElementUI from ‘element-ui’;

Vue.use(ElementUI);

按需引入

import { Button, Select } from ‘element-ui’;

Vue.use(Button)

Vue.use(Select)

简答来说,如果是全局引入的话,就可以直接使用this.$message,但是按需引入的话能不能像全局引入一样用 this.$message 呢?

问题原因及解决:

查看下 element-ui/package/message/index.js 的实现方法,结果发现:

import Message from './src/main.js';
export default Message;

直接返回了。

而其他的组件,一般都是有 install 方法供Vue来操作的。

知道问题所在就好解决了,给 Message 添加 install 方法就行了。

// 和其他组件一样,一并引入
import {Button, Message} from 'element-ui'

// 在调用 Vue.use 前,给 Message 添加 install 方法
Message.install = function (Vue, options) {
  Vue.prototype.$message = Message
}

// 和所有组件一样,一并进行use
Vue.use(Button)
Vue.use(Message)

当然,也可以不用 Vue.use 来实现,比如直接写在 Vue 实例上:

// 和其他组件一样,一并引入
import {Button, Message} from 'element-ui'

Vue.use(Button)

// 将 Message 直接挂在 Vue 实例上
Vue.prototype.$message = Message