站长工具

实用教程丨如何将实时数据显示在前端电子表格中（一）

作者：powertoolsteam
   

Author

Alex Zhang

Category

SpreadJS

Tags

SpreadJS，前端电子表格，实时数据，RealTime Data

 

 

 

前言

数据（包括股票、天气和体育比分）在不断更新为新信息时最为有用。SpreadJS是一个非常通用的 JavaScript 电子表格组件，它还可以轻松地使用、显示并通过数据绑定提供实时数据更新。

我们将使用WebSocket从Finnhub.IO获取实时数据，然后使用基本的 SpreadJS 功能来展示数据。要使用 Finnhub Stock API，您需要创建一个免费帐户并生成您的 API 密钥，我们稍后将在该应用程序中使用该密钥。

在本教程中，我们将使用 Node.JS Express 和 WebSocket，因此请确保安装最新版本。我们还将使用 Visual Studio Code，因此以管理员身份运行它，以便 NPM 命令可以在终端中运行。

JavaScript 实时数据示例

在此文中，我们将介绍如何按照以下步骤将实时数据合并到 JavaScript 电子表格中：

  1. 设置应用程序
  2. 连接到数据源
  3. 使用 SpreadJS 中的数据
  4. 为折线图添加数据
  5. 添加折线图
  6. 运行程序

应用设置

我们可以从为应用程序创建一个文件夹开始。在这种情况下，我们将其命名为“实时数据”。接下来，需要在该文件夹中创建一个 package.json 文件，用作项目的清单文件。这可能包含类似于以下的内容：

{

    "name": "real-time-data",

    "version": "0.0.2",

    "description": "An app that imports real-time data into Spread JS",

    "dependencies": {}

}

 

对于这个应用程序，我们将使用 Express 作为 Web 框架和 WebSockets 来获取实时数据，我们可以简单地使用 npm 安装它，也将使用它来安装 SpreadJS 文件。在 Visual Studio Code 终端中，您可以键入：

npm install --save express@4.18.2 finnhub websocket @grapecity/spread-sheets @grapecity/spread-sheets-charts

一旦安装成功，就可以创建一个名为“index.js”的文件来设置应用程序，其中会包含以下内容：

var express = require('express');

var app = express();

var http = require('http').Server(app);

app.use('/node_modules', express.static('node_modules'));

// Add code here

http.listen(3000, function(){

    console.log('Stock Ticker Started, connect to localhost:3000');

});

　　

现在就可以添加应用程序到 HTML 文件中。在这种情况下，我们可以将文件命名为“index.html”。然后继续向HTML 文件添加一些代码，包括对 SpreadJS 脚本和 CSS 引用以及一些基本的初始化代码：

<!doctype html>

<html>

  <head>

    <title>Real Time Data</title>

  </head>

  <script type="text/javascript" src="stockTemplate.js"></script>

  <link href="/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />

  <script src="/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>

  <script src="/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" ></script>

  <script>

    window.onload = function() {

      // Initialize spread variables

      var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 1 });

      spread.fromJSON(stockTemplate);

      spread.options.scrollbarMaxAlign = true;

      spread.options.showHorizontalScrollbar = false;

      spread.options.showVerticalScrollbar = false;

      spread.options.grayAreaBackColor = 'rgb(38,38,38)';

      var activeSheet = spread.getActiveSheet();

      var dataSheet = spread.getSheet(1);

      activeSheet.clearSelection();

    }

  </script>

  <body>

    <div id="spreadSheet" style="width: 680px; height: 590px; border: 1px solid gray"></div>

  </body>

</html>

　　

在前面的代码片段中，我们使用了 spread.fromJSON() 来加载模板文件。在下面的例子中，我们以股票数据显示为背景建立相应的模板文件。通过

使用 SpreadJS Designer，我们可以为数据源创建数据标签和绑定、格式化单元格、删除网格线和标题，并为图表添加一个区域。同时，

