qq_34821328的博客

原创 学习uni-app记录

小程序page.json全局配置{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/workbench/workbench", "style": { // "navigationBarTitleText": "工作台", //下面的buttons内容会将其覆盖 "app-plus": { //App端扩展配置 "title

原创 线上地址配置，element图片，点击放大后，可左右切换

使用：element图片，点击放大后，可左右切换。

原创 目录树生成，（根据权限不同，对应三层/两层/不显示）Nuxt + Element + pug

效果：一级（最高权限）二级权限账号登录效果：三级权限账号登录效果：单层效果或者可设置不显示目录树未组装得接口数据：代码如下：<script lang="ts">import { defineComponent, useFetch } from '@nuxtjs/composition-api'import { useMerge } from '~/utils/use-merge'type TreeNodeData = { id: string name: st

原创 倒计时牌（react ）

TImer组件如下：import React, { useState, Fragment } from 'react';import moment from 'moment';// import { generateUUID } from '@/utils/utils';import styles from './index.scss';const Timer = () => { // const uuid = generateUUID(0, 0); return ( .

转载 编程风格-对象&数组&函数&模块输出

转载 编程风格-解构赋值

转载 编程风格-字符串

转载 常量的处理

mark： 再看阮一峰的ES6 —> 跨模块常量

原创 node接口及fetch调用

app.jsvar createError = require('http-errors');var express = require('express');var path = require('path');var cookieParser = require('cookie-parser');var logger = require('morgan');var cors = require("cors");var indexRouter = require('./routes/ind

原创 nodejs 实现抓取数据

nodejs 实现抓取数据方式一:通过nodejs自身的方法抓取数据需要模块：http或者https模块 、cheerio（实现dom获取）第三方模块 、fs文件操作、path路径// 抓数据用的模块 http、https，这两个都是内置模块（核心模块）// 1.加载 https 模块var https=require("https");//加载cherrio模块，可以将抓取的网页通过jquery获取节点的方式获取需要的domvar cheerio=require("cheerio");

原创 nodejs 中http请求头，响应头常见参数

-------------------- 1.request常见的属性 -----------------------var http=require("http");var server=http.createServer(); //创建服务器server.on("request",function(req,res){ // request.headers 打印全部请求头信息--对象形式 // request.rawHeaders 全部头信息--数组形式 // request.h

原创 nodejs 文件、文件夹操作

文件读取功能 ：只是涉及到nodejs两个模块，基本http服务模块和fs文件读取模块1.文件写入var fs=require("fs");var http=require("http");var msg="我是你爸爸";//创建服务器http.createServer(function(req,res){ //文件写入：参数(输入文件,数据，[编码可选],回调函数(错误参数) fs.writeFile("./demo.txt",msg,'utf-8',function(err){

原创 安装python模块，报SyntaxError: invalid syntax

超简单python：让excel飞起来读书笔记1标题解决pip install xxx报错SyntaxError: invalid syntax的问题标题解决pip install xxx报错SyntaxError: invalid syntax的问题不能再python命令行下，应该在cmd下安装才行.

原创 nodejs环境配置

二，nodejs环境配置1.安装一个nvm （用来管理不同版本的node）curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash2.通过nvm安装指定版本（8.9.0）的nodenvm install v8.9.03.然后就可以git克隆我们的项目了 （通过ssh）(1) 那么我们通过linux配置一下ssh首先ssh-keygen然后获得公共密钥cat ~/.ssh/id_rs

原创 host配置

host配置搜索win10 host文件地址，如下：文件路径：C:\WINDOWS\system32\drivers\etc\hosts 以管理员身份运行记事本，再用记事本打开hosts文件才能保存。复制路径 C:\WINDOWS\system32\drivers\etc\， 在对应文件夹下打开，找到hosts文件，打开，将需要配置的内容，回车后放在文件最后，保存。...

原创 ubuntu安装过程

feat: 新增功能。fix: 修复 bug。docs: 文档相关的改动。style: 对代码的格式化改动，代码逻辑并未产生任何变化。test: 新增或修改测试用例。refactor: 重构代码或其他优化举措。chore: 项目工程方面的改动，代码逻辑并未产生任何变化。一，ubuntu安装过程1.电脑左下角win键，打开设置点击更新与安全，在左边找到开发者选项，点击开发人员模式2.然后在设置界面找到应用，点进去3.点击右边的程序和功能4.进去之后点击 启..

原创 封装完Echart之后，绘制市区镇级地图

接上篇：封装Echart之后，绘制乡镇地图，如下：<WCMap />import React from 'react';import ReactEcharts from '@/components/Task/Tree/Common/ReactEcharts';import wcCityGeo from './430702.json'import * as echarts from 'echarts'echarts.registerMap('wcc', wcCityGeo)ex

原创 git推送本地分支到远程分支

1. commit 信息分类标准feat：新功能（feature）fix：修补bugdocs：文档（documentation）style： 格式（不影响代码运行的变动）refactor：重构（即不是新增功能，也不是修改bug的代码变动）test：增加测试chore：构建过程或辅助工具的变动2. git推送本地分支到远程分支git 拉取远程分支到本地场景有时候我们开发需要开一个分支,这样可以有效的并行开发.开分支有两种方式:一种是在远程开好分支,本地直接拉下来;一种是本地开

原创 封装Echart

一. 封装文件：import React, { useEffect, useRef } from 'react';import * as echarts from 'echarts';const defOption = { title: { text: 'ECharts 入门示例', }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], }, yAxis: {}, se

原创 title 组件封装

效果：如上，框红色处。// 封装组件： CommonCard 的使用如下：<CommonCard title={'重点工作任务落实'} extra={'更新时间：9月底'} className={'mt15'}> <Row gutter={16}> <Col xs={24} lg={24}> <Chart /> </Col> </Row></CommonCard>.

原创 React手写tab切换

父文件import React, { useState } from 'react';// import Module1 from './Module1';// import Module2 from './Module2';// import Module3 from './Module3';// import Module4 from './Module4';import HeaderTtabs, { tagType } from '@/components/Task/Tree/Commo.

原创 tab切换

两款样式，差不多样子。如上：import React, { useState, useEffect, Fragment, FC } from 'react';import { withRouter } from 'umi';import { Modal, Row, Col } from 'antd';import styles from './index.scss';import { divide } from 'lodash';import { useRequest } from 'ahoo.

原创 ul & li 前面的实心小圆点

import React, { useState, useEffect, useCallback, useMemo, Fragment } from 'react';import { List, Avatar } from 'antd';// import { useParams } from 'umi';// import moment from 'moment';// import { URL_PREFIX } from '@/config';import { ArrowRightOutli.

原创 循环生成list列表

如上图示效果：import React, { useState, useEffect, useCallback, useMemo, Fragment } from 'react';import { List, Avatar } from 'antd';import { ArrowRightOutlined, RightOutlined, LineOutlined } from '@ant-design/icons';import styles from './index.scss';expo.

原创 在React项目中使用TypeScript

示例1：// 在React项目中使用TypeScript// src文件夹下创建pages/counter/Counter.tsx/*简单的计数器代码*/import React from "react";// props包含count，increment，decrement，且类型确定interface IProps { count: number; increment: () => void; decrement: () => void;}const Cou

原创 Ts定义对象和数组类型

// 一. 对象类型-接口// 1. // 定义了一个接口 Person（行为的抽象，事物的本质），interface Person1 { name:string; age:number;}// 接着定义了一个变量 pr，其类型就是 Person（接口是类型，对象类型）。约束了定义的变量 pr 属性类型必须和接口 Person 一致。let pr1:Person1 = { // 以上，赋值的时候，多一个少一个都不行，变量的属性必须和接口的属性保持一致（前提对接口属性没做处理

原创 node接口 + hooks统一状态管理

node接口api文件（后端）express搭建后，routes文件夹里面–新建testAPI.js文件（post请求），新建testYHR.js文件（get请求）testAPI.jsvar express = require("express");var router = express.Router();router.post("/", function (req, res, next) { data = {message:'message', count: 12, comment:

原创 hooks的基本结构

hooks写法的基本结构import React, { useState, useEffect, Fragment } from 'react';export default ( props: { children: React.Component[]; location: Location }) => {//或 const App = (Props: any) => { const [count, setCount] = useState(0); // state及更改stat

原创 git 提交规范

git 提交规范type关键字type关键字提交类型 type 用来描述一次提交行为的改动方向，type 的可选值如下：• feat: 新增功能• feature: 新增功能• fix: 修复 bug• bugfix: 修复bug• docs: 文档相关的改动• log: 日志/文档改动• style: 对代码的格式化改动，代码逻辑并未产生任何变化• test: 新增或修改测试用例。• refactor: 重构代码或其他优化举措• tool: 工具相关• revert: 回滚•

原创 定时器及节流防抖

定时器的使用及节流防抖微信小程序の计时器练习PS：暂时只实现了计数器功能，节流防抖–明日继续2020/3/14效果图：<!--index.wxml--><view class="box" hidden="{{hidden}}"> <view class="title">计数器</view> <view class="time...

原创 Number对象--常用属性及方法

Mark下~~

原创 Array对象--常用属性及方法

Mark下~~

原创 流程控制结构及js全局对象（易忽视的知识点）

（注意此案例，结果是字符相加，不是数字相加）

原创 微信小程序之修改按钮Button尺寸及绑定一个事件处理函数

微信小程序button常见属性

原创 Math对象--常用属性和函数

Math对象的常用属性和函数，Mark下~~

原创 关于CSS-BFC

好记性不如烂笔头，研究了一下BFC，发现里面比较细的东西也是很多的！希望喜欢的朋友可以点个赞，或者关注一波本人，谢谢。定位方案是控制元素的布局，有三种常见方案:普通流 (normal flow)浮动 (float)绝对定位 (absolute positioning)BFC 概念Block Formatting Contexts (块级格式化上下文)是 W3C CSS2.1 规范中的一...

原创 清除浮动和利用margin属性水平居中对齐

当使用float属性后，记得后面不需要的元素，需要使用clear属性清除浮动。clear属性值有如下这些：值说明left在左侧不允许有浮动元素right在右侧不允许有浮动元素both在左右侧不允许有浮动元素none默认值。允许浮动元素出现在左右两侧inherit继承父元素clear属性的值如果要实现块元素水平居中对齐，可以通过让mar...

原创 微信小程序转跳页面の学习笔记

<navigator> <view class="waikuang" bindtap="click"> <icon type="success" class="myself"></icon> <view class="mycenter">hellowechat</view> <image src="....

原创 Flex布局之最后一项居右对齐

感觉经常遇到topbar中item都是居左对齐，最后一项向右边对齐。诸如“”“日期”，“删除”， 分享等看到一种简单的方法记录下：在主轴将justify-content属性设置为flex-start后在最后一项元素使用样式：margin-left: auto;...

原创 单/多行文本溢出显示省略号的几种方法

标题单行文本溢出显示省略号.box1{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}当然还需要加宽度width属来兼容部分浏览多行文本溢出显示省略号问题：如果是两行显示，第一行折行，第二行需要超出省略该如何实现呢？或者第N行要省略该如何解决呢?方案1 —css 的不规则属性...