2024/2/7总结

Node.js 

什么是node.js

node.js是一个基于chrome v8 引擎的 JavaScript 运行环境

  • 浏览器是JavaScript的前端运行环境
  • node.js是JavaScript的后端运行环境

node.js中无法调用DOM和BOM等浏览器内置API

fs模块

是node.js官方提供的、用来操作文件的模块,它提供了一系列的方法和属性,用来满足用户对文件的操作需求。

fs.readFile() 用来读取指定文件中的内容

fs.writeFile() 用来向指定的文件中写入内容

http模块

http模块是Node.js官方提供的、用来创建web服务器的模块,提供http模块提供的http.createServer() 方法,就能方便的把一台普通的电脑,变成一台web服务器,从而对外提供web服务器。

为了防止乱码 可以在end前写上这么一句话

res.setHeader('Content-Type','text/html;charset=utf-8')

模块化

什么是模块化

模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程,对于整个系统来说,模块时可组合,分解和更换的单元

Node.js 中模模块的分类

有3大类,分别是

  • 内置模块

是由Node.js官方提供的,例如 fs,path,http

  • 自定义模块

用户创建的每个js文件,都是自定义模块

  • 第三方模块

由第三方开发出来的模块,使用前需要下载

模块作用域

和函数作用域相似,在自定义模块中定义的变量,方法等成员,只能在当前模块内被访问,这种模块级别的访问限制,叫做模块作用域

好处是防止变量污染

module对象

在每个js自定义模块中都有一个module对象,它里面存储了和当前模块有关的信息。

module.exports 对象可以将模块内的成员共享出去,供外界使用,外界使用 require 导入的即使 exports 导出的

模块化规范

Node.js遵循了CommonJS的模块化规范,CommonJS规定了模块的特性和各模块之间的相互依赖。CommonJS规定:每个模块内部,module变量代表当前模块,module变量是一个对象,他的exports属性是对外的接口。加载某个模块,其实就是加载该模块的module.exports属性,require()方法用于加载模块。

为什么需要包

由于Node.js的内置模块仅提供了一些底层的API,导致在基于内置模块进行项目开发的时候,效率很低。包是基于内置模块封装出来的,提供了更高级,更方便的API,极大的提高了开发效率。

听说现在学习node还是有点小早,还是学一些偏前端的东西吧

uniapp

在安装好 HBuilderX后 ,新建一个 vue 3 的项目,还不能跑起来,还需要安装相关插件

然后就能运行了

出现如下错误:

解决:

搞好了之后,就能正常运行了,会自动打开微信开发者工具

案例:

pages.json 文件中配置

yH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs=wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

uni-app 和原生小程序开发区别

每个页面都是一个 vue文件,数据绑定及事件处理同 vue.js 规范

uni.previewImage(Object object)

在新页面中全局预览图片,预览的过程中用户可以进行保存图片、发送给朋友等操作。

参数 : urls 一个数组,所有的 图片,current 当前图片链接

命令行创建 uniapp

vue3+ts版本 

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

用 vscode 开发 uni-app 项目

为什么选中 VScode 

HBuilderX 对 ts 类型暂不完善  而 VS code 对 ts 支持友好

需安装 插件

安装下面插件 以及在 tsconfig.json 里面做出如下设置

配置

如下设置便不会出错

如果要把 vscode 的项目用微信小程序跑起来:

找到 package.json 文件

使用 pnpm dev:mp-weixin 

在 微信小程序开发 里面 导入根目录生成的  dist  文件夹,在里面的 dev ,打开mp-weixin文件夹,对应上 appId 即可进行编译,实时预览。

基础架构

使用 uni-ui 组件库

安装

pnpm i @dcloudio/uni-ui

组件自动导入

这段放在 pages.json 文件根目录

"easycom": {"autoscan": true,"custom": {// uni-ui 规则如下配置"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"}}
配置ts类型

pnpm i @uni-helper/uni-ui-types

在 tsconfig.json 里面的 type:

小程序端 pinia 持久化

在小程序中,pinia使用方法是一样的,但是在 持久化这里,网页端只需要写一个 true 就行,但是小程序端和 网页端不一样,需要重新配置,如下所示:

请求和上传文件拦截

配置拦截器

import { useMemberStore } from "@/stores"const baseURL='https://pcaapi-xiaotuxian-front-devtest.ithema.net'const httpInterceptor={baseURL:baseURL,invoke(options:UniApp.RequestOptions){if(options.url.startsWith('http')){options.url=baseURL+options.url}options.timeout=10000options.header={'source-client':'miniapp',...options.header}const memberStore=useMemberStore()const token = memberStore?.profile?.tokenif(token){options.header.Authorization=token}}
}uni.addInterceptor('request', httpInterceptor)uni.addInterceptor('uploadFile', httpInterceptor)

今天配置了好多东西,感觉uniapp还是挺麻烦的,再学学吧先,其实还不如直接写一个微信小程序,因为还是要借助微信开发者工具来看实时编译情况。都把 HBuilderX 下载好了,结果和我说 使用 VS code 更方便。

很想鼠

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/459366.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis篇之集群

一、主从复制 1.实现主从作用 单节点Redis的并发能力是有上限的,要进一步提高Redis的并发能力,就需要搭建主从集群,实现读写分离。主节点用来写的操作,从节点用来读操作,并且主节点发生写操作后,会把数据同…

FlinkSql通用调优策略

历史文章迁移,稍后整理 使用DataGenerator 提前进行压测,了解数据的处理瓶颈、性能测试和消费能力 开启minibatch:"table.exec.mini-batch.enabled", "true" 开启LocalGlobal 两阶段聚合:"table.exec.m…

DAC调节DCDC输出电压的电路方案分析

BUCK型电源芯片的调压方式分析 1、前题 BUCK型的电源芯片非常多,常用的如LM2576、LM2596等等,这种芯片优点很多,比如功率大、体积小、效率高等。这种芯片一般都可以通过电阻分压的方式设定反馈脚VFB的电压来改变电源芯片的输出电压。但最近…

mac电脑安装cocoapods出错,以及安装最新版本ruby方法

macbook安装cocoapods时碰到一个报错:大概率是ruby的版本太低导致的 sudo gem install cocoapods ERROR: Error installing cocoapods: ERROR: Failed to build gem native extension. ... Could not create Makefile due to some reason, probably lack of neces…

nginx登录用户验证配置

我们的nginx端口一般都是对外开放的,所以有一定程度上有被别人扫描的风险,所以为了减少被扫描的风险,我们可以配置一个nginx的用户登录验证; 用户验证登录需要nginx的一个模块:ngx_http_auth_basic_module 我们使用…

消息中间件之RocketMQ源码分析(八)

RocketMQ中的消息过滤 RocketMQ设计了消息过滤,来解决大量无意义流量的传输:即对于客户端不需要的消息, Broker就不会传输给客户端,以免浪费宽带,RocketMQ4.2.0支持Tag过滤、SQL92过滤、Filter Server过滤 Tag过滤 第一步:用户发…

【状态管理一】概览:状态使用、状态分类、状态具体使用

文章目录 一. 状态使用概览二. 状态的数据类型1. 算子层面2. 接口层面2.1. UML与所有状态类型介绍2.2. 内部状态:InternalKvState 将知识与实际的应用场景、设计背景关联起来,这是学以致用、刨根问底知识的一种直接方式。 本文介绍 状态数据管理&#x…

postman执行批量测试

1.背景 有许多的人常常需要使用第三方系统进行重复的数据查询,本文介绍使用PostMan的方式对数据进行批量的查询,减少重复的劳动。 2.工具下载 3.初入门 一、如图示进行点击,创建collection 二、输入对应的名称 三、创建Request并进行查…

设计模式理解:单例模式+工厂模式+建设者模式+原型模式

迪米特法则:Law of Demeter, LoD, 最少知识原则LKP 如果两个软件实体无须直接通信,那么就不应当发生直接的相互调用,可以通过第三方转发该调用。其目的是降低类之间的耦合度,提高模块的相对独立性。 所以,在运用迪米特…

【Git版本控制 02】分支管理

目录 一、创建分支 二、切换分支 三、合并分支 四、删除分支 五、合并冲突 六、分支策略 七、bug分支 一、创建分支 # 当前仓库只有 master 一个主分支 # 可通过 git branch 是进行分支管理的命令,可通过不同参数对分支进行查看、创建、删除(base) [rootloc…

Open CASCADE学习|放样

在CAD(计算机辅助设计)建模中,放样是一种重要的技术,用于将二维图形或设计转化为三维模型。通过放样,设计师可以根据一系列二维剖面和一个或多个引导路径创建出复杂的三维形状。 CAD建模放样的基本步骤如下&#xff1…

TOP100 二叉树(二)

7.108. 将有序数组转换为二叉搜索树 给你一个整数数组 nums ,其中元素已经按 升序 排列,请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树。 示例 1: 输入…