Last active
February 28, 2017 13:53
-
-
Save HamiltonWang/b1c10cf478c748aab7deac54b8b8b0fb to your computer and use it in GitHub Desktop.
node.js ejs templates 3/6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mkdir express_ejs | |
cd express_ejs | |
mkdir views && cd views | |
mkdir pages && cd .. //<— 我們把所有 ejs 放在同一個地方來管理 | |
npm init | |
npm install express —save | |
npm install ejs —save | |
nano index.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// index.js | |
var circle = require(‘./circle’); | |
console.log( ‘area:’ + circle.area(4) ); | |
console.log(‘circumference:’ + circle.circumference(4) ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# MariaDB 5.5 CentOS repository list - created 2017-02-07 08:59 UTC | |
# http://downloads.mariadb.org/mariadb/repositories/ | |
[mariadb] | |
name = MariaDB | |
baseurl = http://yum.mariadb.org/5.5/centos7-amd64 | |
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB | |
gpgcheck=1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sudo yum install MariaDB-server MariaDB-client |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sudo systemctl enable mariadb <— 讓他開機時自動啟動 | |
sudo systemctl start mariadb <— 啟動 MariaDB | |
mysql —version <— 如果成功會看到版本訊息 | |
mysql Ver Distrib 5.5-MariaDB, for Linux (x86_64) using readline 5.1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
firewall-cmd —permanent —add-port=3306/tcp | |
firewall-cmd —reload | |
firewall-cmd —list-all |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- db.js --> | |
var mysql = require('mysql'); | |
// 資料庫設定 | |
var conn = mysql.createConnection({ | |
user: 'admin', | |
password: '1111', | |
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- blog.js --> | |
var db = require('../db'); | |
var moment = require(‘moment'); // 解析日期時間的工具 | |
exports.getAllBlogs = function( callback ) { // 自製 callback function | |
db.query('SELECT * FROM db_blog', function (err, rows) { | |
if (err) { | |
callback(err); | |
} | |
callback( null, rows ); // 把取得的資料送回去, 沒 error 放 null | |
}) | |
} | |
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); | |
}) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--index.js --> | |
var express = require('express'); | |
var app = express(); | |
var bodyParser = require(‘body-parser’) // 用來解析 POST | |
var moment = require('moment'); | |
var blog = require('./models/blog'); | |
app.set('view engine', ‘ejs'); // 學過了 | |
app.use(express.static(‘public')); // 學過了 | |
// 用來解析 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.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 ){ | |
var data = { | |
title: 'My blogs', | |
blogs: result, | |
moment: moment | |
} | |
res.render('index.ejs', data ); // render( view , model ) | |
}); | |
}); | |
app.listen(8081, function () { | |
console.log('Example app listening on port 8081!'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var express = require(‘express’); | |
var app = express(); | |
// 把 view 引擎設為 ejs | |
app.set('view engine', 'ejs'); | |
var my_super_heroes = { | |
title: ‘Super Heroes', | |
superheroes: ['Superman', 'Batman', 'Hulk', 'Wonder woman'] | |
} | |
app.get('/', (req, res) => { | |
res.render(‘pages/superheroes.ejs’, my_super_heroes ) | |
}) | |
app.listen(8081, function () { | |
console.log('Example app listening on port 8081!'); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- views/pages/superheroes.ejs --> | |
<h1><%= title %></h1> | |
<ul> | |
<% for (var i=0; i<superheroes.length; i++) {%> | |
<li><%= superheroes[i] %></li> | |
<% } %> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- views/pages/index.ejs --> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head><% include ../partial/head.ejs %> | |
</head> | |
<body class="container"> | |
<header> | |
</header> | |
<main> | |
<div class="jumbotron"> | |
<% include superheroes.ejs %> | |
</div> | |
</main> | |
<footer> | |
</footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- views/partials/head.ejs --> | |
<meta charset="UTF-8"> | |
<title>My Super Heros website</title> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=“anonymous"> | |
<style> | |
body { padding-top:50px; } | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- views/partials/header.ejs --> | |
<nav class="navbar navbar-default" role="navigation"> | |
<div class="container-fluid"> | |
<div class="navbar-header"> | |
<a class="navbar-brand" href="#"> | |
<span class="glyphicon glyphicon glyphicon-tree-deciduous"></span> | |
EJS Is Fun | |
</a> | |
</div> | |
<ul class="nav navbar-nav"> | |
<li><a href="/">Home</a></li> | |
<li><a href="/about">About</a></li> | |
</ul> | |
</div> | |
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- views/partials/footer.ejs --> | |
<p class="text-center text-muted">© Copyright 2017 The Awesome Super Heroes Inc.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mkdir module-demo && cd module-demo | |
nano circle.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// circle.js | |
const PI = Math.PI; | |
module.exports.area = function(r) { | |
return PI * r * r; | |
}; | |
module.exports.circumference = (r) => { | |
return 2 * PI * r; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 把 view engine 設為 ejs | |
app.set('view engine', 'ejs'); | |
// 假設你有個 `home.ejs` | |
// 外加個資料來源 model | |
res.render(‘home’, model); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment