yhVjKR5Ym818
其他章节请看： vue3快速入门系列 Pinia vue3状态管理这里选择pinia。 虽然vuex4已支持Vue3的CompositionAPI，但是vue3官网推荐新的应用使用pinia——vue3pinia 集中式状态管理 redux、mobx、vuex、pinia都是集中式状态管理工具。与之对应的就是分布式。 Pinia符合直觉的Vue.js状态管理库甚至让你忘记正在使用的是一个状态库——官网 安装pinia环境 首先下载安装包： PShello_vue3>npmipinia added2packages,andaudited71packagesin11s 10packa...
其他章节请看： vue3快速入门系列 他API 前面我们已经学习了vue3的一些基础知识，本篇将继续讲解一些常用的其他api，以及较完整的分析vue2和vue3的改变。 浅层响应式数据 shallowRef shallow中文：“浅层的” shallowRef：浅的ref()。 先用ref写个例子： <!-ChildA.vue--> <template> <p>组件A</p> <p>a:{{a}}</p> <p>o:{{o}}</p> <p><button@click="cha...
vue3快速入门系列组件通信 组件通信在开发中非常重要，通信就是你给我一点东西，我给你一点东西。 本篇将分析vue3中组件间的通信方式。 Tip：下文提到的绝大多数通信方式在vue2中都有，但是在写法上有一些差异。 准备环境 在vue3基础上进行。 新建三个组件：爷爷、父亲、孩子A、孩子B，在主页Home.vue中加载组件Gradfather.vue： <!-Gradfather.vue--> <template> <p>爷爷</p> <hr> <Father/> </template> <script...
vue3快速入门系列vue3路由 在vue3基础上加入路由。 vue3需要使用vue-routerV4，相对于v3，大部分的VueRouterAPI都没有变化。 Tip：不了解路由的同学可以看一下笔者之前的文章：vue2路由 参考：vue2路由官网、vue3路由官网 vue-routerV4 在VueRouterAPI从v3（Vue2）到v4（Vue3）的重写过程中，大部分的VueRouterAPI都没有变化，但是在迁移你的程序时，你可能会遇到一些破坏性的变化——从Vue2迁移 vue3需要使用vue-router4.x.x版本。安装： PShello_vue3>npmivue-rout...
vue3快速入门系列基础 前面我们已经用vue2和react做过开发了。 从vue2升级到vue3成本较大，特别是较大的项目。所以许多公司对旧项目继续使用vue2，新项目则使用vue3。 有些UI框架，比如antdesignvue1.x使用的vue2。但现在antdesignvue4.x都是基于vue3，示例默认是TypeScript。比如table组件管理。 另外vue3官网介绍也使用了TypeScript，例如：响应式API：核心 本篇主要介绍：vite创建vue3项目、组合式api、响应式数据、计算属性、监听、ref、ts、生命周期、自定义hooks。 vue3简介 Vue.js3.0，...
玩转CMS2 上篇研究了样式、请求、evn、mock，感觉对效率的提升没有太明显作用。 比如某个工作需要2天，现在1天可以干完，这就是很大的提升。 提高效率的方法有代码复用、模块化、低代码工具。 目前可以考虑从代码复用方面下手，即使最低级的代码复制也可以。 要快速提高效率，需要对本地项目中的一些关键流程和技术比较了解，清楚常用功能实现思路和手段： 如何快速开发产品提出的一些常用页面(功能) 现存有哪些可复用组件 常用布局 本地项目常见Bug Tip:移动端的后续在安排，比如：H5中常用布局、如何快速调试H5、端内H5问题排查... 常用页面(功能) 客户端下载配置页 需求：以前安卓和ios...
玩转CMS 目前接手的内容管理系统（CMS）基于ant-design-vue-pro（简称模板项目或ant-vue-pro）开发的，经过许多次迭代，形成了现在的模样(简称本地项目)。 假如让一名新手接手这个项目，他会遇到很多问题，比如.env的作用、开发时后端接口没有写好如何联调、样式使用less还是CSSModules、表单和表格如何使用等等 技术是为产品服务，只需要能用技术做出项目，不需要所有技术、所有最佳实践都清楚。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。 本地项目使用的是antdesignvue1.x版本，基于vue2...
复习Vue 近期需要接手vue2的项目，许久未写，语法有些陌生。本篇将较全面复习vue2。 Tip:项目是基于ant-design-vue-pro ant-design-vue-pro 由于cms是基于这个项目开发的，所以笔者就将其下载下来。 下载后运行 //按照依赖 yarninstall //本地启动 yarnrunserve 根据提示输入admin/admin即可登录。 全局概览 直接通过script引入vue 就像这样： <body> <divid='app'></div> <!-V--> <scripttype="text/x...
数组 本篇主要介绍：一维二维数组、字符数组、数组名和初始化注意点以及字节序。 一维数组 初始化 有以下几种方式对数组初始化： //定义一个有5个元素的数组，未初始化 inta[5]; //定义一个有5个元素的数组，将第一个初始化0，后面几个元素默认初始化为0 inta[5]={0}; //定义一个有5个元素的数组，5个元素都初始化为：2,3,4,5,6 inta[5]={2,3,4,5,6}; //【推荐】 //和上一种在功能上是相同的。编译器会根据初始化列表中的元素个数（5个）自动确定数组a的大小为5 inta[]={2,3,4,5,6}; Tip：以上写法创建的数组都是不可变大小的...
函数和关键字 本篇主要介绍：自定义函数、宏函数、字符串处理函数和关键字。 自定义函数 基本用法 实现一个add()函数。请看示例： include<stdio.h> //自定义函数，用于计算两个整数的和 intadd(inta,intb){//a,b叫形参 intsum=a+b; returnsum; } intmain(){ intnum1=3; intnum2=5; //调用自定义函数计算两个整数的和 intresult=add(num1,num2);//num1,num2叫实参 printf("两个整数的和为：%d\n",result); return0; } 其...
初级指针 本篇主要介绍：指针和变量的关系、指针类型、指针的运算符、空指针和野指针、指针和数组、指针和字符串、const和指针、以及gdb调试段错误。 基础概念 指针是一种特殊的变量。存放地址的变量就是指针。 intnum=1;会申请4个字节的内存来存放数字1，每次访问num就是访问这4个字节。 访问内存中的这4个字节，不仅可以通过名称（例如num），还可以通过地址。 Tip：&不仅是位运算符，还是取地址操作符。例如intptr=&num;，就是取变量num的地址并将其保存到指针变量ptr中 请看示例： include<stdio.h> intmain(){ i...
GDB调试器 我们在讲指针时用GDB调试段错误。 本篇将详细介绍gdb的最常用命令、日志记录、检测点，最后介绍如何用gdb调试进程以及用gdb调试一个开源项目的调试版本——glmark2。 gdb介绍 GDB,theGNUProjectdebugger——gdb官网 gdb是一款调试器，能打断点。支持多种语言，例如c、c、go。 Tip：有关GNUProject，请看本篇扩展。 官网显示最新版本是13.2（20230704）。点击官网顶部[documentation]可查看文档。 安装GDB 笔者已经用apt源安装了gbd： jjj-pc:/pj/glmark2$sudoaptinstallg...
其他章节请看： react高效高质量搭建后台系统系列 表格 有一种页面在后台系统中比较常见：页面分上下两部分，上部分是input、select、时间等查询项，下部分是查询项对应的表格数据。包含增删改查，例如点击新建进行新增操作。就像这样： 本篇将对ant的表格进行封装。效果如下： spug中Table封装的分析 入口 我们选择spug比较简单的模块（角色管理）进行分析。 进入角色管理模块入口，发现表格区封装到模块当前目录的Table.js中： //spug\src\pages\system\role\index.js importComTablefrom'./Table'; ex...
其他章节请看： react高效高质量搭建后台系统系列 权限 本系列已近尾声，权限是后台系统必不可少的一部分，本篇首先分析spug项目中权限的实现，最后在将权限加入到我们的项目中来。 spug中权限的分析 权限示例 比如我要将应用发布模块的查看权限分给某用户（例如pjl），可以这样操作： 在角色管理中新建一角色（例如demo），然后给该角色配置权限： 新建用户（pjl）并赋予其demo权限 pjl登录后就只能看到自己有权限的页面和操作： 入口 上述示例中，以pjl登录成功后返回如下数据： { "data":{ "id":2, "access_token":"74b0fe67d09646e...
其他章节请看： react高效高质量搭建后台系统系列 尾篇 本篇主要介绍表单查询、表单验证、通知（WebSocket）、自动构建。最后附上myspug项目源码。 项目最终效果： 表单查询 需求：给角色管理页面增加表格查询功能，通过输入角色名称，点击查询，从后端检索出相应的数据。 效果如下： spug中的实现 spug中的这类查询都是在前端过滤出相应的数据（没有查询按钮），因为spug中大多数的table都是一次性将数据从后端拿回来。 spug中角色管理搜索相关代码如下： 随着input中输入要搜索的角色名称更改store中的f_name字段： <SearchForm> ...
其他章节请看： 低代码系列 中后台集成低代码预研 背景 笔者目前维护一个react中后台系统（以spug为例），每次来了新的需求都需要前端人员重新开发。 前面我们已经对低代码有了一定的认识，如果能通过一个可视化的配置页面就能完成前端开发，将极大的提高前端（或后端）的效率。甚至能加快企业内部数字化（信息化）建设。 低代码介绍 低代码这一概念由Forrester在2014年正式提出。低代码，顾名思义，就是指开发者写很少的代码，通过低代码平台提供的界面、逻辑、对象、流程等可视化编排工具来完成大量的开发工作，降低软件开发中的不确定性和复杂性。实现软件的高效构建，无需重复传统的手动编程，同时兼顾业务...
其他章节请看： webgl系列 初识WebGL 什么是WebGL webgl在支持canvas的浏览器中进行2d或3d渲染。 webgl程序除了有Html、javascript，还需要加入着色器语言（GLSLES）。 WebGL使得网页在支持HTML<canvas>标签的浏览器中，不需要使用任何插件，便可以使用基于OpenGLES2.0的API在canvas中进行3D渲染——MDNWebGL教程 通过caniuse得知webgl（98.15%）和webgl2.0（94.12%）的支持情况。请看下图： Tip：个人计算机上，绘制三维最广泛使用的技术有Direct3D和OpenG...
其他章节请看： webgl系列 绘制一个点 我们初步认识了webgl，本篇主要围绕绘制一个点的示例，逐步实现下面功能： 点的位置从js传入着色器 点的大小由js传入着色器 通过鼠标点击绘点 通过鼠标点击绘点，并改变点的颜色 绘制一个点（版本2） 需求 在上篇中我们在canvas中心绘制了一个点（效果如下），但这点的位置是直接写在顶点着色器中gl_Position=vec4(0.0,0.0,0.0,1.0);。 需求：点的位置从js传入着色器 思路 将位置信息从js传入着色器有两种方式：attribute变量、uniform变量 attribute传输的是那些与顶点相关的数据 uni...
其他章节请看： webgl系列 三角形 有人说三维模型的基本单元是三角形。比如复杂的游戏角色，也只是用许多三角形画出来的。 不管上述说法是否属实，本篇先把三角形画出来。 如何绘制一个三角形 鼠标点击绘点示例我们写了这样的代码： points.forEach(item=>{ gl.vertexAttrib3f(a_Position,item.x,item.y,0.0); gl.drawArrays(gl.POINTS,0,1); }) 这种方法一次只能绘制一个点。 比如需要绘制一个三角形，应该是一个连贯的动作。比如在顶点着色器中一次性画三个点，然后用线连接；而不是绘制一个点，在绘制...
其他章节请看： webgl系列 变换矩阵和动画 动画就是不停地将某个东西变换（transform）。例如将三角形不停地旋转就是一个动画 和CSStransform类似，变换有三种形式：平移、缩放和旋转。 简单的变换用普通表达式容易实现，如果事情复杂，比如旋转后平移，这时就可以使用变换矩阵。 普通表达式 平移 比如要平移一个三角形，只需要将三个顶点移动相同的距离即可（这是一个逐顶点操作） 用二维向量表示，就像这样：[x1,y1]+[tx1,ty2]=[x2,y2] 比如要实现如下效果： 前面我们已经讲过三角形了，这里不再冗余，改动的核心代码如下： constVSHADER_SOURCE=...