initial kenux version

第一次抓下來的版本
horsekitlin · May 28, 2015 · 87d2951 · 87d2951
1 parent be09c4f
commit 87d2951
Show file tree

Hide file tree

Showing 9 changed files with 314 additions and 83 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
 # Keanux-Personal
 
 這是一個一起學習nodejs + reactjs的計畫，透過一起實作，製作個人的寫作平台。歡迎加入[Hackpad](https://keanux.hackpad.com/INTRO-rDTHFqtALl2)一起參與討論。最新公告會發佈在[Keanux的FB專頁](https://www.facebook.com/trykeanux)。
+
+[安裝說明](docs/setup.md)
diff --git a/configs/config.js b/configs/config.js
@@ -0,0 +1,8 @@
+// Application config
+module.exports = {
+    host     : 'localhost',
+    port     : 3306,
+    user     : 'root',
+    password : 'test1234',
+    database : 'keanux'
+};
diff --git a/controllers/api.js b/controllers/api.js
@@ -0,0 +1,38 @@
+// Express Related Library
+var express = require('express');
+
+// Models
+var User = require('../models/user');
+var Post = require('../models/post');
+
+var router = express.Router();
+
+// To make sure everything is working
+router.get('/', function (req, res) {
+    res.json({message: 'hooray! welcome to our api!'});
+});
+
+// To get all user data
+router.get('/users', function (req, res) {
+    User.get(function(err, users){
+        console.log(users);
+        if (err) {
+            throw err;
+        }
+
+        res.json(users);
+    });
+});
+
+// To get all posts
+router.get('/posts', function (req, res) {
+    Post.get(function(err, posts){
+        if (err) {
+            throw err;
+        }
+
+        res.json({ data: posts});
+    });
+});
+
+module.exports = router;
diff --git a/docs/setup.md b/docs/setup.md
@@ -0,0 +1,182 @@
+# 環境安裝說明
+
+[Mac安裝說明](#mac安裝說明)
+
+[Ubuntu安裝說明](#ubuntu安裝說明)
+
+---
+
+
+## Mac安裝說明
+
+本說明為根據Os X 10.10.3完全乾淨的環境來設定Keanux的開發環境
+
+### 安裝Homebrew
+
+1. Homebrew是一套Mac專屬的套件管理工具，可以很方便的幫助我們安裝常用的工具，請使用以下指令安裝
+
+		ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
+
+1. 安裝完成後，可以使用以下指令檢查是否正常運作
+
+		brew doctor
+
+### 安裝node.js (nvm)
+
+1. 我們可以直接透過Homebrew來安裝nvm
+
+		brew install nvm
+
+1. 為了讓之後可以在Terminal快速使用nvm指令，所以我們必須把nvm的路徑加入.bash_profile之中，你可以使用以下指令快速將路徑加入.bash_profile
+
+		echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile
+
+1. 為了讓指令馬上生效，我們重新載入.bash_profile
+
+		. ~/.bash_profile
+
+1. 安裝最新版本的node.js
+
+		nvm install 0.12.4
+		nvm use 0.12.4
+
+1. 設定node.js default的版本
+
+		nvm alias default 0.12.4
+		nvm use default
+
+1. 確認node.js有安裝成功
+
+		node -v
+
+### 下載Keanux程式
+
+使用git clone到本機
+
+		git clone https://github.com/Keanux/keanux-personal ~/Documents/keanux-personal
+
+### 安裝mysql
+
+1. 我們一樣使用Homebrew安裝mysql，請使用以下指令安裝
+
+		brew install mysql
+
+1. 安裝完成後，使用以下指令啟動mysql服務
+
+		mysql.server start
+
+1. 安裝完畢，使用以下指令登入mysql
+
+		mysql -u root
+
+1. 建立網站所需要的資料庫 **keanux**，並倒入預先準備好的資料
+
+		CREATE DATABASE keanux;
+		USE keanux;
+		SOURCE ~/Documents/keanux-personal/data/keany.sql;
+
+### 修改設定並啟動網站
+
+1. 打開**Keanux**資料夾下的configs/config.js，修改以下部分的設定
+
+		var connection = mysql.createConnection({
+			host     : 'localhost',
+			port     : 3306,
+			user     : 'root',
+			password : '剛剛設定的密碼',
+			database : 'keanux'
+		});
+
+1. 還原需要的package
+
+		npm install
+
+1. 執行網站
+
+		node server.js
+
+1. 打開browser到http://localhost:8080，看到網站就代表成功囉！
+
+---
+
+## Ubuntu安裝說明
+
+本說明為根據ubuntu 14.04完全乾淨的環境來設定Keanux的開發環境
+
+### 安裝node.js (nvm)
+
+1. 安裝Build所需使用的工具
+
+		sudo apt-get update
+		sudo apt-get install build-essential libssl-dev
+
+1. 安裝nvm
+
+		curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.25.3/install.sh | bash
+
+1. 安裝完成後，重新開啟terminal就可以使用 **nvm** 指令了
+
+1. 安裝最新版本的node.js
+
+		nvm install 0.12.4
+		nvm use 0.12.4
+
+1. 設定node.js default的版本
+
+		nvm alias default 0.12.4
+		nvm use default
+
+1. 確認node.js有安裝成功
+
+		node -v
+
+### 安裝Git (版本控制系統)
+
+使用apt-get 安裝
+
+		sudo apt-get install git
+
+### 下載Keanux程式
+
+使用git clone到本機
+
+		git clone https://github.com/Keanux/keanux-personal ~/Documents/keanux-personal
+
+
+### 安裝及設定mysql
+
+1. 使用apt-get 安裝，過程中必須設定root帳號的密碼
+
+		sudo apt-get install mysql-server
+
+1. 安裝完畢，使用剛剛設定的密碼登入mysql
+
+		mysql -u root -p
+
+1. 建立網站所需要的資料庫 **keanux**，並倒入預先準備好的資料
+
+		CREATE DATABASE keanux;
+		USE keanux;
+		SOURCE ~/Documents/keanux-personal/data/keany.sql;
+
+### 修改設定並啟動網站
+
+1. 打開**Keanux**資料夾下的configs/config.js，修改以下部分的設定
+
+		var connection = mysql.createConnection({
+			host     : 'localhost',
+			port     : 3306,
+			user     : 'root',
+			password : '剛剛設定的密碼',
+			database : 'keanux'
+		});
+
+1. 還原需要的package
+
+		npm install
+
+1. 執行網站
+
+		node server.js
+
+1. 打開browser到http://localhost:8080，看到網站就代表成功囉！
diff --git a/models/post.js b/models/post.js
@@ -0,0 +1,20 @@
+// Database Related Library
+var mysql = require('mysql');
+var config = require('../configs/config.js');
+var connection = mysql.createConnection(config);
+
+// Get All Post Data From Database
+exports.get = function(callback) {
+    var sql =  'SELECT kp.*, kup.nickname, ku.username FROM keany_post as kp ';
+        sql += 'LEFT JOIN keany_user_profile as kup ON (kup.id = kp.user_id) ';
+        sql += 'LEFT JOIN keany_user as ku ON (ku.id = kp.user_id) ';
+        sql += 'ORDER BY RAND() LIMIT 25';
+
+    connection.query(sql, function (err, rows, fields) {
+        if (err) {
+            return callback(err);
+        }
+
+        callback(null, rows);
+    });
+};
diff --git a/models/user.js b/models/user.js
@@ -0,0 +1,18 @@
+// Database Related Library
+var mysql = require('mysql');
+var config = require('../configs/config.js');
+var connection = mysql.createConnection(config);
+
+// Get All User Data From Database
+exports.get = function (callback) {
+    var sql = 'SELECT * ' +
+              'FROM keany_user';
+
+    connection.query(sql, function (err, rows, fields) {
+        if (err) {
+            return callback(err);
+        }
+
+        callback(null, rows);
+    });
+};
diff --git a/package.json b/package.json
@@ -10,5 +10,8 @@
     "react": "^0.13.3",
     "react-ago-component": "^0.6.1",
     "reactify": "^1.1.1"
+  },
+  "devDependencies": {
+    "debug": "^2.2.0"
   }
 }
diff --git a/public/scripts/posts.js b/public/scripts/posts.js
@@ -12,15 +12,15 @@ var Post = React.createClass({displayName: "Post",
     var rawMarkup = converter.makeHtml(this.props.children.toString());
     var icon = "https://graph.facebook.com/" + this.props.username + "/picture?width=120&height=120";
     return (
-      React.createElement("div", {className: "post"}, 
-        React.createElement(PostMeta, {username: this.props.username, nickname: this.props.nickname, create_time: this.props.create_time}), 
-        React.createElement("h2", {className: "postTitle"}, 
+      React.createElement("div", {className: "post"},
+        React.createElement(PostMeta, {username: this.props.username, nickname: this.props.nickname, create_time: this.props.create_time}),
+        React.createElement("h2", {className: "postTitle"},
           React.createElement("a", {href: "http://keanux.com/p/" + this.props.unique_id}, this.props.title)
-        ), 
-        React.createElement("h3", {className: "postSubTitle"}, 
+        ),
+        React.createElement("h3", {className: "postSubTitle"},
           this.props.subtitle
-        ), 
-        React.createElement("div", {className: "postContent"}, 
+        ),
+        React.createElement("div", {className: "postContent"},
           strip(rawMarkup)
         )
       )
@@ -33,16 +33,16 @@ var PostMeta = React.createClass({displayName: "PostMeta",
   render: function() {
     var then = new Date(this.props.create_time * 1000);
     return (
-      React.createElement("div", {className: "block-postMeta postMeta-previewHeader"}, 
-        React.createElement("div", {className: "u-floatLeft"}, 
-          React.createElement("div", {className: "postMetaInline-avatar"}, 
-            React.createElement("a", {href: "http://keanux.com/@" + this.props.username}, 
+      React.createElement("div", {className: "block-postMeta postMeta-previewHeader"},
+        React.createElement("div", {className: "u-floatLeft"},
+          React.createElement("div", {className: "postMetaInline-avatar"},
+            React.createElement("a", {href: "http://keanux.com/@" + this.props.username},
               React.createElement("img", {src: 'https://graph.facebook.com/' + this.props.username + '/picture?width=120&height=120', className: "avatar-image avatar-image--smaller"})
             )
-          ), 
-          React.createElement("div", {className: "postMetaInline-feedSummary"}, 
-            React.createElement("a", {href: "http://keanux.com/@" + this.props.username}, this.props.nickname), 
-            React.createElement("span", {className: "postMetaInline postMetaInline--supplemental"}, 
+          ),
+          React.createElement("div", {className: "postMetaInline-feedSummary"},
+            React.createElement("a", {href: "http://keanux.com/@" + this.props.username}, this.props.nickname),
+            React.createElement("span", {className: "postMetaInline postMetaInline--supplemental"},
               React.createElement(Ago, {date: then, autoUpdate: true, tooltipFormat: "long"})
             )
           )
@@ -70,8 +70,8 @@ var PostBox = React.createClass({displayName: "PostBox",
   },
   render: function() {
     return (
-      React.createElement("div", {className: "postBox"}, 
-        React.createElement("h1", null, "Keanux"), 
+      React.createElement("div", {className: "postBox"},
+        React.createElement("h1", null, "Keanux"),
         React.createElement(PostList, {data: this.state.data})
       )
     );
@@ -85,13 +85,13 @@ var PostList = React.createClass({displayName: "PostList",
         // `key` is a React-specific concept and is not mandatory for the
         // purpose of this tutorial. if you're curious, see more here:
         // http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
-        React.createElement(Post, {unique_id: post.unique_id, nickname: post.nickname, title: post.title, subtitle: post.subtitle, username: post.username, create_time: post.create_time, key: index}, 
+        React.createElement(Post, {unique_id: post.unique_id, nickname: post.nickname, title: post.title, subtitle: post.subtitle, username: post.username, create_time: post.create_time, key: index},
           post.content
         )
       );
     });
     return (
-      React.createElement("div", {className: "postList"}, 
+      React.createElement("div", {className: "postList"},
         postNodes
       )
     );