App.js | 易学教程

[Node.js] Mock an API for Local Development in React with Mirage JS

阅读更多关于 [Node.js] Mock an API for Local Development in React with Mirage JS

Mirage JS lets you mock out production APIs directly alongside your frontend React code. You can tweak the data or force a network request to hang, so you can quickly design different states of your application. In this way Mirage lets you build every state of your UI regardless of the state of your production API. Check out Mirage's React quickstart here . // src/App.js import React, { useState, useEffect } from "react" import { Server } from "miragejs" let server = new Server() server.get("/api/users", { users: [{ id: 1, name: "Bob" }] }) export default function App() { let [users, setUsers]

【小程序】版本自动更新的实现

阅读更多关于【小程序】版本自动更新的实现

更新问题微信小程序遇到新版本发布后，旧版本无法自动更新的困扰. 我之前进行开发的时候：最笨的方法就是，删除小程序后再重新搜索打开就好; 注意:准确来讲，版本自动更新的方法越早进行补充越合理，尤其适合前期使用人数较少的时候就做补充以避免后期使用人数太多时而旧版本依然无法检测更新及时替换的情况实现方案 1.小程序的运行机制热启动：小程序打开后在一段时间内（目前5分钟）再次被打开，此时会将后台的小程序切换到前台。冷启动：小程序首次打开或者销毁后重新打开 2.更新版本冷启动时，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，及新版本的小程序需要等下一次冷启动才会应用上；如果马上应用最新版本，使用 wx.getUpdateManager API 进行处理。实现一： /** * 检测当前的小程序 * 是否是最新版本，是否需要下载、更新 */ function checkUpdateVersion() { //创建 UpdateManager 实例 const updateManager = wx.getUpdateManager(); //检测版本更新 updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { /

从零搭建 React 开发 H5 模板

阅读更多关于从零搭建 React 开发 H5 模板

本文相关代码地址： github 效果展示： react-demo 项目创建创建项目文件夹 mkdir react-demo cd react-demo npm init -y 复制代码依赖安装 yarn add react react-dom yarn add webpack webpack-cli webpack-dev-server webpack-merge babel-core babel-loader babel-polyfill babel-preset-env babel-preset-react babel-preset-stage-0 cross-env file-loader jsx-loader css-loader style-loader url-loader less less-loader --dev 复制代码 webpack 配置区分开发环境 development 和生产环境 production 配置分别创建对应的配置文件 antd-mobile 按需加载安装插件 yarn add babel-plugin-import -D 复制代码修改 babel.config.js 配置 module .exports = { presets : [ "@babel/preset-env" , "@babel/preset-react" ]

Laravel 如何在blade文件中使用Vue组件

阅读更多关于 Laravel 如何在blade文件中使用Vue组件

Laravel 如何在blade文件中使用Vue组件 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan ui vue 系统还提供了非常便捷的auth脚手架,带登录注册。 php artisan ui vue --auth 3.组件位置 Vue组件ExampleComponent.vue将被放置在resources/js/components目录中。ExampleComponent.vue文件是单个文件Vue组件的示例，该组件在同一文件中定义其JavaScript和HTML模板。单个文件组件为构建JavaScript驱动的应用程序提供了一种非常方便的方法。该示例组件已在您的app.js文件中注册： Vue.component( 'example-component', require('./components/ExampleComponent.vue').default ); 4.在blade模版中使用要在应用程序中使用该组件，您可以将该组件放入Blade模板xxx.blade.php中： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

手把手教你通过express框架搭建后台+vue框架搭建前台

阅读更多关于手把手教你通过express框架搭建后台+vue框架搭建前台

最近这两天有点闲，通过自研学习了如何使用express框架搭建后台以及vue框架开发前端。express框架是用来搭建web服务，是nodejs的二次封装。vue就是前端框架。那么可以通过搭建express框架用来写接口，vue框架写页面用来调用接口，形成全栈的开发。 1、搭建express过程使用 express的脚手架快速搭建：express-generator 首先安装express 和express - generator npm install - g express，npm install - g express - generator（这是全局安装）创建项目 express - e 目录 npm install 安装依赖 npm start 开启项目安装后台热更新模块（这样方便开发，修改文件就不需要重启启动了，会热更新） npm i nodemon -- save ( 局部安装，下载到项目依赖，所以一定要进入项目目录里安装 ) 安装完成nodemon之后，需在package . json的 * * scripts * * 修改命令行： "scripts" : { "start" : "nodemon ./bin/www" } , 安装完成之后的项目结构目录 │ app . js │ package - lock . json │ package . json │

以太坊彩票项目

阅读更多关于以太坊彩票项目

以太坊彩票项目目录项目概述项目具体实现 [1].彩票业务规则示例图 [2].整体项目搭建 [3].彩票合约 lottery.sol [4].编译合约 01-compile.js [5].部署合约 02-deploy.js [6]. 从区块链获取合约实例 [7].完善界面 [8].最终效果创作声明备注目录项目概述 solidity 编写合约，node.js 编译、部署、获取、交互合约，react搭建前端界面超详细~ (1)彩票业务规则-智能合约lottery.sol [1] 全民参与(play函数) [2] 每次投注只能投注1eth [3] 每个人可以投多注 [4] 仅限管理员可以开奖(KaiJiang函数) [5] 仅限管理员可以退奖(TuiJiang函数) (2)编译智能合约 01-compile.js [1] 导入solc编译器和fs库 [2] fs读取contracts文件夹下lottery.sol合约 [3] solc编译合约 [4] 导出bytecode(机器码)和interface(ABI) (3)部署智能合约上链 02-deploy.js [1] 获取bytecode和interface [2] 导入web3 [3] 设置网络，管理员(部署合约的人)实例化web3(.setProvider) [4] 拼接合约数据 [5] 拼接bytecode [6]

koa脚手架

阅读更多关于 koa脚手架

Koa脚手架 koa-generator是用于生成koa项目骨架的生成器 koa-generator提供的功能如下：生成项目骨架，集成必要的中间件约定目录结构项目骨架结构描述 app.js为入口 bin/www为启动入口支持静态服务器，即public目录支持routes路由目录支持views视图目录默认将Pug作为模板引擎安装Koa生成器 koa-generator支持Koa v1和Koa v2，安装后分别使用koa和koa2命令创建koa项目模板创建Hello world koa2 helloworld 安装依赖模块 npm install 启动命令 npm start 目录解析 xxx@xxx:/mnt/c/codes/temp/hello/hello$ tree . -L 2 . ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets ├── routes │ ├── index.js │ └── users.js └── views ├── error.pug ├── index.pug └── layout.pug app.js 为入口 bin/www为启动入口支持静态服务器，即public目录

Nodejs 一些面试经验

阅读更多关于 Nodejs 一些面试经验

知识点总结——NODE.JS 针对网络应用开发的平台主要特征: 基于Google的JavaScript运行时引擎V8 扩展了Node标准类库: TCP，同步或异步文件管理，HTTP 为什么使用Node: 可以在服务器端运行js: 现有前端团队可直接参与后端js开发 js天生支持非阻塞IO: IO: 代表一切数据进出程序的操作: 包括: 文件读写, 数据库操作, 网络操作问题: 有延迟传统阻塞IO: IO操作会阻塞当前主线程，直到本次IO操作完成，才能执行后续代码。非阻塞IO: 即使处理较慢的IO操作时，主进城仍然能处理其他请求 Js天生支持非阻塞: 回调函数=事件循环+回调队列所有非阻塞的操作，返回的结果暂时在回调队列中等待由事件循环，自动依次取回到主程序中恢复执行回调队列在主程序之外存储回调函数，所以，不会干扰主程序执行非阻塞在Web服务器中: 普通服务器端应用: 虽然可实现每个请求独立线程/进程, 但如果一个请求中，包含多个阻塞IO操作(访问数据库，网络，读写硬盘文件)，该请求返回的时间就等于所有IO操作的时间总和——慢 Node服务器端应用: 不但每个请求是一个独立的线程，且，每个请求内的每个IO操作，都是非阻塞的。一个包含多个IO操作的请求，返回的总响应时间，仅仅等于其中一个时间最长的IO操作的时间。 Node. js vs javascript:

2D游戏开发作业：CreatJS案例

阅读更多关于 2D游戏开发作业：CreatJS案例

1.围住神经猫游戏代码： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>围住神经猫</title> <script src="easeljs.min.js"></script> <script src="Circle.js"></script> </head> <body> <canvas width="800px" height="800px" id="gameView"></canvas> <script src="app.js"></script> </body> </html> js： Circle.js： function Circle() { createjs.Shape.call(this); this.setCircleType = function (type) { this._circleType = type; switch (type) { case Circle.TYPE_UNSELECTED: this.setColor("#cccccc"); break; case Circle.TYPE_SELECTED: this.setColor("#ff6600"); break; case Circle.TYPE_CAT: this.setColor(

RN路由-React Navigation组件5.x-基本原理(中文文档)

阅读更多关于 RN路由-React Navigation组件5.x-基本原理(中文文档)

##引言 React Native路由导航，有它就够了！该文档根据 React Navigation 文档翻译，有些内容会根据自己的理解进行说明，不会照搬直译，若发现理解有问题的地方，欢迎大家提点！由于本人是基于iOS开发，安卓版本的目前还没有去实践运行，后续有时间会去实践，如果遇到问题，可以@我。最后，这边针对iOS运行的时候遇到的问题也有汇总，并提供解决方案。最后的最后，由于本片文章会很长，所以推荐一个Chrome插件，可以自动根据文章中的h1~h6生成目录，方便查看章节内容，在编写文章时也可以用哦！ Smart TOC ，点击安装后，如下图操作：基本原理 1 开始如果您已经熟悉React Native，那么您将能够快速上手React导航!如果没有学习过，你需要先读 React Native Express 的第1 - 4部分(包括第4部分)，读完后再回到这里。本文档的基础部分介绍React导航的最重要的方面。它足以让您了解如何构建典型的小型移动应用程序，并为您提供深入了解React导航更高级部分所需的背景知识。 1.1 安装在RN项目中安装您需要的包 npm npm install @react-navigation/native 复制代码 yarn yarn add @react-navigation/native 复制代码 React导航由一些核心工具组成

订阅 App.js