vuejs+koa2+mysql全栈开发个人博客(一) —— 总体介绍
这个系列的博客我会详细的介绍vuejs+koa2+mysql全栈开发个人博客的技术要点。技术要点一 登录状态储存技术要点二 页面访问权限技术要点三 后台操作权限版权申明这个项目是我fork了某位大神的开源git项目,并在其基础上进行的开发在线地址帕尼尼的个人博客Vuejs存在首屏加载问题,虽然我做了部分优化,但加载出来仍需要10秒左右项目地址g...
这个系列的博客我会详细的介绍vuejs+koa2+mysql全栈开发个人博客的技术要点。
版权申明
这个项目是我fork了某位大神的开源git项目,并在其基础上进行的开发
在线地址
Vuejs存在首屏加载问题,虽然我做了部分优化,但加载出来仍需要10秒左右
项目地址
项目介绍
一个前端基于Vue2.0全家桶,后端基于koa+mysql的前后端分离博客。前端界面使用了flexbox+rem布局,后端界面使用了element ui。本项目可以作为一个前端进阶项目,从前端flexbox布局到前端框架的使用,再到后端以及数据库,是一个打通前后端流程的一个项目。
特点
- 支持 MarkDown 编辑
- 支持代码高亮
- 支持移动端浏览
前端工具
- Vue2.0
- Vue-Router
- Vuex
- axios
- element ui
前端布局采用flexbox+rem布局,关于flexbox请阅读一个完整的Flexbox指南以及这篇最新的理解Flexbox:你需要知道的一切
本项目还采用了手机端适配,关于移动端的学习资料请按照我下面罗列的资料按顺序仔细阅读。
后端工具
- express || koa2
- mysql
后端的管理界面我直接使用了element ui这个基于vue的组件库,很强大.
目录结构
│ .babelrc
│ .editorconfig
│ .eslintignore
│ .eslintrc.js
│ .gitignore
│ index.html
│ package.json
│ README.md
│
├─build
│ build.js
│ check-versions.js
│ dev-client.js
│ dev-server.js
│ utils.js
│ webpack.base.conf.js
│ webpack.dev.conf.js
│ webpack.prod.conf.js
│
├─config
│ dev.env.js
│ index.js
│ prod.env.js
│ test.env.js
│
├─koa 后端文件夹(koa2框架,结构与express类型)
├─server 后端文件夹(express框架)
│ │ .env
│ │ app.js 后端入口
│ │
│ ├─api
│ │ index.js 后端api
│ │
│ ├─db
│ │ index.js 数据库
│ │
│ ├─config
│ │ index.js 常量表
│ │
│ ├─middleware
│ │ checkToken.js
│ │ createToken.js
│ │ formatDate.js
│ │
│ └─routes 后端路由
│ admin.js
│ article.js
│ classify.js
│ index.js
│
├─src 前端文件夹
│ │ App.vue
│ │ main.js 前端入口
│ │
│ ├─api 前端api
│ │ index.js
│ │
│ ├─config 常量表
│ │ index.js
│ ├─assets
│ │ ├─css
│ │ │ commen.css
│ │ │ default.css
│ │ │ default0.css
│ │ │ highlight.css
│ │ │
│ │ ├─img
│ │ │ bg.jpg
│ │ │ bgm.jpg
│ │ │
│ │ └─js
│ │ commen.js
│ │ highlight.pack.js
│ │ hljs.js
│ │
│ ├─components
│ │ │ NotFound.vue
│ │ │
│ │ ├─backEnd 后端界面
│ │ │ Admin.vue
│ │ │ ArticleCreate.vue
│ │ │ ArticleEdit.vue
│ │ │ ArticleList.vue
│ │ │ ClassList.vue
│ │ │ Login.vue
│ │ │ Reg.vue
│ │ │
│ │ └─fronted 前端界面
│ │ │ About.vue
│ │ │ Article.vue
│ │ │ Front.vue
│ │ │ Home.vue
│ │ │ Tags.vue
│ │ └─── common 前端界面公共组件
│ │ vfooter.vue
│ │ vheader.vue
│ │ articleItem.vue
│ │
│ │
│ ├─routes 前端路由vue-router
│ │ index.js
│ │ routes.js
│ │
│ └─store 前端vuex
│ │ actions.js
│ │ index.js
│ │ mutations.js
│ │ states.js
│ │ types.js
Step
环境
- Node.js >= 8.0
- mysql
克隆远程库
git clone https://github.com/The-Never/vueBlog
安装前端依赖
npm install
启动mysql服务器
在你安装的数据库文件中的bin目录中启动
mysqld
安装后端依赖 (可选express或者koa2)
进入到server文件夹下,安装后端依赖:npm install
安装express
进入到koa文件夹下,安装后端依赖:npm install
安装koa2
启动后端服务器
npm start
启动前端项目
回到项目根目录下运行:npm run dev
生成发布
npm run build
Todo
- 个人信息模块
License
MIT
更多推荐
所有评论(0)