开发（react框架）博客遇到的坑

2023-12-17 19:58:09

p01.前台部分

新版Next结构差很多，"不拘小节"的只需要跟着建目录照着做就好，pages文件夹是网站的根目录。
新版Next 不支援在其他页面分别引入 css 样式，全部样式都在 _app.js 中引入。
目前 antd 的 Icon 使用方式已经不是直接使用 Icon 了，引入方式改为： import { 要用的icon标签 } from '@ant-design/icons';。更多请参考： https://ant.design/components/icon-cn/
前台渲染markdown时修改属性名source改为children。

<div className="detailed-content" >
   <ReactMarkdown 
   children={markdown} 
   escapeHtml={false}  
   />
</div>

用markdown-navbar第一个标题不显示嘛,但是好像加一个#号能出来，或者markdown中全部标题都用二级标题 ##。

p02.中台部分

从后端传参时用的是 getInitialProps 方法，Next 9.3+ 后，官方并不推荐使用这个方法，可以改用getStaticProps 和 getServerSideProps (虽然不改也不会怎样就是了…) [ 搭配 fetch 取代 axios ] (可略过)。
目前用的是getInitialProps ，后续考虑修改。

index中:

 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.id
      const 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}) => {

引入 lodash 后，报这样的错： lodash.js 不是模块
“h:/javascript/React/bolg/web/node_modules/lodash/lodash.js”不是模块。
安装 npm install --save @types/lodash
apiUrl中有的路径要“/”（嵌套路由）有的不要，注意区分

p03.后台部分

menu中将item.id写成了Id大写，导致传的值错误
antd若用老版，password框用不了
withCredentials: true cookies跨域
12.在admin/src/Pages/Main.js 里面去掉 Route path=/index/ exact component={AdminIndex} /这个里面的精确匹配 exact 即可。
嵌套路由不能用精确匹配，同样的问题在AdminIndex.jsx文件add路由上也需要。
修改文章的时候类型未选中，需要把select 框的defaultValue改成value 就行了。
记得修改相应文章的路由也要在adminindex页面加上:id

p04.数据库部分

sql主键id设置为自动递增
忘记root密码，看下面博客修改
https://blog.csdn.net/weidong_y/article/details/80493743
命令：update mysql.user set authentication_string=password('root') where user='root' ;
修改密码命令换成上面的。
启动mysql遇到问题，服务名没写对，参考下面文章
https://jingyan.baidu.com/article/3f16e00317bd5b2591c10306.html
数据库的变量名和实体sql语句中的名称是否一致
使用phpstudy的话。第一, 不需要提前安装MySQL, 因为phpStudy已经默认安装了; 第二安装了之后, 在环境变量加上PHPstudy安装目录下的mysql路径; 第三, phpstudy可以修改mysql数据库密码。
后端写sql语句时from article 要和后面的分开写，不知道为啥

'FROM article'+' LEFT JOIN type ON article.type_id = type.Id ' + 
        'LEFT JOIN categories ON article.categories_id = categories.Id '+  'WHERE article.id='+id

跨域问题

跨域解决办法：修改 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，失败的时候才知道错在哪。

码农公寓

p01.前台部分

p02.中台部分

p03.后台部分

p04.数据库部分

跨域问题

相关文章