知其黑、受其白
每个优秀的人,都有一段沉默的时光,那段时光,是付出了很多努力,却得不到结果的日子,我们把它叫做扎根。
你可以从别人那里汲取某些思想,但必须用你自己的方式加以思考!
展开
-
react 常用
阅读目录安装脚手架工具 create-react-app查看react-router-dom所有版本查看react所有版本指定版本安装 react-router-dom安装脚手架工具 create-react-appnpm install -g create-react-appcreate-react-app 是React官方出的脚手架工具,其实有很多第三方的脚手架工具,也有很多优秀的。但是作为初学者为了减少踩坑,所以我们使用官方的脚手架。create-react-app demo01 //用脚手架原创 2021-12-28 14:07:47 · 461 阅读 · 0 评论 -
E13:如何部署博客到公网
React Hooks+Laravel 后端博客实战阐述Blog前台部署阐述部署这套博客有很多种方法,也可以自动化部署。但你如果想学会部署,并且不花什么钱的的话,你至少要会以下这些知识。Liunx相关操作,比如最简单的基础操作。Linux下搭建 MySql 和 Nginx。Linux下进行内网穿透。PM2的相关使用。Linux相关安全设置,比如开端口,关端口,自动监控这些。但是这些知识每一个都可以出一套教程来讲,所以不能完全给大家讲这些。但是我还要详细讲一下跟前端相关的操作。Blog前原创 2021-12-27 15:57:46 · 1293 阅读 · 0 评论 -
E12:后台管理系统开发-修改文章功能
React Hooks+Laravel 后端博客实战阐述updateArticle方法编写useEffect() 方法的编写getArticleById 方法的编写阐述本文将带大家实现修改文章功能,我们再发布一篇文章难免会遇到文章内容不对或者需要补充知识的问题,所以修改文章每天都会发生,也尤为重要。 其实做到这里,你完全已经知道我们开发的流程和基本结构了,你也可以停下阅读,自己先做做试试,如果做不出来,你可以再回来看这个文章。updateArticle方法编写到 /admin/src/pages/A原创 2021-12-27 15:47:54 · 422 阅读 · 0 评论 -
E11:后台管理系统开发-实现删除文章功能
React Hooks+Laravel 后端博客实战阐述管理页面删除方法阐述本文我们就一起来完成文章的删除功能。这个删除操作需要注意的是要防止误删,即不小心删错了,所以在删除前我们需要再次向用户询问是否删除。管理页面删除方法到 /admin/src/pages/ArticleList文件中编写一个delArticle方法,在这个方法里我们要再次向用户确认是否删除这篇文章,如果用户同意才会确认删除。// 删除文章方法const delArticle = (id) => { confi原创 2021-12-27 15:04:13 · 418 阅读 · 0 评论 -
E10:后台管理系统开发-实现左侧菜单的文章列表功能
React Hooks+Laravel 后端博客实战阐述建立 `ArticleList.js` 文件编写对应的路由Axios 获取文章列表Laravel获取文章列表阐述目前已经可以添加博客文章了,然后我们需要作一个文章列表,方便我们后续的删除和修改操作。我们先把接口和页面布局做好。建立 ArticleList.js 文件我们在 /admin/src/pages 文件夹下新建立一个 ArticleList.js 文件。然后先 import 引入一些必须要使用的包。import React, { u原创 2021-12-27 14:38:09 · 299 阅读 · 0 评论 -
E09:后台管理系统开发-实现添加文章的方法
React Hooks+Laravel 后端博客实战阐述选择类别后调用方法对发布时间文本框修改再对文章标题文本框进行修改编写文章保存方法Laravel编写后台保存方法前端编辑保存功能Laravel编辑保存功能`admin\src\Pages\AddArticle.js`阐述本文主要内容是把文章中的内容添加到数据库中,内容虽然比较多,但是很多知识我们已经熟悉,都是利用 axios 对数据库进行操作。选择类别后调用方法现在选择文章类别后,前台还没办法根据选择的内容进行改变,这是我们使用了 React H原创 2021-12-24 19:29:48 · 704 阅读 · 0 评论 -
E08:后台管理系统开发-读取添加文章页面的类别信息
React Hooks+Laravel 后端博客实战阐述Laravel编写获取文章类别的接口1、添加跨域并设置获取前端token2、修改中间件3、重写登陆方法4、读取文章类别信息方法添加文章页面显示出类别阐述本文将制作从后台开一个读取文章类别的接口,然后从接口中获得数据,展现在添加文章页面上,方便以后选择文章类别。Laravel编写获取文章类别的接口1、添加跨域并设置获取前端token首先解决跨域问题和获取前端传递过来的token。D:\dcatAdmin\public\index.phphe原创 2021-12-24 17:42:41 · 398 阅读 · 0 评论 -
E07:后台管理系统开发-实现后台登录功能
React Hooks+Laravel 后端博客实战增加相应事件编写登录方法 checkLoginLaravel登陆创建 Laravel 中间件注册中间件:`app/Http/Kernel.php`创建路由查看访问结果Laravel 采用 Jwt新建 `App\Common\Jwt.php`Laravel中间件生成tokenLaravel控制器验证token效果预览localStorage 知识点localStorage的使用增加相应事件后台可以通过按钮调用这个方法,代码如下:<Button t原创 2021-12-23 18:56:05 · 235 阅读 · 0 评论 -
E06:后台管理系统开发-Markdown编辑器制作
React Hooks+Laravel 后端博客实战阐述声明对应的useState设置markedmarket css 样式编写实时预览对应的方法编写onChange相应事件完整代码`admin\src\Pages\AddArticle.js`阐述界面制作好以后,就可以自己制作一个Markdown编辑器,这里我设计的也没那么麻烦,只要支持Markdown语法的编写,并且能实时预览就可以。声明对应的useState在 function 的头部直接声明对应的 useState,代码如下(为了以后方便,我原创 2021-12-23 12:25:44 · 391 阅读 · 0 评论 -
E05:后台管理系统开发-添加文章页面UI制作
React Hooks+Laravel 后端博客实战阐述创建增加文章页面新建 `admin\src\Pages\AddArticle.js`新建 `admin\src\static\css\AddArticle.css`编写标题和文章内容区域编辑 `admin\src\Pages\AddArticle.js`暂存按钮和发布按钮编写文章简介部分编写发布时间界面阐述大体的UI架构确定下来以后,就可以制作里边的业务逻辑页面了,第一个要作的页面是添加博客文章,这是本博客教程最难的一部分,所以要分成几节来讲。本原创 2021-12-23 11:14:14 · 360 阅读 · 0 评论 -
E04:后台管理系统开发-后台首页UI框架搭建
React Hooks+Laravel 后端博客实战阐述Layout布局新建 `admin\src\Pages\AdminIndex.js`新建 `admin\src\static\css\AdminIndex.css`把Class形式改为Hooks形式新建 `admin\src\Pages\AdminIndex.js`修改 `admin\src\Pages\Main.js` 配置路由阐述登录页面的UI制作完成了,当登录成功后,我们会跳转到博客的后台管理页面,这个页面依然是用Ant Desgin制作的。原创 2021-12-23 10:29:05 · 418 阅读 · 0 评论 -
E03:后台管理系统开发-登录界面UI制作
React Hooks+Laravel 后端博客实战阐述引入需要使用的组件编写UI部分编写CSS文件Login.js 源码阐述本文带大家正式编写界面了,我们第一个界面就是登录,因为后台管理的一切都要求我们登录后才可以操作,如果没登录会跳转到登录。引入需要使用的组件进入 Login.js 文件后,先要引入一些我们页面所需要的组件,这里我们需要引入React、antd。admin\src\Pages\Login.jsimport React , {useState} from 'react';im原创 2021-12-22 19:04:07 · 934 阅读 · 0 评论 -
E02:后台管理系统开发-页面路由配置
React Hooks+Laravel 后端博客实战阐述安装 react-router-dom使用 Router阐述开发环境搭建好以后,接下来就可以设置路由了。路由的设置相当简单,所以本文内容也不会太长。(如果你还不熟悉React-router相关知识,可以到我的博客中看之前关于Router基础教程笔记)安装 react-router-dom进入 admin 文件夹,在文件夹下,直接使用yarn或者npm来进行安装。我这里就使用npm来进行安装了。npm install --save reac原创 2021-12-22 18:46:15 · 531 阅读 · 0 评论 -
E01:后台管理系统开发-开发环境搭建
React Hooks+Laravel 后端博客实战阐述用脚手架生成项目安装和引入Ant Design阐述前台的主要功能我们已经开发完成了,接下来我们开始制作后台博客的管理界面。后台将采用 React Hooks + Ant Design,我们主要会对博客文章的管理和登录系统进行讲解。本文主要是搭建后端开发环境。用脚手架生成项目进入项目目录,然后直接使用 create-react-app 生成目录,记得生成的目录要全部小写。create-react-app admin安装好以后,把项目进行最原创 2021-12-22 18:30:37 · 709 阅读 · 0 评论 -
P13:前台列表页显示类别
React Hooks+Laravel 前端博客实战阐述Laravel 控制器编写前台UI界面阐述现在已经可以进入到文章列表页,但是列表页的内容目前还是静态的。我们的意愿是根据文章类别来展现不同的内容,比如前端教程列表就展示前端相关教程,前端工具列表就展示前端用的工具。要实现这个效果,我们还是需要制作一个接口的。Laravel 控制器public function getType(){ $id = request('id'); $article['article'] = DB:原创 2021-12-22 18:01:37 · 239 阅读 · 0 评论 -
P12:读取文章分类
React Hooks+Laravel 前端博客实战阐述读取文章类别信息修改数据库修改Header组件浏览器预览效果阐述从本文开始,要制作一下文章列表页的前中台结合。由于接口越来越多,现在这样零散的管理非常不利于日后的维护,所以需要单独一个文件,专门用于前台和中台的接口管理。这样在以后部署和更换服务器时都非常简单。读取文章类别信息我们希望每个页面只读取一次接口,然后服务端渲染好后展示给我们。Laravel 控制器public function type(){ $type = Typ原创 2021-12-22 11:49:01 · 545 阅读 · 0 评论 -
P11:利用marked+highlight.js重构前台文章详细页面
React Hooks+Laravel 前端博客实战阐述安装 marked 和 highlight.js重构 `detailed.js` 文件增加Code的高亮显示CSS样式的更换MySQL数据阐述之前我们在博客文章详细页使用了 react-markdown 模块,但是这个插件的配置项还是太少了,而且我也没做太多的技术调研,所以我决定转回我目前项目中使用的一套方案marked+highlight.js。这个方案是比较成熟的,目前公司的开发文档程序就是基于这个开发的。安装 marked 和 highl原创 2021-12-21 18:06:40 · 578 阅读 · 0 评论 -
P10:文章详细页面接口制作展示
React Hooks+Laravel 前端博客实战阐述编写中台详细页面接口编写前台链接导航详细页从接口获取数据阐述首页的接口和展示已经差不多了,现在可以制作详细页的接口和内容。这节课主要目的是制作文章详细页面的接口,通过一个ID查找出详细的信息。编写中台详细页面接口Route::get('getArticleById','TestController@getArticleById');public function getArticleById(){ $id = request('原创 2021-12-21 16:06:57 · 161 阅读 · 0 评论 -
P9:数据库设计与首页接口制作
React Hooks+Laravel 前端博客实战阐述数据库中的表建立type表(文章类型表)article表(文章内容表)前端首页文章列表接口安装Axios模块新建 `getInitialProps` 方法并获取数据把数据放入到界面中阐述设计一下数据库结构,把文章的表和类别的表建立好,然后我们复制一些数据进去,形成一个列表,供首页调用。数据库中的表建立直接使用MySQL-front工具建立使用的表,建立两张表 type 和 article表,表结构如下:type表(文章类型表)id : 类原创 2021-12-21 15:25:10 · 487 阅读 · 0 评论 -
P08:博客详细页面制作
React Hooks+Laravel 前端博客实战阐述编写基本页面结构`blog\pages\detailed.js``blog\styles\detailed.module.css``blog\pages\detailed.js` 引入 detailed.module.css效果解析Markdown语法认识react-markdown组件react-markdown 的安装和引入准备md相关数据使用react-markdown渲染markdownMarkdown导航制作认识markdown-navbar原创 2021-12-20 19:51:25 · 122 阅读 · 0 评论 -
P07:博客列表页&底部制作
React Hooks+Laravel 前端博客实战阐述博客底部的制作`blog\pages\_app.js``blog\pages\index.js`效果博客列表页的制作阐述本文我们先把博客底部制作一下,然后在快速制作博客的列表页面,通过这个你就能感觉到React组件化开发的魅力,有了这些通用组件,能很快完成列表页的开发。博客底部的制作每个博客在底部都会放置一些类似版权,联系方式,友情连接的东西。并且每个页面也都是一样的,所以我们要作一个通用的博客底部组件(Footer.js)。在 /compo原创 2021-12-20 17:08:55 · 262 阅读 · 0 评论 -
P06:博客的通用广告组件开发
React Hooks+Laravel 前端博客实战阐述编写 Advert.js 文件编写 advert.css 文件引入首页查看样式阐述本文编写的通用广告组件和上篇博主介绍组件几乎一样,就是写写基本结构,然后形成组件,引入到主页里查看效果。但是这个广告组件和博主自我介绍组件我都准备用静态来作,就是没有后台配置。这样作的好处是节省掉每次和数据库的交互和后台的交互,提高博客性能。因为博客有时候并发是很大的,所以能节省的资源一定要节省。编写 Advert.js 文件在 /components 文件原创 2021-12-20 16:45:59 · 147 阅读 · 0 评论 -
P05:博主介绍组件开发
React Hooks+Laravel 前端博客实战阐述编写 Author 组件CSS样式的编写把组件引入到首页查看效果阐述博客的文章列表有了,接下来开始完善博客右侧的功能,右侧的绝大部分都是需要在其他页面复用的,所以尽量制作成组件,减少以后的开发和维护成本。编写 Author 组件在 /components 文件夹下面,新建一个 Author.js 文件。这个组件里要包括头像、自我介绍和社交账号标识。blog\components\Author.jsIcon图标npm install --s原创 2021-12-20 16:13:54 · 89 阅读 · 0 评论 -
P04:通过List组件制作博客列表页
React Hooks+Laravel 前端博客实战阐述编写列表项的基本结构列表页CSS样式的编写阐述左右两边的基本布局完成后,需要对列表的单元项进行制作,也就是首页列表中的每一项。这个制作起来涉及的内容不多,因为以后要解析Markdown代码,所以这里只是先模拟一下,把基本的样式完成。因为基础知识点我们都讲过了,所以这里就以实践为主了。编写列表项的基本结构由于Ant Design本身就有列表相关的组件,所以我们不用把这部分独立出去,而是使用Ant Design本身所有的List组件。打开 in原创 2021-12-20 15:40:45 · 186 阅读 · 0 评论 -
P03:博客首页主体的两栏布局
React Hooks+Laravel 前端博客实战阐述对公用头部的微调编写首页的左右两列布局其他页面的大结构复制`blog\pages\list.js`blog\pages\detailed.js阐述我们的博客主体分为左右两栏布局,左边是主要展示的是文章列表,右边是个人信息和一些广告的东西。并且也是在不同的终端中有不同的表现。本文我们先制作出两栏布局。对公用头部的微调上篇完成了公用头部的编写,但是发现公用头部还是不那么的好看,特别是在2K屏下,显得太小气了。所以先对公用头部的CSS进行调整。原创 2021-12-20 14:50:14 · 198 阅读 · 0 评论 -
P02:编写博客公用头部并生成组件
React Hooks+Laravel 前端博客实战阐述通用CSS文件的编写Ant Design 的24格栅格化系统`blog\pages\_app.js``blog\components\Header.js`blog\styles\header.css`blog\pages\index.js`预览效果阐述博客的头部每个页面都一样,所以可以制作成一个组件。这样就可以保持每个博客的页面头部都是统一的,而且易于上线后的维护。博客头部还要能支持适配大部分终端,比如PC、手机和平板。适配终端使用 Ant D原创 2021-12-20 12:06:22 · 138 阅读 · 0 评论 -
P01:前端基础开发环境搭建
React Hooks+Laravel 前端博客实战阐述用create-next-app快速创建项目建立博客首页按需加载 Ant Design配置文件 blog\package.json阐述我们先完成博客的前端界面的制作,主要完成的功能就是用户的访问,文章列表和文章详情页面。因为Blog的前台需要SEO操作,所以我们一定会选用Next.js框架来辅助我们开发。然后减少CSS和各种组件的重复开发,使用阿里的 Ant Desgin 来作为UI交互库。废话不多说,开始搭建开发环境了。用create-ne原创 2021-12-20 11:43:20 · 129 阅读 · 0 评论 -
Composer 私有化
阅读目录说明全局包非全局包说明我们知道,正常情况下,我们使用 composer install 时,是从 https://packagist.org/ 拉取的 package,如果设置了 中国镜像,那么就会从你的镜像地址拉取。处于一些需要,我们往往需要引用自己开发的 composer package。如果是公用还好,我们直接结合 github 和 packagist 发布共有的镜像就好了。那如果我们使用的是自建的 git 服务(如: gitlab 或者 gogs)开发的 composer packa原创 2021-11-11 16:03:44 · 204 阅读 · 0 评论 -
4、laravel引入自定义composer包
1 进入项目根目录引入创建的包composer require willem/pagecount/www/localhost/laravel5 # composer require willem/pagecountUsing version ^1.0 for willem/pagecount./composer.json has been updatedRunning composer update willem/pagecountLoading composer repositories wi原创 2021-02-25 15:43:37 · 480 阅读 · 0 评论 -
3、Packagist添加GitHub制作的composer包
1 登录packagist2 点击submit,复制制作的composer包。3 提交包4 最终原创 2021-02-25 15:38:52 · 190 阅读 · 0 评论 -
2、通过composer init命令创建一个composer.json的文件
第一步$ composer initwillem@PC20103420000 MINGW64 /f/dist/pagecount (master)$ composer init Welcome to the Composer config generatorThis command will guide you through creating your composer.json config.Package name (<vendor>/<name>) [wille原创 2021-02-25 15:35:35 · 829 阅读 · 0 评论 -
1、在GitHub上创建一个空仓库
Composer 是一个命令行工具,它的作用就是帮我们的项目管理所依赖的开发包,属于依赖包管理工具。由于程序届的《开源运动》,我们可以在社区找到很多别人提供的工具,也可以向社区贡献我们的代码。在github还没有兴起的年代,我们是需要到工具的官网下载代码,比如jquery。然后放到我们自己的项目目录里,再在我们的页面中使用。于是就有依赖包管理工具的诞生了,如前端使用的npm,java使用的maven,安卓的Gradle等等。在PHP中我们使用的工具叫Composer。当我们需要更新包的时候,我们也只原创 2021-02-25 15:09:02 · 594 阅读 · 0 评论