Skip to content

Instantly share code, notes, and snippets.

@HamiltonWang

HamiltonWang/blog.js

Last active February 7, 2017 16:01
Show Gist options
  • Save HamiltonWang/802df7deb2389eb084e3e7f38fcfef76 to your computer and use it in GitHub Desktop.
Save HamiltonWang/802df7deb2389eb084e3e7f38fcfef76 to your computer and use it in GitHub Desktop.
Download ZIP
Node.js classes
Raw
blog.js
var db = require('../db');
var moment = require('moment');
exports.getAllBlogs = function( callback ) {
db.query('SELECT * FROM db_blog', function (err, rows) {
if (err) {
callback(err);
}
callback(null, rows );
})
}
exports.insertBlog = function( _user, _data, callback ) {
var insert_data ={
user: _user,
data: _data,
dateTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
}
console.log(insert_data );
db.query('INSERT INTO db_blog SET ?', insert_data, function (err) {
if (err) {
console.log('insert error:'+ err );
callback(err);
}
callback( null );
})
}
Raw
db.js
var mysql = require('mysql');
// 資料庫設定
var conn = mysql.createConnection({
user: '????',
password: '????',
host: 'localhost',
port: '3306',
database: 'blogDB'
});
// 資料庫連線
conn.connect( function(err) {
if (err) {
console.error('error connecting: ' + err.stack);
return;
}
console.log('connected as id ' + conn.threadId);
});
module.exports = conn;
Raw
example-structure.txt
index.js
db.js
package.json
models/
blog.js
views/
index.ejs
public/
style.css
Raw
index.ejs
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='/style.css' />
</head>
<body>
<h1><%=title%></h1>
<table class="table">
<tr>
<th>id</th>
<th>user</th>
<th>content</th>
<th>date time</th>
</tr>
<% for ( var i = 0 ; i < blogs.length ; i++){ %>
<tr>
<td>
<%= blogs[i].blogId %>
</td>
<td>
<%= blogs[i].user %>
</td>
<td>
<%= blogs[i].data %>
</td>
<td>
<%= moment( blogs[i].dateTime ).format('Do MMMM, YYYY') %>
</td>
</tr>
<% } %>
</table>
<div class="add">
<form name="addform" action="insert" method="post" accept-charset="utf-8" >
<div class="row">
<h1>Blog - Add</h1>
</div>
<div class="row">
<label>user：</label>
<input type="text" name="user" placeholder="user" />
</div>
<div class="row">
<label>content：</label>
<input type="text" name="data" placeholder="content" />
</div>
<div class="control">
<input class="btn" type='submit' value='Submit'>
<input class="btn" type='reset' value='Reset'>
</div>
</form>
</div>
</body>
</html>
Raw
index.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var blog = require('./models/blog');
var moment = require('moment');
app.set('view engine', 'ejs');
app.use(express.static('public'));
// parse application/x-www-form-urlencoded
app.use( bodyParser.urlencoded({
extended: true
}));
app.post('/insert', (req,res) => {
var _user = req.body.user;
var _data = req.body.data;
// 用我們的 model
blog.insertBlog( _user, _data , function( err ){
if (err) {
console.log(err);
}
//res.send('inserted'); // for debugging
res.redirect('/blog'); // 轉址
} )
});
app.get('/blog', (req, res) => {
blog.getAllBlogs( function( err, result ){
// res.send('all blogs:'+ data.toString()); // for debugging
var data = {
title: 'My blogs',
blogs: result,
moment: moment
}
res.render('index.ejs', data );
});
});
app.get('/blog/:blogId', (req,res) => {
// get data from somewhere
//res.render('detail.ejs', data );
});
app.listen(8081, function () {
console.log('Example app listening on port 8081!');
});
Raw
install mariaDB.txt
sudo yum install MariaDB-server MariaDB-client
Raw
mariadb-start.txt
sudo systemctl enable mariadb <— 讓他開機時自動啟動
sudo systemctl start mariadb <— 啟動 MariaDB
mysql —version <— 如果成功會看到版本訊息
Raw
npm-start-up.txt
mkdir mysql-demo && cd mysql-demo
npm init
npm install mysql —save
npm install express —save
npm install body-parser —save // 解析 post
npm install moment —save //日期工具
npm install ejs —save
Raw
style.css
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
/* index */
.control {
margin-top: 10px;
}
.add {
margin-top: 40px;
}
.add input[type='text'] {
height: 25px;
padding: 0 5px;
}
.table {
border-collapse: collapse;
font-size: 16px;
text-align: center;
}
.table tr {
height: 35px;
border-bottom: 1px solid #dddddd;
}
.table tr th {
padding: 0 20px;
font-weight: bold;
}
.table tr td {
padding: 0 20px;
}
/* blog add */
.row {
width: 280px;
height: 30px;
margin: 5px;
}
.row label {
display: inline;
width: 80px;
font-size: 16px;
}
.row input[type='text'] {
float: right;
height: 20px;
padding: 0 5px;
}
.btn {
width: 80px;
height: 30px;
border: none;
color: #FFFFFF;
background: #7DCD85;
cursor: pointer;
outline: none;
-webkit-transition: background .25s;
-moz-transition: background .25s;
-ms-transition: background .25s;
-o-transition: background .25s;
transition: background .25s;
}
.btn:hover {
background: #6BB072;
}
.msgerr {
margin: 5px;
color: #f00;
font-size: 12px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment