互聯網 - 大數據

mongodb學習筆記

1.下載：http://www.mongodb.org/downloads

2.安裝

3.啟動mongodb

3.1mongod 設置數據庫路徑

mongod --dbpath 路徑

3.2 連接數據庫

mongo

使用mongo服務時不能關閉mongodb進程，并且因為mongodb不是服務所以每次開機都得執行一次，如果不想每次開機都執行一次可以將mongodb弄成服務。

4.簡單使用

> db //查看當前數據庫
test

> db.zmz.insert({hello:123}) //如果沒有zmz這個數據庫則新建一個并且插入一條數據
WriteResult({ "nInserted" : 1 })

> db.zmz.find() //查看zmz這個數據庫中所有的數據
{ "_id" : ObjectId("5827eb8f1625be96b146c9e3"), "hello" : 123 }
>

"show dbs" 命令可以顯示所有數據的列表。
"db" 命令可以顯示當前數據庫對象或集合。
"use"命令，可以連接到一個指定的數據庫。

MongoDB學習筆記

項目目錄結構

CSS預處理器stylus

1.安裝

npm install stylus -g

2.編譯并且生成壓縮文件

stylus -c -w ./

-c 編譯
-w 監控文件變化
./ 要編譯到的文件路徑

不知道為什么不支持../

nodejs

1.nodejs修改了代碼以后自動刷新

下載supervisor

npm -g install supervisor

執行

supervisor app.js

2.安裝express和ejs

3.Express 托管靜態文件

var express = require('express');
var app = express();
app.use(express.static('路徑'));

http://www.expressjs.com.cn/starter/static-files.html

4.修改ejs后綴名

4.1引入ejs

var ejs = require('ejs');

4.2注冊html模板引擎：

app.engine('html',ejs.__express);

4.3將模板引擎換成html:

app.set('view engine', 'html');

4.4修改模板文件的后綴為.html。

頁面設計的一些假想

目前效果是這樣的，如圖

首先頭部有一個標題和一段文字內容，另外因為頁面多個地方需要用到，因此需要把它做成組件，接著是一個導航條，也是一個公共的也需要弄成組件，但做成組件以后有一個小小的問題，就是當前選中的那個需要加一個狀態，原本想用:target來寫，但因為鏈接到的是不同的頁面，因此也不太行。想來想去也只能用JS來實現了，不知道大家都用的什么方法。

下面就是主體內容部分了，開始部分放一篇推薦文章，打算把閱讀量高的或者評論高的，又或者隨機推薦一篇，這還在考慮之中，接著左邊放最新文章，但考慮到有些可能加圖片，因此還需要進行調整，另外屏幕比較小的時候放圖片上去會有些問題，因此用了一下媒體查詢，過小就隱藏。屏幕過小標題也得重新設計一下，因為默認是居中對齊的，但屏幕太小的時候，文字會斷行，斷后的那個文字也會居中，實在太難看了，還有一點就是應該給標題來一個首行縮進。右邊就是猜你喜歡，這個功能我是這樣想的，如果用戶是第一次過來，那么就放瀏覽量高的，如果用戶瀏覽過本站的一些文章，那么把它瀏覽過的文章標題記錄下來，做一個分析，到時候這個就推薦關于用戶喜歡的一些文章，按照瀏覽量排序。現在想到一個更好一點的部分，如果說直接分析標題，還是有些困難的，想起那些文章都是有分類的，因此提取一下用戶訪問的分類就好了。

列表也通過判斷訪問的參數顯示相應的內容，如下圖

代碼是這樣的

<link rel="stylesheet" href="nav/css/nav.css">
<nav class="navbar">
  <a href="./" class="active">首頁</a>
  <a href="./list?css">CSS指南</a>
  <a href="./list?html5">HTML5</a>
  <a href="./list?javascript">Javascript</a>
  <a href="./list?life">學會生活</a>
  <a href="./list?message">我有話說</a>
</nav>

而顯示對應的列表內容則通過查詢數據庫articleClass字段來篩選

// 插入一篇文章
data.insert('zmz','article',{
    title:'5555',
    content:'這是內容',
    img:'httt',
    date:new Date().getTime(),
    url:'/article?' + new Date().getTime(),
    author:'追夢子',
    articleClass:'CSS指南',
    articleClassUrl:'list?css',
    readquan:2222,
    recommendcount:5435
});

因為mongodb本身沒有自增，所以打算通過發布時間作為每一篇文章的唯一ID，到時候查詢的時候就好辦了，也就是下圖這個