提供名为“stockTemplate.js”的模板文件。

想要从设计器中导出到 JS，可以单击“文件”>“导出”并选择“导出 JavaScript 文件”。在本教程中，我们将该模板文件（stockTemplate.js）与 index.js 和 index.html 文件放在同一文件夹中。

回到 index.js 文件，我们需要使用以下代码告诉程序来提供 HTML 文件和模板：

app.get('/', function(req, res){

    res.sendFile(__dirname + '/index.html');

});

// Required to load template file

app.get('/stockTemplate.js', function(req, res){

    res.sendFile(__dirname + '/stockTemplate.js');

});

　　

同时，在 index.html 文件中，可以通过添加脚本来加载该模板文件：

<script type="text/javascript" src="stockTemplate.js"></script>

　　

要完成设置，还需要初始化稍后会用到的变量，并创建一个下拉单元格来选择股票数据：

// Initialize variables

var stockSymbolLookup = [{text:'Apple Inc.', value:'AAPL'}, {text:'Microsoft Inc.', value:'MSFT'}, {text:'Google', value:'GOOGL'}];

var dataSource = [],

    lastPrice = 0,

    timeStamp = 0,

    volume = 0,

    stockCounter = 0,

    chart = null,

    chartAxisRange = 0.5,

    lineDataMaxSize = 10,

    lineData = new Array(lineDataMaxSize),

    initialData = true,

    socket,

    stock;

// Create a drop down for selecting a stock

var stockDropDown = new GC.Spread.Sheets.CellTypes.ComboBox().items(stockSymbolLookup);

activeSheet.getCell(2,1).cellType(stockDropDown);

　　

我们还可以为开盘价的变化设置特定的条件格式。

  • 绿色 = 正
  • 红色 = 负

创建 SpreadJS Blazor 组件

在将 SpreadJS 放入 Blazor 应用程序之前，我们必须首先创建一个 Blazor 组件来包含 SpreadJS。

在本教程中，我们将使用 Visual Studio 2022 和 SpreadJS V16.0。

想要创建组件，首先要创建一个 Razor 类库：

剃刀类库

为简单起见，您可以将其命名为“SpreadJS_Blazor_Lib”：

配置项目

创建项目后，我们需要将 SpreadJS 文件复制到“wwwroot”文件夹。

连接到数据源

在实际编写代码连接到数据源之前，我们需要添加一些代码来处理用户从 Spread 的下拉列表中选择股票的情况。只有这样我们才能连接并获取数据。为此，我们可以绑定到 EditEnded 事件，通过数组查找股票代码，然后连接到该股票数据：

// Bind an event for changing the stock in the drop down menu

// Set the stock variable to the newly selected stock from the list

activeSheet.bind(GC.Spread.Sheets.Events.EditEnded, function(e, info) {

    if(info.row === 2 && info.col === 1) {

      stock = stockSymbolLookup.find(stockLookup => stockLookup.text === activeSheet.getValue(2,1));

      connectToDataSource();

    }

  });

　　

这将调用一个我们创建的名为“connectToDataSource”的新函数：

// Handle connecting to the data source to get new stock information when the selected stock is changed

function connectToDataSource() {

    // Create a new WebSocket connected to the FinnHub Stock API with a personal token

    socket = new WebSocket('wss://ws.finnhub.io?token=<YOUR TOKEN HERE>');

    if (socket.readyState !== WebSocket.CLOSED)

      console.log("CONNECTED.");

    else

      console.log("NOT CONNECTED.");

     

    // When the socket first opens, set the length of the data source to zero, remove the line chart if

    // it exists, and send a message back to the server with the selected stock

    socket.addEventListener('open', function (event) {

      dataSource.length = 0;

      if (activeSheet.charts.get('line') != null)

        activeSheet.charts.remove('line');

      socket.send(JSON.stringify({'type':'subscribe', 'symbol':stock.value}));

    });

  }

　　

