Develop personal blogs using Vue, react, and KOA

Time:2021-8-12

preface

Internship for more than half a year, and close to graduation, I have always wanted to be my own blog. So we developed a server-side rendering blog system with Vue, react and KOA. Of which:

  • Back end management is developed using Vue
  • The front page uses the react server rendering frameworknextjs
  • The interface service uses koa2 + mongodb + mongoosenodemailerWhen an interface occurs500Send me email notification when)

The project address isClick my access project address(shamelessly asking for star). In order to facilitate the experience (the younger brother is not talented, and the bosses are abusive), you can click to visitBack end management system, after registering a user, you can log in to the experience and publish articles at the same timeFront pageYou can see the published articles( At present (February 28, 2018), there is no record. You can simply access it through IP)

Effect preview

1 back end management page

The back-end management page uses Vue, vuex, sass and Axios, which are developed in the style of element UIdialogloadingconfirmnotoficationmessgaeAnd other components, (I feel that I have gone a little deeper into the development of Vue components. After all, there is no end to learning). The following is a screenshot of some pages:

  • Sign in

 Develop personal blogs using Vue, react, and KOA

  • Personal Center

 Develop personal blogs using Vue, react, and KOA

 Develop personal blogs using Vue, react, and KOA

  • New article

 Develop personal blogs using Vue, react, and KOA

  • Echarts binding

 Develop personal blogs using Vue, react, and KOA

2 front end page rendering

Take this opportunity to learnReactTherefore, the front-end page uses the react server rendering frameworknextjs, and usedReduxaxiosas well askoa(used by custom services). At present, the front-end page is relatively simple, mainly reading and rendering articles. The following is a screenshot:

  • home page

 Develop personal blogs using Vue, react, and KOA

  • Article details

 Develop personal blogs using Vue, react, and KOA

Conclusion

This time I developed my personal blog and learned a lot, such asVue component developmentFile uploadUpload to qiniu cloudas well asreactandreduxUse, and then usekoa2mongodbWrite interface, and then go toPM2 daemonAnd configurationnginxwait. In short, I have learned a lot. Next, I will sort out my ideas and share these summaries. Correction and criticism are welcome.
GitHub address is thiselpase, please start, hee hee