一.有關于內置對象的作用域
主要說明2個對象，request，session
1、request 對象
request 對象是 javax.servlet.httpServletRequest類型的對象。 該對象代表了客戶端的請求信息，主要用于接受通過HTTP協議傳送到服務器的數據。（包括頭信息、系統信息、請求方式以及請求參數等）。
request只在2個頁面之間傳遞，每一次新的請求都會新建一個request對象，也就是說可能會request對象不一致導致空指針異常。
2、session 對象
session 對象是由服務器自動創建的與用戶請求相關的對象。服務器為每個用戶都生成一個session對象，用于保存該用戶的信息，跟蹤用戶的操作狀態。session對象內部使用Map類來保存數據，因此保存數據的格式為 “Key/value”。 session對象的value可以使復雜的對象類型，而不僅僅局限于字符串類型。
session對象在整個會話只有一個，也就是說session對象的數據會一直保留直到主動進行數據更改。
二.表單提交
在index.jsp中使用form進行數據的提交，action的目標是check.jsp，method是post
三.驗證跳轉
當form提交信息后交給check.jsp驗證，使用getParameter來得到form的信息，并使用setAttribute保存。在check.jsp中判斷賬號密碼是否正確后，使用
<jsp:forward page=".jsp"></jsp:forward>
1
進行跳轉，.jsp是想要跳轉的頁面路徑。
四.詳細代碼
index.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<form action="check.jsp" method="post">
請輸入用戶名：
<input type = "text" name = "username"><br/>
請輸入密碼：
<input type = "password" name = "passwd"><br/>
<input type="submit" name="submit" value="登錄">
</form>
</body>
</html>
check.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>驗證</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getParameter("username");
String passwd = (String)request.getParameter("passwd");
request.setAttribute("username", username);
request.setAttribute("passwd", passwd);
if(username.equals("admin")&&passwd.equals("123")){
%>
<jsp:forward page="succeed.jsp"></jsp:forward>
<%}else{ %>
<jsp:forward page="failed.jsp"></jsp:forward>
<%} %>
</body>
</html>
succeed.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸成功</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getAttribute("username");
String passwd = (String)request.getAttribute("passwd");
%>
<%=username %>登陸成功
</body>
</html>
failed.jsp
<%@ page language="java" import="java.util." pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>登陸失敗</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
String username = (String)request.getAttribute("username");
String passwd = (String)request.getAttribute("passwd");
%>
<%=username %>登陸失敗
</body>
</html>
五.注意事項
在jsp中使用form提交表單不能直接進行跳轉，否則操作不慎就容易出現空指針異常，建議交由單獨的跳轉頁面處理
下面這段代碼是實現簡單的導航效果：
在這里插入代碼片<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}
.nav{
width:700px;
margin:100px auto;
}
.nav ul li{
float:left;
margin-right:5px;
}
.nav ul li a{
width:100px;
height:30px;
color:#fff;
display:block;
line-height:30px;
margin-right:5px;
text-decoration:none;
background:red;
text-align:center;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.nav ul li a:hover{
background:yellow;
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
<li><a href="#">導航</a></li>
</ul>
</div>
</body>
</html>
實現效果如圖：
容易犯錯的地方：剛開始我把display:block;屬性寫在最前面，結果一直出不來，后來發現display屬性應該放在height和width屬性后面
我還學到一個知識點：關于父元素塌陷問題：
在文檔流中，父元素的高度默認是被子元素撐開的，也就是說父元素多高，子元素就多高
但是為子元素設置浮動以后，子元素就會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷
由于父元素的高速塌陷了，則父元素下所有的元素都會向上移動，這樣會導致頁面布局混亂
所以我們在開發中一定要避免出席那高度塌陷的問題，這時候我們可以將父元素的高度寫死，這樣可避免塌陷的問題出現，但是一當高度寫死，父元素的高度將不能自動適應子元素的高度，所以這種方式是不推薦使用的
1
解決的方案：
根據W3C標準，在頁面中元素有一個隱含的屬性叫做Block Formatting Context
方案一：*（設置zoom為1和overflow為hidden）
當開啟元素的BFC后，元素會有以下特性：
父元素的垂直外邊距不會和子元素重疊
開啟BFC的元素不會被浮動元素所覆蓋
開啟BFC的元素可以包含浮動的子元素
那如何開啟元素的BFC呢？
設置元素浮動
設置元素的絕對定位
設置元素為inline-block(但是設置inline-block可以解決問題，但是會導致寬度丟失，所以不推薦使用這種方式)
將元素的overflow設置為一個非visible的值（推薦方式：將overflow:hidden這個是副作用最小的開啟BFC方式，所以可以這么說，以后若是再塌陷，就給父元素加上overflow:hidden屬性）
但需要注意的是：
在IE6以及以下的瀏覽器中并不支持BFC，所以使用這種方式并不能兼容IE6，在IE6中雖然沒有BFC，但有另一個隱藏屬性叫做hasLayout該屬性作用和和BFC類似。但在IE6瀏覽器可以通過開hasLayout來解決問題
開啟方式很多，我們可以直接用一種副作用最小的直接將元素的zoom設置為1，比如父元素是box1,我們可以在父元素中加上zoom:1;
在這里解釋一下zoom表示放大的意思，后邊跟著一個數值，寫幾就可以將元素放大幾倍，所以zoom:1表示不放大元素，但是可以通過該樣式可以開啟hasLayout.
但需要注意的是zoom屬性放IE6可以，別的瀏覽器比如Chrome就不行
****所以重頭戲來了：若我們想要兼容所有瀏覽器？
1.引入
三種引用方式
第一種 npm安裝
項目根目錄命令行執行
npm install uni-simple-router
1
第二種 插件市場（使用HBuilderX導入插件）
第三種 ZIP下載 解壓
2.項目中引入
import Vue from 'vue'
import {RouterMount} from 'uni-simple-router';
import Router from './router'
Vue.use(Router)
//...后續代碼
引入之后就開始我們的正式使用。
第一步先在項目的根目錄下創建一個router文件夾。
格式為：
router
|---modules
|---index.js
|---index.js
router中的modules文件夾是用來放路由表模板的。modules中的index.js內容為
const files = require.context('.', false, /.js$/)
const modules = []
files.keys().forEach(key => {
if (key === './index.js') return
const item = files(key).default
modules.push(...item)
})
export default modules
這個文件用來把同目錄下的js文件讀取并整合所有路由。
在這里創建的js文件代碼示例：
const home = [
{
//注意：path必須跟pages.json中的地址對應，最前面別忘了加'/'哦
path: '/pages/home/index',
aliasPath:'/', //對于h5端你必須在首頁加上aliasPath并設置為/
name: 'index',
meta: {
title: '首頁',
},
},
{
path: '/pages/home/list',
name: 'list',
meta: {
title: '列表',
},
},
]
export default home
第二步配置router下的index.js
import modules from './modules'
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請看最上面【安裝】部分
import Router from 'uni-simple-router'
Vue.use(Router)
//初始化
const router = new Router({
routes: [...modules]//路由表
});
//全局路由前置守衛
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛
router.afterEach((to, from) => {
})
export default router;
第三步 就是配置main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'
App.mpType = 'app'
const app = new Vue({
...App
})
//v1.3.5起 H5端 你應該去除原有的app.$mount();使用路由自帶的渲染方式
// #ifdef H5
RouterMount(app,'#app');
// #endif
// #ifndef H5
app.$mount(); //為了兼容小程序及app端必須這樣寫才有效果
// #endif
這樣你的路由就配置好了。
如果不想繁瑣的配置modules下的文件，可以用webpack自動構建路由表
安裝
npm install uni-read-pages
1
配置 vue.config.js （可能需要手動創建）
const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages({
//如果你需要獲取更多參數，那么請配置參數！
includes:['path','name','meta']
})
module.exports = {
configureWebpack: {
plugins: [
new tfPages.webpack.DefinePlugin({
ROUTES: JSON.stringify(tfPages.routes)
})
]
}
}
然后去pages.json里面更改配置，加入所需要的內容
最后配置路由表
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請看最上面【安裝】部分
import Router from 'uni-simple-router'
Vue.use(Router)
//初始化
const router = new Router({
routes:ROUTES //路由表
});
//全局路由前置守衛
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛
router.afterEach((to, from) => {
})
export default router;
Echarts餅圖之數據展示
1、組件簡介
ECharts，一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
官網鏈接：Echarts官網
W3C教程：W3C–Echarts教程
2、前端代碼實現
首先，下載庫，并引入到項目文件；
話不多說，直接上代碼。
/* 封裝的組件 HTML代碼
<div class="echart-wrap-box">
<div class="echart-content"></div>
</div>
*/
let echarts = require("echarts/echarts.min");
defaults: {
option: {
echartsObj: {},
tooltip: {//提示框浮層內容。
trigger: 'item',//數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
formatter: " : {c}萬人"http://提示框浮層內容格式器,{a}（系列名稱），（數據項名稱），{c}（數值）, oqkoqqg（百分比）
},
//如果系列沒有設置顏色，則會依次循環從默認列表中取顏色作為系列顏色。
color: ["#369DFD", "#32C8CA", "#49C872", "#F6CE36", "#EE607A", "#935CE3", "#3436C7", "#3E4D86"],
legend: {//圖例組件。
orient: 'vertical',//圖例列表的布局朝向:垂直的
x: '80%',//圖例組件離容器左側的距離。
y: '60%',//圖例組件離容器上側的距離。
// width: 100,
textStyle: {},//圖例文字的樣式
// left: 'right',//圖例組件離容器左側的距離。
top: 'center',//圖例組件離容器上側的距離。
data: [],//右側圖例小組件信息數據
},
series: [{//餅圖信息
name: '',
type: 'pie',//餅狀圖
radius: 140,//餅圖的半徑。
center: ['50%', '50%'],
minAngle: 5, //最小的扇區角度（0 ~ 360），用于防止某個值過小導致扇區太小影響交互
label: {//展示文本設置
normal: {
show: true,
formatter: " : {c}萬人",//視覺引導線內容格式器,{a}（系列名稱），（數據項名稱），{c}（數值）, cwswyyy（百分比）
},
emphasis: { //文本樣式
show: true, //展示
textStyle: { //文本樣式
fontSize: '16',
fontWeight: '600',
}
}
},
labelLine: {//視覺引導線設置
normal: {
show: true
}
},
data: [],//餅狀圖信息數據,value(數量)和 name為默認數據；
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}],
},
onInit(event) {
vm = event.vmodel;
let data;//假設這里通過ajax獲取到了需要展示的數據；
if (data.length == 0) {
return
}
data = data.sort((a, b) => { return b.number - a.number });//數據根據數量number從大到小排序
if (data.length > 7) {//從大到小的第八個新增粉絲數量的年份 開始統一歸為 其他年份新增粉絲數量
let arr = data.slice(7);
let num = 0, rate = 0;
for (let i = 0; i < arr.length; i++) {//第七個之后累數量和比率
num += Number(arr[i].number);
rate += Number(arr[i].rate);
};
let objOtherYear = {
value: num,
name: '其他年份__nana新增粉絲數量',
rate: rate
};
let arr2 = data.slice(0, 7);
arr2.push(objOtherYear);
data = arr2;
data = data.sort((a, b) => { return b.number - a.number });//數據根據數量number從大到小排序
}
this.option.series[0].data = [];
this.option.legend.data = [];
for (let i = 0; i < data.length; i++) {
let seriesData = {
value: 0,
name: '',
rate: ''
};
seriesData.value = data[i].number;
seriesData.name = data[i].year;
seriesData.rate = data[i].rate;
this.option.series[0].data.push(seriesData);//給餅圖賦值數據
let legendData = {
name: '',
icon: 'circle',//強制設置圖形為:圓形
textStyle: {
color: '#000'
}
}
legendData.name = data[i].year;
this.option.legend.data.push(legendData);//給圖例組件賦值數據
}
},
callFun: avalon.noop,//點擊餅狀圖后的回調
isClickEchartsOUt: avalon.noop,//是否為餅圖外的點擊，父組件進行判斷后傳過來
onReady(event) {
this.echartsObj = echarts.init(event.target.children[0]);//初始化
this.echartsObj.setOption(this.option);
$(window).resize(() => {
this.echartsObj.resize();
});
let dataIndex;//保存選中扇區的序號
let _this = this;
this.$watch('isClickEchartsOUt', () => {
if (this.isClickEchartsOUt) {//如果不是餅狀圖扇區的點擊，則取消選中；
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消選中指定的餅圖扇形。
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex: 0,
// 可選，數據的 index
dataIndex: dataIndex,
})
}
});
// 處理點擊餅圖內部的事件
this.echartsObj.on('click', function (params) {
if (params.dataIndex != dataIndex) {//如果不是前一次選中的扇區，則取消選中
_this.echartsObj.dispatchAction({
type: 'pieUnSelect',//取消選中指定的餅圖扇形。
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex: 0,
// 可選，數據的 index
dataIndex: dataIndex,
})
}
dataIndex = params.dataIndex;
_this.echartsObj.dispatchAction({
type: 'pieSelect',//選中指定的餅圖扇形。
// 可選，系列 index，可以是一個數組指定多個系列
seriesIndex: 0,
// 數據的 index，如果不指定也可以通過 name 屬性根據名稱指定數據
dataIndex: dataIndex,
})
vm.callFun(params);//回調，傳點擊獲取到的數據給父組件
});
},
onDispose() {}
}
在我們的日常開發工作中，文本溢出截斷省略是很常見的一種需考慮的業務場景細節?？瓷先?“稀松平常” ，但在實現上卻有不同的區分，是單行截斷還是多行截斷？多行的截斷判斷是基于行數還是基于高度？這些問題之下，都有哪些實現方案？他們之間的差異性和場景適應性又是如何？
一般來說，在做這樣文字截斷效果時我們更多是希望：
兼容性好，對各大主流瀏覽器有好的支持
響應式截斷，根據不同寬度做出調整
文本超出范圍才顯示省略號，否則不顯示省略號
省略號位置顯示剛好
基于上述的準則，下面我們通過編碼實踐，給出一些答案。
單行文本溢出省略
核心 CSS 語句
overflow: hidden；（文字長度超出限定寬度，則隱藏超出的內容）
white-space: nowrap；（設置文字在一行顯示，不能換行）
text-overflow: ellipsis；（規定當文本溢出時，顯示省略符號來代表被修剪的文本）
優點
兼容性好，對各大主流瀏覽器有好的支持
響應式截斷，根據不同寬度做出調整
文本溢出范圍才顯示省略號，否則不顯示省略號
省略號位置顯示剛好
短板
只支持單行文本截斷，并不支持多行
適用場景
適用于單行文本溢出顯示省略號的情況
Demo
<div class="demo">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
.demo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文本溢出省略（-webkit-line-clamp）
核心 CSS 語句
overflow: hidden；（文本溢出限定的寬度就隱藏內容）
-webkit-line-clamp: 2；（用來限制在一個塊元素顯示的文本的行數, 2 表示最多顯示 2 行。 為了實現該效果，它需要組合其他的WebKit屬性）
display: -webkit-box；（和 -webkit-line-clamp: 2；結合使用，將對象作為彈性伸縮盒子模型顯示 ）
-webkit-box-orient: vertical；（和 -webkit-line-clamp: 2；結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式 ）
text-overflow: ellipsis；（多行文本的情況下，用省略號“…”隱藏溢出范圍的文本)
優點
響應式截斷，根據不同寬度做出調整
文本溢出范圍才顯示省略號，否則不顯示省略號
瀏覽器原生實現，所以省略號位置顯示剛好
短板
兼容性一般： -webkit-line-clamp 屬性只有 WebKit 內核的瀏覽器才支持
適用場景
多適用于移動端頁面，因為移動設備瀏覽器更多是基于 WebKit 內核
Demo
<div class="demo">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
.demo {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
多行文本溢出省略（偽元素 + 定位）
核心 CSS 語句
position: relative; （為偽元素絕對定位）
overflow: hidden; （文本溢出限定的寬度就隱藏內容）
position: absolute;（給省略號絕對定位）
line-height: 18px; （結合元素高度,高度固定的情況下,設定行高, 控制顯示行數）
height: 36px; （設定當前元素高度）
::after {} （設置省略號樣式）
word-break: break-all; （如果文本中有英文，可以使一個單詞能夠在換行時進行拆分）
優點
兼容性好，對各大主流瀏覽器有好的支持
響應式截斷，根據不同寬度做出調整
短板
無法識別文字的長短，無論文本是否溢出范圍，一直顯示省略號
省略號顯示可能不會剛剛好，有時會遮住一半文字，跟文字沒有貼合的很緊密
適用場景
文字內容較多，確定文字內容一定會超過容器的
Demo
<div class="demo">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
1
2
3
.demo {
position: relative;
line-height: 18px;
height: 36px;
overflow: hidden;
word-break: break-all;
}
.demo::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
/ 為了展示效果更好 /
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
多行文本溢出省略（Float）
核心 CSS 語句
line-height: 20px；（結合元素高度,高度固定的情況下,設定行高, 控制顯示行數）
overflow: hidden；（文本溢出限定的寬度就隱藏內容）
float: right/left；（利用元素浮動的特性實現）
position: relative；（根據自身位置移動省略號位置, 實現文本溢出顯示省略號效果）
word-break: break-all；（如果文本中有英文，可以使一個單詞能夠在換行時進行拆分）
優點
兼容性好，對各大主流瀏覽器有好的支持
響應式截斷，根據不同寬度做出調整
文本溢出范圍才顯示省略號，否則不顯示省略號
短板
省略號顯示可能不會剛剛好，有時會遮住一半文字，跟文字沒有貼合的很緊密
適用場景
文字內容較多，確定文字內容一定會超過容器的
Demo
<div class="demo">
<div class="text">
床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>
</div>
.demo {
height: 40px;
line-height: 20px;
overflow: hidden;
}
.demo .text {
float: right;
margin-left: -5px;
width: 100%;
word-break: break-all;
}
.demo::before {
float: left;
width: 5px;
content: "";
height: 40px;
}
.demo::after {
float: right;
content: "...";
height: 20px;
line-height: 20px;
padding-right: 5px;
text-align: right;
width: 3em;
margin-left: -3em;
position: relative;
left: 100%;
top: -20px;
padding-right: 5px;
/ 為了展示效果更好 /
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(255, 255, 255, 0)),
to(white),
color-stop(50%, white)
);
background: -moz-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: -o-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: -ms-linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0),
white 50%,
white
);
}
純JS對頁面表格進行EXCEL導出
1.中間部分在style標簽那種可以使用css樣式對表格進行任意樣式的修改
2.在tableid.innerHTML中可以對表格中的內容進行修改替換（其中放的內容就是導出后的表格內容）
3.需要引入xlsx.full.min.js文件
4.tableid為為表格的id
5.sheetName為下載后的文件名稱
base64(excelFile) {
return window.btoa(unescape(encodeURIComponent(excelFile)))
},
tableToExcel(tableid, sheetName) {
var uri = 'data:application/vnd.ms-excel;base64,';
var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
'xmlns=" gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
+ '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
+ '</x:ExcelWorkbook></xml><![endif]-->' +
' <style type="text/css">' +
' .ivu-table td{\n' +
' /background-color: #FFFFFF;/\n' +
' /color: #fff;/\n' +
' /border:1px solid #FFFFFF;/\n' +
' }\n' +
' /每行的基本樣式/\n' +
' .ivu-table-row td {\n' +
' color: #000000;\n' +
' min-width:50px;\n' +
' }\n' +
' /頭部th/\n' +
' .ivu-table-header th{\n' +
' color:\t#FFFFFF;\n' +
' font-weight: bold;\n' +
' background-color: rgb(98,167,249);\n' +
' min-width:50px;' +
' border:1px solid #FFFFFF;' +
' position: relative; \n' +
' top: expression(this.offsetParent.scrollTop); \n' +
' z-index: 300; \n' +
' }\n' +
' /偶數行/\n' +
' .ivu-table-stripe-even td{\n' +
' background-color: #ffffff!important;\n' +
' }\n' +
' /奇數行/\n' +
' .ivu-table-stripe-odd td{\n' +
' background-color:#F0FFFF!important;\n' +
' }\n' +
' /選中某一行高亮/\n' +
' .ivu-table-row-highlight td {\n' +
' background-color: #d63333!important;\n' +
' }' +
'</style>' +
'</head><body ><table class="excelTable">{table}</table></body></html>';
if (!tableid.nodeType) tableid = document.getElementById(tableid);
tableid.innerHTML = tableid.innerHTML.replace('暫無篩選結果','')
var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
var a = document.createElement("a");
a.download = sheetName + ".xls";
a.href = uri + this.base64(this.format(template, ctx));;
a.click();
},
format (s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
});
}
1.v-on ：可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼
（1）v-on:click綁定點擊事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button v-on:click="fun1('test')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:'#app',
data:{
message:'hello vue'
},
methods:{
fun1:function (msg) {
this.message=msg;
}
}
});
</script>
</html>
(2)v-on:keydown事件會在用戶按下一個鍵盤按鍵時發生
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
Vue:<input type="text" v-on:keydown="fun($event)">
<hr/>
傳統JS：<input type="text" οnkeydοwn="showKeyCode()"/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
/ $event 它是vue中的事件對象 和我們傳統js的event對象是一樣的 /
fun:function(event){
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不讓鍵盤的按鍵起作用
event.preventDefault();
}
}
}
});
//傳統js的鍵盤按下事件
function showKeyCode(){
//event對象和我們的document對象以及window對象是一樣的，可以不用定義直接使用
var keyCode = event.keyCode;
if(keyCode < 48 || keyCode > 57){
//不讓鍵盤的按鍵起作用
event.preventDefault();
}
// alert(keyCode);
// if(event.keyCode == 13){
// alert("你按的是回車");
// }
}
</script>
</html>
（3）v-on:mouseover 當鼠標指針位于元素上方時,會發生 mouseover 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @mouseover="fun1" id="div">
<textarea @mouseover="fun2($event)">這是一個文件域</textarea>
</div>
<!--<div οnmοuseοver="divmouseover()" id="div">
<textarea οnmοuseοver="textareamouseover()">這是一個文件域</textarea>
</div>-->
</div>
</body>
<script>
//view model
/*
@事件名稱 就是 v-on:事件名稱的簡寫方式
@mouseover它就等同于v-on:mouseover
/
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠標懸停在div上了");
},
fun2:function(event){
alert("鼠標懸停在textarea上了");
event.stopPropagation();
}
}
});
//傳統的js方式
function divmouseover(){
alert("鼠標移動到了div上了");
}
function textareamouseover(){
alert("鼠標移動到了textarea上了");
event.stopPropagation();
}
</script>
</html>
(4).Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。注意:該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作(如果存在這樣的動作)
Vue.js通過由點(.)表示的指令后綴來調用修飾符。
.stop
.prevent
.capture
.self
.once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:事件修飾符</title>
<style>
#div {
background-color: red;
width:300px;
height:300px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form @submit.prevent action="http://www.itheima.com" method="post" >
<input type="submit" value="提交">
</form>
<!--<form action="http://www.itheima.com" method="post" οnsubmit="return checkForm()">
<input type="submit" value="提交">
</form>-->
<hr/>
<div @mouseover="fun1" id="div">
<textarea @mouseover.stop="fun2($event)">這是一個文件域</textarea>
</div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function(){
alert("鼠標懸停在div上了");
},
fun2:function(event){
alert("鼠標懸停在textarea上了");
}
}
});
//傳統js方式
function checkForm(){
alert(1);
//表單驗證必須有一個明確的boolean類型返回值
//在應用驗證方法時必須加上 return 方法名稱
return false;
}
</script>
</html>
2.v-text與v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text與v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
<!--<div id="div1"></div>
<div id="div2"></div>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"<h1>Hello Vue</h1>"
}
});
//傳統js的innerText和innerHTML
window.onload = function(){
document.getElementById("div1").innerHTML="<h1>Hello</h1>";
document.getElementById("div2").innerText="<h1>Hello</h1>";
}
</script>
</html>
（2）v-bind 插值語法不能作用在 HTML 特性上，遇到這種情況應該使用 v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind的使用</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">傳智播客</font>
<font size="5" :color="ys2">黑馬程序員</font>
</div>
</body>
<script>
//view model
//插值表達式不能用于html標簽的屬性取值
//要想給html標簽的屬性設置變量的值，需要使用v-bind
//v-bind也可以簡化寫法 直接使用:
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"green"
}
})
</script>
</html>
（3）v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form action="" method="post">
用戶名：<input type="text" name="username" v-model="user.username"><br/>
密碼：<input type="text" name="password" v-model="user.password"><br/>
<!-- v-model替換原來的value屬性的值，用value獲取不到-->
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
})
</script>
</html>
（4）v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷數組</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr ">{{item}}={{index}} </li>
<!--index是索引的意思，用插值表達式輸出 -->
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(key,value) in product ">{{value}}===={{key}} </li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
product:{
id:1,
name:"筆記本電腦",
price:5000
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍歷對象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序號</td>
<td>編號</td>
<td>名稱</td>
<td>價格</td>
</tr>
<tr v-for="(product,index) in products ">
<td>{{index}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
products:[
{ id:1,name:"筆記本電腦",price:5000 },
{ id:2,name:"手機",price:3000 },
{ id:3,name:"電視",price:4000 }
]
}
})
</script>
</html>
3.v-if與v-show
v-if是根據表達式的值來決定是否渲染元素
v-show是根據表達式的值來切換元素的display css屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if與v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">傳智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切換</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
flag:false
},
methods:{
toggle:function(){
this.flag = !this.flag;
}
}
})
</script>
</html>
引言
現在市場很多前端開發的招聘崗位都或多或少的要求你要掌握vue，可以說vue在國內是非常的火爆的，下面我給大家介紹一下vue框架吧！
vue是漸進式框架
vue的核心是一個視圖模板引擎，但是這并不能說明vue不是一個框架，如上圖所示在聲明式渲染（視圖模板）基礎上，vue可以添加組件系統component，vue-router客戶端路由，vuex的狀態管理，vue-cli構建工具來構建一個完整的框架，更重要的是這些功能相互獨立，你可以任意選用你項目需要的部件，不一定非要全部整合在一起（就像是vuex它是一個很好的可以管理組件之間共享狀態的部件，但非必須在你的每一個項目中使用它，如果說你的項目相對簡單，組件之間的通信相對簡單你完全可以不使用它），可以看到漸進式，其實就是vue的使用方式，同時也能看到vue的設計理念
vue是mvvm模式
為什么說vue是mvvm模式呢？這個大家首先要知道mvvm是什么。mvvm是Model-View-ViewModel的簡寫，即模型視圖視圖模型。模型是指后端傳過來的數據，視圖是指我們看到的頁面，視圖模型是mvvm框架的核心，他是連接view和model的橋梁，它有兩個方向，第一將后端傳來的數據轉換成頁面可以看到的視圖，第二，將用戶在頁面上的交互轉化成為后端數據，我們稱之為雙向綁定。
總結mvvm模式的視圖和模型是不能直接通信的，它們通過ViewModel來通信，ViewModel通常要實現一個observer觀察者，當數據發生變化，ViewModel能夠監聽到數據的這種變化，然后通知到對應的視圖做自動更新，而當用戶操作視圖，ViewModel也能監聽到視圖的變化，然后通知數據做改動，這實際上就實現了數據的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解為是ViewModel，它可以實現dom監聽和數據綁定
vue的數據綁定原理
當你把JavaScript對象傳入vue實例作為data選項，vue會遍歷此對象的所以屬性，并使用Object.defineProperty把這些屬性轉換為getter和setter，每一個組件都有一個watcher實例，它會在組件渲染過程中，把接觸過的數據記錄為依賴，當依賴的setter被觸發是，他會通知watcher，重而使關聯的數據重新渲染，以下是代碼展示。
<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
get () {
// obj設置了一個myname屬性，當訪問obj.myname屬性會執行get方法
},
set (data) {
// 當修改myname屬性會執行set方法
// data會得到你修改的值
obox.innerHTML = data
}
})
object.definePeoperty有一下缺點： {
1：無法監聽es6的set，map變化
2：無法監聽class類型的數據
3：屬性的新增和刪除也無法監聽
4：數組元素的新整和刪除也無法監聽
}
所謂循環，就是重復執行一段代碼，計算機的判斷能力和人相比差的很遠，計算機更擅長一件事情——不停的重復。而我們在JavaScript中把這叫做循環。下面讓我們來了解了解JavaScript里的循環。
js循環結構有哪些
js循環結構有三種
for循環 ==> 用來多次遍歷代碼塊
while循環 ==> 當指定條件為true時，循環代碼塊
do while ==> 當指定條件偽true時，循環代碼塊
1、for循環
for是由兩個部分組成，條件控制和循環體
語法：
for(初始化表達式;循環條件表達式;循環后的操作表達式){
需要重復的代碼塊;
}
for語句結構如圖：
for循環的執行順序
1.初始化表達式
最近在做一個手機站，要求點擊分享可以直接打開微信分享出去。而不是jiathis，share分享這種的點擊出來二維碼。在網上看了很多，都說APP能喚起微信，手機網頁實現不了。也找了很多都不能直接喚起微信。
總結出來一個可以直接喚起微信的。適應手機qq瀏覽器和uc瀏覽器。
下面上代碼，把這些直接放到要轉發的頁面里就可以了：
html部分：
-
<script src="mshare.js"></script>//引進mshare.js
-
<button data-mshare="0">點擊彈出原生分享面板</button>
-
<button data-mshare="1">點擊觸發朋友圈分享</button>
-
<button data-mshare="2">點擊觸發發送給微信朋友</button>
js部分：
-
<script>
-
var mshare = new mShare({
-
title: 'Lorem ipsum dolor sit.',
-
url: 'http://m.ly.com',
-
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.',
-
img: 'http://placehold.it/150x150'
-
});
-
$('button').click(function () {
-
// 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接彈出原生
-
mshare.init(+$(this).data('mshare'));
-
});
-
</script>
下面是mshare.js的代碼分享，把這些代碼新建一個js文件放進去，然后在頁面中引進就ok了。
-
/**
-
* 此插件主要作用是在UC和QQ兩個主流瀏覽器
-
* 上面觸發微信分享到朋友圈或發送給朋友的功能
-
*/
-
'use strict';
-
var UA = navigator.appVersion;
-
-
/**
-
* 是否是 UC 瀏覽器
-
*/
-
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
-
-
/**
-
* 判斷 qq 瀏覽器
-
* 然而qq瀏覽器分高低版本
-
* 2 代表高版本
-
* 1 代表低版本
-
*/
-
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
-
-
/**
-
* 是否是微信
-
*/
-
var wx = /micromessenger/i.test(UA);
-
-
/**
-
* 瀏覽器版本
-
*/
-
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
-
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
-
-
/**
-
* 獲取操作系統信息 iPhone(1) Android(2)
-
*/
-
var os = (function () {
-
var ua = navigator.userAgent;
-
-
if (/iphone|ipod/i.test(ua)) {
-
return 1;
-
} else if (/android/i.test(ua)) {
-
return 2;
-
} else {
-
return 0;
-
}
-
}());
-
-
/**
-
* qq瀏覽器下面 是否加載好了相應的api文件
-
*/
-
var qqBridgeLoaded = false;
-
-
// 進一步細化版本和平臺判斷
-
if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
-
qq = 0;
-
} else {
-
if (qq && qqVs < 5.4 && os == 2) {
-
qq = 1;
-
} else {
-
if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) {
-
uc = 0;
-
}
-
}
-
}
-
/**
-
* qq瀏覽器下面 根據不同版本 加載對應的bridge
-
* @method loadqqApi
-
* @param {Function} cb 回調函數
-
*/
-
function loadqqApi(cb) {
-
// qq == 0
-
if (!qq) {
-
return cb && cb();
-
}
-
var script = document.createElement('script');
-
script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
-
/**
-
* 需要等加載過 qq 的 bridge 腳本之后
-
* 再去初始化分享組件
-
*/
-
script.onload = function () {
-
cb && cb();
-
};
-
document.body.appendChild(script);
-
}
-
/**
-
* UC瀏覽器分享
-
* @method ucShare
-
*/
-
function ucShare(config) {
-
// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
-
// 關于platform
-
// ios: kWeixin || kWeixinFriend;
-
// android: WechatFriends || WechatTimeline
-
// uc 分享會直接使用截圖
-
var platform = '';
-
var shareInfo = null;
-
// 指定了分享類型
-
if (config.type) {
-
if (os == 2) {
-
platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
-
} else if (os == 1) {
-
platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
-
}
-
}
-
shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
-
// android
-
if (window.ucweb) {
-
ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
-
return;
-
}
-
if (window.ucbrowser) {
-
ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
-
return;
-
}
-
}
-
/**
-
* qq 瀏覽器分享函數
-
* @method qqShare
-
*/
-
function qqShare(config) {
-
var type = config.type;
-
//微信好友 1, 微信朋友圈 8
-
type = type ? ((type == 1) ? 8 : 1) : '';
-
var share = function () {
-
var shareInfo = {
-
'url': config.url,
-
'title': config.title,
-
'description': config.desc,
-
'img_url': config.img,
-
'img_title': config.title,
-
'to_app': type,
-
'cus_txt': ''
-
};
-
if (window.browser) {
-
browser.app && browser.app.share(shareInfo);
-
} else if (window.qb) {
-
qb.share && qb.share(shareInfo);
-
}
-
};
-
if (qqBridgeLoaded) {
-
share();
-
} else {
-
loadqqApi(share);
-
}
-
}
-
/**
-
* 對外暴露的接口函數
-
* @method mShare
-
* @param {Object} config 配置對象
-
*/
-
function mShare(config) {
-
this.config = config;
-
this.init = function (type) {
-
if (typeof type != 'undefined') this.config.type = type;
-
try {
-
if (uc) {
-
ucShare(this.config);
-
} else if (qq && !wx) {
-
qqShare(this.config);
-
}
-
} catch (e) {}
-
}
-
}
-
// 預加載 qq bridge
-
loadqqApi(function () {
-
qqBridgeLoaded = true;
-
});
-
if (typeof module === 'object' && module.exports) {
-
module.exports = mShare;
-
} else {
-
window.mShare = mShare;
-
}
好了，這樣就可以直接喚起微信進行分享啦
藍藍設計的小編 http://www.syprn.cn