如何在网页前端里可视化你的知识图谱
最近费尽千辛万苦构造了一份可以用（大概）的知识图谱，并且把要利用知识图谱做的领域命名实体识别和一些推荐的功能做成Web版的demo，顺带想实现一些可视化知识图谱的功能。

（凭啥知识图谱就只能在Neo4j里自嗨，不能来前端show一下，歧视吗(￢_￢)）

找了做前端图表展示的开源库，D3.js和Echarts都能做，我拿Echarts实现了一下功能，先看一下在现在项目里一个基于知识图谱查询的实际效果：

接下里看看如何的实现：

1. 首先在本地下载Echarts相关的js文件，在线引用也可以，html文件里如下引用：

 <script src="/static/js/echarts.common.min.js"></script>   
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>

<!-- 为ECharts准备一个具备大小的Dom -->
    <div class = "col-md-12">
        <div class="panel panel-default ">
            <header class="panel-heading">
                关系图 :
            </header>
            <div class = "panel-body ">
                <div id="graph" style="width: 100%;height:600px;"></div>
            </div>
        </div>
    </div>

data = [
        {name:'苹果',category:1,id:0},
        {name:'梨子',catagory:1,id:1},
        {name:'水果',category:2,id:2}
        ]
    links = [
        {source:0,target:2,category:0,value:'属于',symbolSize:10},
        {source:1,target:2,category:0,value:'属于',symbolSize:10}
    ]

var myChart = echarts.init(document.getElementById('graph'));

    option = {
        title: {
            text: ''
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        label: {
            normal: {
                show: true,
                textStyle: {
                    fontSize: 12
                },
            }
        },
        legend: {
            x: "center",
            show: false
        },
        series: [

            {
                type: 'graph',
                layout: 'force',
                symbolSize: 45,
                focusNodeAdjacency: true,
                roam: true,
                edgeSymbol: ['none', 'arrow'],
                categories: [{
                    name: '查询实体',
                    itemStyle: {
                        normal: {
                            color: "#009800",
                        }
                    }
                }, {
                    name: 'instance',
                    itemStyle: {
                        normal: {
                            color: "#4592FF",
                        }
                    }
                }, {
                    name: 'class',
                    itemStyle: {
                        normal: {
                            color: "#C71585",
                        }
                    }
                }],
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 12,
                        },
                    }
                },
                force: {
                    repulsion: 1000
                },
                edgeSymbolSize: [4, 50],
                edgeLabel: {
                    normal: {
                        show: true,
                        textStyle: {
                            fontSize: 10
                        },
                        formatter: "{c}"
                    }
                },
                data: data,
                links: links,
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 1.3,
                        curveness: 0,
                        color:"#262626",
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

————————————————
版权声明：本文为CSDN博主「游离态GLZ不可能是金融技术宅」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37477357/article/details/104857495

JavaWeb项目之实现用户注册、登录与预约功能

• 一：项目需求
• 二：总体概述
• 三：代码分析
• 1.登录功能
• 2.注册功能
• 3.预约功能

• 四：效果展示

• 一：项目需求

  1.实现注册与登录功能：
  要求用到验证码，登录后该出不再显示登录与注册，而是显示用户名。
  2.实现预约功能：
  实现“运动”与“学习”两方面的邀约功能，并将邀约数据保存到数据库中，数据库使用Mysql。
  运动可以邀约：篮球、足球、乒乓球等
  学习可以邀约：自习、辅导等

  二：总体概述

  在正式开始编码之前，需要先导入相关jar包并配置好相关的配置文件，同时也需要导入前端给的页面代码。接着是建立好相应的数据库结构，并初步构建好三层架构的想法思路。

  
  

三：代码分析

1.登录功能

web层

• 

• service层

• 

• dao层

• 

• 然后在这里写一下对于验证码处理和点击图片更换验证码功能的一些细节。
  如下图所示，为了保证servlet层能够正确接收到界面所展示的验证码信息，同时因为session对象是项目自生成的，所以我直接获取session对象并以类似于键值对的形式将页面验证码信息存入session中。

• 接下来是jsp页面对于验证码展示的一些处理

• 

• 

在这里，因为点击验证码更换操作需要用到js，所以我百度得到了上图这样一串代码。其中时间戳的作用是通过改变每次请求的时间参数来获得刷新效果，即改变url中的响应头信息。

2.注册功能
事实上，有了登录功能的实现，注册功能的代码与其都是大同小异的。最大的不同应该就是Dao层执行的操作不同

3.预约功能

预约功能的实现更是与注册功能的实现基本一致。所不同的应该是jsp页面对单选框输入的设置。

四：效果展示

首先在写代码之前我们需要理清如何穿插图片呢？



可以让所有图片都float：left，用一个大盒子装进所有图片，在用一个小盒子显示图片，溢出图片就hidden，之后以每张图片的宽度来scrollLeft.

可以给每张图片一个name/id，用循环遍历所有图片

可以用float:left,但是除了我要显示的图片外，其他图片都hidden，之后每当我需要某张图片时，我就把它制定到某位置

…

在这里，我将用第二种方法，因为它很直观明了，我要哪张图片我就调哪张图片。

HTML部分：在div里面我装了一张图片，name:0, 这是为了在刚打开的时候，我们的页面是有东西的而不是一片空白。其他部分都好理解，不理解的可在下方评论。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <link rel="stylesheet" href="轮播图.css" />
        <script src="轮播图.js">
        </script>
    </head>

    <body>
        <header>
            <div id="oImg">
                <!-- 轮流播放图片 -->
                <img id="insert" src="img/轮1.jpg" name="0"/>
            </div>
            <!-- 左右切换图片 -->
            <p id="left" οnclick="goBack()"></p>
            <p id="right" οnclick="goForward()"></p>

            <ul id="nav">
                <!-- 指定某张图片 -->
                <li id="1" οnclick="move(this)">1</li>
                <li id="2" οnclick="move(this)">2</li>
                <li id="3" οnclick="move(this)">3</li>
                <li id="4" οnclick="move(this)">4</li>
                <li id="5" οnclick="move(this)">5</li>
            </ul>
        </header>

    </body>

</html>

CSS：

* {
    margin: 0 auto;
    padding: 0 auto;
}

header {
    width: 100%;
    height: 680px;
    position: relative;

}

img {
    width: 100%;
    height: 680px; 
}   

#nav { 
    position: absolute;
    bottom: 5px;
    left: 30%;
}

