express+sequelize寫一個簡單的留言板

說明

爲了教女朋友node中數據庫的使用,花了幾個小時看了一下sequelize這個orm框架,而後寫了一個簡單的留言板,能夠實現發表留言,刪除留言,修改留言.
(注:我自己不是學js的,node也就斷斷續續學了幾天,半吊子,有不對的或者寫的很差的地方但願指出.)
NodeJs版本:0.12.4(有點老了。。。)
系統:Ubuntu 14.04(系統貌似都差很少)javascript

開始

安裝

生成express項目,用ejs模板渲染php

express -e message_board
cd message_board 
npm install

安裝sequelize以及mysql驅動html

npm install --save sequelize
npm install --save mysql

用phpmyadmin建立一個數據庫
建立數據庫java

代碼編寫

首先看看項目結構:

項目結構
這裏建立一個model文件夾,message.js用來鏈接數據庫,並定義message模型,也就是留言板裏的每一條留言。
routes文件夾中,index.js用來處理添加留言、刪除留言。edit.js用來處理編輯留言。
views文件夾中有一個404.js,當缺乏參數時,會跳轉到這個頁面中,顯示「404, Not Found。」node

代碼:

message.js:mysql

var Sequelize = require('sequelize');
var sequelize = new Sequelize(
    'message_board',    //數據庫名
    'root',             //用戶名
    'root',             //密碼
    {
        'dialect': 'mysql',
        'host': 'localhost',
        'port': 3306
    }
);

//定義表的模型
var Message = sequelize.define('message', {
    id:{ //自增加id,主鍵,整形
        type:Sequelize.INTEGER,
        primaryKey: true,
        autoIncrement:true
    },
    username: { //誰留的言
        type: Sequelize.STRING(30)
    },
    content: { //留言的內容
        type: Sequelize.TEXT
    }
});
Message.sync(); //建立表

module.exports = Message;



index.js:git

var express = require('express');
var router = express.Router();
//引入數據庫Message模塊
var Message = require('../model/message');

//查找全部留言
router.get('/', function(req, res, next) {
    Message.findAll().then(function(msgs) {
        res.render('index', { messages: msgs });
    });
});

//刪除一個留言
router.get('/del_msg', function(req, res, next) {
    //若是沒有id字段,返回404
    if (req.query.id == undefined ||req.query.id == '') {
        res.render('404', {});
        return;
    }
    //先查找,再調用刪除,最後返回首頁
    Message.findOne({
        where:{
            id:req.query.id
        }
    }).then(function(msg){
        msg.destroy().then(function(){
            console.log('delete success !!');
            res.redirect('/');
        });
    });
});

//添加一條留言
router.post('/add_msg', function(req, res, next) {
    //若是沒有post數據或者數據爲空,直接返回
    if (req.body.username == undefined ||req.body.username == ''
        || req.body.content == undefined || req.body.content == '') {
        res.render('404', {});
        return;
    }
    var message = {
        username: req.body.username,
        content: req.body.content
    };
    //建立一條記錄,建立成功後跳轉回首頁
    Message.create(message).then(function(msg){
        console.log(msg);
        res.redirect('/');
    });
});

module.exports = router;

index.ejs:github

<!DOCTYPE html>
<html>
  <head>
    <title>NodeJs留言板</title>
  </head>
  <body>
    <h1>NodeJs留言板</h1>
    <h3>發表留言</h3>
    <form method="post" action="/add_msg">
        你的名字:&nbsp;&nbsp;<input name="username" type="text"><br/><br/>
        留言內容:&nbsp;&nbsp;<textarea name="content"></textarea><br/><br/>
        <input type="submit" value="發表留言"/>
    </form>
    <h3>留言版</h3>
    <hr/>
    <% for(var i = messages.length - 1; i>=0; i--) {%> <!-- ejs for循環輸出留言板內容 -->
    <b>名字:</b>&nbsp;&nbsp;&nbsp;&nbsp;<%=messages[i].username %><br/>
    <b>內容:</b><br/>
    <%=messages[i].content %><br/>
    <a href="/edit?id=<%=messages[i].id %>">編輯留言</a>&nbsp;&nbsp;&nbsp;<a href="/del_msg?id=<%=messages[i].id %>">刪除留言</a>
    <hr/>
    <% } %>
  </body>
</html>

edit.js:sql

var express = require('express');
var router = express.Router();
//引入數據庫Message模塊
var Message = require('../model/message');

//查找一個留言
router.get('/', function(req, res, next) {
    //若是沒有id或者id爲空,直接返回
    if (req.query.id == undefined || req.query.id == '') {
        res.render('404', {});
        return;
    }
    Message.findOne({
            where:{
                id:req.query.id
            }
    }).then(function(msg){
        res.render('edit', { message: msg });
    });
});

//更新一條留言
router.post('/update_msg', function(req, res, next) {
    //若是沒有post數據或者數據爲空,直接返回
    if (req.body.username == undefined ||req.body.username == ''
        || req.body.content == undefined || req.body.content == ''
        || req.body.id == undefined || req.body.id == '') {
        res.render('404', {});
        return;
    }
    var message = {
        username: req.body.username,
        content: req.body.content,
    };
    //建立一條記錄,建立成功後跳轉回首頁
    Message.update(message,{
        where:{
            id:req.body.id
        }
    }).then(function(msg){
        console.log(msg);
        res.redirect('/');
    });
});

module.exports = router;

edit.ejs:shell

<!DOCTYPE html>
<html>
<head>
    <title>NodeJs留言板</title>
</head>
<body>
<h3>修改留言</h3>
<form method="post" action="/edit/update_msg">
    <input type="hidden" name="id" value="<%=message.id %>">
    名字:&nbsp;&nbsp;<input name="username" type="text" value="<%=message.username %>"><br/><br/>
    留言:&nbsp;&nbsp;<textarea name="content"><%=message.content %></textarea><br/><br/>
    <input type="submit" value="提交修改"/>
</form>
</body>
</html>

效果

發表留言:
發表留言

刪除留言:
刪除留言

編輯留言:
修改

編輯後:
修改後

代碼下載:

http://nladuo.github.io/2016/...

相關文章
相關標籤/搜索