最后
好了,这就是整理的前端从入门到放弃的学习笔记,还有很多没有整理到,我也算是边学边去整理,后续还会慢慢完善,这些相信够你学一阵子了。
做程序员,做前端工程师,真的是一个学习就会有回报的职业,不看出身高低,不看学历强弱,只要你的技术达到应有的水准,就能够得到对应的回报。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
学习从来没有一蹴而就,都是持之以恒的,正所谓活到老学到老,真正懂得学习的人,才不会被这个时代的洪流所淘汰。
全部代码如下:
<template>
<!-- 设备状态 -->
<div>
<Row>
<Col span="6">
<Tree :data="data1" @on-select-change="select_change"></Tree>
</Col>
<Col span="18">
<div class="listfile">
<Row>
<Col span="24">已选设备</Col>
</Row>
<Table border ref="selection" :columns="historyColumns" :data="historyData"></Table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<Page :total="dataCount" :page-size="pageSize" show-total :current="currentPage" @on-change="changepage"></Page>
</div>
</div>
</div>
</Col>
</Row>
</div>
</template>
<script>
import Cookies from 'js-cookie';
export default {
data () {
return {
webstock:null,
// 列表全部数据 Alldata = 之前接口的 historyData + websocket的数组 list_arry
Alldata:[],
// list_arry:[],
// list_arry:[{deviceid:"00000",ip:"192.168.0",type:"未开启",time:"2019-04-16 00:00:00"}],
// 定义全局变量
send_variable:'',
station_Id:'',
data1: [
{
title: '1号线',
expand: true,
children: [
{
title: '预留01站'
},
{
title: '预留02站'
},
{
title: '预留03站'
},
{
title: '预留04站'
},
{
title: '预留05站'
}
]
},
{
title: '2号线',
expand: true,
children: [
{
title: '西直门站'
},
{
title: '车公庄站'
},
{
title: '阜成门站'
},
{
title: '复兴门站'
}
]
},
],
ajaxHistoryData:[],
dataCount:1,// 初始化信息总条数
currentPage:1, //当前页
pageSize:10,// 每页显示多少条
below: 0, //下一页或者上一页的第一项索引值
historyColumns: [
{title: '设备名称',key: 'deviceName',width: 150,align: 'center'},
{title: '设备IP',key: 'ip',width: 150,align: 'center'},
// {title: '设备id',key: 'deviceId',width: 150,align: 'center'},
{title: '设备状态',key: 'type',width: 120,align: 'center'},
{title: '时间',key: 'time',align: 'center'},
],
historyData:[],
testData:[{ "deviceId":"00000","ip":"192.168.001","type":"未开启","time":"2019-04-11 00:00:00"}],
}
},
methods: {
// 拿服务节点去调接口
get_serverNodeId(){
this.$axios({
method: 'get',
url: this.baseURL + '/device/DeviceInfo/get_LineAndStation',
params: {
// 0101ZZ00100000001 tcc 既有线路又有车站
// 01010100100000001 occ 只有车站
// 01010103100000000 sc 空
manageNodeid: this.$store.state.user.serverNodeId,
}
}).then(res => {
console.log("服务调接口:", res.data)
this.data1 = [];
if (!res.data) return false;
let tree = [];
res.data.map(v=>{
// console.log("vvvvvvv", v.stationInfo);
let _tempTree = {};
_tempTree.title = v.line.lineName;
// _tempTree.expand = true; // 线路里面的车站会展开
_tempTree.children = [];
// console.log("vvvvvvv111111111111", v.stationInfo);
if (!v.stationInfo) return false; //如果v.stationInfo为 null 直接return
v.stationInfo.map(station=>{
let _tempStation = {'title':station.stationSname,'tccStationId':station.tccStationId,'linId':v.line.lineId};
// let _tempStation = {'title':station.stationSname, 'linId':v.line.lineName};
_tempTree.children.push(_tempStation)
})
tree.push(_tempTree)
})
this.data1 = tree;
}).catch();
},
// 获取历史记录信息
handleListApproveHistory(){
// 保存取到的所有数据
this.ajaxHistoryData = this.testData;
this.dataCount = this.testData.length;
// 初始化显示,小于每页显示条数,全显,大于每页显示条数,取前每页条数显示
if(this.testData.length < this.pageSize){
this.historyData = this.ajaxHistoryData;
}else{
this.historyData = this.ajaxHistoryData.slice(0,this.pageSize);
}
},
//index当前页码
changepage(index){
this.currentPage = index;
let sessionId = Cookies.get('status');
},
select_change(data) {
console.log("radio单选:",data);
// console.log("radio单选:",data[0].tccStationId);
// console.log("radio单选:",data[0].linId);
let _lineId = data[0].linId;
var station_Id = data[0].tccStationId;
this.station_Id = data[0].tccStationId.substring(2,4) // 截掉前2位,保留后2位
// console.log("打印station_Id:",this.station_Id);
this.$axios({
method: 'post',
data: this.$qs.stringify({
manageNodeid:'01010100100000001',
lineId: _lineId,
stationId: this.station_Id,
}),
headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
url: this.baseURL + '/device/DeviceInfo/list_Records',
})
.then((res)=> {
if(res.status == "200"){
console.log("列表数据",res.data.list)
this.historyData = res.data.list; //把结果拿到的数据赋给table
this.dataCount = res.data.total; //所有的条数
this.initWebSocket(); // 开启WebSocket长连接
}
})
.catch((error) =>{})
},
/**
* webstocket 开启长连接
*/
initWebSocket() {
var this1 = this;
//页面刚进入时开启长连接
const webstock = new WebSocket("ws://192.168.25.51:9999");
/**
* webstock连接成功
*/
var this2 = this;
webstock.onopen = function (onopen) {
console.log("websocket open 连接成功", onopen);
// setInterval(function(){
// 定义全局变量
this2.send_variable = '0x01000101' + "/" + this2.station_Id,
console.log("请求车站id:", this2.station_Id);
console.log("请求id:", this2.send_variable);
webstock.send(JSON.stringify(this2.send_variable));
// },1000)
}
/**
* webstock出错
*/
webstock.onerror = function (event) {
webstock.close(event);
console.log("websocket error");
}
/**
* webstock接收消息
*/
webstock.onmessage = function (message) {
console.log( '返回的message', message);
// console.log( '返回2', message.data);
let one; // 第一个 ","后内容
let two; // 第二个 ","后内容
let first = message.data.indexOf(",") + 1; // 从第一个 "," 算起( +1表示不包括该 ",")
let knew_list = message.data.indexOf(" ", first); // 第一个 "," 后的第一个空格
let _comma = message.data.indexOf(",", first); // 第一个","后的第一个","(即第二个 ",")
if (_comma == -1) {
one = message.data.substring(0, knew_list);
two = message.data.substring(knew_list).substring(1, message.data.length);
} else {
one = message.data.substring(0, _comma);
two = message.data.substring(_comma).substring(1, message.data.length);
}
// console.log("one:",one);
// console.log("two",two);
let list_arry = JSON.parse(two);
// console.log( 'list_arry', JSON.parse(two));
console.log( 'list_arry', list_arry);
let arr = list_arry;
console.log("arr",arr);
// 如果之间拿查询列表里面的id 和 socke里面的 id进行判断是否相等,那么tab数据只有 查询的数据,打印的时候也有 time 和type就是不显示在tab上,原因是因为,socket里面的数据你塞给 tab的。
//所以需要 定义一个 变量数组 匹配前先清空一下数组。 在 再查询的数组里面 定义一个变量对象 把tab需要的值用新的变量 赋值拿过来 ,再进行匹配,在赋值。
//然后在 push
// 在把tab的数组 赋给新定义的数组
// tab 数组的值 是 2个地方拿来的 需要拼接在一起
// 定义一个新的数组去接收
// 循环套循环 - 定义新的对象存需要的值,- 在匹配id 相等了 就赋值
// 把赋值放进数组里面
// 把tab 数组 赋给定义的新数组
let new_arr = [];
this2.historyData.map(v=>{
console.log("vvvvv",v);
let new_list = {}
new_list.deviceId = v.deviceId;
new_list.ip = v.ip;
new_list.deviceName = v.deviceName;
arr.map(item=>{
let new_time = item.time;
new_time = item.time.slice(0, 4) + "-" + item.time.slice(4, 6) + "-" + item.time.slice(6, 8) + " " + item.time.slice(8, 10) + ":" + item.time.slice(10, 12) + ":" + item.time.slice(12, 14);
console.log("item", item);
console.log( '时间格式', new_time);
if(v.deviceId === item.deviceid){
new_list.type = item.type;
new_list.time = new_time;
}
})
new_arr.push(new_list)
})
this2.historyData = new_arr
}
},
/**
* webstock关闭
*/
websocketclose(e) {
console.log("WebSocket连接关闭");
setTimeout(() => {
this.initWebSocket();
console.log("socket正在重连...");
}, 5000);
},
},
created(){
// console.log("线路和车站:",this.$store.state.parameter.lineStation);
this.handleListApproveHistory();
console.log("服务节点", this.$store.state.user.serverNodeId);
this.get_serverNodeId(); //拿服务节点去调接口
},
mounted(){
// this.initWebSocket(); // 开启WebSocket长连接
},
destroyed() {
//页面销毁时关闭长连接
this.websocketclose();
},
}
</script>
<style type="text/css">
</style>
二:新需求
要求初始化进来页面时, 树的 第一个节点 展开, 第一个节点下的第一个 值默认选中, 并且会去请求后台,加载右边的列表数据。
先上效果图:
数据结构与算法
这一块在笔试、面试的代码题中考核较多,其中常考的数据结构主要有:数组、链表、队列、栈、Set、Map、哈希表等,不同数据结构有不同的方法以及储存原理,这些算是技术岗的必备知识。算法部分主要分为两大块,排序算法与一些其他算法题。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
排序算法根据考频高低主要有:快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种,这类考核点要么是算法的时间、空间复杂度、稳定度,要么是直接手写代码,故在理解算法原理的同时,对JS语言版的排序算法代码也要加强记忆。
- 二叉树层序遍历
- B 树的特性,B 树和 B+树的区别
- 尾递归
- 如何写一个大数阶乘?递归的方法会出现什么问题?
- 把多维数组变成一维数组的方法
- 知道的排序算法 说一下冒泡快排的原理
- Heap 排序方法的原理?复杂度?
- 几种常见的排序算法,手写
- 数组的去重,尽可能写出多个方法
- 如果有一个大的数组,都是整型,怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2
- 合并两个有序数组
- 给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)
的特性,B 树和 B+树的区别
- 尾递归
- 如何写一个大数阶乘?递归的方法会出现什么问题?
- 把多维数组变成一维数组的方法
- 知道的排序算法 说一下冒泡快排的原理
- Heap 排序方法的原理?复杂度?
- 几种常见的排序算法,手写
- 数组的去重,尽可能写出多个方法
- 如果有一个大的数组,都是整型,怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2
- 合并两个有序数组
- 给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)
[外链图片转存中…(img-qYWMrpOR-1715826433340)]