node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛

最新推荐文章于 2024-07-05 14:26:13 发布

置顶 jayJunG

最新推荐文章于 2024-07-05 14:26:13 发布

阅读量2k

点赞数 1

分类专栏： qiand koa ndoe javascript bootstrap html jquery 文章标签：前端 koa node javascript bootstrap

本文链接：https://blog.csdn.net/jayjj214/article/details/80214464

版权

javascript 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

qiand

1 篇文章 0 订阅

订阅专栏

koa

1 篇文章 0 订阅

订阅专栏

本文介绍了使用node.js的koa2框架、mysql和bootstrap构建前端论坛的过程，包括登录注册、文章发布等功能。项目已实现部分功能，如登录、文章发布和富文本编辑器，但资源分享功能未完成。提供了项目运行效果链接和GitHub地址，欢迎star。项目采用es6和es7语法，需要熟悉Promise和async/await。开发环境包括node v8.3.0、mysql 5.7.1及npm 5.3.0以上。

摘要由CSDN通过智能技术生成

前言

在学习了koa2和express并写了一些demo后，打算自己写一个项目练练手，由于是在校生，没什么好的项目做，即以开发一个前端论坛为目标，功能需求参照一下一些社区拟定，主要有：

登录注册
个人信息维护、头像等基本信息
发表文章，富文本编辑器采用wangEditor插件，编辑、删除文章,文章分类等
文章评论、文章收藏、点赞等
支持文章分页、评论分页加载
关注取关用户
资源（文件）上传分享、下载、查看
学习资源推荐.....

作者个人日记
but。。。。由于种种原因，目前仅实现了部分功能，资源分享还没写
项目运行效果：http://120.77.211.212/home

项目技术栈应用：node-koa2-ejs-bootstrap3—jquery， github地址：https://github.com/Jay214/myb...，如果觉得对你有帮助或者还看得下去，欢迎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
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的模块中间件：

npm install i koa koa-bodyparser koa-mysql-session koa-router koa-session-minimal koa-static koa-views md5 moment mysql ejs koa-static-cache --save-dev

各模块用处

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 :

const config = {   
 //启动端口    
port: 8080,
    //数据库配置   
 database: {      
  DATABASE: 'nodesql',        
  USERNAME: 'root',       
 PASSWORD: '123456',      
  PORT: '3306',        
HOST: 'localhost'  
  }
}
module.exports = config;

然后在lib文件夹新建mysql.js:

var mysql = require('mysql');
var config = require('../config/default.js')
//建立数据库连接池
var pool = mysql.createPool({
    host: config.database.HOST,
    user: config.database.USERNAME,
    password: config.database.PASSWORD,
    database: config.database.DATABASE
});
let query = function(sql, values) {    
return new Promise((resolve, reject)=>{
        pool.getConnection(function (err,connection) {
            if(err){      reject(err);
                }else{                
connection.query(sql,values,(err,rows)=>{ 
                   if(err){ 
                       reject(err);
                    }else{
                        resolve(rows); 
                   }                   
 connection.release(); //为每一个请求都建立一个connection使用完后调用connection.release(); 直接释放资源。 
                                         //query用来操作数据库表
                })
            } 
            }) 
   })}

这里建立了一个数据库连接池和封装了一个操作数据库表的函数，如果对于数据库连接有不懂的话请自行百度。

建立入口文件

在主目录新建index.js，即项目入口文件：

const koa = require("koa");   //node框架
const path = require("path");  
const bodyParser = require("koa-bodyparser"); //表单解析中间件
const ejs = require("ejs");   //模板引擎
const session = require("koa-session-minimal");   //处理数据库的中间件
const MysqlStore = require("koa-mysql-session");  //处理数据库的中间件
const router = require("koa-router");     //路由中间件
const config = require('./config/default.js');    //引入默认文件
const views = require("koa-views");   //模板呈现中间件
const koaStatic = require("koa-static");  //静态资源加载中间件
const staticCache = require('koa-static-cache')
const app = new koa();

//session存储配置，将session存储至数据库
const sessionMysqlConfig = {
    user: config.database.USERNAME,
    password: config.database.PASSWORD,
    database: config.database.DATABASE,
    host: config.database.HOST,
}

//配置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 users = `create table if not exists users(
    id INT(200) NOT NULL AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    pass VARCHAR(40) NOT NULL,
    avator VARCHAR(100) DEFAULT 'default.jpg', 
    job VARCHAR(40),
    company VARCHAR(40),
    introdu VARCHAR(255),
    userhome VARCHAR(100),
    github VARCHAR(100),
    PRIMARY KEY (id)
);`

var posts = `create table if not exists posts(
    id INT(200) NOT NULL AUTO_INCREMENT,
        name VARCHAR(100) NOT NULL,
        title VARCHAR(100) NOT NULL,
        content TEXT NOT NULL,
        uid INT(200) NOT NULL,
        moment VARCHAR(40) NOT NULL,
        comments VARCHAR(255) NOT NULL DEFAULT '0',
        pv VARCHAR(40) NOT NULL DEFAULT '0',
        likes INT(200) NOT NULL DEFAULT '0',
        type VARCHAR(20) NOT NULL,
        avator VARCHAR(100),
        collection INT(200) NOT NULL DEFAULT '0', 
        PRIMARY KEY (id) ,
        FOREIGN KEY (uid) REFERENCES users(id)
        ON DELETE CASCADE

);`

var comment= `create table if not exists comment(
 id INT(200) NOT NULL AUTO_INCREMENT,
 name VARCHAR(100) NOT NULL,
 content TEXT NOT NULL,
 moment VARCHAR(40) NOT NULL,
 postid INT(200) NOT NULL,
 avator VARCHAR(100),
 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,
    name VARCHAR(100) NOT NULL,
    postid INT(200) NOT NULL,
    PRIMARY KEY (id),
    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,
     postid INT(200) NOT NULL,
     PRIMARY KEY (id),
     FOREIGN KEY (postid) REFERENCES posts(id) 
     ON DELETE CASCADE
 );`
 var follow = `create table if not exists follow(
         id INT(200) NOT NULL AUTO_INCREMENT,
         uid INT(200) NOT NULL,  
         fwid INT(200) NOT NULL DEFAULT '0',
         PRIMARY KEY (id),
         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(?,?,?,?,?,?,?);"
    return query(_sql,value);
}

//更新文章评论数
let updatePostComment = function(value){
    let _sql = "update posts set comments=? where id=?"
    return query(_sql,value);
}
.......

总共六张表：用户表、文章表、文章评论表、文章收藏表、文章点赞表、用户关注表。

这里引用了外键，但是现在的开发不推荐使用外键了，所以你们可以自行修改，这里在项目第一次启动时会出现数据库创建失败（由于外键原因），只要重新启动就ok了，如果对mysql还不了解的，这里附送大家一个传送门：mysql入门视频教程密码：c2q7 。

项目基本框架搭建好后，我们就可以开始开发页面和接口。

由于学业繁忙，后续内容持续更新。。。

jayJunG

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛

前言在学习了koa2和express并写了一些demo后，打算自己写一个项目练练手，由于是在校生，没什么好的项目做，即以开发一个前端论坛为目标，功能需求参照一下一些社区拟定，主要有：登录注册个人信息维护、头像等基本信息发表文章，富文本编辑器采用wangEditor插件，编辑、删除文章,文章分类等文章评论、文章收藏、点赞等支持文章分页、评论分页加载关注取关用户资源（文件）上传分享、下载、查看学习资源...
复制链接

扫一扫

专栏目录