#nav li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #ccc;
    font-size: 24px;
    border-radius: 9px;
    color: darkslategrey;
    font-family: 'Times New Roman', Times, serif;
    margin: 0 25px;
    float: left;
    cursor: pointer;
    list-style: none;
}

#nav li:hover {
    background: peru;
}

#left {
    width: 25px;
    height: 24px;
    left: 0;
    top: 50%;
    cursor: pointer;
    position: absolute;
    background: url(img/fx1.png);
}

#right {
    width: 25px;
    height: 24px;
    right: 0;
    top: 50%;
    cursor: pointer;
    position: absolute;
    background: url(img/fx2.png);
}

之后我们来看重中之重JS部分

JavaScript:

// 五张图片的url
var oImg1 = "img/轮1.jpg";
var oImg2 = "img/轮2.jpg";
var oImg3 = "img/轮3.jpg";
var oImg4 = "img/轮4.jpg";
var oImg5 = "img/轮5.jpg";
// 把5张图片存入一个数组
var arr = [oImg1, oImg2, oImg3, oImg4, oImg5];

window.onload = function() {
    //刚加载时第一张图片1号背景颜色
    document.getElementById("1").style.background = "peru";  
    run()

}

//轮播
function run() { 
    timer = setInterval(function() {
        //随机点数字时能接着变化 
        var pic = document.getElementById("insert").name;
        var shade = document.getElementById("insert");  

        //如果为最后一张图片则重新循环
        if (pic == 4) {
            pic = -1;
        }

        //点一个数字该数字背景颜色变化其余的不变
        var aLi = document.getElementsByTagName("li");
        for (var j = 0; j < aLi.length; j++) {
            aLi[j].style.backgroundColor = "#CCCCCC";
        } 

        var i = parseInt(pic);   

        document.getElementById("insert").src = arr[i + 1]; 

        document.getElementById("insert").name = i + 1; 

        //数字随图片变化
        switch (i) {
            case 0:
                var temp = '2';
                break;
            case 1:
                var temp = '3';
                break;
            case 2:
                var temp = '4';
                break;
            case 3:
                var temp = '5';
                break;
            case -1:
                var temp = '1';
                break;
        }
        document.getElementById(temp).style.background = "peru"   

    }, 5000)
}