此代码使用 WebSocket 连接到数据源，并传入要订阅的股票代码。

注意：初始化 WebSocket 时，您需要添加从 Finnhub.IO 生成的令牌。

此外，为保证数据在重置的过程中能够得到正确的结果，我们需要增加activeSheet.charts.remove('line');，每次更改股票选择时都会调用此函数。

当程序连接到数据源并订阅特定股票值时，程序将从该数据源接收 JSON 数据形式的更新，我们需要解析这些数据并在 Spread 中进行使用。为此，我们可以使用事件侦听器来侦听来自 WebSocket 的消息

// Listen for a message from the server

socket.addEventListener('message', function (event) {

    spread.suspendPaint();

    // Get the data from the server message

    var dataArray = JSON.parse(event.data)

    console.log(dataArray);

    if (dataArray.data && dataArray.data.length != 0) {

      // Set the data source and extract values from it

      var dataSource = dataArray.data[dataArray.data.length-1];

      lastPrice = dataSource.p;

      timeStamp = dataSource.t;

      volume = dataSource.v;

      // Fill in starting data for the line chart

      if (initialData) {

        lineData.fill({Value:lastPrice});

        setConditionalFormatting();

        initialData = false;

      }

      // Set the specific values in the spreadsheet

      activeSheet.setValue(4, 1, stock.value);

      activeSheet.setValue(5, 1, lastPrice);

      activeSheet.setValue(2, 7, lastPrice);

      activeSheet.setValue(4, 7, new Date(timeStamp));

      activeSheet.setValue(6, 7, volume);

      // Add the line chart if one doesn't exist

      if (activeSheet.charts.all().length == 0) {

        addChart();

      }

      addLineData(lastPrice);

      bindData();

    }

   

    spread.resumePaint();

  });

　　

在上面的代码中，我们遍历数据源并在工作表中填写一些示例数据。同时，还调用了一些将被定义的函数：bindData、addLineData、addChart 和 setConditionalFormatting。

当数据被正确获取之后，如何在SpreadJS中进行显示，可以前往如何将实时数据显示在前端电子表格中（二）中一探究竟。

欢迎访问SpreadJS产品官网：http://www.grapecity.com.cn/developer/spreadjs


本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网


本文转载于网络 如有侵权请联系删除

