vue node mysql博客_vue +nodejs 博客后台管理系统

一个 �����Vue + nodejs +MongoDB 后台管理系统。到现在大概5天的时间，先写个总结。

Vue负责前端页面的展示，路由功能交给Vue-router。

Express不写路由，只负责写api接口，�使用mongoose与MongoDB数据库进行数据交互，实现前后端解耦。

在UI框架的选型上还是不太满意，写过之后才发现Iview框架有不少的缺陷，比如menu菜单中缺少路由跳转功能，需要通过点击事件返回的name值，通过编程式导航的方式来进行路由跳转router.push()，再来就是文档写得并不是很好，虽然ui效果很好。

mongodb是非关系型数据库，通常我们可以在里面直接存储json，对象，图片，甚至是函数。这对于前端来说，会更加方便。在操作mongodb数据库时，推荐使用mongoose的。我们可以通过定义Schema来配置一个集合里的数据类型(同SQL的表)，再把这个Schema发布成Model，然后我们就可以通过这个Model来进行增删改查。

技术

前端

vue2 + vuex + vue-router + iview + axios/vue-axios + ES6

后端

nodejs + express +mongoose

工具

webpack

数据库

MongoDB

项目预览

本地需要安装mongodb数据库

客户端client

//打开目录

cd client

//安装依赖包

npm i

//启动本地客户端服务器

npm run dev

//打包文件

npm run build

服务端server

cd server

npm i

//开启服务器

npm run start

功能

[x] 用户、文章、评论实现增删改查；

[x] 基于JWT的登陆验证、状态留存；

[x] 使用muler实现上传图片功能；

[x] �多分类管理(曾删改)；

更新计划

[ ] 优化分类，�与各模块进行交互；

[ ] 首页模块；

[ ] 数据统计模块；

目录结构

客户端目录

|____client

| |____.babelrc

| |____index.html

| |____package.json

| |____README.md

| |____src

| | |____App.vue

| | |____assets

| | | |____500007055.jpg

| | |____common

| | | |____getdata.js

| | |____components

| | | |____ClassifyTree.vue

| | | |____Form.vue

| | | |____Layout.vue

| | | |____Login.vue

| | |____main.js

| | |____my-theme

| | | |____index.less

| | |____routes.js

| | |____store

| | | |____index.js

| | |____views

| | | |____Ablum.vue

| | | |____Article.vue

| | | |____Classify.vue

| | | |____Comment.vue

| | | |____Home.vue

| | | |____Upload.vue

| | | |____User.vue

| |____webpack.config.js

|____LICENSE

|____README.md

��服务端目录

|____server

| |____app.js

| |____bin

| | |____www

| |____controllers

| | |____ArticleCtrl.js

| | |____CateCtrl.js

| | |____CommentCtrl.js

| | |____UploadCtrl.js

| | |____UserCtrl.js

| |____MIME.js

| |____models

| | |____ArticleModel.js

| | |____CateModel.js

| | |____CommentModel.js

| | |____UploadModel.js

| | |____UserModel.js

| |____other.js

| |____package.json

| |____public

| | |____images

| | |____javascripts

| | |____stylesheets

| | | |____style.css

| |____README.md

| |____routes

| | |____article.js

| | |____cate.js

| | |____comment.js

| | |____index.js

| | |____upload.js

| | |____users.js

| |____server.js

| |____upload

| | |____ablums

| | | |____avatar-1495266654995.png

| | | |____avatar-1495266808125.png

| | | |____avatar-1495266970632.jpg

| |____views

| | |____error.ejs

| | |____index.ejs

|____UPDATE.md

项目地址