- 博客(25)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 Next.js+React进门记017【自定义修改Next.js的_app.js文件】
计划：将index.js和about页面的计数功能、添加信息功能、背景颜色显示功能的代码分离出来，交给_app.js文件进行管理，使index.js和about页面相互切换时，在无刷新的情况下保持状态同步。刷新index.js页面，测试各个功能没问题后，点击About链接切换到about.js页面，about.js页面和index.js页面保持相同状态时，则测试成功。切换到about.js页面，可发现about.jis页面和index.js页面状态保持一致，至此，计划成功完成。・服务器端渲染的设定。
2024-07-02 11:22:31
336
原创 Next.js+React进门记016【自定义钩子函数（custom hooks）】
为了让about.js页面也能够使用以上useCounter，useInputArray，useBgColor三个自定义钩子函数的功能，需要将这个三个函数分别分离到单独文件上，以供about.js调用。计划：将index.js页面上的记数功能，添加信息功能，背景颜色显示功能，分别用自定义钩子函数整合起来，使about.js页面也能利用这些功能。修改index.js文件代码，分别导入和使用useCounter.js、useInputArray.js、useBgColor.js。
2024-06-30 21:32:01
282
原创 Next.js+React进门记015【useState处理数组数据】
每点一次按钮就增加一条数据的功能已经实现，但控制台出现key重复的警告，考虑到实际开发中，数据库的各条数据的ID不可能发生重复，所以该警告暂且忽略一下。刷新index.js页面，点击“追加”按钮，运行正常，说明点击事件函数handleAdd已被正常调用。在index.js页面Home组件中设置一个数组，初始值为[1,2,3]计划：每点击一次按钮，数组中增加一个元素，随之页面中也增加一天数据。连续点击“追加”按钮5次，向现有数组增加5个元素，页面增加5条数据。定义handleAdd点击事件函数。
2024-06-22 18:35:10
147
1
原创 Next.js+React进门记014【useState处理布尔型数据】
计划：点击“显示”按钮时，按钮上方的数字就会显示，随之按钮名称变更为“不显示”。与此相反，点击“不显示”按钮时，按钮上方的数字就会消失，随之按钮名称变更为“显示”。连续点击“不显示”和“显示”按钮，可发现数字正常在显示和消失之间切换，浏览器控制台也正常输出上一次的数字状态，至此，计划完成。可发现数字再次显示，按钮名从“显示”变更为“不显示”，浏览器控制台打印出上一次数字状态为false。刷新index.js页面，点击“不显示”按钮。点击“显示”按钮。
2024-06-22 15:29:03
300
1
原创 Next.js+React进门记013【useState处理字符串数据】
尝试输入“bcdefgh”，发现“fgh”已无法输入，并弹出警告。在return代码块中添加一个输入框，并调用上图完成的onChange事件函数。计划：在输入框中输入字符串，当长度超过5位时阻止再次输入，并弹出警告。首先在index.js页面的Home组件中设置字符串初始值为“a”。按计划要求设置一个onChange事件。修改后的index.js页面代码如下。刷新index.js页面。
2024-06-22 11:58:24
120
原创 Next.js+React进门记012【useEffect、useCallback第二个参数用途的理解】
◆useEffect第二个参数（数组）不为空、并且状态发生改变时，无名函数（也就是useEffect第一个参数）的return区块逻辑就会被再次执行。◆由于return区块逻辑属于无名函数（也就是useEffect第一个参数）中的一部分，无名函数不执行的情况下，当然return区块逻辑也不会被执行。打开index页面控制台，刷新页面，可发现useEffect函数的第一个参数（无名函数）已经加载完成，但return部分没有被执行。◆return区块逻辑记录的状态是上一次无名函数的执行状态。
2024-06-21 13:54:00
473
1
原创 Next.js+React进门记011【使用React的useState函数】
上图之所以页面数字没有和控制台一样发生变化，是因为根据React规则，组件状态没有发生变化时，组件就不会再次渲染，所以组件中的变量bar的值无法得到更新。不过可以通过React的useState组件状态控制函数，实现组件中的变量bar也随着按钮点击事件不断更新。useState函数返回一个状态和一个修改状态的方法，该方法可以在点击事件中调用，以下对index.js页面进行修改，引入和使用useState函数。计划：在index页面的Home组件上设置点击事件，每点击一次数值发生递增。
2024-06-20 22:04:46
208
原创 Next.js+React进门记010【使用React的useEffect钩子函数】
计划：利用useEffect钩子方法的生命周期，在index和about页面切换时改变背景颜色。在index.js页面的Home组件中增加一个useEffect钩子方法。查看index页面测试效果，测试成功，至此计划完成。index.js页面的代码更新如下。
2024-06-20 19:40:18
96
原创 Next.js+React进门记009【使用React的useCallback函数】
笔记：在组件中写事件时有一个缺点，例如，组件重新渲染时，handleclick事件函数会被重新加载，理论上会损耗资源，不过把handleclick事件函数写在useCallback方法中就可以避免这个问题。引入React的useCallback方法包裹handleclick事件函数。查看效果，运行正常，至此，添加事件学习完成。首先在index.js页面添加一个点击事件。index.js页面修改后代码。查看效果，运行正常。
2024-06-20 14:41:41
201
原创 Next.js+React进门记008【使用map函数遍历数据】
查看index.js页面效果，可见Links内容已经被map函数正常遍历并显示出来，至此Links内容代码优化计划顺利完成。打开Links.js组件，需要将红框圈起来的a标签内容分别提取出来存入数组中，并用map函数遍历出来。计划：为模拟实战时的编程效率和代码可维护性，将红圈内容改为map函数遍历显示。修改后的Links.js组件代码如下。
2024-06-19 21:25:13
96
原创 Next.js+React进门记007【页面顶部添加链接组件】
计划：在index.js和about页面上方添加链接组件，实现页面之间的快速无刷新切换。引入next.js的Link组件，编写导航菜单，至此Header组件创建完成。在components文件夹下新建Header.module.css样式文件。在index.js和about.js页面中分别引入新建的Header组件。点击About导航菜单，尝试index和about页面相互无刷新切换。Header.module.css样式文件，使用相关样式。查看lindex.页面，点击导航菜单进行页面来回切换。
2024-06-19 16:46:26
178
原创 Next.js+React进门记006【理解掌握next.js的CSS Modules管理功能】
大致理解了next.js的样式运用方式后，分别为components文件夹下的Footer.js、Headline.js、Links.js、Main.js组件建立各自独立的样式。接下来在styles文件夹下拷贝一份Home.module.css，粘贴到components文件夹中，并重命名为Headline.module.css，删除无关的样式代码。以Home.module.css样式文件的.container类为例，查看next.js的写法和浏览器中的显示方式。
2024-06-19 13:41:54
386
原创 Next.js+React进门记005【组件中传递的数据类型】
在about.js页面的Headline组件标签中，分别追加设置数字、数组、对象、布尔值、组件等数据。回到Headline.js组件，从props参数中接收about.js页面传来的code属性值。打开index.js页面，可发现传递给Headline.jis子组件的数据显示正常。打开about.js页面，可发现传递给Headline.jis子组件的数据显示正常。同样，在index.js页面中，也在Headline标签中设置code属性。在about.js页面的Headline标签中设置code属性。
2024-06-18 17:21:25
206
原创 Next.js+React进门记004【在组件函数中传入参数】
①在index.js页面使用的组件中，设置属性title="index page"②在about.js页面使用的组件中，设置属性title="about page"计划：将红圈内容改为组件显示，并在组件函数中传入参数，动态显示各页面内容。③在Headline.js组件的函数中传入参数，并在浏览器中打印出来。在index.js页面中使用Headline.js组件。在about.js页面中使用Headline.js组件。
2024-06-17 16:14:41
124
原创 Next.js+React进门记003【代码组件化】
代码组件化是React的特点之一，减少了代码工作量，降低了维护难度。Ctrl+C拷贝index.js文件后，Ctrl+v粘贴，修改文件名和内容，建立一个about.js文件查看about页面查看index页面。
2024-06-16 21:32:20
207
2
原创 vue3+ts学游记-008 商品列表的数据展示以及分页处理
接下来进行分页处理，移动到element官网，找到Data 数据展示 > Pagination 分页 > 基础代码。打开element官网，找到Data 数据展示 > Table 表格 > 带边框表格。拷贝到views > GoodsView.vue组件中。拷贝到views > GoodsView.vue组件中。定义一个对象，用来计算分页属性值。先查看一下事件的写法。
2024-05-20 14:12:51
111
原创 vue3+ts学游记-007 商品列表的表单搜索页面的完成
移动到element官网，找到Form 表单组件 > Form 表单 > 行内表单，复制以下代码。移动到views > GoodsView.vue组件，将element官网复制的代码考培过去。在request > api.ts文件中增加商品列表接口。规范数据类型，在type文件夹下新建goods.ts文件。回到views > GoodsView.vue组件。移动到views > GoodsView.vue。由于教程接口失效，只能以教程的截图作为参考学习。使用返回的data数据。
2024-05-19 14:46:26
202
原创 vue3+ts学游记-006 首页侧边栏的动态路由
移动到views > HomeViews.vue组件，定义一个数组，来储存需要显示的左侧栏菜单。移动到router > index.ts文件，增加一个用户列表子路由。回到router > index.ts文件增加一个子路由。在views文件夹下新建GoodsView.vue组件。新建views > UserView.vue组件。开启路由模式，在选中菜单时动态显示相应样式。在每个子路由的元数据里添加title属性。移动到HomeView.vue组件。动态输出Main内容。
2024-05-18 17:41:05
102
原创 vue3+ts学游记-005 页面布局和样式
按顺序分别找到Navigation 导航>Menu 菜单>侧栏，拷贝一个样式代码。打开Element Plus官网，点击组件菜单，在左边栏点击Container 布局容器。选一个Container布局并把代码拷贝到HomeView.vue文件里。增加一个logoclass控制logo图片大小。选一个Layout布局，复制代码并编辑。将左侧栏的背景扩充到底部。修改退出登录文字样式。
2024-05-18 08:35:21
156
原创 vue3+ts学游记-004 模拟登录
封装axios,在src目录下新建request文件夹，新建index.ts文件。发送请求，在request文件夹下新建api.ts文件。完善src\views\LoginView.vue代码。绑定dom表单的ruleFormRef变量。安装axios 使用。
2024-04-22 13:24:11
200
原创 vue3+ts学游记-001准备工作
第一步安装Node.js命令行中运行node -v来检查版本安装npm命令行中运行npm -v来检查版本安装Vue CLI通过运行来安装第二步配置npm全局模块路径和cache默认安装位置，打开cmd，分开执行如下命令：
2024-04-20 08:36:12
139
centos7安装mysql5.7
2018-01-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人