//右箭头 
function goForward() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert"); 
    var aLi = document.getElementsByTagName("li");
    // 数字跟着图片一起变
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '2';
            break;
        case "1":
            var n = '3';
            break;
        case "2":
            var n = '4';
            break;
        case "3":
            var n = '5';
            break;
        case "4":
            var n = '1';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向右移动图片
    for (var j = 0; j < arr.length; j++) {
        if (j < 4) {
            if (temp == j) {
                oBox.src = arr[j + 1]; 
            }
        } else {
            if (temp == 4) {
                oBox.src = arr[0]; 
            }
        }
    } 
    // 轮到最后一张图片时返回第一张
    if (temp < 4) {
        oBox.name = parseInt(temp) + 1;
    } else {
        oBox.name = 0;
    }
}

//左箭头
function goBack() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert")
    var aLi = document.getElementsByTagName("li");
    // 图片移动时数字也跟着变
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '5';
            break;
        case "1":
            var n = '1';
            break;
        case "2":
            var n = '2';
            break;
        case "3":
            var n = '3';
            break;
        case "4":
            var n = '4';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向左移动图片 

    for (var j = 0; j < arr.length; j++) {
        if (j > 0) {
            if (temp == j) {
                oBox.src = arr[j - 1];
            }
        } else {
            if (temp == 0) {
                oBox.src = arr[4];
            }
        }
    }
    // 轮到第一张图片时返回最后一张
    if (temp > 0) {
        oBox.name = parseInt(temp) - 1;
    } else {
        oBox.name = 4;
    }
}

//指定图片
function move(num) { 
    var oBox = document.getElementById("insert");
    var temp = document.getElementById("insert").name;
    var aLi = document.getElementsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    document.getElementById(num.innerHTML).style.background = "peru"

    switch (num.innerHTML) {
        case "1":
            oBox.src = arr[0];
            oBox.name = 0;
            break;
        case "2":
            oBox.src = arr[1];
            oBox.name = 1;
            break;
        case "3":
            oBox.src = arr[2];
            oBox.name = 2;
            break;
        case "4":
            oBox.src = arr[3];
            oBox.name = 3;
            break;
        case "5":
            oBox.src = arr[4];
            oBox.name = 4;
            break;
    }
}

JavaScript部分我写的很详细，仔细看的话是可以看懂的，主要分3个重要部分：



用src来调用每张图片并给每张图片一个name，这样方便后面的重复使用

为下方的数字按钮匹配图片，点击1跳到第1张图片，点击2跳到第2张图片…因为我把所有的图片都存在了一个数组里，所以在匹配的时候要注意数组0位置才是数字1指定的图片

可以来回翻页，当到达最后一张图片时，我再点击下一张图片又能返回到第一张图片了，亦或者当我点击到第一张图片时，再上一张图片又回到第五张图片了

效果如下：




    


    

大家有问题可以在下方评论哦，看到了会及时回复哒！

————————————————
版权声明：本文为CSDN博主「weixin_43964414」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43964414/article/details/104844041

CSS介绍

整理完了HTML的笔记，接下来就是CSS了。我们可以使用HTML构建稳定的结构基础，而页面的风格样式控制则交给CSS来完成。网页的样式包括各种元素的颜色、大小、线形、间距等等，这对于设计或维护一个数据较多的网站来说，工作量是巨大的。好在可以使用CSS来控制这些样式，这将大大提高网页设计和维护的效率，并且使网页的整体风格很容易做到统一。



CSS概述

CSS是英文Cascading Style Sheet的缩写，中文译为层叠样式表，也有人翻译为级联样式表，简称样式表。它是一种用来定义网页外观样式的技术，在网页中引入CSS规则，可以快捷地对页面进行布局设计，可以的控制HTML标记对象的宽度、高度、位置、字体、背景等外观效果。

CSS是一种标识性语言，不仅可以有效的控制网页的样式，更重要的是实现了网页内容与样式的分离，并允许将CSS规则单独存放于一个文档中， CSS文件的扩展名为“css”。



CSS3

