大佬教程收集整理的这篇文章主要介绍了node+koa2+mysql+bootstrap搭建一个前端论坛,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在学习了koa2和express并写了一些demo后,打算自己写一个项目练练手,由于是在校生,没什么好的项目做,即以开发一个前端论坛为目标,功能需求参照一下一些社区拟定,主要有:
个人信息维护、头像等基本信息
发表文章,富文本编辑器采用wangEditor插件,编辑、删除文章,文章分类等
文章评论、文章收藏、点赞等
支持文章分页、评论分页加载
关注取关用户
资源(文件)上传分享、下载、查看
学习资源推荐.....
作者个人日记
but。。。。由于种种原因,目前仅实现了部分功能,资源分享还没写
项目运行效果:http://120.77.211.212/home
项目技术栈应用:node-koa2-ejs-bootstrap3—jquery, github地址:,如果觉得对你有帮助或者还看得下去,欢迎star~~鼓励鼓励我这前端渣渣辉。
node: v8.3.0
koa: ^2.4.1
mysql: 5.7.1
npm: 5.3.0及以上
将项目clone至本地 git clone git@github.com:Jay214/myblog-koa2.git
安装模块中间件 npm install
mysql版本推荐使用5.7以下的,5.7的有个bug,图形化界面推荐使用navicat for MySQL
运行可以安装supervisor(npm install supervisor 项目运行工具,开启后即处于监听模式,修改文件后保存即可,无需再启动项目) node index 或npm supervisor index
localhost:8080/home 端口号可自行修改
若发现项目有存在什么bug或有比较好的建议欢迎多多提议,qq:2752402930。
由于koa2是基于es6的promise和es7的await/async语法,所以如果对es6/es7不懂的话请先过一遍文档,后台搭建数据库是关键,所以请先安装好mysql,mysql建议安装5.7版本以下的,因为5.7.0版本有个bug,需要更改配置文件,具体若你们安装的时候便知道了。
安装node环境,使用node -v查看node版本,node需要较新版本能够支持es6的promise和es7的await/async语法,现在node版本都会自带npm的,所以不需要再去安装npm。
1.config存放默认文件(数据库连接配置)
2.lib存放数据库文件
3.middlewares存放判断登陆注册与否中间件
4.public存放静态文件,js,引用bootstrap框架等文件
5.routers存放路由文件
6.views存放模板文件
7.index是程序主文件,定义接口,数据库接口,引用模块等
8.package.json项目的配置文件,包括项目名,作者,依赖,模块等
项目用vscode开发的,用起来很舒服,还没尝试过的小伙伴赶紧去试一下吧。
项目初始化:cd myblog1 -> npm init 此时已经创建好了package.json文件了。
由于koa2是轻量级的框架,小巧精悍,所以我们为了促进我们的开发效率和方便性,我们需要安装一些koa2的模块中间件:
koa node框架
koa-bodyparser 表单解析中间件
koa-mysql-session、koa-session-minimal 处理数据库的中间件
koa-router 路由中间件
koa-static 静态资源加载中间件
ejs 模板引擎
md5 密码加密
moment 时间中间件
mysql 数据库
koa-views 模板呈现中间件
koa-static-cache 文件缓存
项目基本框架搭建
配置数据库连接
在config文件夹新建default.js :
然后在lib文件夹新建mysql.js:
这里建立了一个数据库连接池和封装了一个操作数据库表的函数,如果对于数据库连接有不懂的话请自行百度。
在主目录新建index.js,即项目入口文件:
//配置session中间件
app.use(session({
key: 'USER_SID',store: new MysqlStore(sessionMysqlConfig)
}))
//配置静态资源加载中间件
app.use(koaStatic(
path.join(__dirname,'./public')
))
//配置服务端模板渲染引擎中间件
app.use(views(path.join(__dirname,'./views'),{
extension: 'ejs'
}))
//使用表单解析中间件
app.use(bodyParser({
"formLimit":"5mb","jsonLimit":"5mb","textLimit":"5mb"
}));
//使用新建的路由文件
//登录
app.use(require('./routers/signin.js').routes())
//注册
app.use(require('./routers/signup.js').routes())
//退出登录
app.use(require('./routers/signout.js').routes())
//首页
app.use(require('./routers/home.js').routes())
//个人主页
app.use(require('./routers/personal').routes())
//文章页
app.use(require('./routers/articles').routes())
//资源分享
app.use(require('./routers/share').routes())
//个人日记
app.use(require('./routers/selfNote').routes())
//监听在8080端口
app.listen(8080)
console.log(listening on port ${config.port}
)
上面代码都有注释,我就不一一说明了,由于资源分享和个人日记还没写,所以暂时统一share...替代。
接下来向mysql.js添加数据库操作语句,建表、增删改查。
);`
var comment= create table if not exists comment( id INT(200) NOT NULL AUTO_INCREMENT,postid INT(200) NOT NULL,PRIMARY KEY ( id ),FOREIGN KEY (postid) REFERENCES posts(id) ON DELETE CASCADE );
var likes = create table if not exists likes( id INT(200) NOT NULL AUTO_INCREMENT,FOREIGN KEY (postid) REFERENCES posts(id) ON DELETE CASCADE );
var collection = create table if not exists collection( id INT(200) NOT NULL AUTO_INCREMENT,uid VARCHAR(100) NOT NULL,FOREIGN KEY (postid) REFERENCES posts(id) ON DELETE CASCADE );
var follow = create table if not exists follow( id INT(200) NOT NULL AUTO_INCREMENT,fwid INT(200) NOT NULL DEFAULT '0',FOREIGN KEY (uid) REFERENCES users(id) ON DELETE CASCADE )
let createTable = function(sql){
return query(sql,[]);
}
//建表
createTable(users);
createTable(posts);
createTable(comment);
createTable(likes);
createTable(collection);
createTable(follow);
//createTable(follower);
//注册用户
let insertData = function(value){
let _sql = "insert into users(name,pass) values(?,?);"
return query(_sql,value);
}
//更新头像
let updateUserImg = function(value){
let _sql = "update users set avator=? where id=?"
return query(_sql,value);
}
//更新用户信息
let updateUser = function(value){
let _sql = "update users set name=?,job=?,company=?,introdu=?,userhome=?,github=? where id=?"
return query(_sql,value);
}
//发表文章
let insertPost = function(value){
let _sql = "insert into posts(name,title,content,uid,moment,type,avator) values(?,?,value);
}
//更新文章评论数
let updatePostComment = function(value){
let _sql = "update posts set comments=? where id=?"
return query(_sql,value);
}
.......
总共六张表:用户表、文章表、文章评论表、文章收藏表、文章点赞表、用户关注表。
这里引用了外键,但是现在的开发不推荐使用外键了,所以你们可以自行修改,这里在项目第一次启动时会出现数据库创建失败(由于外键原因),只要重新启动就ok了,如果对mysql还不了解的,这里附送大家一个传送门:mysql入门视频教程 密码:c2q7 。
前端页面开发
项目基本结构搭建好后,就可以进行前端页面的编写了。用node开发web时我们一般会配合模板引擎,这个项目我采用的是ejs,除了ejs之外较为常用的还有jade,但是jade相对ejs来说的话代码结构不够清晰。关于ejs语法,这里做个简单的介绍:
header.ejs
nav.ejs
login.ejs