代碼地址以下:
http://www.demodashi.com/demo/12526.htmlcss
最近這幾年的前端圈子,因爲戲臺通常精彩紛呈,從 MVC 到 MVVM,你剛唱罷我登場。 backbone,AngularJS 已成昨日黃花,reactjs 如日中天,同時另外一更輕量的 vue 發展勢頭更猛,號稱兼具了 angularjs 和 reactjs 的二者優勢。html
移動端的上網需求已經遠高於pc端,特別是 hybrid 方式的H5應用中,可是性能問題一直是痛點。 若是使用 SPA(就是俗稱的單頁應用(Single Page Web Application)),SPA它將全部的活動侷限於一個Web頁面中,僅在該Web頁面初始化時加載相應的HTML、JavaScript 和 CSS。一旦頁面加載完成了,SPA不會由於用戶的操做而進行頁面的從新加載或跳轉。沒有頁面切換,就沒有白屏阻塞,能夠大大提升 H5 的性能,達到接近原生的流暢體驗。前端
陸續續看vue已經二個多月了,使用vue2.0開發了一個SPA博客,在用vue人性化優點的同時,的也遇到過不少坑,不少問題,分享一下我遇到的問題和解決辦法。vue
vue2,vuex,vue-cli,axios,webpack,express,mysqlnode
①server是個人接口代碼目錄,能夠隨意放置,和頁面互不影響。
②src下面是頁面相關文件,assets下是js,css,以及圖片等,由於咱們這是SPA,因此components下是頁面組件,js文件夾下會是一些公用的腳本,store就是vuex相關文件,App.vue是入口vue文件,main.js是一個配置文件,包括組件定義引用啊,路由啊等。mysql
# 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.靜態頁面初始化構建
使用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來構建初始化項目,很是方便,至關於生成項目模板這樣子。
vue就我我的理解,是數據驅動,實現頁面組件化開發,更好管理和維護,vuex是用做組件間的通訊,固然了若是頁面夠簡單,也可使用其餘方法進行通訊(傳值),好比props等。
說實話,項目前期我還用的是vue-resource,後面才統一改用axios(尤大大本人都力推的),兩者都是用於客戶端和服務端通訊的,也就是用做ajax請求的。
webpack是一款模塊加載器兼打包工具,它能把各類資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都做爲模塊來使用和處理。好比,咱們vue組件化開發,會用 ".vue" 文件,這種文件不會被瀏覽器所解析,因此須要用webpack來 "格式化" 他們,讓他們變爲瀏覽器能夠解析的文件格式。還有,還有,用webpack,你就能夠愉快的使用es6的語法啦!
所謂一個"系統",怎麼只能是簡單的靜態頁面?在這裏用了express(express 是一個基於 Node.js 平臺的開發框架)和mysql來進行編寫數據存儲的後端api,用於用戶信息在數據庫裏存儲和讀取。
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開發的時候,遇到了不少問題,也犯了不少錯誤,不過,如今而言,本身收穫蠻多。本身的vue博客(留言板)已經開發完成。我想說的是,麻雀雖小,五臟俱全,雖然只是一個小應用,但它涵蓋了許多知識點,包括前端,後端,數據庫等一個網站的所必須的一些組成要素,對我來講,學習意義很大,願共勉!
Vue-cli + Express 構建的SPA Blog(先後分離)
代碼地址以下:
http://www.demodashi.com/demo/12526.html
注:本文著做權歸做者,由demo大師代發,拒絕轉載,轉載須要做者受權