全栈软件工程师在刚进入区块链领域可能会遇到一些挑战： 如何将Metamask[5](或Walletconnect[6], Phantom[7], 等等)连接到用户界面？...看一下六种最流行的方法，来连接到我们的 web3 应用程序。 给出代码示例，并展示该领域所有最大的参与者在使用的哪些工具，这样我们也可以使用同样的工具。...如何将使用 Metamask 连接到智能合约 当然也可以是其他的钱包，如浏览器中的另一个钱包，如 Phantom、Walletconnect 等。...我们用NextJS[39]来做这些工作，因为ReactJS[40]是目前地球上最流行的前端框架，而 NextJS 是建立在它之上的，在我看来，它比原始的 ReactJS 更方便使用。...在SimpleStorage.sol文件中可以查看该合约代码。 用本地区块链设置你的 MetaMask 现在，要将 Metamask 连接到我们的本地区块链。这样就可以快速发送交易和测试。
# 问题 mongoDB的默认登陆时无密码登陆的，为了安全起见，需要给mongoDB设置权限登录，但是keystoneJS默认是无密码登陆的，这是需要修改配置来解决问题 # 解决 在keystone.js...中找到配置初始化方法，添加一个mongo 对象来设置mongoDB连接实例， keystone.init({ 'name': 'recoluan', 'brand': 'recoluan',...'mongo': 'mongodb://user:password@host:port/dbName', }); 1 2 3 4 5 复制 这里需要注意的是，mongoDB在设置权限登录的时候，首先必须设置一个权限最大的主账户...，它用来增删其他普通账户，记住，这个主账户时 无法 用来设置mongo对象的， 你需要用这个主账户创建一个数据库（下面称“dbName”），然后在这个dbName上再创建一个可读写dbName的普通账户...，这个普通账户的user和password和dbName用来配置mongo对象
因为我现在的接口为了方便测试全部采用get接口，所以我可以在浏览器直接访问接口地址，如果能取到我保存在MongoDB数据库的数据则表示我的后端server服务成功开启。...可以看到，在我们的client项目下，生成了一个blog文件夹，我们只需要把这个文件夹部署到我们nginx的80端口，我们前端的部署工作就可以大功告成了。...可以看到我已经把我们的前端项目部署到nginx服务器了，现在我们需要去更改nginx的配置文件，一般配置文件在etc/nginx ?...我们可以尝试访问111.230.239.103试试能不能访问到我的博客首页 ? 可以发现我们前端部署成功了，但是取不到数据库的数据，我们刚才测试后端接口的文章数据全部无法显示。这是什么原因呢？...可以发现，我们后端的server服务是运行在4001端口，但是我们前端访问没有懈怠端口号，就是访问的80端口，因为端口不一致导致跨域请求，所以无法取到我们数据库中的数据。
单击应用后，您应该会看到配置的数据库中可供您使用的表。选择一个以生成数据模式。生成架构后，您可以在“构建”选项卡上执行查询。...— 4.3 前端集成 探索如何将 Cube.js 与数据可视化工具集成： 工具 教程 演示 D3.js D3仪表板教程 演示 谷歌图表 谷歌图表仪表板 演示 Highcharts React Highcharts...大多数现代web应用程序都是作为单页面应用程序构建的，前端与后端分离。遵循微服务架构，后端通常也会分成多个服务。...通常，Cube.js的后端作为服务运行，管理与数据库的连接，包括查询队列，缓存，预聚合等。同时为前端应用程序公开一个API，用于构建仪表板和其他分析功能。...目前很多的低代码的兴起和各种BI的开源项目，也为分析提供了很多的便利，但是很多公司为了能够满足自己的个性化的需求，也在寻求在开源的基础上进行二次开发，那么Cube.js也是个不错的选择。
1.申请网页接入 点击微连接，选择网站接入 ? 填写应用名称，选择应用分类为网页应用 ? 完善应用信息，可以看到我们已经成功获得App Key和App secret两个秘钥了。...我们可以看到，我们在授权界面成功登录后会回调到我们的回调界面，并附加code参数。我们需要取到url中code，然后开始第二步操作。...前端在第一步获取到code之后，发起ajax请求后端获取access_token,并且打印access_token的值，我们在浏览器端测试看看是否有效果。 ?...后端代码和获取access_token基本类似，在这里我就不详细说了。我们测试下能否取得用户个人信息。 ? 可以看到我们成功获取到用户个人信息，最后前端发起ajax请求调用后端的获取用户信息接口。...我们发起ajax请求后端获取用户数据的接口，然后获取到用户数据后直接在界面显示出来。我们可以测试下整体的效果： ? 可以看到我们已经成功获取到登录的微博账号的个人信息了。到这里实现微博第三方登录。
最重要的是同一个后端接口，我们可以供PC端，移动端多个终端进行使用，而不必为每一个终端单独实现一个接口。 前后端分离后的前端，不再是一个简单的HTML文件，而是一个完整的网站应用。...前端数据的来源是通过后端接口进行获取的。而我们最简单的方式就是前端使用ajax请求连接后端接口，取得需要的数据，然后在前端进行渲染。...可以看到我们express项目已经生成了，接下来我们按照红框提示进入项目根目录，然后安装依赖，最后启动项目。 ? 可以看到我们的express项目已经在3000端口运行了，我们可以访问试试 ?...可以看到我们已经对三个参数经过指定算法的加密生成签名sign，下一步发起ajax请求后端接口 ? ? 后端已经成功获取到前端传过来的值，然后使用相同的算法进行签名sign加密 ? ?...然后进行和前端一样的签名加密验证，将加密后的签名与前端进行对比，如果一致则验证通过。接下来需要将前端传递的经过AES加密的密码进行反向解密，得到用户输入的原密码 ? ?
本文的案例代码来自于前端标准模板项目。...服务端组织数据 Nextjs提供了便捷强大的服务端渲染功能——getInitialProps()，通过这个方法可以简单为服务端和前端同时处理异步请求数据： const load = async () =...SSR中最麻烦的前后端异步数据组装功能。.../pages/about.js文件，运行 Nextjs 后在浏览输入http://localhost:3000/about就可以看到这个组件，而....组件ssr异步数据实现 为了实现本文的需求——让所有组件实现类似于getInitialProps()的方法，我们先要理清_Nextjs_前后端渲染的过程。 渲染过程 _Nextjs_为使用者提供了.
当时在github开源后, 迅速得到了很多小伙伴的支持和反馈，也给了我持续迭代的决心，从开源到github H5搭建领域 top1，我花了一年时间，后面由于时间和成本问题， 我开始了做开源商业化的尝试。...： 入口页面： 编辑器页面（加入了AI能力） AIGC界面（大家可以线上体验啦）： 陆陆续续的技术分享 作为一名对技术有追求的前端，我平时也非常热爱技术分享，这几年陆陆续续在掘金，知乎， 我的个人号...这段时间里，我也在抽时间学习新的技术，比如 nextjs，vite等，在研究学习期间，基于自己的想法，又用 vue3 开发了一款表单搭建平台, 橙子试卷： 感觉实战经验慢慢拉满， 表单引擎上线之后2天内积累了...200+使用用户，还是有点小成就的~ 继续开源之路 辞职之后时间变多了，也有更多的时间做开源， 也陆陆续续迭代了很多开源项目，比如图片编辑器，开箱即用的nextjs的管理后台，nodejs解决方案等，...徐小夕的github主页 如果大家感兴趣也可以在我 github 主页看到我的开源项目，学习参考。
在我们最近的工作中，构建网站使用的架构是带有 Django REST Framework（DRF）后端的 React 前端。它们是通过在前端使用 axios（前端库）调用后端 API 来交互的。...只要我们提前定义好请求的资源列表（后面单个都简称：endpoint）和返回的数据格式，前端和后端就可以并行的进行开发。...这也使我们可以轻松的为未来的任何项目创建移动端 App，因为它们仍然可以复用后端 API。 在本文的剩余部分，我将介绍如何配置 React 前端和 DRF 后端。...redux-logger redux-persist react-redux $ npm install --save axios react-router-dom lodash 现在，我们先只展示将前端连接后端的主要部分...这就是一套连接我们的前端和后端的代码了。
我们可以看到，我们在授权界面成功登录后会回调到我们的回调界面，并附加code参数。我们需要取到url中code，然后开始第二步操作。...可以看到我们将第一步取到的code以及两个秘钥参数窜给我们后端写的获取access_token接口，我们成功获取到access_token.现在前端发起ajax请求这个后端接口，将code值传给后端，获取到...前端在第一步获取到code之后，发起ajax请求后端获取access_token,并且打印access_token的值，我们在浏览器端测试看看是否有效果。 ?...后端代码和获取access_token基本类似，在这里我就不详细说了。我们测试下能否取得用户个人信息。 ? 可以看到我们成功获取到用户个人信息，最后前端发起ajax请求调用后端的获取用户信息接口 ?...我们发起ajax请求后端获取用户数据的接口，然后获取到用户数据后直接在界面显示出来。我们可以测试下整体的效果： ? 可以看到我们已经成功获取到登录的GitHub账号的个人信息了。
，在页面上会实时展示出加粗的红色内容。...第二部分：JS 部分的代码 这里会与后端的 WebSocket Server 建立连接，并将 env 这个变量（参数）传到后端，然后后端会根据 env 来进行服务的检测，然后返回一个响应给到 js，最后...js 拿到了响应后进行追加到我们定义的一个 div 里面，这里也体现了一个实时的服务日志监控展示。...第三部分：WebSocket Server 部分 这里拿到了前端 js 传过来的参数 env，进行环境的匹配，然后遍历每一个服务的请求，再根据请求返回的结果拼接一个 response 给到 js，如下图红框中所示...： 第四部分：页面效果展示 总结： 整体上思路要清晰，html 里面通过 onclick 方法调用到 js，js 通过与后端的 WebSocket Server 建立连接，连接后会根据传入的参数来确定检测哪个环境的服务
本篇文章准备讲讲博客的部署，本篇涉及的知识点前端vue打包部署到nginx，后端Node部署并使用PM2进行进程管理。并且对vue首屏加载过慢做了适当的优化，提高首屏加载速度。...在开始部署博客之前，我们需要在本地安装XShell用来连接服务器进行pm2进程管理，FileZilla用于将本地项目上传到服务器。...--report可以在打包项目成功打开资源分析界面，会显示打包后每个文件的大小： ?...，首先在XShell中启动我们的后端进程，项目启动文件放置在bin文件夹的www文件，所以进入bin文件夹使用pm2 start ....其实用过前端框架的都知道，SPA最大的缺点就是首屏加载时间过长，那具体如何对vue项目进行优化呢？
我在我理解的技术发展趋势中有讲过JQuery的优势现在正逐步被超越，现在更流行MVVM模式，前端开发大多数程序员会更倾向于使用Vue,Angular，React去进行前端项目的开发。...所以现在越来越多的公司前端开发都会选在使用三大现代框架去进行开发，而Vue是三个现代前端框架中非常热门，而且学习难度最低的一个框架。...接下来登录逻辑如下： 1.接收前端的传参，使用相同签名算法生成签名sign校验sign是否一致 2.签名校验成功，使用AES解密前端加密后的密码原文，再使用MD5加密密码。...可以看到我们现在后端接口是可以正常运行的。...查看控制台可以看到我们成功取得了后端接口的响应： ? 所以我们可以看到，其实在vue这种现代框架我们并不提倡引入JQuery发起ajax，因为为了发起一个ajax请求而引入JQuery，是得不偿失的。
xx软件最终是通过访问令牌请求到我的公众号里的文章。...但是当我被浏览器重定向到授权服务，我和xx间的连接就断了，相当于此时我和授权服务建立连接后，将一直“停留在授权服务页面”。我再也没有重连到xx。...但这时xx已拿到我授权后的访问令牌，也使用访问令牌获取了我的号里的文章数据。这时，考虑我的感受。xx应该要通知到我，但是如何做呢？现在连接可是断了的呀！...为了让xx通知到我，我必须跟xx重建 “连接”。即第二次重定向，我授权后，又重新重定向回到xx的地址，这样我就跟xx有了新连接。 为重建连接，又不能暴露访问令牌，就有这样的临时、间接凭证：授权码。...因为xx最终要拿到高安全要求的访问令牌，并非授权码，授权码可以暴露在浏览器。 有了授权码，访问令牌可以在后端服务间传输，同时还可重建我&xx间的连接。
前言 因为工作的原因，需要把之前的后端改变外观，变得好看点。...查了很多资料，发现这边也是一个差不过空白的状态，找到了几种方法 一：SWT SWT就是我们最开始用的，他的优点是，便捷，可以通过拖拽的方式快速实现代码，非常方便，但是在这个前端发展迅速的时代，他的外观确实有些难以...大概的思路是，通过JCEF，当我们的后端跑起来时，点击按钮，JCEF接收到，然后拦截，再发出另一个指令，这个指令到我们的前端UI，让我们的UI同事进行网页的架构，前端那一堆东西。...然后前端点击按钮连接到后端，后端再发出一个指令，我们再拦截，再给前端一个指令（什么操作。什么弹出页面之类的巴拉巴拉） 我想大概的思路是这样的，那具体实现起来，可能需要一些脑筋了。...当然我也是想着寻找一下其他的路，因为JCEF的配置简直是太麻烦了。而且网络上几乎找不到JCEF的教程，寥寥无几啊.......而且JCEF的文献，都是英文的！！！！！我们一点一点摸索着来吧.....
springsecurity框架里面的密码必须是加密的，当我们的前端将用户名和密码传到后端的时候，这个密码就会被框架加密，这个加密的工具springsecurity框架给提供了很多，我们可以选择使用，一般我们用这个加密对象进行加密...那么既然我们在测试类里面知道了这个加密的对象，他如何在我们的项目里面集成呢？也就是如何将这个对象放到我们的项目里面呢？...之前我们已经在springsecurity.xml里面已经引入过这个加密的对象 1 把加密对象放入的IOC容器中 这个id的名字是有默认的名字passwordEncoder ?...2 如果你改了默认的名字，那么需要加这一步 在认证来源里面进行添加这个 ?...3 这个就可以了，意思是以后前端传过来的密码，项目就会加密之后才进行判断和数据库一样不一样 只需要配置加密的规则，其他的不用管。
下载完成后，这款后台是前后端分离，基于PHP开发，以及是Vuejs，解压后会frontEnd 和php两个安装包。forntEnd是前端开发包，php是后端开发代码包。...4 运行后端检测是否成功 使用这个后端之前，我们还需要做的一个环节，除了安装依赖库，配置数据库连接配置外，需要检测一下接口链接是否通了，这一步很重要。...造成这个问题，基于前端后分离的情况出现跨域的问题。我们很容易理解，前端把fontEnd当成了根目录，但是请求的接口就不是在我们的根目录下面。...，里面又放置了两个文件，分别是forntEnd（前端）和php(后端) 完成修改后，就可以进入到后端了。...执行运行后，可以访问到我们的前端路由了。 以此类推，可以定义更多路由和设置更多继承接口的方法。 默认下多个控制器均继承了ApiCommon带接口验证，继承Common 没有验证。
13 Chrome 107 Vite 3.2 Babel v7.20.0 图解 TLS 1.3 连接 全网最佳暗黑模式鉴赏 组件画廊 命令行的艺术 WebAPI 检查 大家好，我是童欧巴。...特性如下： 吸取 Webpack 十年来的经验教训，结合 Turborepo 和 Google 的 Bazel 在增量计算方面的创新，创建了一个准备支持未来几十年计算的架构； 官方声称热更新比 Vite...； 声明式 PendingBeacon API 向后端服务器发送数据。...下面来看一下好文推荐，本周推荐的好文是： 1.在 Next.js 中构建一个交互式的 WebGL 体验[26] 2.8K HDR!...-vfeksQ [30] DEX 周刊: https://newsletter.dex.group/ 公众号：前端食堂 知乎：童欧巴 掘金：童欧巴 这是一个终身学习的男人，他在坚持自己热爱的事情，欢迎你加入前端食堂
前端路由 定义：主要用于单页面应用，大部分页面结构不变，只通过JS改变部分内容的使用（例如：react-router,vue-router） 优点：用户体验好，不需要每次都从服务器全部获取，在切换页面时快速展现给用户客户端渲染可以减轻服务器压力...而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来说会有相当大的提升。但是页面使用浏览器自带的刷新和前进后退前端路由就会重新获取资源，这将造成较大的资源浪费。...在SEO角度讲单页面应用天生对SEO不友好，因为整个页面都是通过JS渲染的，搜索引擎爬虫只能抓取到一个根节点，但是后端路由是经过后端自带的模板框架渲染的（ejs,jsp）已经在服务器拼接好了HTML对搜索引擎蜘蛛会更倾向与后端路由...方案的选择要根据业务而定，如果是面向客户的产品（toC）推荐使用多页面后端路由，如果是面向企业的产品（ToB）推荐使用单页面前端路由 2.如何解决SEO和首页白屏的问题 首先要知道客户端渲染无法解决此问题...a=1&b=2,加密传值类似React的state传值 4.本站的技术栈选择 博客网站是及其注重SEO的因此前台选择了NextJs服务器渲染，前后端分离也更加方便了开发，后台管理采用了Vue3客户端渲染主要节约服务器资源以及更快的切换页面
背景 在测试手机上的软件的时候，需要抓包时，我们需要连接电脑配置代理才可以抓包，现在使用「Stream」就可以直接在手机上抓包了 Stream Stream 面向对象为广大前端开发、客户端开发后端开发、...如果您不认同以上的目的，不具备网络分析能力，或者对于敏感数据从心理上就不信任第三方 App,建议您慎重考虑后再下载 功能介绍： Stream 用于客户端本地抓包，仅用于 QA&开发本地网络调试。...只是利用了 iOs 9+ 的 Network Extension Api， 其实不具备连接von 的功能。 抓取 HTTP&HTTPS 请求，其中 HTTPS 请求需要配置CA证书。...支持构建请求和请求重放 支持配置 Hosts，实现在电脑端的 Hosts 功能，用于前端开发以及移动端开发便捷的切换测试环境和线上环境。...进入「抓包历史」中找到刚才的抓包记录 5. 找到我们关注的接口
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