CSS3标准早在1995年就开始制订， 2001年提上W3C研究议程，但是，10年来CSS3可以说是基本上没有什么很大的变化，一直到2011年6月才发布了全新版本的CSS3，目前，许多浏览器都广泛支持CSS3。

CSS3是CSS技术的一个升级版本，CSS3语言将CSS划分为更小的模块，在朝着模块化的方向发展。以前的版本是一个比较庞大而且比较复杂模块，所以，把它分解成为一个个小的简单的模块，同时也加入了更多新的模块。在CSS3中有字体、颜色、布局、背景、定位、边框、多列、动画、用户界面等等多个模块。



CSS的基本用法

CSS的使用规则由两部分组成：选择器和一条或多条声明。其基本基本语法如下：

 选择器{ 属性1: 值; 属性2: 值; …
            属性n: 值; }

CSS的使用规则由两部分组成：选择器和一条或多条声明。其基本基本语法如下：

 选择器{ 属性1: 值; 属性2: 值; …  

     属性n: 值; } 



      



      

CSS属性

CSS的属性按照相关功能进行了分组，包含了字体、文本、背景、列表、动画等多个分组，这些属性的具体使用方法和示例将会在后续中提到。



在HTML文档中使用CSS的方法

根据CSS在HTML文档中的使用方法和作用范围不同，CSS样式表的使用方法分为三大类：行内样式、内部样式表和外部样式表，而外部样式表又可分为链入外部样式表和导入外部样式表。本节我们从四个分类来认识在HTML中使用CSS的方法。



行内样式

内部样式表

外部样式表

链入外部样式表

导入外部样式表

行内样式

行内样式（inline style），也叫内联样式，它是CSS四种使用方法中最为直接的一种，它的实现借用HTML元素的全局属性style，把CSS代码直接写入其中即可。

严格意义上行内样式是一种不严谨的使用方式，它不需要选择器，这种方式下CSS代码和HTML代码混合在一起，因此不推荐使用行内样式。行内样式的基本语法如下：

  <标记 style="属性:值; 属性:值; …">

内部样式表

当单个文档需要特殊的样式时，应该使用内部样式表。内部样式表是将样式放在页面的head区里，这样定义的样式就应用到本页面中了，内部样式表使用style标记进行声明，是较为常用的一种使用方法。其基本语法如下：

<head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            选择器1｛属性:值;…｝
            选择器2｛属性:值;…｝
            ……
            选择器n｛属性:值;…｝
        </style>
    </head>

<head>
        <meta charset="utf-8" />
        <title></title>
        <link href="样式表路径" rel="stylesheet" type="text/css" />
    </head>

<head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            @import url("样式表路径");
        </style>
    </head>

  <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            @import url("样式表路径");
        </style>
    </head>

结语

记录仓促，遗漏之处日后补充，如有错误或不足之处，还望指正

————————————————
版权声明：本文为CSDN博主「狗狗狗狗狗乐啊」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44122062/article/details/104848745

文章目录

前言

一、白屏时间过长分析

二、针对性优化

针对animate.css

针对mint-ui的优化

针对图片的优化

三、webpack打包优化与分析

webpack-bundle-analyzer打包分析

打包优化

四、优化后线上测试速度提升

五、优化总结

前言

最近在做项目时，测试提出了在App端的H5项目入口加载时间过长，白屏等待过久，需要优化的问题，于是着手开始分析：



项目技术栈：基于Vue全家桶做的一个移动端类似WebApp的项目，使用到的第三方库有：mint-ui, echarts，momentjs。

项目痛点：白屏时间过长

一、白屏时间过长分析

 通过访问线上环境，结合Chrome devtool中Network和Performance功能可以具体分析整个白屏的耗时主要在哪一块儿

Network耗时记录：

Performance性能面板

通过上面两张图分析，从浏览器发起请求到解析HTML完成这一过程中：
animate.css, mini-ui.css的请求耗时最长。
图片过大耗时。
二、针对性优化
针对animate.css
animate.css由于使用的是第三方CDN（国外服务器）所有请求时间相对较长，所以如果必须要用animate.css那么可以下载下来作为本地资源，也可以使用国内CDN，或者不用animate.css，而是针对使用到的几个CSS动画，直接自己造轮子
针对mint-ui的优化
由于mint-ui在原项目中使用的是全局引用的方式，这才导致打包资源过大，css单独请求耗时过长的问题，所以主要解决方案是按需引入mint-ui，借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

