技术胖React博客实战 - 新版问题解决方式整理

整理了一下新版的变化以及遇到的坑的解决办法。

技术胖的React 博客实战视频
https://www.bilibili.com/video/BV1CJ411377B

文章目录

前中台
后台
后记

前中台

新版Next结构差很多，"不拘小节"的只需要跟着建目录照着做就好，pages文件夹是网站的根目录。
新版Next 不支援在其他页面分别引入 css 样式，全部样式都在 _app.js 中引入
目前 antd 的 Icon 使用方式已经不是直接使用 Icon 了，引入方式改为： import { 要用的icon标签 } from '@ant-design/icons';。更多请参考： https://ant.design/components/icon-cn/
P10,P11 后面会改用 marked + highlight.js
P15 提供 MySQL 服务的集成軟件有满多的：phpStudy , XAMPP, AppServ, Homestead 都是可以用的。
以及 article 的 addTime 我是设 varchar(10)，预设值 current_timestamp()，也能达到一样的效果，不需要转时间戳(因为我不需要时分秒)。

P17(还是18？) 用的是 getInitialProps 方法，Next 9.3+ 后，官方并不推荐使用这个方法，可以改用getStaticProps 和 getServerSideProps (虽然不改也不会怎样就是了…) [ 搭配 fetch 取代 axios ] (可略过)

index.js

export async function getServerSideProps() {const res = await fetch('http://127.0.0.1:7001/default/getArticleList')const data = await res.json()return { props: { data } }
}

传参：

