首页 > 其他分享 >React实战技术博客系统

React实战技术博客系统

时间:2024-12-14 13:36:14浏览次数:3  
标签:实战 egg 博客 React 开发 后台 制作 页面

React实战技术博客系统

React实战博客:https://www.bilibili.com/video/BV1CJ411377B

P1第01节:React实战视频教程简介

P2第02节:前台开发环境的搭建

create-next-app next框架

yarn add @zeit/next-css

2019-06-28

源码 https://gitee.com/lhwz666/react_blog

react_blog

yarn add antd

yarn add babel-plugin-import

"next": "9.0.6",

P3第03节:博客公用头部组件制作
P4第04节:制作首页主题两栏布局
P5第05节:用List组件制作博客列表
P6 第06节:编写博主介绍组件-Avatar学习
P7 第07节:编写通用广告组件
P8第08节:博客列表页面快速制作
P9 第09节:博客详细页面制作1-基本页面结构
P10第10节:博客详细页面制作2-Markdown文档的….

markdown 吗 的当

rexxars / react-markdown

marked+highligt. js

P11第11节:博客详细页面制作3-Markdown导航栏...

P12第12节:中台搭建1-安装egg.js开发环境

https://eggjs.org

2.23版本

npm i egg-init@1.17.2 -g 安装脚手架cli

egg-init --type=simple 7001

egg A可 / i

P13 第13节:中台搭建2-目录结构和约定规范

P14第14节:中台搭建3-RESTful接口介绍和路由配置

·RESTful··APP·前后端·,简单·和·约束性。
·请求方式· get 获取资源·· post·新建资源· put·更新资源· delete·删除资源


P15第15节:中台搭建4-Egg.js中连接mysql数据库

yarn add egg-mysql@3.0.0 egg@2.15.1

egg-mysql npm官网看看配置

P16第16节:中台搭建5-数据库设计和首页文章接口.

P17第17节:前中台结合1-前台读取首页文章列表

next
组件init props
Home.getInitialProps = async (context)=>{}

mysql 可以转 时间

P18第18节:前中台结合2-文章详细页面接口制作

P19第19节:解决Egg.js跨域问题和Bug调试

yarn add egg-cors

P20第20节:重构前台博客详细页面1-marked+highl...

yarn add marked highlight.js

yarn add markdown-navbar导航大纲

antd Affix固定效果 右侧固定

127.0.0.1:3000

BLOG前台
接口中台
后台管理

P21 第21节:重构前台博客详细页面2-文章导航

Tocify喵点

P22 第22节:前台文章列表也的制作-接口制作
P23 第23节:前台文章列表也的制作2-界面制作
P24第24节:让前台所有页面支持Markdown

P25第25节:后台开发1-开发环境搭建

antd react

react-script 旧版了 报错 https://blog.csdn.net/u013282737/article/details/136495986

P26 第26节:后台开发2-页面路由配置
P27 第27节:后台开发3-登录页面UI制作
P28第28节:后台开发4-UI框架的Layout搭建
P29第29节:后台开发5-添加文章页面制作1
P30第30节:后台开发6-添加文章页面制作2

ssr

加载loading

P31第31节:后台开发7-Markdown转HTML
P32 第32节:后台开发8-中台登录接口编写
P33第33节:后台开发9-后台登录功能的实现
P34 第34节:后台开发10-中台路由守卫制作
P35第35节:后台开发11-读取文章分类信息
P36 第36节:后台开发12-添加文章内容(上)
P37第37节:后台开发13-添加文章内容(中)
P38 第38节:后台开发14-添加文章内容(下)
P39 第39节:后台开发15-文章列表制作(上)
P40 第40节:后台开发16-文章列表制作(中)

后台用户 admin 密码 123456

pm2

P40第40节:后台开发16-文章列表制作(中)
P41 第41节:后台开发17-删除文章
P42 第42节:后台开发18-修改文章(上)
P43第43节:后台开发19-修改文章(下)
P44 第44节:博客部署介绍和演示

