前段时间刚把自己的个人网站写完, 于是这段时间因为事情不是太多,便整理了一下,写了个简易版的博客系统。
服务端用的是 koa2框架 进行开发。
Vue + vuex + element-ui + webpack + nodeJs + koa2 + mongodb
说明:
说明:
1.admin - 后台管理界面源码
src - 代码区域:
2.client - web端界面源码
跟后台管理界面的结构基本一样。
3.server - 服务端源码
说明:
这个文件夹一般放入常用的组件, 比如 Loading组件等等。
所有模块页面。
vuex 用来统一管理公用属性, 和统一管理接口。
前台用vue+webpack搭建,基本的结构都差不多,具体代码实现的可以直接在github下载便行。
import mongoose from
'mongoose'
import conf from
'./config'
// const DB_URL = `mongodb://${conf.mongodb.address}/${conf.mongodb.db}`
const DB_URL = `mongodb://${conf.mongodb.username}:${conf.mongodb.pwd}@${conf.mongodb.address}/${conf.mongodb.db}`; // 账号登陆
mongoose.Promise = global.Promise
mongoose.connect(DB_URL, { useMongoClient: true }, err => {
if (err) {
console.log("数据库连接失败!")
}else{
console.log("数据库连接成功!")
}
})
export
default mongoose
export
default () => {
let render = ctx => {
return (json, msg) => {
ctx.set("Content-Type", "application/json");
ctx.body = JSON.stringify({
code: 1,
data: json || {},
msg: msg || 'success'
});
}
}
let renderError = ctx => {
return msg => {
ctx.set("Content-Type", "application/json");
ctx.body = JSON.stringify({
code: 0,
data: {},
msg: msg.toString()
});
}
}
return
async (ctx, next) => {
ctx.send = render(ctx);
ctx.sendError = renderError(ctx);
await
next()
}
}
1. cnpm run server
启动服务器
2.启动时,记得启动mongodb数据库,账号密码 可以在 server/config.js 文件下进行配置
3. db.createUser({user:"cd",pwd:"123456",roles:[{role:"readWrite",db:'test'}]})
(mongodb 注册用户)
4. cnpm run dev:admin
启动后台管理界面
5.登录后台管理界面录制数据
6.登录后台管理时需要在数据库 创建 users 集合注册一个账号进行登录
db.users.insert({
"name" : "cd",
"pwd" : "e10adc3949ba59abbe56e057f20f883e",
"username" : "admin",
"roles" : [
"admin"
]
})
// 账号: admin 密码: 123456
7. cnpm run dev:client
启动前台页面
想撸的直接上手跟我来,
项目地址:https://github.com/cd-dongzi/vue-node-blog
∞∞∞∞∞