安装babel-plugin-component， 若已安装可忽略
修改 .babelrc (重点在plugins中)：

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime",["component", [
      {
          "libraryName": "mint-ui",
          "style": true
      }
  ]]],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

在main.js中引用使用到的插件

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import 'mint-ui/lib/style.min.css'  // 引用CSS
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: '#app',
  components: { App }
})

在使用的组件中改为按需引用组件

import Vue from 'vue'
 var Popup = Vue.component('mt-popup')
 var Swipe = Vue.component('mt-swipe')
 var SwipeItem = Vue.component('mt-swipe-item')
 export default {
    name:'my-component',
    components:{
     Popup,
     Swipe,
     SwipeItem
    }
}

此按需引入方案也同样适用于其他第三方UI组件库

针对图片的优化

图片小图通过webpack可以直接转为base64，而大图可以通过压缩或者换格式的方式来优化，这里推荐一个好用的图片压缩工具，工具：tinyPNG,如下是图片转换前后对比

三、webpack打包优化与分析

在完成了上述优化以后，下面着重关注下webpack打包后生成的文件大小，看还有没有可以优化的余地。由于项目中已经通过路由按需加载的方式来做了功能拆分，所以通过webpack打包后生成了很多分散的js文件，如下图：

通过上图分析可以知道打包后有几个文件相对较大，vendor.js都知道是第三方库文件打包形成，之前通过mint-ui按需加载会有一定的变化，后面记录。这里着重看另两个带hash的js文件，这里并看不出来它为什么这么大，所以这里需要用到webpack打包分析工具来做进一步的打包文件分析：webpack-bundle-analyzer

webpack-bundle-analyzer打包分析

它的作用如下图，即在打包后生成打包文件大小分析图，方便我们更加直观的看到文件大小和引用情况

• 这里先介绍下webpack-bundle-analyzer的简单使用

1. 安装

npm intall -D webpack-bundle-analyzer

2. 修改webpack.pro.conf.js. （这里由于只是用于生产打包分析且是通过vue-cli生成的项目框架）

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    // ...
    plugins:[
        new BundleAnalyzerPlugin()
    ]
}

运行npm run build，（webpack默认会在打包完成时生成分析图）

版权声明：本文为CSDN博主「Sophie_U」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Sophie_U/article/details/104840167

数据类型的转化（JavaScript）—自动转化和强制转化

这一周，我来分享一下在JavaScript中的数据类型转化。

首先我们要知道在JavaScript中的数据类型有什么？在这里我就不详细介绍了，帮你总结好了。

1.布尔类型-----Boolean---isNaN()
    用来判断一个变量是否为非数字的类型,是数字返回false，不是数字返回true。
 2.数值类型-----Number
    存储时,是按照二进制数值存储,输出时,默认都是按照十进制数值输出。
    在JavaScript中二进制前加0b/0B,八进制前面加0 ,十六进制前面加0x。
    如果需要按照原始进制数值输出，用格式为：
            变量名称.toString(进制) ；
    注意的是：S必须大写，将数值转化为字符串形式输出
    如：console.log( a.toString(2) )；将a转换成2进制的形式输出。
 3.字符串类型-----String
    JavaScript可以用单引号嵌套双引号, 或者用双引号嵌套单引号(外双内单,外单内双)
    字符串是由若干字符组成的,这些字符的数量就是字符串的长度。
    通过字符串的length属性可以获取整个字符串的长度。
        例子：var str = 'my name is xiaoming';
                  console.log(str.length);
          输出的结果是19。可以知道空格也代表一个字符。
 4.undefined
    表示没有数值-----应该有数值，但是现在没有数值
 5.null
    表示数值为空-----表示有数值，但是数值是“空”

上面就是数据类型的五种形式。那么它是如何转化呢？听我详细给你讲解。

在 JavaScript 程序中 , 变量中存储的数据类型没有限制，也就是在变量中可以存储任何符合JavaScript语法规范的数据类型。但是在 JavaScript 程序的执行过程中,往往需要变量中存储的数值是某种特定的数据类型,别的数据类型不行，此时就需要进行数据类型的转化。
————————————————
版权声明：本文为CSDN博主「什什么都绘」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39406353/article/details/104864224上面就是数据类型的五种形式。那么它是如何转化呢？听我详细给你讲解。