相关文章

  • Vue讲解系列- - -Nginx和Postman讲解

    今天****叶秋学长****带领大家继续学习vue讲解系列专栏的Nginx和Postman讲解~~目录一、什么是Nginx？二、启动三、配置停止重启四、Postman一、什么是Nginx？Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。vue打包前文件配置vue.configmodule.exports={  publicPath:"./", }; ​复制然后打包npmrunbuild复制二、启动双击.exe文件，浏览器输入127.0.0.1查看是否启动成功listen80默认配置了80端口，不输入端口号的话默认访问80端口location配置了路径root访问的文件夹路径\index指的是首页index.htmlindex.htm按顺序一个一个找（老电脑文件只能三个后缀，做了个容错处理）三、配置按照配置修改，修改完以后需要通过任

  • Java 多线程与线程池 Thread弊端与Executor存在问题 及解决方法

    文章目录Java多线程与线程池Thread弊端与Executor存在问题及解决方法1.使用Thread弊端2.线程池背景及优势3.Executor解析3.1线程池原理3.2配置线程池3.3优雅关闭线程池4.Executor存在问题解决方法5.RefJava多线程与线程池Thread弊端与Executor存在问题及解决方法1.使用Thread弊端newThread(newRunnable(){ @Override publicvoidrun(){ //TODOAuto-generatedmethodstub } } ).start();复制Thread的弊端如下：每次newThread新建对象性能差。线程缺乏统一管理，可能无限制新建线程，相互之间竞争，及可能占用过多系统资源导致死机或oom。缺乏更多功能，如定时执行、定期执行、线程中断。2.线程池背景及优势我们使用线程的时候就去创建一个线程，这样实现起来非常简便，但是就会有一个问题：如果并发的线程数量很多，并且每个线程都是执行一个时间很短的任务就结束了，这样频繁创建线程就会大大降低系统的效率，因为频繁创建线程和销毁线程需要时间。 那么有

  • CentOS7.5从零安装Python3.6.6

    Linux环境:CentOS7.5安装可能需要的依赖yuminstallopenssl-develbzip2-develexpat-develgdbm-develreadline-develsqlite-develgccgcc-c++openssl-devel下载压缩包获取下载链接此处我们选取Python官网的Python3.6.6，下载地址如下https://www.python.org/ftp/python/3.6.6/Python-3.6.6.tar.xz看官也可以自己选择版本，官方FTP为https://www.python.org/ftp/python/下载压缩包现在我们进入CentOS（目录此时可不管），命令如下wgethttps://www.python.org/ftp/python/3.6.6/Python-3.6.6.tar.xz下载完成进入下一步解压压缩包移动压缩包我个人习惯将Python安装在/usr目录下，我们首先将Python压缩包移动至指定文件夹,我们需要使用mv命令来移动mv现在的位置移动的位置mv/root/Python-3.6.6.tar.xz/usr

  • AcWing 196. 质数距离（二次筛法 区间筛质数）

    思路：摘自小呆呆#include<bits/stdc++.h> usingnamespacestd; #defineintlonglong constintN=5e6+10; boolst[N]; intpr[N],cnt; voidinit(intx){ memset(st,0,sizeofst); for(inti=2;i<=x;i++){ if(!st[i]){ pr[cnt++]=i; for(intj=0;pr[j]*i<=x;j++){ st[pr[j]*i]=1; if(i%pr[j]==0)break; } } } } signedmain(){ intl,r; while(cin>>l>>r){ init(50005); memset(st,0,sizeofst); for(inti=0;i<cnt;i++){ intp=pr[i]; for(intj=max(2*p,(l+p-1)/p*p);j<=r;j+=p){ st[j-l]=1; } } cnt=0; for(inti=l;i<=r;i++){

  • Python利用numpy.random模块生成随机数的方法

    参考链接：Python中的numpy.random.randnnumpy.random.rand(m,n,p,q…)生成0到1之间的n个随机数，参数是shape #传入单个参数importnumpyasnpdata=np.random.rand(3)print(data)输出：[0.424877430.925375190.53686567]#传入两个参数：输出一个值在0-1之间的三行四列数组importnumpyasnpdata=np.random.rand(3,4)print(data)输出：[[0.983779730.850927750.7504745 0.14616559] [0.821355530.470969880.439215360.52325622] [0.258340710.3646412 0.888723180.24679017]]numpy.random.randn（d0,d1,d2）从标准正态分布中返回一个或多个样本,参数是shape importnumpydata=numpy.random.randn(3,4)print(data)输出：[[-1.0037195

  • GUI鼠标相关设置

    让GUI组件里的光标改变形状：首先用组件对象调用setCursor方法：组件对象.setCursor(new Cursor(Cursor.常量);以下是设置各种光标的参数：CROSSHAIR_CURSOR十字光标类型。 CUSTOM_CURSOR 与所有定制光标有关的类型。 DEFAULT_CURSOR 默认光标类型（如果没有定义光标，则获取该设置）。 E_RESIZE_CURSOR 调整窗口右边框大小的光标类型。 HAND_CURSOR 手状光标类型。 MOVE_CURSOR 移动光标类型。 N_RESIZE_CURSOR 调整窗口上边框大小的光标类型。Stringname 光标的用户可视名称。 NE_RESIZE_CURSOR 调整窗口右上角大小的光标类型。 NW_RESIZE_CURSOR 调整窗口左上角大小的光标类型。 staticCursor[]predefined S_RESIZE_CURSOR 调整窗口下边框大小的光标类型。 SE_RESIZE_CURSOR 调整窗口右下角大小的光标类型。 SW_RESIZE_CURSOR 调整窗口左下角大小的光标类型。 TEXT_CU

  • 实战|记一次SQL注入过WAF思路分享

    判断注入点输入'-->报错输入''-->回显正常可以确定是使用单引号闭合的输入'and'1'='1-->回显正常,可以查询到数据输入'and'1'='2-->回显正常,但未查询到数据可以确定存在注入接下来就是跑数据,直接掏出sqlmapsqlmap-u"http://www.xxx.com?id=2"--batch复制一片红!!!nice再次访问IP已经被封掉了根据经验推测应该是因为访问过于频繁导致的开代理换个IP,加个延时参数继续OK,成功跑出注入点sqlmap-u"http://www.xxx.com?id=2"--delay0.2--batch复制复制查询当前数据库用户权限,不是高权限,所以只能去找Web后台管理员账号密码sqlmap-u"http://www.xxx.com?id=2"--delay0.2--batch--is-dba复制复制查询当前数据库,成功sqlmap-u"

  • 云中心已死，边缘计算上位？

    近年来，计算工作负载一直在迁移：首先是从本地数据中心迁移到云，现在越来越多地从云数据中心迁移到更靠近正在处理的数据源的「边缘」位置。目标是通过缩短数据传输距离来提高应用和服务的性能和可靠性，降低运行成本，从而减少带宽和延迟问题。边缘计算云中心「死亡」了吗？2018年10％传统数据中心关闭当然，这并不是说内部部署或云中心已经死亡，有些数据总是需要在集中位置进行存储和处理。要知道数字基础设施肯定在发生变化。例如，据Gartner称，到2025年，80％的企业将关闭其传统数据中心，而2018年则为10％。由各种业务需求驱动的数据处理是这种基础设施发展的关键驱动因素。随着最近业务驱动的IT计划的增加（通常超出传统的IT预算），物联网解决方案、边缘计算环境和「非传统」IT的实施迅速增长。此外，人们越来越关注面向外部应用的客户体验，以及糟糕的客户体验对企业声誉的直接影响。这种外向焦点导致许多组织根据网络延迟、客户群体集群和地缘政治限制（例如，欧盟的通用数据保护法规[GDPR]或监管限制）重新考虑某些应用程序的放置。当然，边缘计算涉及挑战（间歇性的），因为其网络边缘具低带宽和高延迟为特征。如果大量的

  • Android中WebView拦截替换网络请求数据

    Android中处理网页时我们必然用到WebView,这里我们有这样一个需求，我们想让WebView在处理网络请求的时候将某些请求拦截替换成某些特殊的资源。具体一点儿说，在WebView加载http://m.sogou.com时，会加载一个logo图片，我们的需求就是将这个logo图片换成另一张图片。shouldInterceptRequest好在Android中的WebView比较强大，从API11(Android3.0)开始，shouldInterceptRequest被引入就是为了解决这一类的问题。shouldInterceptRequest这个回调可以通知主程序WebView处理的资源（css,js,image等）请求，并允许主程序进行处理后返回数据。如果主程序返回的数据为null，WebView会自行请求网络加载资源，否则使用主程序提供的数据。注意这个回调发生在非UI线程中,所以进行UI系统相关的操作是不可以的。shouldInterceptRequest有两种重载。publicWebResourceResponseshouldInterceptRequest(WebView

  • 人工神经网络完爆人类的6大领域：看车都能预测选举

    编辑：frances【新智元导读】来自Venturebeat的盘点，人工智能都在哪些领域超越了人类？欢迎补充。目前，不同于一次处理多个事物的人脑，机器人必须以线性方式“思考”。在某些领域，AI已经打败人类，深度神经网络学会了交谈，驾驶汽车，获得电子游戏的胜利，画图，并帮助科学发现。这里有六个领域，人工神经网络证明他们可以超越人类的智慧。1.图像和物体识别机器在图像和物体识别方面有很好的记录。GeoffHinton发明的胶囊网络几乎减少了以前的最佳错误率，这个测试挑战软件识别玩具。即使视图与之前分析的视图不同，在各种扫描中使用增加量的这些胶囊也允许系统更好地识别物体。另一个例子来自一个最先进的网络，该网络经过标记图像数据库的训练，能够比相同任务训练100小时的博士更好地分类对象。2.电子游戏Google的DeepMind使用深度学习技术，被称为深度强化学习。研究人员用这种方法教计算机玩Atari游戏Breakout。电脑没有以任何特定的方式教授或编程玩游戏。相反，它在观看比分时被赋予了键盘的控制权，其目标是最大化得分。玩了两个小时后，电脑成了游戏的专家。深度学习社区正在进行一场比赛，训练

  • 腾讯云弹性MapReduceFlume简介

    Flume简介ApacheFlume是可以收集例如日志、事件等数据资源，并将这些数量庞大的数据从各项数据资源中集中起来存储的工具/服务。Flume具有高可用、分布式、配置工具等特性，其设计原理也是将数据流（例如日志数据）从各种网站服务器上汇集起来存储到HDFS、HBase等集中存储器中。 Flume架构一个Flume事件被定义为一个数据流单元。Flumeagent其实是一个JVM进程，该进程中包含完成任务所需要的各个组件，其中最核心的三个组件是Source、Channel以及Sink。 Source消费外部源（例如Web服务器或者其他Source）传递给它的事件，并将其保存到Channel（一个或多个）中。 ChannelChannel位于Source和Sink之间，用于缓存进来的events，当Sink成功的将events发送到下一跳的Channel或最终目的，events从Channel移除。 SinkSink负责将events传输到下一跳或最终目的，成功完成后将events从Channel移除。 使用指南使用准备 已创建一个EMR集群。创建EMR集群时需要在软件配置界面选择f

  • Database数据库切片模式

     数据库切片模式关注的实现水平伸缩。切分是从单个数据库到平分数据访问两个或更多数据库切片。每个切片有和原始数据库相同的Schema。大多数据分布在每个切片每一行。从切片合并起来的数据和原始数据库一样。切片也被近似等同于水平分区(HorizontalPartitioning)，网上很多地方也用水平分区来指代切片，二者之间实际上还是有区别的。的确，切片的思想是从分区的思想而来，但数据库分区基本上是数据对象级别的处理，比如表和索引的分区，每个子数据集上能够有不同的物理存储属性，还是单个数据库范围内的操作，而切片是能够跨数据库，甚至跨越物理机器的。       上下文(Context)     数据库切片有效应对下面的挑战： 应用数据库查询超过单个数据库结点的查询能力. 应用数据库更新超过单个数据库事务处理能力，导致不可接受相应时间或超时。 应用数据库网络带宽超过单个数据库结点的带宽页导致不可接受相应时间或超时。 应用数据库存储需求已超过单个数据库结点容量。 机制   传统(非共享)数据库部

  • mySQL查询优化

    糟糕的SQL查询语句可对整个应用程序的运行产生严重的影响，其不仅消耗掉更多的数据库时间，且它将对其他应用组件产生影响。 　　如同其它学科，优化查询性能很大程度上决定于开发者的直觉。幸运的是，像MySQL这样的数据库自带有一些协助工具。本文简要讨论诸多工具之三种：使用索引，使用EXPLAIN分析查询以及调整MySQL的内部配置。 　　一、使用索引 　 　　MySQL允许对数据库表进行索引，以此能迅速查找记录，而无需一开始就扫描整个表，由此显著地加快查询速度。每个表最多可以做到16个索引，此外MySQL还支持多列索引及全文检索。 　　给表添加一个索引非常简单，只需调用一个CREATEINDEX命令并为索引指定它的域即可。列表A给出了一个例子： mysql> CREATE INDEX idx_username ON users(username); Query OK， 1 row affected (0.15 sec) Records: 1 &nb

  • lnmp+wordpress

    一  安装Nginx 1.执行以下命令，在 /etc/yum.repos.d/ 下创建 nginx.repo 文件。 vi/etc/yum.repos.d/nginx.repo复制 2. 按 i 切换至编辑模式，写入以下内容。 [nginx] name=nginxrepo baseurl=https://nginx.org/packages/mainline/centos/7/$basearch/ gpgcheck=0 enabled=1复制 3. 按 Esc 输入 :wq 保存文件并返回。 4.执行以下命令，安装nginx。 yuminstall-ynginx复制 5.执行以下命令，打开 default.conf 文件。 vim/etc/nginx/conf.d/default.conf复制 6.按 i 切换至编辑模式，编辑 default.conf 文件。 7.找到&n

  • 2019_软工实践_Beta（2/5）

    队名：955 组长博客：点这里！ 作业博客：点这里！ 组员情况 组员1(组长)：庄锡荣 过去两天完成了哪些任务 文字/口头描述 ?按照时间进度的安排进行相应的检查 展示GitHub当日代码/文档签入记录 接下来的计划 转移网站到新服务器 URL重定向问题 网站安全性问题 还剩下哪些任务 个人：网站的转移，URL重定向的设置，设置用户相应权限 燃尽图 遇到了哪些困难 天气好冷，打代码好难 有哪些收获和疑问 收获：在寒冷的天气下学习知识 疑问：如何战胜寒冷 组员2：林晓锋 过去两天完成了哪些任务 文字/口头描述 收集团队成员的博客信息，写博客。 展示GitHub当日代码/文档签入记录 共用 接下来的计划 继续写博客 还剩下哪些任务 个人：一些界面的修改和博客的书写。 燃尽图 组内共用 遇到了哪些困难 目前没有遇到太大的困难 有哪些收获和疑问 收获：懂得按合理大小插入图片 疑问：如何提高效率。 组员3：王钟贤 过去两天完成了哪些任务 文字/口头描述 开始学习tkihter。 展示GitHub当日代码/文档签入记录 共用 接下来的计划 熟悉

  • beego XSRF

    其实官网的介绍已经很详细了https://beego.me/docs/mvc/controller/xsrf.md，我这里自己做一个demo来演练一下 srf(跨站请求伪造)防护： 定义：每个用户一个cookie，所有的请求都需要验证这个cookie，如果没有这个cookie，则被认为跨站请求伪造。 防止类型：挟制用户在当前已登陆的web应用程序上执行非本意的操作的攻击方法。 XSRF：利用的是网站对用户网页浏览器的信任。 一、开启XSRF防护的两种方法 //在配置文件里添加如下三条配置 enablexsrf=true//开启xsrf防护 xsrfkey=61oEzKXQAGaYdkL5gEmGeJJFuYh7EQnp2XdTP1o//beego默认的xsrfkey是：“beegoxsrf”，这里将key改为基于当前的key进行加密 xsrfexpire=3600//过期时间，默认1小时，单位秒复制 1.2、方法二：在main.go里beego.Run()上方开启 //在beego.Run()上方添加如下三行配置 beego.BConfig.WebConfig.EnableX

  • Linux 内核：设备树（4）设备树中各个节点是谁转换的

    Linux内核：设备树（4）设备树中各个节点是谁转换的 背景 之前，我们在《把device_node转换成platfrom_device》中提到在设备树的device_node到platform_device转换中，必须满足以下条件： 一般情况下，只对设备树中根的一级子节点进行转换，也就是多级子节点(子节点的子节点)并不处理。但是存在一种特殊情况，就是当某个根子节点的compatible属性为"simple-bus"、"simple-mfd"、"isa"、"arm,amba-bus"时，当前节点中的一级子节点将会被转换成platform_device节点。 节点中必须有compatible属性。 那么，设备树中的一级节点的处理已经完成了，但是现在，我们还有一些子节点的读取不太了解。实际上，没有被处理称为platform_device的设备树节点，都被各个platform_device作为子节点进行处理了。 我们通过解析一棵比较经典的设备树，展示设备树中i2c子系统以及gpio-leds中是如何使用的。 参考：https://www.cnblogs.com/downey-blog/p

  • xcode上真机调试iphone4s出现“There was an internal API error.”解决方案

    xcode7更新之后使用真机调试，在IOS8的一台Iphone5手机上面没什么问题，IOS8的一台iphone6也没问题。但是在IOS6的一台Iphone4s和IOS7的ipadair2上面在最后安装的时候居然安装失败，提示 TherewasaninternalAPIerror.然后百度Google了一下，找到一下几种可能或解决办法： 1.私有api的问题。 2.product---clean一下，然后重新build一下，仅仅这样问题就可能得到解决。-----然而我的问题却没有解决（我甚至关机再试过） 3.部分人安装了多个版本xcode,在删除只保留一个版本之后重新build也好了--------然而我没有安装多个版本 在纠结了快一天的时候我发现console打印出的日志显示在安装的app的名字是乱码，通过查看buildsettings发现过productname改的是中文。然后抱着试试看的态度把productname改成原来的，和xcodeproj文件名一样再重新build,终于没问题了，开心。 在此提醒要修改app名字的时候最好不要修改product那么，可以在info.

  • Linux -命令总结

    简介： Linux是一套免费使用和自由传播的类Unix操作系统，是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。严格来讲，Linux这个词本身只表示Linux内核，但实际上人们已经习惯了用Linux来形容整个基于Linux内核，并且使用GNU工程各种工具和数据库的操作系统。Linux的性能是非常出色的，可以完全针对机器的配置有针对性的优化，这一点也是Windows无法比拟的。对于测试工程师来说完全掌握Linux是最基本的了，Linux系统主要用于部署环境和系统日志查询。   一、系统信息 arch显示机器的处理器架构(1) uname-m显示机器的处理器架构(2) uname-r显示正在使用的内核版本 dmidecode-q显示硬件系统部件-(SMBIOS/DMI) hdparm-i/dev/hda罗列一个磁盘的架构特性 hdpa

  • ArcEngine创建字段集

    ///<summary>///添加字段konghuifang20171017///</summary>///<returns></returns>publicList<IField>CreateFields(){//设置字段集IFieldspFields=newFieldsClass();IFieldsEditpFieldsEdit=(IFieldsEdit)pFields; //设置字段IFieldpField=newFieldClass();IFieldEditpFieldEdit=(IFieldEdit)pField; List<IField>fieldList=newList<IField>();pFieldEdit.Name_2="SHAPE";pFieldEdit.Type_2=esriFieldType.esriFieldTypeGeometry;pFieldsEdit.AddField(pField);fieldList.Add(pField); //添加其他的字段IFieldpFiel

  • Chrome表单文本框自动填充黄色背景色样式

     开发后台管理系统或网站时，使用谷歌的Chrome浏览器访问网页中表单，文本框背景色自动填充为黄色。这个问题在网络上其实早已经是老生常谈了，今天正巧我要处理这个问题，把之前查阅的一些资料和自己解决这个问题的方法纪录在此，一是为大家遇到此问题时提供一份资料，二是作为自己的笔记。过多的话就不多说了，下面进入正题。         一、首先介绍一下我遇到这个问题时文本框的样式情况：  上图为Chrome浏览器为表单中的文本框自动填充黄色背景色的样子， 我自己为文本框加的，获得焦点后，周围有蓝色阴影。   <inputclass="txt"id="userName"name="userName"type="text"value=""style=""/> <styletype="text/css"> .txt{ width:130px; height:22px; line-height:20px; padding-left:5px; border:

相关推荐

推荐阅读