express+mysql+session的留言板笔记

最新推荐文章于 2023-06-25 17:53:31 发布

库库好困

最新推荐文章于 2023-06-25 17:53:31 发布

阅读量324

点赞数

分类专栏：九：Nodejs 文章标签： mysql nodejs

本文链接：https://blog.csdn.net/m0_46597922/article/details/107442281

版权

本文介绍了如何使用Express框架和MySQL数据库构建一个带登录、退出功能的留言板应用。涵盖了服务器搭建、数据渲染、留言功能、删除和更新留言、数据库操作以及用户状态保持的实现。

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

express版本的留言板源文件，有两个文件。已上传至资源。文件名称叫：express-liuyanban - express框架做的.zip 以及expressDataBase - 数据库做的.zip
在这里插入图片描述

express版本的留言板

1.搭建服务器

1.1 准备工作

1.新建express-liuyanban文件夹

2.在此文件夹中新建app.js文件

3.在此文件夹中新建static,并将css,images文件夹放在static文件夹中

4.新建views文件夹，并将add.html,index.html,error.html文件拷到此文件夹中

5.在app.js页面中打开terminal终端，下载相应的依赖包

npm init -y
npm i  moment express art-template express-art-template --save

6.在express-liuyanban文件夹中新建一个data.json的文件，用来存储原始数据

[
  {
   
    "id": 1,
    "author": "tom",
    "title": "好诗",
    "content": "且以新火试新茶,诗酒趁年华",
    "createTime": "2020年5月22日 15:20:25"
  },
  {
   
    "id": 2,
    "author": "rose",
    "title": "期望",
    "content": "同量天地宽，共度日月长",
    "createTime": "2020年5月28日 19:20:25"
  },
  {
   
    "id": 3,
    "author": "jerry",
    "title": "祝福",
    "content": "祝福在坐的各位,狂吃不胖,薪资翻倍",
    "createTime": "2020年5月23日 16:20:25"
  }
]

1.2 搭建服务器响应主页面

1.由于我们要使用MVC的方式来进行开发，因此要在当前项目中新建app.js router.js controller.js modal.js等文件

2.在app.js中写代码开启服务器，代码如下

// 1. 引入模块
const express = require('express')
const path = require('path')
const router = require('./router')
// 2. 创建服务器对象
const app = express()

// A. 为后缀为html的模板设置模板引擎
app.engine('html', require('express-art-template'))

// B. 设置模板文件所在的目录  当静态html页面确实是在views文件夹中的时候,其实是可以省略的
app.set('views', path.join(__dirname, 'views'))

// C. 将html后缀的文件做为模板 在使用send的时候可以省略html后缀
app.set('view engine', 'html')

// D. 托管静态资源
app.use('/static', express.static('./static'))

// 3. 监听端口并启动服务器对象
app.listen(3000, () => {
   
  console.log('server is running at http:127.0.0.1:3000')
})

// 4. 注册路由中间件
app.use(router)

2.在router.js中写代码，进行路由匹配

// 1. 引入模块
const express = require('express')

const ctrl = require('./controller')
// 2. 创建路由对象
const router = express.Router()

// 3. 注册路由
router.get('/', (req, res) => {
   
  ctrl.renderIndex(req, res)
})

// 4. 导出路由对象
module.exports = router

3.在controller.js中写代码如下

/**
 * 1. 此模块是用来书写具体业务逻辑的模块
 * 2. 比如向浏览器响应主页面
 * 3. 比如接收浏览器GET方式发送过来的数据
 * 4. 比如接收浏览器POST方式发送过来的数据 
 * 5. 比如根据浏览器发送过来的id删除数据等...
 */
// 0. 引入模块
const fs = require('fs')

// 1. 向外导出数据
module.exports = {
   
  renderIndex(req, res) {
   
    res.render('index',{
   })
  }
}

4.此时到浏览器中查看效果即可.

2.实现业务

2.1 将真正的数据渲染到index

1.在modal.js中写代码如下

/**
 * 1. 此模块是modal模块
 * 2. 专门用来处理与数据相关的业务 比如 增删改查数据库中的数据
 * 3. 具体来说 就是查询data.json中的数据 删除data.json中的数据 修改data.json中的数据 给data.json添加数据
 */
// 1. 引入模块
const fs = require('fs')
const path = require('path')

// 2. 向外暴露对象
module.exports = {
   
  getData(callback) {
   
    fs.readFile(path.join(__dirname, './data.json'), (err, data) => {
   
      if (err) return callback(err) // 将错误对象传给控制器的函数
      callback(null, JSON.parse(data))
    })
  }
}

2.在控制器controller.js中写代码如下：10 15

/**
 * 1. 此模块是用来书写具体业务逻辑的模块
 * 2. 比如向浏览器响应主页面
 * 3. 比如接收浏览器GET方式发送过来的数据
 * 4. 比如接收浏览器POST方式发送过来的数据 
 * 5. 比如根据浏览器发送过来的id删除数据等...
 */
// 0. 引入模块
const fs = require('fs')
const modal = require('./modal')

// 1. 向外导出数据
module.exports = {
   
  renderIndex(req, res) {
   
    modal.getData((err, data) => {
   
      // 如果读取数据失败则渲染错误页面
      if (err) res.render('error', {
   })
      // 如果数据读取成功 则要显示正常的页面效果
      res.render('index', {
    list: data })
    })
  }
}

3.注意在index.html中的模板如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="../static/css/index.css" />
</head>

<body>
  <div class="content">
    <a class="pb_btn" href="/add">发表内容</a>
    <div class="list">
      <ul>
        {
  {each list v i}}
        <li>
          <img src="../static/images/timg.jpg" alt="" class="pic" />
          <div class="list_con">
            <div>标题：{
  { v.title }}</div>
            <div class="time">
              <strong>发表时间: <i>{
  { v.createTime }}</i></strong>
              <a href="/del?id={
    {v.id}}"><img src="../static/images/lj.jpg" alt="" /></a>
            </div>
            <p>
              <b>{
  { v.author }}：</b>
              {
  { v.content }}
            </p>
          </div>
        </li>
        {
  {/each}}
      </ul>
    </div>
  </div>
</body>

</html>

2.2 显示留言页面

1.当单击发表留言的时候要跳转到add.html页面，因此在router.js中添加一个路由 12—14

// 1. 引入模块
const express = require('express')

const ctrl = require('./controller')
// 2. 创建路由对象
const router = express.Router()

// 3. 注册路由
router.get(

最低0.47元/天解锁文章

库库好困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
express+mysql+session的留言板笔记

express版本的留言板源文件，有两个文件。已上传至资源。文件名称叫：express-liuyanban - express框架做的.zip 以及expressDataBase - 数据库做的.zipexpress版本的留言板1.搭建服务器1.1 准备工作1.新建express-liuyanban文件夹2.在此文件夹中新建app.js文件3.在此文件夹中新建static,并将css,images文件夹放在static文件夹中4.新建views文件夹，并将add.html,index.ht
复制链接

扫一扫