前端全栈之路,nuxt+koa搭一套博客系统(1)

·  阅读 793

前言

说实话,作为一个别人眼中的API调用工程师,我渐渐的不满足于仅仅做一个切图仔,自己写后端的想法在脑中挥之不去,所以在连续啃了两天node后,我手工撸了一个博客后台,也算是半只脚踏入了全栈的门槛吧(哈哈,别喷我)。言归正传,这次的文章,我会完全从0开始写,也就是从我买服务器的步骤开始,当然,如果您对此感兴趣,并下定决心要学习,我建议也可以买台服务器玩玩,bat随便谁家的云服务器都可以,新用户9块9包邮,您买不了吃亏,买不了上当。

此处附上页面地址(PC端):myblogs.ltd:8088/home/list

前端git:github.com/809525536/m…

后端脚手架git:github.com/809525536/t…

完整的后端项目暂且不开源,主要是涉及到数据库账号密码~~

先大概介绍一下做一个完整的博客所需要的技术栈吧:

  • NUXT:服务端渲染框架,选择原因--利于seo优化,加快首屏渲染速度
  • VUE:这个不用说了,作为合格的一个切图仔,别告诉我你不会
  • KOA:node应用框架,帮我们封装好了一切,直接就能上手写接口
  • typeorm:  搭配koa,使用js语法就可以帮助我们非常容易的对数据库增删改查
  • typescript:个人觉得未来可能是一个前端的趋势,趁机练练手
  • mysql:数据库

前期准备工作:

  1. 一个mysql数据库,毕竟我们所有的东西都要存起来,首先就得有个数据库,至于会不会建表之类的后边再说,我买了某某云的数据库,9块钱三个月,够折腾一阵了,如果您实在 囊中羞涩,也可以在本地搭一套数据库,只是就无法体会在远程访问的快感了。
  2. 一台云服务器ESC,我也是买的某某云,建议也买新用户体验版,几块钱一个月,毕竟有便宜不占是什么来着。怎么配置后边再讲。
  3. 一台用来写代码的电脑。

准备工作完成之后,开始先搭前端的架子吧,可以使用nuxt官方提供的脚手架一气呵成,也可以直接clone我的git项目。


这个是脚手架生成后的目录结构,nuxt的特点就是,不需要我们再去额外的配置路由,你只需要在pages目录下直接新建页面,nuxt会自动帮我们生成对应的路由。全局的插件,比如axios拦截器,或者自定义的组件,都放到plugins目录下,然后在 nuxt.config.js 中配置一下即可:


配置完之后,npm run dev 即可跑起来,然后我们再准备后端架子,同样,可以直接clone我的git项目,已经配置好了koa,typescript和typeorm,开箱即用:


这是生成好的目录结构,注意ormconfig.js里,就是配置我们的数据库


前后端的架子,现在已经准备好了,下一篇我再写一下云服务器和数据库的配置,以及怎么把代码部署上去。




分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改