在 JavaScript 程序中 , 变量中存储的数据类型没有限制，也就是在变量中可以存储任何符合JavaScript语法规范的数据类型。但是在 JavaScript 程序的执行过程中,往往需要变量中存储的数值是某种特定的数据类型,别的数据类型不行，此时就需要进行数据类型的转化。
JavaScript中数据类型的转化,分为自动转化和强制转化：
        自动转化是计算机程序,自动完成的转化。
        强制转化是程序员,强行完成的转化
1.布尔类型的自动转化：

 在 执行 if 判断时 ,其他数据类型会自动转化为布尔类型
         其他类型转化为布尔类型的原则
   0   ''   undefined   null  NaN  这五种情况转化为false
          特别提醒 0.0  0.00000  都算是0 
 其他的所有都会转化为 true

2.字符串的自动转化：

  执行字符串拼接, +号的两侧，应该都是字符串类型，会将其他数据类型转化为字符串类型
        转化原则：
            //基本数据类型 / 简单数据类型------将数据数值直接转化为字符串 , 然后执行拼接操作
         布尔值 true  ---> 字符串 'true'
         布尔值 false ---> 字符串 'fasle'
         undefined ---> 字符串 'undefined'
         unll ---> 字符串 'null'
         数值 ---> 将数值解析转化为'对应的纯数字的字符串'
            // 引用数据类型 / 复杂数据类型
         数组 ---> 将 [] 中的内容,转化为字符串的形式,执行拼接操作
         对象 ---> 任何对象,任何内容,都会转化为 [object Object] 固定的内容形式,执行拼接操作
         函数 ---> 将所有的程序代码,转化为字符串,执行拼接操作

3.数值的自动转化：

在执行运算时，会触发数据类型的自动转化。
 转化原则：
    布尔类型 : true  --->  1         
               false --->  0
    undefined : 转化为 NaN 
    null : 转化为 0
    字符串 : 
        如果整个字符串,是纯数字字符串,或者符合科学计数法 ---> 转化为对应的数值
       如果字符串内有不符合数字规范的内容 ---> 转化为 NaN 
    数组,对象,函数：
      如果是+加号执行的是字符串拼接效果，按照这些数据类型转化为字符串的原则来转化
      如果是其他形式的运算 执行结果都是 NaN

4.布尔类型的强制转化：

 
  布尔类型的强制转化就是使用JavaScript中定义好的 方法/函数 Boolean( 数据/变量 )
  Boolean() 这个方法 不会改变 变量中存储的原始数值
   转化原则与自动转化原则相同
     0   ''   undefined  null  NaN --------> false 
     其他数据,都转化为true

5.字符串类型的强制转化：

  
 方法1，变量.toString(进制类型)
         将数值强制转化为字符串,并且可以设定转化的进制，.toString() 之前,不能直接写数值,必须是写成变量的形式
         进制常用的数值是 2 8 16 ，可以设定的范围是 2 - 36 进制  
 方法2，String( 变量 / 数据 )
         将变量或者数据,转化为字符串，原则按照自动转化的原则来执行，不会改变变量中存储的原始数值
         但是在字符串拼接时,会将其他数据类型自动转化为字符串

 6.数字类型的强制转化：

 
