精华内容
下载资源
问答
  • 2.其中有个人信息的页面展示,获取cookie信息,判断用户是否登录,如果登录则显示内容,未登录则跳转到登录页面,所以个人信息的页面可以使用路由守卫搜索资料时有看到这种写法,就是经过判断后去改变的动态路由来...

    最近在写一个重构node社区的小项目,碰到了登录的问题,实现思路如下:

    1.获取用户表单信息,使用axios提交,提交成功后,把数据存在cookie,以便后续操作。

    2.其中有个人信息的页面展示,获取cookie信息,判断用户是否登录,如果登录则显示内容,未登录则跳转到登录页面,所以个人信息的页面可以使用路由守卫

    搜索资料时有看到这种写法,就是经过判断后去改变的动态路由来决定跳转到哪个组件,感觉稍显麻烦。

    3.退出操作,清除cookie

    可以把操作cookie的代码放到一个单独的src/utils/cookie.js文件,utils这个文件夹可以放一些工具类的文件

    cookie.js

    //获取cookie

    export function getCookie(name){

    var cookieName = encodeURIComponent(name) + "=",

    cookieStart = document.cookie.indexOf(cookieName),

    cookieValue = null;

    if (cookieStart > -1){

    var cookieEnd = document.cookie.indexOf(";", cookieStart);

    if (cookieEnd == -1){

    cookieEnd = document.cookie.length;

    }

    cookieValue = decodeURIComponent(document.cookie.substring(cookieStart

    + cookieName.length, cookieEnd));

    }

    return cookieValue;

    }

    //设置cookie

    export function setCookie(name, value, expires, path, domain, secure) {

    var cookieText = encodeURIComponent(name) + "=" +

    encodeURIComponent(value);

    if (expires instanceof Date) {

    cookieText += "; expires=" + expires.toGMTString();

    }

    if (path) {

    cookieText += "; path=" + path;

    }

    if (domain) {

    cookieText += "; domain=" + domain;

    }

    if (secure) {

    cookieText += "; secure";

    }

    document.cookie = cookieText;

    }

    //删除cookie

    export function delCookie(name, path, domain, secure){

    setCookie(name, "", new Date(0), path, domain, secure);

    }

    后面发现vue有一个关于操作cookie的插件js-cookie,安装一下就可以使用了

    例如

    import Cookie from 'js-cookie'

    const TokenKey='Admin-Token'

    export function getToken(){

    return Cookie.get(TokenKey)

    }

    export function setToken(token){

    return Cookie.set(TokenKey,token)

    }

    export function removeToken(){

    return Cookie.remove(TokenKey)

    }

    登录组件的login方法

    methods:{

    login(){

    axios.post('api/v1/accesstoken',{

    accesstoken:this.info

    })

    .then(

    res=>{

    const info=this.info;

    setCookie('accesstoken',this.info)

    setCookie('username',res.data.loginname)

    setCookie('userid',res.data.id)

    this.$router.push( {name:'myinfo',params:{user:res.data.loginname} } )

    }

    )

    .catch(

    err=>{

    alert(err)

    }

    )

    }

    }

    个人信息组件显示与否的判断

    beforeRouteEnter(to,from,next){

    if(to.meta.requireAuth){ //此组件需要登录

    if(getCookie('accesstoken')==null){

    next({

    path:'/login'

    })

    }else{

    next()

    }

    }else {

    next(); //否则不需要登录,直接进入路由

    }

    },

    退出操作

    //退出登录

    logout(){

    delCookie('userid') //名字要对应getCookie的值

    delCookie('accesstoken')

    delCookie('username')

    this.$router.push({

    path: "/login"

    })

    }

    其他操作

    例如点赞和评论等功能,也要判断用户是否登录

    展开全文
  • #先随便说说 先来看看长什么样子(动态图可能加载会慢一点): 先看怎么写,源码放在了github上本文最后会有链接可以做个参考。...卡片列表样式切换信息展示效果 如果你喜欢我就给我点个赞哟~

    #先随便说说

    先来看看长什么样子(动态图可能加载会慢一点):

    效果图

    先看怎么写,源码放在了github上本文最后会有链接可以做个参考。

    #HTML结构

    还是简单的HTML结构(我写的HTML结构都很简单哈哈)

    HTML结构

    //注意看图片中的文字。具体的样式自己随意发挥就好。

    这里有一个CSS的知识,就是background添加图片并且可以设置坐标,具体可以看看这篇文章CSS中背景图片定位方法,这个页面的右上角两个按钮就是用这个方法在一张图片上提取出来的。

    #简单的思路

    其实JavaScript的思路很简单,就是获取右上角的两个按钮,然后给按钮添加点击事件,当按钮点击后根据不同的按钮再结合当前信息展示形式的判断,对方框里的所有li重新定义一个样式就好辣~四不四很简单哈哈

    OK 获取这两个按钮:

    编写了一个getByClassName的一个函数可以用通过类名来获取元素,这个函数的编写可以参考前一篇文章《用原生JS写getByClassName方法》
    遵循一个原则最好不用id所以我没有用id去定义这两个按钮,这个建议也给所有共同学习前端的同学。PS:但是我在判断当前的时候用了id所以别喷我哈哈所以我还是渣渣

    ** 题外话,步入正题。**

    #正题-获取元素绑定事件

    var switchBar=document.getElementById('switch');//获取父元素
    var list=switchBar.getElementsByTagName('a')[0];//获取第一个a按钮-列表按钮
    var car=switchBar.getElementsByTagName('a')[1];//获取第二个a按钮-卡片按钮
    

    我们要编写个方法,然后点击这两个按钮的时候执行更换样式的方法。

    list.onclick=changeSwitchClass;
    car.onclick=changeSwitchClass;
    

    #正题-更换样式的方法

    好啦,我们现在只要写好这个方法就行了。
    有按钮被点击了,我们首先要知道是哪个按钮被点击了通过判断this.id执行不同的操作。看代码和详细的不能再详细的注释。PS:写注释是一个好习惯。

    //忘了说 con-big就是卡片样式 con-small是列表样式
    
    function changeSwitchClass(e){
      if(this.id=="btn-car-off"){
        //现在被点击的是卡片按钮,说明原来是小的列表
        //所以我们获取所有class为con-small的元素并且更改元素
        var itmes = getByClassName(all,"con-small");
    
        this.id="btn-car-on";//小图标有不同的背景图 卡片按钮的图标变亮
        list.id="btn-list-off";//同上 也就是列表按钮的图标变灰
    
        //接下来就是循环给所有的li更换class
        for (var i = itmes.length - 1; i >= 0; i--) {
          itmes[i].className = "con-big";
        }
      }else if(this.id=="btn-list-off"){
        //参考上面
        var itmes = getByClassName(all,"con-big");
        this.id="btn-list-on";
        car.id="btn-car-off";
        for (var i = itmes.length - 1; i >= 0; i--) {
          itmes[i].className="con-small";
        }
      }
    }
    

    OK,结束了,引入JS就OK咯

    #结束以及-Github链接

    我叫掏粪–个人博客

    这个小东西的源码在github的地址:卡片列表样式切换信息展示效果

    如果你喜欢我就给我点个赞哟~

    展开全文
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 需求:微信小程序客服带详情页 , 场景:一个人通过微信小程序接入微信客服,聊天后带上入口链接 ...button wx:if="{{store.show_...

    微信小程序开发交流qq群   173683895

       承接微信小程序开发。扫码加微信。

    正文:

    需求:微信小程序客服带详情页 ,

    场景:一个人通过微信小程序接入微信客服,聊天后带上入口链接

    效果图:

    写法:

          <button wx:if="{{store.show_customer_service==1}}" class="flex-grow-0 flex-y-center bar-bottom-btn" open-type="contact" send-message-title="商品" send-message-img="{{goods.pic_list[0].pic_url}}" send-message-path="/pages/goods/goods?id={{id}}" bindcontact='contact' show-message-card plain>
            <view>
              <image src="/images/icon-user-kf.png"></image>
              <text>客服</text>
            </view>
          </button>

     

    展开全文
  • 幻灯片信息-源码

    2021-02-13 04:25:50
    幻灯片信息 ISIS Nightingale上的Ist Nightziale导航,Castelfranco Veneto(TV)根据信息学(1A,1B,1C,2A,2B,2C),ramo professionale,anno scolastico 2020/2021
  • 暗紫信息介绍幻灯网页模板
  • 灰色FLASH幻灯片信息网页模板
  • 滚动幻灯片信息展示网页模板
  • 手风琴幻灯片信息介绍网页模板
  • 信息检索与文本挖掘幻灯片信息检索与文本挖掘幻灯片信息检索与文本挖掘幻灯片信息检索与文本挖掘幻灯片信息检索与文本挖掘幻灯
  • 主要介绍了Java修改PowerPoint幻灯批注信息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • elasticsearch查询某个索引分片信息

    万次阅读 2019-10-30 14:19:53
    elasticsearch6.8 ...通过下面的路径可以查询elasticsearch某个索引分片信息 http://xx.xx.xx.xx:9200/索引名称/_search_shards { "nodes": { "Q6i1duFYQLmJFIu812DQjQ": { "name": "node1", "ephemera...

    elasticsearch6.8

    通过下面的路径可以查询elasticsearch某个索引分片信息

    http://xx.xx.xx.xx:9200/索引名称/_search_shards

    {
        "nodes": {
            "Q6i1duFYQLmJFIu812DQjQ": {
                "name": "node1",
                "ephemeral_id": "Zaxg4gF1QweERCnY63t1fA",
                "transport_address": "172.26.0.4:9300",
                "attributes": {
                    "ml.machine_memory": "5312626688",
                    "ml.max_open_jobs": "20",
                    "xpack.installed": "true",
                    "ml.enabled": "true"
                }
            },
            "eGOZucwVSqSlivu7U4M15A": {
                "name": "node2",
                "ephemeral_id": "s6BOw2weR_CWJqIB9t8nxg",
                "transport_address": "172.26.0.3:9302",
                "attributes": {
                    "ml.machine_memory": "5312626688",
                    "ml.max_open_jobs": "20",
                    "xpack.installed": "true",
                    "ml.enabled": "true"
                }
            }
        },
        "indices": {
            "elk-nginx-20191029": {}
        },
        "shards": [
            [
                {
                    "state": "STARTED",
                    "primary": true,
                    "node": "Q6i1duFYQLmJFIu812DQjQ",
                    "relocating_node": null,
                    "shard": 0,
                    "index": "elk-nginx-20191029",
                    "allocation_id": {
                        "id": "hVy0KVIbSdSC7aitI453_A"
                    }
                },
                {
                    "state": "STARTED",
                    "primary": false,
                    "node": "eGOZucwVSqSlivu7U4M15A",
                    "relocating_node": null,
                    "shard": 0,
                    "index": "elk-nginx-20191029",
                    "allocation_id": {
                        "id": "1LEnZTSMQLmLC8-FXUMW4g"
                    }
                }
            ],
            [
                {
                    "state": "STARTED",
                    "primary": true,
                    "node": "eGOZucwVSqSlivu7U4M15A",
                    "relocating_node": null,
                    "shard": 1,
                    "index": "elk-nginx-20191029",
                    "allocation_id": {
                        "id": "pieh1viPT56eXlkZ7Ki4xg"
                    }
                },
                {
                    "state": "STARTED",
                    "primary": false,
                    "node": "Q6i1duFYQLmJFIu812DQjQ",
                    "relocating_node": null,
                    "shard": 1,
                    "index": "elk-nginx-20191029",
                    "allocation_id": {
                        "id": "0jTTLcL5T0in8_IHDSl4Yw"
                    }
                }
            ],
            [
                {
                    "state": "STARTED",
                    "primary": true,
                    "node": "Q6i1duFYQLmJFIu812DQjQ",
                    "relocating_node": null,
                    "shard": 2,
                    "index": "elk-nginx-20191029",
                    "allocation_id": {
                        "id": "OpQ5KMPQQRKPN3IoGfjaaQ"
                    }
                },
                {
                    "state": "STARTED",
                    "primary": false,
                    "node": "eGOZucwVSqSlivu7U4M15A",
                    "relocating_node": null,
                    "shard": 2,
                    "index": "elk-nginx-20191029",
                    "allocation_id": {
                        "id": "qNkggEgoRsSHsli4pgeoXw"
                    }
                }
            ],
            [
                {
                    "state": "STARTED",
                    "primary": false,
                    "node": "Q6i1duFYQLmJFIu812DQjQ",
                    "relocating_node": null,
                    "shard": 3,
                    "index": "elk-nginx-20191029",
                    "allocation_id": {
                        "id": "ag9IdGs6QrO4489j4eY1Vg"
                    }
                },
                {
                    "state": "STARTED",
                    "primary": true,
                    "node": "eGOZucwVSqSlivu7U4M15A",
                    "relocating_node": null,
                    "shard": 3,
                    "index": "elk-nginx-20191029",
                    "allocation_id": {
                        "id": "wnZSVqEkSgK3AC0Y6dVwfQ"
                    }
                }
            ],
            [
                {
                    "state": "STARTED",
                    "primary": false,
                    "node": "eGOZucwVSqSlivu7U4M15A",
                    "relocating_node": null,
                    "shard": 4,
                    "index": "elk-nginx-20191029",
                    "allocation_id": {
                        "id": "nCJp71GST96W5kK-JQK6mw"
                    }
                },
                {
                    "state": "STARTED",          //分片状态
                    "primary": true,                  //是否是主分片
                    "node": "Q6i1duFYQLmJFIu812DQjQ",          //所在elasticsearch节点
                    "relocating_node": null,
                    "shard": 4,                                                //分片号
                    "index": "elk-nginx-20191029",                 //索引名字
                    "allocation_id": {
                        "id": "rjY1Y3S7So-jZMhq6YmJ3w"
                    }
                }
            ]
        ]
    }

    nodes为该索引所在的所有elasticsearch实例,shards为该索引对应分片信息

     

    PS:对应elasticsearch官网地址https://www.elastic.co/guide/en/elasticsearch/reference/6.8/search-shards.html,把6.8切换为自身使用elasticsearch版本即可。

    展开全文
  • 这是一份互联网信息化幻相关的灯片模板。...关键词:互联网、信息化、移动通讯、电子邮件、即时通讯、IT科技幻灯模板,商务人士PPT背景图片,人物背景PPT模板下载,商务幻灯模板下载,.PPTX格式;
  • 信息熵的计算公式_知识卡片 信息

    千次阅读 2020-12-04 11:50:21
    前言:本文讲解了机器学习需要用到的信息论中关于信息熵的知识,并用代码演示如何计算信息熵和互信息信息熵 Information Entropy信息论中的熵(entropy)信息熵log(1/p)的图像如下,是单调递减函数,不确定性越大,...
  • 互联网信息化幻灯模板_精美学习课件ppt
  • 信息系统项目管理课程幻灯,有其中几个重要章节
  • 管理信息系统ERP1概论教学幻灯.ppt
  • [NFC] 读羊城通卡片信息

    千次阅读 2017-04-13 22:22:07
    学习开源项目NFCard,最新版源码以及几年前代码相比较,发现之前的版本可以支持读羊城通,而现在不再支持读羊城通卡信息,那定一个小目标。通过NFC读取羊城通卡片信息之余额和交易记录。 实现的效果如图: 目录 1...
  • 信息系统项目管理课程幻灯,有其中几个重要章节
  • 企业宣传制作的价格在几万到几十万甚至上百万不等,企业花费资金来制作宣传无非是推广自己的企业,让更多的周中来... 首先,可以将企业宣传上传到视频网站上,企业宣传依附于网络信息的高速流通,可以有...
  • sharding-sphere主要的配置有四类,一个是数据库读写分离,主备数据源配置,一个是数据表配置,一个是分规则配置。分别如下:类名介绍MasterSlaveRuleConfiguration主备数据源配置ShardingRuleConfiguration分...
  • 这是一款基于owl-carousel幻灯插件的人物信息展示jQuery幻灯特效。这个特效中有2个DEMO,它们通过Bootstrap的网格系统来布局,制作无限循环的人物自动展示效果。
  • Linux slabtop命令——显示内核缓存信息 Linux内核需要为临时对象如任务或者设备结构和节点分配内存,缓存分配器管理着这些类型对象的缓存。现代Linux内核部署了该缓存分配器以持有缓存,称之为。不同类型的...
  • 这是某软件公司关于中小学信息化管理系统项目汇报PPT; 整个幻灯设计的简洁大气。...关键词:信息化,软件,it,互联网,科技PPT模板下载,win8风格幻灯模板,项目汇报演示文稿幻灯,优秀PowerPoint作品欣赏;
  • 【题目描述】 铭铭将蛋糕送到四年级(1)班,班上的小朋友正在玩找数字卡片的游戏。铭铭想考考小朋友们,就随机抽出了N 张卡片,他让小朋友们数出这N 张卡片上每种数字各出现了多少次,数对了就奖励多一块蛋糕。...
  • 信息系统审计介绍-1幻灯每页(py模板) 安全审计
  • 《地理空间信息革命》第一集 《地理空间信息革命》第一集:介绍了全球定位系统(GPS),地理空间信息系统(GIS)和数字测绘和地理空间技术的历史和应用。 《地理空间信息革命》第二集 《地理空间信息革命》...
  • protected void setup(Context ... //只要众多合并文件中的第一个路径,通常会在combine的时候将处理的文件按某种逻辑合并作为一个分 Path firstPath = ((CombineFileSplit) context.getInputSplit()).getPath(0); }
  • 怎么用NFC手机读卡片信息

    千次阅读 多人点赞 2019-12-30 17:36:53
    下面是步骤: 1.获取管理权限:这个开发包里已经集成了,只需要调用一句代码就可以搞定,这个还是挺方便的。 PermissionUtil.grantNeedPermission(this); 2....private NfcAdapter mAdapter = nu...
  • 论文研究-带有信息有限预知的堵塞加拿大旅行者问题.pdf, 提出突发性堵塞下的实时路径选择问题即堵塞加拿大旅行者问题(regional blockages Canadian traveller ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,604
精华内容 5,841
关键字:

信息片