知乎日报项目前端+后端-React18 + React-Router6 + React-redux + reduxtoolkit
地址 前端:https://github.com/superBiuBiuMan/-zhuhu_daily 后端:https://github.com/superBiuBiuMan/zhihu-daily-admin 学习地址:Bilibili https://www.bilibili.com/video/BV1wx4y157Gu 介绍 技术栈使用React18 + React-Router6 + React-redux + redux/toolkit + craco(重写配置) + ( amfe-flexible + postcss-pxtorem 达到适配 ) + less keep-alive效果没实现,找了几个库效果都不理想,就没去弄了 运行前端运行 1.安装依赖(node什么的自行安装) yarn install 2.运行 npm run start 后端运行 1.安装依赖(node什么的自行安装) yarn install或者npm install 2.运行 node server.js 图片展示首页 详情页面 个人中心 ...
知乎日报项目学习笔记
项目完工 前端源码地址:https://github.com/superBiuBiuMan/-zhuhu_daily 后端源码地址:https://github.com/superBiuBiuMan/zhihu-daily-admin 学习地址:Bilibili https://www.bilibili.com/video/BV1wx4y157Gu 初始化项目ts方式(此项目以ts运行)create-react-app zhihu-daily --template typescript 没有安装create-react-app的同学，请使用npx命令 npx create-react-app zhihu-daily --template typescript js方式 删除后面的typescript即可 Rem响应式处理手动处理 我们制作移动端网页的时候,需要考虑兼容性,比如我们UI给出的原型图是以iPhone5/6或者其他手机尺寸为参考的,这里就设置设计稿的宽度为375px,同时为了方便计算,我们设置1rem = 100px 然后我们测量UI图的尺寸的时候,就**默 ...
微信小程序渐进式骨架屏的写法
前置 代码片段 @点我快速跳转 手动复制跳转:https://developers.weixin.qq.com/s/WOktHDm77mGj 知道hidden属性 为true显示,为false隐藏,类似于display:none <view> <text hidden="{{true}}">我会被隐藏</text> <text hidden="{{false}}">我会被显示</text></view> 第一步:写好基本的html 写好的静态页面 分为三个部分,上,中,下 代码 wxml <view style="display: flex;flex-direction: column;height: 100vh;"> <!-- 前置了解下hidden --> <!-- <text hidden=" ...
Ubuntu系统安装基本Nginx和docker和一些其他的软件的基本操作
前言 系统使用Ubuntu20.4 华为云 安装nginx(如果需要NginxWebUI,就不这样子安装)#安装apt install nginx#查看版本nginx -v 安装Nginx Proxy Manager 官网https://nginxproxymanager.com/ docker-compuse部署 version: '3.8'services: app: image: 'jc21/nginx-proxy-manager:latest' restart: unless-stopped ports: - '80:80' - '81:81' - '443:443' volumes: - ./data:/data - ./letsencrypt:/etc/letsencrypt 登录http://127.0.0.1:81 默认用户名和密码 Email: admin@example. ...
React17+React Hook+TS4 最佳实践仿 Jira 企业级项目笔记
前言 个人笔记,记录个人过程,如有不对,敬请指出 React17+React Hook+TS4 最佳实践仿 Jira 企业级项目项目完成到第十章,剩下后面就没有看了,说的不是特别好 github地址:https://github.com/superBiuBiuMan/React-jira husky方便我们管理git hooks的工具 REST-API风格https://zhuanlan.zhihu.com/p/536437382 json-server 安装 npm install -g json-server 项目安装 npm install -D json-server 项目开始用jsx渲染开发工程列表 初始化代码出现问题,表单收集的组件无法将请求结果发送给list组件 import React, { useEffect, useState } from "react";const List = () => { const [params,setParams] = useState({ ...
vercel和netlify部署代码并解决接口代理转发的问题(和Nginx功能一样)
前言 部署过程就不说了,部署完成后是这样子的 然后访问链接,无法访问 解决 依次点击 Settings–>Domains，在输入框中输入你的域名并点击 Add 按钮。 以此域名为例子demo.gshopfront.dreamlove.top为例,点击添加 我们前往域名管理系统,记录下绿色的值以腾讯云的为例 上图中的Name对应的是主机记录,Value对应的是记录值,记录类型选择CNAME 验证成功,vercel自动生成ssl证书当中 访问成功 例子http://demo.gshopfront.dreamlove.top/ vercel解决接口代理问题 编译为静态文件后,代理转发没有了,跨域了,所以我们需要自己配置下代理转发给vercel使用 一模一样添加完成https://segmentfault.com/a/1190000042276351?sort=newest 安装开发依赖 npm i -D http-proxy-middleware 目录建立vercel.json,注释记得删除 //注释记得删除{ ...
Vant组件当中van-list的使用在自定义列表当中
起因 vant官网没有提及自定义列表当中的使用,并且只有一些简单的例子,这里记录下我使用vant-list的记录代码 需求和使用 需求 下拉滚动加载,当快要触底的时候,加载下一页数据(这里不考虑上拉刷新和搜索列表数据) 使用 给vant-list设置一个固定或者自适应flex:1的高度,并设置overflow:scroll即可正常使用 演示地址和git地址 演示:https://codesandbox.io/p/github/superBiuBiuMan/vant_list_study/main?file=%2FREADME.md git:https://github.com/superBiuBiuMan/vant_list_study 演示图
pinia的基本创建和统一创建和解构失去响应式解决办法等知识点
在线代码演示 https://stackblitz.com/github/superBiuBiuMan/pinia_registerWay 使用注意点不能直接结构赋值 如果直接结构赋值,就像下面一样,就会失去响应式效果(数据变了,视图依旧不会更新) <template> {{ name }}</template>const { name } = useCounterStore(); 如果确实需要解构赋值,可以使用storeToRefs https://pinia.vuejs.org/zh/core-concepts/index.html#using-the-store // 官网示例代码import { storeToRefs } from 'pinia'export default defineComponent({ setup() { const store = useCounterStore() // `nam ...
微信小程序模块化、组件传值、添加data,menthods类型等-持续更新
组件模块化基本概括 模块化一般分为二种，页面和模块。页面由模块构成。 我们拆分模块化可能是这样子的 modules（页面模块) pageA A1模块 A2模块 pageB B1模块 B2模块 pages(页面) pageA pageB 在小程序当中 我们使用Page注册小程序中的一个页面@官方文档-page说明 使用Component创建自定义组件@官方文档-Component说明 注意下,通过Component创建的组件里面的样式,只会应用于当前组件,比如组件A内部设置了类A,那么在外部即使设置了同样的类名,也不会被应用相同的类名 所以我们创建页面使用Page，创建模块使用Component 模块化后需要注意的点(官方API拷贝过来的) 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。 出于性能考虑，使用 u ...
无js实现拖拽边框改变div大小的笔记
前言 最近刷抖音看到一款游戏”拣爱”,看到这个人手动拖动的很有意思,就想着能不能前端实现,来学习学习,虽然说最终的效果没有gif图片那么好,但是也算实现了,,,,吧…. 具体原理 利用resize属性所出现的小拖拽条 再配合::-webkit-scrollbar设置拖拽区域宽度,高度,结合opacity:0即可将可拖拽区域覆盖整个div 具体效果和代码效果 在线演示 https://codepen.io/superbiubiuman/pen/oNMQxKz 图 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽照片</title> <style> *{ margin: 0; padding: 0; } body,html ...