方法1 , Number(变量/数值) 
         console.log( Number(true) );   // 1
         console.log( Number(false) );  // 0
         console.log( Number(null) );   // 0
         console.log( Number(undefined) );   // NaN
         console.log( Number('100') );       // 对应的数值
         console.log( Number('100.123') );   // 对应的数值
         console.log( Number('2e4') );       // 对应的数值
         console.log( Number('123abc') );    // NaN
         console.log( Number( [1,2,3,4,5] ) );                           // NaN
         console.log( Number( {name:'zhangsan'} ) );                     // NaN
         console.log( Number( function fun(){console.log('abc')} ) );    // NaN
 将其他类型强制转化为数值类型,转化原则与自动转化选择相同

 方法2, parseInt(变量 / 数据)   是获取变量或者数据的整数部分
         从数据的 左侧起 解析获取 整数内容 
         console.log( parseInt(true) );                 // 都是 NaN            
         console.log( parseInt(false) );                                   
         console.log( parseInt(null) );                                    
         console.log( parseInt(undefined) );                               
         console.log( parseInt( {name:'zhangsan'} ) );                     
         console.log( parseInt( function fun(){console.log('abc')} ) ); 

         数组执行,是获取 数值部分 也就是 没有 []的部分
         1,2,3,4,5  整数部分是 1  1之后是逗号 逗号不是整数,之后的部分也就不算整数
         获取第一个数值的整数部分,如果有就获取,如果没有,结果是NaN
         console.log( parseInt( [1,2,3,4,5] ) );        // 结果是 1                      
         console.log( parseInt( [null,2,3,4,5] ) );     // 结果是 NaN 

         如果是整数就直接获取,如果是浮点数,或者科学计数法,就获取整数部分
         console.log( parseInt( 100 ) );          // 整数是直接获取
         console.log( parseInt( 0.0123 ) );       // 浮点数是获取整数部分
         console.log( parseInt( 3.123456e3 ) );   // 科学计数法是解析之后,获取整数部分

         字符串不同了
         如果是纯数字的字符串
         console.log( parseInt( '100' ) );         // 与数字的结果相同 
         console.log( parseInt( '0.0123' ) );      // 与数字的结果相同 

         console.log( parseInt( '3.123456e3' ) );   //3
         console.log( parseInt( '3abc' ) );   //3
         console.log( parseInt( '3.123' ) );   //3

 方法3 , parseFloat( 变量 / 数值 )
         获取浮点数部分
         console.log( parseFloat(true) );           // 都是 NaN            
         console.log( parseFloat(false) );                                   
         console.log( parseFloat(null) );                                    
         console.log( parseFloat(undefined) );                               
         console.log( parseFloat( {name:'zhangsan'} ) );                     
         console.log( parseFloat( function fun(){console.log('abc')} ) );         
        //数值, 整数,浮点数,都会完整获取
         console.log( parseFloat(100) );            //100
         console.log( parseFloat(100.1234) );       //100.1234
         console.log( parseFloat(1.234567e3) );     //1234.567

         // 关键是字符串
         // 从字符串的左侧起 解析 符合浮点数的部分
         console.log( parseFloat( '100' ) );         // 与数字的结果相同 
         console.log( parseFloat( '0.0123' ) );      // 与数字的结果相同 

         console.log( parseFloat( '3.123456e3' ) );  // 科学技术法会解析
         console.log( parseFloat( '3.1223abc' ) );        
         console.log( parseFloat( '3.123' ) );  

好了，这就是在JavaScript中数据类型的转化，希望可以帮助到你。

CSS 函数大家多多少少都使用过，比如 rgb() , rgba() , linear-gradient(), radial-gradient() , 等。

今天小编给大家介绍几个特殊的 css 函数。



attr() 这是一个很强的函数，他可以让数据传输到你的 css 中，不需要借助其他东西。

用法：

<style>

div::before {

content : attr(data-abc);

}

</style>

<div data-abc='我是attr'></div>



calc() 用与动态计算长度值

给大家展示快速让子盒子在父盒子中居中的另一种方法：

 <style>

  .father {

        position: relative;

        width: 300px;

        height: 300px;

        background-color: pink;

    }

    .child {

        position: absolute;

        / 这里的 50px 为子盒子宽（高）的一半 /

        top:  calc(50% - 50px);

        left: calc(50% - 50px);

        width: 100px;

        height: 100px;

        background-color: blue;

    }

</style>

<div class="father">

   <div class="child"></div>

</div>



cubic-bezier() 定义了一个贝塞尔曲线(Cubic Bezier)。在这我就不多描述了，关于贝塞尔曲线，感兴趣的同学可以自行去了解。

var() 用于插入自定义的 css 属性值。

用法：和 sass，less 中定义变量的语法相似

<style>

:root {

     --abc-- : red;

}

   

div {

    width: 100px;

    height: 100px;

    background-color: var(--abc--);

}

</style>

<div></div>



counters() 这是一个古老但实用的属性，用与 css 中计数

用法：

counter-reset : item 1；

给定计数器 item 的初始值1，也可用与复位。参数 ‘item’ 为计数器的名称，后面的 ‘1’ 参数如果不写，默认是 0。

