blog development log

The code of my blog is on my github: https://github.com/CharlieXuJk/blog

07/09/2021

Before, our Header component was static, that is, hard-coded. To me the menu effective, now we need to use the useEffect() method to get dynamic data from the interface. And a new interface which can fetch articles by type will be implemented.

Remember to set the useEffect, or the link in the menu only work for one time. Because the link does request for only one time, and after that, we might save the data.

useEffect(()=>{
  setMylist(list.data)
 })

06/09/2021

Did some refactors on the CSS part: split all the global parts into two files: /styles.css and /components/globals.module.css.
The two files look as below:

//styles.css
body{
  background-color: #cbcbcb;
}

//components/globals.module.css
.comm_left{
  background-color: #ffffff;
  padding:.3rem;
  border-radius: .3rem;
  border-bottom:1px solid #eee;
}

Imported marked and highlight.js to convert markdown files into html style, instead of using mdx files.

import marked from 'marked'
import hljs from "highlight.js"
import 'highlight.js/styles/monokai-sublime.css'

05/09/2021

When clicking a link on React which redirects to the egg.js, it shows 500 internal error. Installed the egg-cors to serve as XDR and imported it in the congfig.

  config.cors = {
    origin: '*',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS'
  };

After including the cors, the error code turned into 404. A dynamic route should be set up as followed.

//app/router
router.get('/default/getArticleById/:id',controller.default.home.getArticleById)
//app/controller
async getArticleById(){
	let id = this.ctx.params.id

04/09/2021

Implemented the getInititalProps function, using axios. Right now, react can get data from db through egg.js.