html頁面是這樣的

數據庫的封裝

這個封裝是從網上找的，然后修改了一下，一些細節還不是很理解，項目完成以后還得再看看。

查詢時代碼

后臺管理

目前的想法，如下圖

已經實現的效果圖

話說有點丑，不過能實現就挺不錯的了。

新增文章頁的一些細節

如上圖我把每一個li都添加了一個自定義屬性，這個用來確定選擇的分類，提交數據的時候有用。因為首頁有個分類功能，如下圖

在選擇分類的時候將選中的元素上的自定義屬性賦值給標題元素，如下

// 選擇分類
$(className).attr("data-articleClassUrl",$(this).attr("data-articleClassUrl"));

發送數據時

而對應的nodejs端則如下處理接收的數據

因為nodejs無法直接接收post數據，因此用了如下方法

function parseJSON(req,res,next){
    var arr = [];
    req.on("data",function(data){
        arr.push(data);
    });
    req.on("end",function(){
        var data= Buffer.concat(arr).toString(),ret;
        next(data);
    })
}

但它獲取的數據是form類型的字符串，因此使用了一個nodejs自帶的功能

var qs = require('querystring');
qs.parse(data);

關于后臺編輯器

原本打算用markdown，但因為一些原因，最后還是自己寫了個小腳本，寫作方式如下:

<zmz>
        <h1>h111111111</h1>
        <h2>h222222222</h2>
        <h3>h333333333</h3>
        <h4>h444444444</h4>
        <h5>h555555555</h5>
        <h6>h666666666</h6>
        <ul>
            123123/li/
            123123/li/
        </ul>
        <ol>
            111111/li/
            222222/li/
            333333/li/
        </ol>
        <bgtitle>帶背景的標題</bgtitle>
        <captitle>帶大寫數字的標題</captitle>
        <lowtitle>帶大寫數字的標題</lowtitle>
        <info>
            Alternate elements/h4/
            提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息/p/
        </info>
        <a>是嗎</a>
        <blockquote>
            模式啊
        </blockquote>
        <code>alert</code>
        <center>居中</center>
        <left>居左</left>
        <right>居右</right>
</zmz>

最外層是一個包含塊，好去獲取代碼，里面可以使用html來寫，以及少量的自定義元素，效果如下

但最后發現這根本就是一個沒用的設計，最初的想法無非就是為了方便寫作，而設計這些條條框框即是為了能夠正常匹配。因此這些設計反倒沒有簡單多少，實際上我們只需要寫一份CSS就可以了。

圖片上傳

圖片上傳筆記

訪客系統

訪客系統筆記

一些問題

1.組件應該包含其自身的所有文件。

頭部和導航是一個公共的，于是就提取出來了，一開始是這樣引入的，如下圖：

但感覺這樣太麻煩了，每次還得分別引入多個文件，于是我把css直接在header.ejs里面引入，如下圖：

于是每次只需要引入一個文件就好了，這里說一下，link標簽不一定得寫到head里面，只是加載的順序不一樣罷了，因為有些東西具體的實現還是根據瀏覽器廠商的。

2.職責明確

是布局的就不應該和組件混亂，比如說下圖這個

這個main實際上是用來布局的，就是讓它水平居中，如下：

.main{
    display:flex;
    width:70%;
    margin-left:auto;
    margin-right:auto;
}

如果說你打算把里面的一些東西當做一個單獨的模塊，那么就不要和這個main掛上關系，而是單獨起一個class，比如說里面的那個推薦，代碼我寫成了這樣

rec-articles.styl

@import "../../global.styl"

.like-article
    & h2
        margin-bottom:0.25rem;
        font-size:1rem;
        text-align:center;
    & h3
        font-size:0.9rem;
        line-height:1.5rem;
        text-align:center;
    & h2,
    & a
        color:g-color2;
    & a
        font:0.8rem "宋體", Arial, Helvetica, sans-serif;

rec-articles.html

<link rel="stylesheet" href="articles/css/rec-articles.css">
<nav class="like-article">
    <h2>猜你喜歡</h2>
    <h3><a href="#">標題</a></h3>
    <h3><a href="#">標題</a></h3>
</nav>

另外代碼的抽離也需要注意一點，實際上.like-article頁面中是用了這么一句的

.like-article
    flex:1;

但想想這個肯定是不能放到組件里面的，而是需要的地方單獨去寫，因為這個都是不確定的，不一定每個頁面都需要用到。

整個項目分享：點我下載

mongodb數據庫文件下載 ：點我下載