counter-increment: item 2;

设定当一个 item 计算器发生时计数器增加的值。参数 ‘2’为每次计数增长 2。

counters(item,’-’);

写在content中，显示计数器的值，‘-’ 设定俩计算器拼接时中间的符号为’-‘。它还有第三个参数，是list-style-type , 与 css 属性 list-style-type 是一模一样的。用与设定计数器以什么形式显示（阿拉伯数字，英文大小写，等）



<style>

ul {

    counter-reset: item 1;

}

li:before {

    counter-increment: item 2;

    content: counters(item, "-");

}

</style>

<ul class="test">

    <li> html

        <ul>

            <li> css</li>

            <li> js</li>

        </ul>

    </li>

    <li> Node</li>

    <li> ts</li>

</ul>

bootstrap-multiselect动态加载数据，首先要引用bootstrap-multiselect.css和bootstrap-multiselect.js



<select id="demo" name="demo"  multiple></select>



JS代码



$("#demo").multiselect({

// 自定义参数，按自己需求定义

nonSelectedText : '--请选择--',

inheritClass : true,

maxHeight : 350,

includeSelectAllOption : true,

numberDisplayed : 5,

//下拉回调函数 

onDropdownShow : function(event) {

$.ajax({

url : "${ctx}/xx/xx",

async : false,

type : "get",

dataType : "json",

success : function(data) {

var mark = new Array();

for (var i = 0; i < data.length; i++) {

mark.push({

value : data[i].markId,

label : data[i].markName



});

}

$("#demo").multiselect('dataprovider', mark);

}

})

},



 });



获取选中的值的集合



var selectList = $('#demo option:selected');

1

遍历集合得到选中的value和label



for (var i = 0; i < selectList.length; i++) {

value = siteList[i].value;

label = siteList[i].label;



}



希望这篇文章可以帮助到你

一、首先找到第一次发起网络请求的地址，将服务器返回set-cookie当全局变量存储起来

wx.request({
  ......
  success: function(res) {
    console.log(res.header);
    //set-cookie:PHPSESSID=ic4vj84aaavqgb800k82etisu0; path=/; domain=.fengkui.net

    // 登录成功，获取第一次的sessionid,存储起来
    // 注意：Set-Cookie（开发者工具中调试全部小写）（远程调试和线上首字母大写）
    wx.setStorageSync("sessionid", res.header["Set-Cookie"]);
  }
}) 
    


        


        

    

三、后台获取cookie中的PHPSESSID，将PHPSESSID当作session_id使用

<?php
// 判断$_COOKIE['PHPSESSID']是否存在，存在则作session_id使用
if ($_COOKIE['PHPSESSID']) {
    session_id($_COOKIE['PHPSESSID']);
}

session_start();
echo session_id();

html5的新特点

1.语法更简单

a) 头部声明

<!doctype html>

b) 简化了字符集声明

<meta charset="utf-8">

2.语法更宽松

a) 可以省略结束符的标签

li、dt、dd、p、optgroup、option、tr、td、th

b) 可以完全省略的标签

html、head、body

3.标签语义化

增加了很多标签，在作页面的时候更加具有语义（定义了一些原本没有语义的div模块为有鲜明结构的语义模块）

a) <header>标记定义一个页面或一个区域的头部

b) <nav>标记定义导航链接

c) <article>标记定义一篇文章内容

d) <section>标记定义网页中一块区域

e) <aside>标记定义页面内容部分的侧边栏

f) <footer>标记定义一个页面或一个区域的底部

语义化标签图示

4.表单新增常用属性------要求掌握

required：必填

placeholder：输入内容提示

autofocus：自动获取焦点-----自动帮我们将光标点进去

<form method="post" action="http://www.baidu.com">

<!-- required 必填，必须的 -->

<!-- 自动获取焦点----自动将光标定位到表单中 -->

<input type="text" placeholder="请输入用户名" autofocus="autofocus" required="required" />

   <input type="submit" />

</form>

5.input新增type属性值

a) type=“email”，文本框中只能输入email地址

b) type=“date”，日期控件

c) type=“time”

d) type=“month”

e) type=“week”

f) type=“number”，唤醒数字键盘

g) type=“range”，滑块

h) type=“color”