Nuxt+egg+MongoDB前后端实战。

2,165 阅读1分钟

项目基本介绍

​ 学生一枚,一直在学前端,最近学了eggnuxt等,觉得需要把他们进行一些组合,所以花费一些时间写出了这个小型的练手demo

github地址

如果您觉得怼对您有帮助,请给一颗小星星

功能

网站常用的基本功能。 登陆,注册,jwt校验,发布文章,点赞,关注。粉丝数获取等基本功能,功能不多。但是知识点还是挺全面的我觉得。希望能帮助到大家

技术选择

前端

JS库

nuxtvue处理SSR的框架,所以选择这个作为主体

用了工具库lodash.js,

时间库monent.js(推荐用day.js)

加密md5,

markdown marked

AJax axios

CSS

scss

UI

element.ui

后端

主题框架

主体框架:egg.js

插件

egg-jwt,用来处理token验证

egg-mongoose: 用来操作数据库

md5, 密码的加密

svg-captcha: 验证码的管理

项目结构

前端

|-- .babelrc
|-- .editorconfig
|-- .eslintrc.js
|-- .gitignore
|-- .prettierrc
|-- jest.config.js
|-- nuxt.config.js
|-- package-lock.json
|-- package.json
|-- README.md
|-- .nuxt
|-- assets
|   |-- README.md
|-- components   复用组件
|   |-- ArticleList.vue
|   |-- Logo.vue
|   |-- README.md
|   |-- UserDisplay.vue
|-- layouts  布局组件
|   |-- default.vue
|   |-- loginDefault.vue
|   |-- README.md
|-- middleware  
|   |-- README.md
|-- pages 页面组件
|   |-- index.vue
|   |-- login.vue
|   |-- README.md
|   |-- register.vue
|   |-- article
|   |   |-- _id.vue
|   |-- editor  传递参数需要
|   |   |-- new.vue
|   |-- user
|       |-- _id.vue
|-- plugins  配置插件
|   |-- axios.js
|   |-- element-ui.js
|   |-- README.md
|-- static 静态文件
|   |-- favicon.ico
|   |-- README.md
|   |-- user.png
|-- store  Vuex
|   |-- README.md
|   |-- user.js

后端

|-- app
|   |-- router.js  路由控制
|   |-- controller   解析用户的输入,处理后返回相应的结果
|   |   |-- article.js
|   |   |-- home.js
|   |   |-- userinfo.js
|   |-- extend  扩展
|   |   |-- helper.js
|   |-- model  数据库操作
|   |   |-- article.js
|   |   |-- user.js
|   |-- public
|   |-- service  业务逻辑
|       |-- tools.js
|-- config
|   |-- config.default.js
|   |-- plugin.js

注意

  1. 本文的结构只 写出了我们常用的,并不是整体

  2. 本次为了方便,所有业务逻辑都卸载了controller,理论上最好写在 service