Vue-cli + Express 構建的SPA Blog(先後分離)

代碼地址以下:
http://www.demodashi.com/demo/12526.htmlcss

爲何學習並使用Vue

1.發展趨勢

最近這幾年的前端圈子,因爲戲臺通常精彩紛呈,從 MVC 到 MVVM,你剛唱罷我登場。 backbone,AngularJS 已成昨日黃花,reactjs 如日中天,同時另外一更輕量的 vue 發展勢頭更猛,號稱兼具了 angularjs 和 reactjs 的二者優勢。html

2.Vue能幹嘛

移動端的上網需求已經遠高於pc端,特別是 hybrid 方式的H5應用中,可是性能問題一直是痛點。 若是使用 SPA(就是俗稱的單頁應用(Single Page Web Application)),SPA它將全部的活動侷限於一個Web頁面中,僅在該Web頁面初始化時加載相應的HTML、JavaScript 和 CSS。一旦頁面加載完成了,SPA不會由於用戶的操做而進行頁面的從新加載或跳轉。沒有頁面切換,就沒有白屏阻塞,能夠大大提升 H5 的性能,達到接近原生的流暢體驗。前端

陸續續看vue已經二個多月了,使用vue2.0開發了一個SPA博客,在用vue人性化優點的同時,的也遇到過不少坑,不少問題,分享一下我遇到的問題和解決辦法。vue

Vue2_blog

vue2,vuex,vue-cli,axios,webpack,express,mysqlnode

項目結構

①server是個人接口代碼目錄,能夠隨意放置,和頁面互不影響。
②src下面是頁面相關文件,assets下是js,css,以及圖片等,由於咱們這是SPA,因此components下是頁面組件,js文件夾下會是一些公用的腳本,store就是vuex相關文件,App.vue是入口vue文件,main.js是一個配置文件,包括組件定義引用啊,路由啊等。mysql

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080 (本地啓動)
npm run dev

# build for production with minification (生成靜態文件,用於打包上傳服務器)
npm run build

看這裏:若是是剛入門的小夥伴,不知道把項目clone到本地後怎麼在本地跑起來,這裏寫了個詳細的說明文檔,但願能幫助到大家 說明文檔react

主要實現的功能

1.用戶登陸
2.用戶註冊
3.用戶發帖
4.用戶評論帖
5.用戶留言

關鍵代碼實現

1.靜態頁面初始化構建
使用vue-cli初始化項目,生成的項目下面的目錄是這樣的。

在瀏覽器打開在瀏覽器打http://localhost:8080
,就能夠看到歡迎頁了。

到這裏,你的vue項目已經初始化完畢。而後在components下寫頁面,頁面是單獨的.vue文件。
webpack

head.vueios

<template>
    <div class='pr'>
        <div class='info_area'>
         <router-link to="/login"><div class='user_img'><img src='../assets/img/user.jpg' class='pic-full'></div></router-link>
         <div class='log_out' @click='logout'><img src='../assets/img/log_out.png' class='pic-full'></div>
        </div>
    </div>
</template>
<script>
    import {setCookie} from '../js/setcookie.js'
    export default {
        props: ['name'],
        methods:{
            logout:function(){  //清除用戶登陸信息
                setCookie.deleteCookie('userName','/');
                setCookie.deleteCookie('userPass','/');
                this.$router.push("/login");
            }
        }
    }
</script>
<style scoped src="../assets/css/head.css"></style>

2.接口的簡單編碼(express)nginx

①鏈接數據庫,我這裏使用鏈接池鏈接數據庫

var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');

//使用鏈接池連接數據庫

var pool = mysql.createPool(models.mysql);

var jsonWrite = function(res, ret) {
    if (typeof ret === 'undefined') {
        res.json({
            code: '1',
            msg: '操做失敗'
        });
    } else {
        res.json(ret);
    }
};

//Vue_blog接口

// 增長用戶接口
router.use('/addUser', (req, res) => {
    var sql = $sql.user.add;
    var params = req.body;
    console.log(params);
    pool.query(sql, [params.username, params.pwd], function(error, results, fields) {
        if (error) throw error;
        if (results) {
            console.log(results)
            jsonWrite(res, results);
        }
    })
});

如上所寫,一個簡單的接口就算完成,這裏是我對數據庫的操做。