标签:实战,egg,博客,React,开发,后台,制作,页面
From: https://www.cnblogs.com/KooTeam/p/18606581

相关文章

  • React实战复杂共享单车管理项目
    2024React实战复杂共享单车管理项目React18+hooks核心基础到企业级项目开发实战-----【附带源码+接口】https://www.bilibili.com/video/BV1sZ421T7BC 1 2React项目:开发初体验版本稳定....新版特性dszdjdgwdx20131820241.声明式编程告诉“机器”你想要什么(what),让机器去做......
  • 跨平台uniapp和taro实战
    15-跨平台uniapp和taro实战https://www.bilibili.com/video/BV1GV411L7qSuniappP1405--day115_邂逅跨平台-uniapp基础语法-uni-tarota他楼原生开发的特点:1性能稳定,使用流畅,用户体验好、功能齐全,安全性有保证,兼容性好,可使用手机所有硬件功能等口但是开发周期长、维护成本高......
  • ReactNative实战项目演练
    【叩丁狼教育】ReactNative实战项目演练-自学必备https://www.bilibili.com/video/BV15K411s75pP101-移动端app开发方式介绍大致可以分为这3种:nativeapp(原生app:iOS或安卓)webapphybridapp(混合app)P202-RN简介P303-搭建RN环境前的说明P404-python环境的安装P505-ja......
  • 探花交友 React Native 跨端APP项目实战开发
    【2020前端全新项目】探花交友ReactNative跨端APP项目实战开发教程——【黑马程序员广州中心】https://www.bilibili.com/video/BV1e5411L7VV/P11-课程导读老师上课所采用的开发环境如下:1.系统版本window102.开发工具vscode3.ReactNative版本0.62.24.React16.......
  • react native入门到实战
    reactnative入门到实战(有可能是全站最详细的RN教程)https://www.bilibili.com/video/BV1Pt4y1n7bDP1P1.01.简介ReactNative是Facebook在React.jsConf2015上推出了开源框架ReactNative(简称RN)是React的一个原生(Native)扩展它允许我们通过React语法,来开发ios和......
  • 3小时入门ReactNative教程
    3小时入门ReactNative教程https://www.bilibili.com/video/BV1Eg4y16735P1RN安装01androidStudio和环境变量配置-Re安装androidStudionrmnpxnrmusetaobaonrmlsP2RN安装02-安装nrm-使用淘宝源-ReactNativeP3RN安装03-启动项目-ReactNativehttps://blog.csdn.net......
  • React16
    React16免费基础视频教程https://www.bilibili.com/video/BV1g4411i7poP101_React免费视频课程介绍https://jspang.com20195年前react1616.8.6https://react.dev/P202_React简介和Vue的对比P303_React开发环境的搭建npmi-gcreate-react-app@3.0.0create-react-a......
  • React服务端渲染框架Next.js入门教程
    React服务端渲染框架Next.js入门教程https://www.bilibili.com/video/BV13441117KK*101节_Next.js简介和手动创建项目02节_creat-next-app快速创建项目03节_Next.js的Page和Conponent使用04节_路由的标签跳转和编程跳转05节_路由跳使用query传递参数和接受参数06节_路由......
  • 为什么大公司搞精益管理,效益不好的情况下最先裁撤的就是精益管理部门?-中小企实战运营
    在效益不好时大公司最先裁撤精益管理部门,这一现象看似矛盾,实则是由多种因素共同作用导致的。1,对精益管理的误解(1)短期效益的误判:许多公司管理层对精益管理存在误解,期望它能在短时间内实现显著的成本节约或效率提升。然而,精益管理是一个长期的、系统性的持续改善过程。它......
  • 销售拜访客户的正确步骤是什么?-中小企实战运营和营销工作室博客
    销售拜访客户的正确步骤是什么?销售拜访客户一般可以按照以下正确步骤进行:拜访前的准备1,明确拜访目的(1)确定拜访是为了开拓新客户、维护老客户关系、推销新产品、收集市场信息还是解决客户问题等。例如,如果是推销新产品,要清楚产品的特点、优势和能为客户带来的价值。(2)......