登录后台

页面导航

本文编写于 246 天前,最后修改于 246 天前,其中某些信息可能已经过时。

最近在学习 Node,在掘金上看到了「我是你的超级英雄」开源的 「Express 项目」。萌生了自己也懂手做一个项目的想法。于是就是有了「KiteBlog」,「KiteBlog」是一个类似于掘金的社区项目。项目大体分成三部分:Node 做服务端(后端)、网站管理后台(前端)和网站前台(前端),也可以说是三个小项目。

小弟今年才毕业的,刚入行前端半年,主要也是边学边做的过程,写得有遗漏或者不好得地方在所难免,大家多多包涵指正。整个项目是利用空闲时间开发的,进度会比较缓慢。如果你能从中学到东西,请给我一个小小的「star」。鼓励一下小弟。

一周复盘

上周主要是项目的准备工作,创建了三个小项目的工程。用 「navcat premium」做了一个简单的数据库模型,生成对应的数据库表,第一次用不太熟练,琢磨了大半天。数据库用的是 mysql 。在设计数据库模型的时候,就看出来自己是个彻彻底底的后端小白。例如:id 到底是用 int 自增好还是 bigint 自增好,还是说用 uuid 好的。它们有什么区别,对应的应用场景是哪些?诸如此类的问题一大堆。虽然我知道用什么类型对实际功能没有什么影响,更多考虑的是性能和最大值等这些相关问题?既然要做,那还是尽量往真实的项目去靠拢比较好。毕竟练习,主要还是用来暴露自己身上的问题的。

node 服务端

「KiteBlog」

使用「express-generator」快速生成的,除了本身自带的「cookie-parser(解析 cookie)、morgan( 记录日志 )、http-errors ( http错误响应 )、ejs(模板引擎)、debug 」,额外安装了「mysql(数据库相关的操作)、jsonwebtoken(生成 token,也可解析)、express-jwt(解析token)、nodemon (监听项目修改并更新,不用每次修改都用重新启动node服务,可以使用 pm2 代替)」

有朋友可能觉得奇怪,既然「jsonwebtoken」 也可以解析验证 token ,为什么还要装个「express-jwt」,主要是用起来非常方便,基本不用你人肉去给每个请求加验证。下面就是「express-jwt」相关的所有代码

app.use(expressJWT({
  secret: EUM.SECRET_KEY,
  algorithms: ['HS256'], //express-jwt 6.0需要添加加密方式
}).unless({
  path: ['/', '/auth', '/auth/adminLogin', "/auth/login"] //不需要token验证的请求
}))

开发进度:主要开发了用户管理方面的接口,增删改查。还有就是登录的接口、token 验证、跨域和封装了一些常用的方法,便于后面开发。

管理后台(前端)

「KiteBlog_Front_Admin」

使用vue-cli4.x生成的,准备工作就是把是axios、ElementUI、js-cookies、less、less-loader等这些后面都需要用到的插件依赖给安装好。

开发进度:管理后台主要页面布局、登录、用户管理(修改状态、删除和搜索、翻页查询)。登录携带 token 验证。封装了一个搜索组件。

后面会陆续把表格组件、浏览记录页面组件也开发出来,目前前端导航菜单和按钮还是前端写死的,后面也会配合后端做权限控制。

网站前台(前端)

「KiteBlog_Front_ToC」

使用vue-cli4.x生成,还是个空项目。

整体来说,进度不算快。毕竟是第一次用 Node 做后端项目,之前没做过,难免碰壁。Node 一些项目目录结构和写法参考了 「我是你的超级英雄」开源的 「Express 项目」