使用koa+mysql写一个简易论坛(四)

一、本期目标

1、 管理员后台
  • 创建子论坛
  • 子论坛展示
  • 帖子分类展示
2、主页及帖子展示页
  • 子论坛展示
  • 贴子分类展示
3、用户行为
  • 发表帖子

二、后台布局及管理员登录

1、首先我们得定一个入口用于管理员登录

=> 在页面底部提供一个按钮,该按钮绑定一个模态框,用作登录入口


image.png

image.png
2、管理员登录功能的实现

=> 因为管理员是固定的,所以我们直接预设一个管理员的用户名(admin)及密码(admin),直接判断就可以了
=> 代码如下:

image.png

登录成功,则跳转至后台主页
=>
image.png

⚠️:在这里我们引用了本地的静态文件 ---- 一张图片
所以我们得安装一个中间件 koa-stati ,这个必须得有,要不然就无法正确显示

三、子论坛的创建

1、首先我们得建一个表 =>
image.png
2、 创建的话呢我们依旧使用模态框,将其绑定的按钮放在右上角,主体部分用于展示现有的子论坛, 页面布局如图:
image.png
3、创建 =>

1、获取到管理员输入的子论坛名称
2、操作做数据库表boards,获取到里面的所有信息(数组: listBoard)
3、创建一个数组existBoardArray,用于保存现有的子论坛名称,遍历listBoard并将其中的board_name存入existBoardArray
3、如果返回的数组(existBoardArray)长度为0,说明还没有子论坛,直接添加
4、如果不为0,则使用indexOf判断新的名称是否被占用,没有则创建,有则创建失败
5、代码:


image.png

四、子论坛的展示

1、在请求页面的时候操作数据库表boards,获取其中的所有数据,得到一个数组listBoard, 里面存储了当前所有子论坛信息
2、将listBoard传入页面 =>
image.png
3、在对应的html文件中使用koa-ejs的模版语法将所有子论坛遍历出来即可

=>


image.png
4、结果展示
image.png
⚠️: 表格中的edit这一列是用于存放论坛操作按钮的,可以后面再加

五、 主页及帖子展示页

1、我们还得在主页帖子展示页展示子论坛,做法跟上面的完全一样,就不写了
// 请求主页 ---- Http
router.get("/", async (ctx) => { //路由
    const user = ctx.session.user;
    const listBoardPromise = editBoard.listBoardAll();
    const listBoard = await listBoardPromise;
    await ctx.render('index', {
        user: user,
        listBoard: listBoard
    });
});
// 请求帖子展示页面 ---- Http
router.get("/showTopics/:id", async (ctx) => { //路由
    const user = ctx.session.user;
    const listBoardPromise = editBoard.listBoardAll();
    const listBoard = await listBoardPromise;
    await ctx.render('/topics/show_topics', {
        user: user,
        listBoard: listBoard
    });
});
image.png
image.png

六、用户发表帖子

1、建表 topic
create table topic(
id int primary key not null auto_increment,
title varchar(64) not null,
article varchar(255) not null,
board_id int not null
) default charset=utf8 auto_increment=1;
2、页面布局
image.png
3、重点:用户发表帖子的时候我们肯定得让他选个子论坛,而不是任其随便填一个,那么如何获取select标签里的option的value和text就成了关键了(当然,我们只需要获得一种就可以了)

解决方法:设置一个type="hidden"的input的标签,我们用过JS或者jQuery获取到value或者text将其放到input里面上传,这样我们就可以从后台获取到其数值了。
=>


image.png

image.png
4、解决了这个的话后面的其实就很简单
  • 获取到用户输入的标题title、正文article 和 隐式上传过来的board_id,并将其何为一个数组data,然后将data存入表topic中即可


    image.png

addTopic函数为:


image.png

七 、各页面展示帖子到对应子论坛

主页 =>

1、多常见几个子论坛和帖子用于测试,最好留一个子论坛没有任何帖子作为特殊情况
2、 经过之前的铺垫,其实之一步也是非常简单的,涉及到的知识点无非就是模版语法而已
  • 主页 主页比较特殊,我们只需要在全部这个选项下展示全部的帖子即可
  • 回到index.js, 在请求主页的router里我们将所有的帖子取到,然后放入index.html
    下面的listAllTopic函数就是用于取所有的topic,其中order by id desc的作用是根据id倒叙取数据
    async listAllTopic () {
        const sql = "select * from topic where useful=1 order by id desc";
        const [rows, fields] = await promisePool.query(sql);
        return rows;
    },
  • (index.js)get请求 =>


    image.png
  • (index.html)模版语法 =>


    image.png
image.png

帖子展示页 =>

同理=>


image.png
image.png
image.png
image.png

⚠️下面的这段代码用于给被电击的导航按钮添加active类(上图中的蓝色背景)


image.png

后台 =>

同理


image.png
image.png
image.png

八、结束

1、分期项目地址

https://github.com/ShyGodB/Forum-Code-Synchronize-

2、完整项目地址

https://github.com/ShyGodB/BBS-by-Koa-Mysql

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 首先,感谢 夕雅y的“❤️”。 上篇文章因为没有评论,我并不知道反响如何,不知道这种写作方式对于读者来说是否适合,...
    Qibing_Fang阅读 319评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,073评论 1 45
  • 今天是第7节,从创造性来讲,总结起来就是要做一个主动学习的探索者,利用好身边的资源,主动试误,做独一无二的自己。 ...
    并咬了你一下小辉阅读 126评论 0 0
  • 坚持一样东西确实很难。 这几天不知道怎么过的,就是跑来跑去。上午去面试,原计划是二十分钟,结果等到中午十二点。好不...
    吞吞是只呆头鲸阅读 204评论 0 0
  • 哲学之王柏拉图Plato,四海游学归来,在雅典城外西北角的一片小树林里,办学授课。这个小树林本来叫academy....
    壹芽阅读 208评论 0 0