electron开发记录(五)：调用jquery,bootstrap并对其一些用法的总结_electron bootstrap

electron中调用jquery及bootstrap的方法

jquery作为一个js库，能够很大程度上的简化对页面中元素的控制。而bootstrap作为css库，能够方便的写出好看的界面。调用bootstrap需要先调用jquery。在调用bootstrap的时候，我一开始是按照网页中调用bootstrap的方法来的，也就是照着bootstrap官网上的方法：

<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

首先调用bootstrap的css库，再调用jquery,再调用bootstrap的js文件。看起来没问题对不对？但是在实际运行的时候，报错了： Uncaught Error: Bootstrap's JavaScript requires jQuery 。但是我明明是先引入的jQuery再引入bootstrap的呀？

再查了查资料，哦，原来是 electron 的 Renderer 端因为注入了 Node 环境，存在全局函数 require，导致jquery 内部环境判断出现问题 。对应的解决方法是，在你引入jQuery之前添加这段代码

window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;

这样，就可以用nodeRequire来使用node模块，又能使用jQUery了

另外还有一种方法，先用npm安装好bootstrap和jquery，然后使用require来调用(如果无法安装，则加上–global参数)

window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');
require('../node_modules/bootstrap/dist/js/bootstrap.min.js');

然后将html页面改成

<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script>
    window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');
    require('../node_modules/bootstrap/dist/js/bootstrap.min.js');
</script>

再运行，报错信息就消失了。

jquery的一些用法总结

选中当前对象

是使用jquery的时候，有时候会需要选中当前的对象。有个例子，我点击一个按钮，那么我如果相对这个按钮进行操作，肯定首先是要选中这个按钮。关于如何选中当前组件，很多地方都说使用

$("button").click(()=>{
    var btn = $(this) ;
就可以了，但是我这里好像不行，原因不明。后来我查了查，发现改成 
$("button").click((e)=>{
    var btn = e.target ;
这样就行了，此时btn代表了你点击的对象。如果是要jquery对象，那就稍微改一下,var btn = $(e.target);即可。 
修改属性(attr)值 
什么是属性值？就是出现在div或者其他块中的内容。举个例子， 
<div id="hehe" class="hahaha">23333</div> 
那么这个div块就有一个名叫id的属性，值为hehe,以及名叫class的属性，值为hahaha。那么当该div块被选中并且被转化为jquery对象以后，能够使用.attr函数来查询和修改块的属性值。 
var btn = $("#id") ;
btn.attr("class") ; // 查询属性class的值。
btn.attr("class","heiheihei") // 将属性class的值改为heiheihei 
修改value值 
类似的，jquery对象还可以使用.val来控制value属性的值。即下面两行的功能等价 
$("div").val() ;
$("div").attr("value") ; 
下面两行的功能也等价 
$("div").val("2333") ;
$("div").attr("value","2333") ; 
修改text值 
使用.text()能够获得div块中间的文本内容。比如说下面这个 
<div id="hehe" class="hahaha">23333</div> 
那么$(“div”).text()返回的内容就是’23333’了。
                    本文主要分两个部分，分别是在electron中调用jquery和bootstrap的方法以及为什么要这么调用，以及对jquery一些用法的总结。electron中调用jquery及bootstrap的方法jquery作为一个js库，能够很大程度上的简化对页面中元素的控制。而bootstrap作为css库，能够方便的写出好看的界面。调用bootstrap需要先调用jquery。在调用bootstrap
				演示如何使用Bootstrap和jQuery构建电子应用程序
什么是电子？
 如果可以构建网站，则可以构建桌面应用程序。 Electron是一个使用JavaScript，HTML和CSS等网络技术创建本机应用程序的框架。 它负责处理硬部分，因此您可以专注于应用程序的核心。
 我为有构建Web应用程序经验并且刚刚开始使用Electron的您构建了这个演示应用程序。 我选择实施Bootstrap 4.0.0-beta3是因为：
 Bootstrap是世界上最流行HTML，CSS和JS框架，用于在网络上构建响应式，移动优先的项目
它碰巧需要jQuery，它也可以用于Web开发。 我从Bootstrap项目中借用了。 作为示例标记，其目的仅是演示响应式布局。 菜单按钮演示了翻转行为，但未链接任何内容。 搜索框不起作用。 对于其预期目的的示例，请抓住窗框并调整其大小。 当窗口从电话尺寸到桌子尺寸再到桌面尺寸时，请注意界面在折叠和展开时会对其进行重新设计，从而充分利用可用空间。
快速代码浏览
代码入口点在package.json中的“ main”键下。 值是“ main.js”
				1.electron架构思考
在做electron桌面开发中，Electron+vue当下算是性价比的比较高的。但是electron算是小众开发，遇到问题，基本上就是掉进深坑，爬好久才出来。
为了做一个项目，我翻遍了国内好多网站。看到一篇好的文章。Electron 应用实战 (架构篇)这篇还是很值得好好看看
其中一句话，我觉得讲的很有道理====》数据通讯方案决定整体的架构方案。...
安装bootstrap命令如下：npm install bootstrap --save 
安装后可能报告如下错误：npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself. 
需要自行安装po...
Electron是一个仅使用javascript,Html和css来快捷搭建跨平台桌面应用的框架，它使用Chromium和Node.js。vscode,github desktop等都是用electron开发的。Electron的中文网址是https://electronjs.org/
二、环境配置
源码：https://github.com/sueRimn/electron-bootstrap
当引入jQuery和bootstrap文件时，会报错，原因是：electron 的 Renderer 端因为注入了 Node 环境，存在全局函数 require，导致jquery 内部环境判断出现问题。
1、解决方法1：
再引入jQ...
npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself. 
需要自行安装popper，命令如下：
npm install popper.js@^1.14.3 --save
页面引入bootstrap
页面引入bootstrap的css和js文件如下：
				学了两天的nodejs，写了一个简单的后台实例，还有配套的与后台进行交互的简单网页。 
页面端使用了jQuery进行控制， 
后台使用nodejs作为操控语言，使用express执行网络操作整个工程结构如下：根目录--------------
    |-package.json
    |-test.js
    |-public
        |-main.html
        |-add
				这里主要分三块，分别是nginx的基础安装及使用，反向代理及处理静态文件的请求。
1.安装及使用(windows 平台)首先从这里下载nginx，照流程安装即可。如果觉得英语稍显吃力的话，可以看教程启动nginx 
方法1：命令行进入nginx的根目录，输入 start nginx 
方法2：命令行进入nginx的根目录，输入 nginx.exe方法3：进入nginx的根目录，双击nginx.exe
				这是在 Electron 应用程序中使用 ECMAScript 模块的一种方式。通过在 package.json 文件中添加 "type": "module"，您可以在应用程序中使用 import 和 export 等 ECMAScript 模块语法，而不需要使用 require() 函数来导入模块。
这种方式可以使您的代码更加简洁和模块化，同时还能提高应用程序的性能。但需要注意的是，某些 Node.js 模块可能无法直接用于 Electron 应用程序中，因为它们可能依赖于 Node.js 特定的 CommonJS 模块语法。在这种情况下，您需要使用一些工具或者手动转换这些模块，以便它们可以与 Electron 应用程序一起使用。