var sqlMap = {
    // 用戶
    user: {
        add: 'insert into user_info(user_name, user_pwd) values (?,?)',
        check: 'select user_name,user_pwd from user_info',
    },
    message: {
        written: 'insert into message_board(message_list, author, date) values (?,?,?)',
        search: 'select message_list, author, date from message_board'
    },
    diary: {
        written: 'insert into diary_board(diary_list, author, date) values (?,?,?)',
        search_myself: "select * from diary_board where author='" + login_name + "'",
        search_all: 'select * from diary_board'
    },
    comment: {
        written: 'insert into comment(userid, msg_id, comment_message, create_time) values (?,?,?,?)',
        search: 'select userid, msg_id, comment_message, create_time from comment'
    }
}
module.exports = sqlMap;

個人數據庫信息:

module.exports = {
    mysql: {
        host: 'zygg8007596.gotoftp2.com',
        user: 'zygg8007596',
        password: '******',
        database: 'zygg8007596',
        port: '3306'
    }
}

這樣就能夠經過「/addUser」這個接口,實現信息往數據庫裏的錄入,也就是簡單的用戶'註冊'。其餘的接口也是同樣的道理,只是邏輯更復雜,sql語句更復雜而已。

接口寫完了,直接將server文件夾拖到服務器目錄下,在能夠運行的容器裏,使用高大上的pm2部署nodejs項目,也可使用forever,可是我的更推薦前者。怎麼部署呢?
成功安裝pm2後,直接「pm2 start app.js」,app.js就是服務的入口文件。而後服務就啓動起來了。可使用一些命令查看狀態,以及關閉,開啓,重啓服務等。

這樣,接口在跑着,前端頁面就能夠隨時調用,典型的先後端分離。

構建

使用vue-cli來構建初始化項目,很是方便,至關於生成項目模板這樣子。

vuex

vue就我我的理解,是數據驅動,實現頁面組件化開發,更好管理和維護,vuex是用做組件間的通訊,固然了若是頁面夠簡單,也可使用其餘方法進行通訊(傳值),好比props等。

axios

說實話,項目前期我還用的是vue-resource,後面才統一改用axios(尤大大本人都力推的),兩者都是用於客戶端和服務端通訊的,也就是用做ajax請求的。

webpack

webpack是一款模塊加載器兼打包工具,它能把各類資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都做爲模塊來使用和處理。好比,咱們vue組件化開發,會用 ".vue" 文件,這種文件不會被瀏覽器所解析,因此須要用webpack來 "格式化" 他們,讓他們變爲瀏覽器能夠解析的文件格式。還有,還有,用webpack,你就能夠愉快的使用es6的語法啦!

express & mysql

所謂一個"系統",怎麼只能是簡單的靜態頁面?在這裏用了express(express 是一個基於 Node.js 平臺的開發框架)和mysql來進行編寫數據存儲的後端api,用於用戶信息在數據庫裏存儲和讀取。

pm2

pm2 是一個帶有負載均衡功能的Node應用的進程管理器,並保證進程永遠都活着,0秒的重載。其實它主要做用就是 nodejs 集羣。按照個人理解,通俗的將,它的做用就是,本地開發環境,你要開啓node服務,實現某些功能(好比監聽某個端口),就會在控制檯執行"node app.js"(好比這個文件叫app吧!),對應的node服務就會開啓了,可是你只要一關閉這個控制檯窗口,他就沒有對應的服務進程了,每次起服務都得"控制檯 -> node app.js"。在生產環境來講,很麻煩,這會就用到了pm2,只須要執行一次"pm2 start app.js"。ok,一勞永逸,控制檯窗口隨你怎麼自由開啓關閉,對應的服務進程永遠在後面運行着。

服務器目錄

static和index.html是vue-cli構建的生產環境靜態文件,server是寫的服務端接口,使用pm2跑着(使用nginx作了一個端口轉發),服務跑服務,靜態頁面是靜態頁面,互不影響

項目預覽

Vue_blog(只適配了移動端)

①.註冊頁面

②登陸頁面

③登陸成功

④留言板列表

⑤用戶發表動態以及評論

總結

剛用vue開發的時候,遇到了不少問題,也犯了不少錯誤,不過,如今而言,本身收穫蠻多。本身的vue博客(留言板)已經開發完成。我想說的是,麻雀雖小,五臟俱全,雖然只是一個小應用,但它涵蓋了許多知識點,包括前端,後端,數據庫等一個網站的所必須的一些組成要素,對我來講,學習意義很大,願共勉!
Vue-cli + Express 構建的SPA Blog(先後分離)

代碼地址以下:
http://www.demodashi.com/demo/12526.html

注:本文著做權歸做者,由demo大師代發,拒絕轉載,轉載須要做者受權

相關文章
相關標籤/搜索