const Home = ({ data }) => {

detailed.js

export async function getServerSideProps(context) {const id = context.query.idconst res = await fetch('http://127.0.0.1:7001/default/getArticleById/'+id)const res_json = await res.json()const content = res_json['data'][0]return { props: { content } }
}

传参

const Detailed = ({content}) => {

P21 疑惑文章内容怎么出来的，自己随便用markdown写个笔记然后新增进数据库，如果不会 markdown的，随手一搜就有，三分钟就能会。
P22 menu icon 那里我也想知道要怎么解决，因为现在改成组件了，我试了好几种办法都不行，不过我个人也不喜欢直接把分类全放 menu 上所以我就没搞遍历。

P22 handleClick 方法：目前 pages 为根目录 / ，不再是 /index

const handleClick = (e) => {e.key == 0 ? Router.push('/') : Router.push('/list?id='+e.key)
}

P23 list.js 方法由 getInitialProps 改为 getServerSideProps (可略过)

const MyList = ({content}) => {const [mylist,setMyList] = useState(content)useEffect(()=>{setMyList(content)})//....略
}export async function getServerSideProps(context) {const id = context.query.idconst res = await fetch(servicePath.getListById + id)const res_json = await res.json()const content = res_json['data']return { props: { content } }
}

后台

后台启动后，如果你同时开着Next，会询问你是否要改变port(因为3000已经被占用)，按Enter就可以，后台的port会自动改为3001 http://localhost:3001/
P26 技术胖提到的快捷生成函数组件方式，如果使用 VSCode 可以安装 ES7 React/Redux/G.... 这个扩展，直接输入 rfc 快捷就能产生函数组件。

P27 Login.js 引入改為

import { Card, Input, Button ,Spin } from 'antd';
import Icon from '@ant-design/icons';

P33 跨域解决办法：修改 service/config/config.default.js
```
config.security = {csrf:{enable: false},domainWhiteList:['http://127.0.0.1:3001','http://127.0.0.1:3000','http://127.0.0.1:7001']}config.cors = {// origin: '*',credentials: true,  //允许Cook可以跨域allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',};
```
如果用 cors origin只能设一个，用白名单可以设好几个。

备注1：报错 HTTP 500 => 应该是sql语法有错，检查一下，如果不是复制技术胖的代码，检查一下大小写、username和password变量有没有用单引号 ' 括住。

备注2：建议在 axios外面包裹 try catch 输出 error.response.data，失败的时候才知道错在哪。
P36 如果数据库能接收到资料，但是不会跳出文章成功发布的讯息可能是因为 isSuccess 属性名字不一致。技术胖把 isSuccess 打成了 isScuccess，如果你是自己手打的话注意 saveArticle 和 addArticle 方法的 isSuccess 有没有写一致。
P39 路由设置后，跳转文章列表和新增文章都呈现空白。只需要把 admin/src/pages/Main.js 里面 <Route path="/index/" exat component={AdminIndex}/> 的 exat 删掉即可。
P43 修改文章没有显示分类，一样也是加个 defaultValue={selectedType} 就行。

后记

个人认为最容易出错的地方就是SQL语法的部分。

如果是跟着技术胖一步一步做那还好，我个人数据库是自己建的，过程中老是遇到有哪边写得不对，要不是和数据库存的名称不一致，要不就是拼写错误…纯粹自己搞自己…

还是需要比较细心的，不然就会像我一样花了大半天时间在找拼写错误，但是做完了是满满的成就感啊。

技术胖React博客实战 - 新版问题解决方式整理相关推荐

Android 进阶笔记，包含常用的技术框架、博客社区、书籍等。
AndroidNote 项目地址:venshine/AndroidNote 简介:Android 进阶笔记,包含常用的技术框架.博客社区.书籍等. 大纲技术框架图片加载网络请求数据库 ORM ...
GitHub 优秀的 Android 开源项目淘宝技术牛p博客整理开发中最常用的GitHub上优秀的 Android 开源项目整理（精品）...
原文地址为http://www.trinea.cn/android/android-open-source-projects-view/,作者Trinea 主要介绍那些不错个性化的View,包括Lis ...
【Docker之Swarm详细讲解Swarm集群搭建管理节点工作节点Raft一致性协议overlay网络Docker结合Swarm部署WordPress个人博客实战】
一.知识回顾之前的内容都帮你整理好了,在这里哟! [0.Docker相关目录文章整理,可自行查看,包含多节内容] [1.Docker详细安装部署&阿里镜像地址配置] [2.Docker架构& ...
新鲜出炉的React博客系统源码，极简主义设计，手机端可自适应，超级简单，带部署文档与演示视频加截图
新鲜出炉的React博客系统源码,极简主义设计,手机端可自适应,超级简单,带部署文档与演示视频加截图. 使用技术: 客户端前端:Next.js + React 管理端前端:React + Ant De ...
怎么禁止/开启Ubuntu自动更新升级_豆豆技术派的博客-CSDN博客_ubuntu 自动更新
怎么禁止/开启Ubuntu自动更新升级_豆豆技术派的博客-CSDN博客_ubuntu 自动更新
那些牛逼互联网公司里技术团队的博客
浮躁的心,何时才能够变得沉稳:懒惰的思想,何时才能摈除.也许你曾经很努力,但是直到今天还没有达到你想要的结果.也许你轻描淡写的努力着,却还苦苦幻想着美好的明天.也许你努力时有时无努力,却无时无刻不在想 ...
【转】那些牛逼互联网公司里技术团队的博客
浮躁的心,何时才能够变得沉稳:懒惰的思想,何时才能摈除.也许你曾经很努力,但是直到今天还没有达到你想要的结果.也许你轻描淡写的努力着,却还苦苦幻想着美好的明天.也许你努力时有时无努力,却无时无刻不在想 ...
互联网公司里技术团队的博客
一些知名互联网公司里的一些技术团队的博客 1. 美团技术团队博客: 地址: http://tech.meituan.com/ 2. 腾讯社交用户体验设计(ISUX) 地址:http://isux.te ...
为何建议技术人写写博客呢？
每天早上七点三十,准时推送干货 Photo by XPS on Unsplash 前言每逢佳节倍思亲,今天是中秋佳节,也是国庆,你是在回家的路上还是已经到家了呢?还是在苦逼的加班呢!今天不谈技术,我 ...

技术胖React博客实战 - 新版问题解决方式整理

文章目录

前中台

后台

后记

技术胖React博客实战 - 新版问题解决方式整理相关推荐

最新文章

热门文章