Slog28_支配vue框架初階項目之博客網站-文件結構調整

• ArthurSlog
• SLog-28
• Year·1
• Guangzhou·China
• Aug 1th 2018

• GitHub
• 掘金主頁
• 簡書主頁
• segmentfault

當你頭腦發熱的時候 手足無措的時候 記得 先面對遇到的事情和問題 先看清本身 認清問題 而後把解決方法一個一個記下來 最後選擇一個合適的方法去解決

---

開發環境MacOS(High Sierra 10.13.5)

須要的信息和信息源：

• Slog1_如何使用nodejs與mysql進行數據交互
• Slog4_使用後端框架KOA實現靜態web服務器
• Slog6_使用vue前端框架實現單頁應用(SPA)
• Slog24
• Slog25
• Slog26

前端部分：

• 統計頁面-計算屬性和偵聽器、https://cn.vuejs.org/v2/guide... 主頁：index.html
• 註冊界面-條件渲染、https://cn.vuejs.org/v2/guide... :signup.html
• 登錄界面 :signin.html
• 後臺用戶管理的界面-列表渲染、https://cn.vuejs.org/v2/guide... 用戶界面: account.hmtl
• 調查問卷-文本、多行文本、複選框、單選按鈕、選擇框、https://cn.vuejs.org/v2/guide... : form.html
• 離開頁面提醒-事件處理、https://cn.vuejs.org/v2/guide...
• 移動端樣式兼容-Class與Style綁定、https://cn.vuejs.org/v2/guide...

後端部分：

• 數據庫數據交互模塊-部署、配置
• 靜態web服務器
• 用戶註冊模塊
• 用戶登錄模塊
• 統計分析模塊
• 用戶狀態模塊-超時、無效、非法

關鍵思路

• vue框架屬於前端的js，須要與後端koa框架的nodejs進行交互，這是怎麼作到的？
• 直接能想到的，就是nodejs直接經過io去動態修改前端的vue文件的js代碼，這樣當瀏覽器打開html文件的時候，html文件會去加載vue的js文件，這樣看起來就實現了先後端js數據的交互
• 若是按照上面的思路，須要先等待koa後端js執行完以後，vue的js文件修改完成了以後，koa的js文件再執行重定向，調用瀏覽器打開修改好的html文件
• 這樣就完成了一個操做流程
• 這裏有個點？！
• 後端框架koa使用nodejs，在操做系統紙上運行各類服務；而前端vue框架使用js，在瀏覽器上執行路由等各類功能，瀏覽器js的邊界在哪裏？；
• 這就意味着，vue框架的使用範圍在被限制在瀏覽器裏了，而koa其實是nodejs的代碼集合，能夠操做到vue框架也就是瀏覽器裏的js代碼；那麼，能夠把vue代碼直接放進koa代碼裏，讓vue的代碼成爲koa代碼的數據的一部分（這裏指的是「指令與數據」裏面的數據），把vue的代碼做爲數據交給koa操做
• 這裏可能有兩種狀況：

1. 當在瀏覽器點擊按鈕的時候，瀏覽器裏的js向後端發去一條信息，後端的nodejs寫的服務接收到這條信息以後，對這條信息進行解析和響應或執行，把執行完的結果返回給前端瀏覽器的js，前端瀏覽器的js一直在等待着返回的信息，如今收到信息後，對信息進行解析和重組，渲染成咱們最終看到的頁面
2. 當在瀏覽器點擊按鈕的時候，瀏覽器裏的js向後端發去一條信息，後端的nodejs寫的服務接收到這條信息以後，對這條信息進行解析和響應或執行，把執行完的結果進行重組，最後保存爲一份js文件或者html文件，而後返回一條信息給前端瀏覽器的js，提醒前端瀏覽器的js去信息裏的地址裏下載對應的文件，前端瀏覽器的js一直在等待着返回的信息，如今收到信息以及信息裏的提醒後，會下載對應的文件，再把下載好的文件渲染成咱們最終看到的頁面

• 有什麼區別嗎！？
• 額，有的，由於這些區別，致使後面搞出來複雜的東西：
• vue框架的誕生，就是第一種狀況孕育出來的畸形產物，而vue框架實際上就是一堆js代碼的集合，這些代碼作了什麼事情呢？這些代碼把後端返回的信息進行解析和重組，生成新的html或者js或者css文件，這些文件再從新渲染瀏覽器界面；後來，所謂的vue服務端渲染，也就是使用後端的nodejs代碼寫一些服務，在服務器上把原來要直接返回前端的信息截下來，而後進行解析和重組，在服務器上生成新的html或者js或者css文件，而後提醒前端瀏覽器下載這些文件，瀏覽器下載好了，再從新加載這些文件，對瀏覽器界面從新進行渲染，這樣前端不用再去解析和重組信息了，但。。。。事實每每是更復雜的，前端的解析和重組部分仍是會繼續存在，後端增長了解析和重組模塊，如今，模塊更多了，能夠把工做分的更細了，呵呵
• 爲了實現上面的操做，須要是用nodejs寫出更多的代碼來支撐，這些代碼就是 Vue.js 服務器端渲染指南
• 你須要用npm安裝下面這些中間件，這些中間件也就是nodejs代碼的集合，用來解析和重組處理過的信息，生成html或者js或者css或者所謂的「模版」文件，在提醒前端瀏覽器下載，最後在瀏覽器中渲染出咱們所看到的頁面：

1. vue & vue-server-renderer 2.3.0+
2. vue-router 2.5.0+
3. vue-loader 12.0.0+ & vue-style-loader 3.0.0+

• 說到這裏，上面 vue這個體系的操做使用方式 已經與入門學習脫離太遠了 呵呵
• 回到目前的項目教程，咱們迴歸單機開發的思路，就是徹底編寫瀏覽器的js代碼做爲前端，編寫nodejs代碼做爲服務器後端服務
• 咱們如今在設計一個用戶管理模塊，設計到用戶管理前端頁面 和 用戶管理後端服務模塊
• 前端頁面使用vue，使用js編寫，這樣，就很明瞭了，咱們建立兩個層次，一個層次放好服務端的js代碼和其餘服務端的資源和文件，另外一個層次放前端代碼，供客戶端瀏覽器下載，渲染
• 建立 server文件夾 和 client文件夾，做用就是上面所說的
• 安排好文件結構，當前的文件結構以下

cd server

ls

server client README.md

• server 中的文件結構是：

cd ..

cd client

ls

index.js node_modules package-lock.json package.json

• client 中的文件結構是：

cd ..

cd client

ls

index.html signin.html signup.html form.html account.html css

• 文件結構從新調整好後，須要檢查和調整各個文件的引用路徑
• 從 server 開始檢查：
• 調整 index.js 代碼

index.js

const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const router = new Router();

// $ GET /package.json
app.use(serve('../client'));

//
router.get('/signin', async (ctx) => {

    var mysql = require('mysql');
    var connection = mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password: '88888888',
        database: 'my_db'
    });

    
    connection.connect(function (err) {
        if (err) {
            console.error('error connecting: ' + err.stack);
            return;
        }
        console.log('connected as id ' + connection.threadId);
    });
    

    var response = {
        "name": ctx.query.name,
        "password": ctx.query.password
    };

    var addSql = 'SELECT * FROM ArthurSlogAccount WHERE AccountName=?';
    var addSqlParams = [response.name];

    var datas = await new Promise((resolve, reject) => {

        connection.query(addSql, addSqlParams, function (err, result) {
            if (err) {
                reject(err);
                console.log('[SELECT ERROR] - ', err.message);
                return;
            }
            if (result[0].Password == response.password) {
                resolve(result[0]);
                console.log('Welcome~ SingIn Successul ^_^' + '\\' + 'Level: ' + result[0].Level + ' Houses: ' + result[0].Houses);
            }
            if (result[0].Password != response.password) {
                reject('SingIn Fault ^_^!');
                console.log('SingIn Fault ^_^!');
            }
        });
    });

    
    if(datas){
        ctx.redirect('account.html');
    }
    
    connection.end();  
});

//
router.get('/signup', async (ctx) => {

    var mysql = require('mysql');
    var connection = mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password: '88888888',
        database: 'my_db'
    });

    
    connection.connect(function (err) {
        if (err) {
            console.error('error connecting: ' + err.stack);
            return;
        }
        console.log('connected as id ' + connection.threadId);
    });

    var response = {
        "name": ctx.query.name,
        "password": ctx.query.password,
        "firstname": ctx.query.firstname,
        "lastname": ctx.query.lastname,
        "birthday": ctx.query.birthday,
        "sex": ctx.query.sex,
        "age": ctx.query.age,
        "wechart": ctx.query.wechart,
        "qq": ctx.query.qq,
        "email": ctx.query.email,
        "contury": ctx.query.contury,
        "address": ctx.query.address,
        "phone": ctx.query.phone,
        "websize": ctx.query.websize,
        "github": ctx.query.github,
        "bio": ctx.query.bio
    };

    var  addSql = 'INSERT INTO ArthurSlogAccount(AccountName, Password, Firstname, Lastname, Birthday, Sex, Age, Wechart, Qq, Email, Contury, Address, Phone, Websize, Github, Bio) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)';
    var  addSqlParams = [response.name, response.password, response.firstname, response.lastname, response.birthday, response.sex, response.age, response.wechart, response.qq, response.email, response.contury, response.address, response.phone, response.websize, response.github, response.bio];



    ctx.body = await new Promise((resolve, reject) => {

        connection.query(addSql,addSqlParams,function (err, result) {
            if(err){
                reject(err);
                console.log('[INSERT ERROR] - ',err.message);
                return;
            }
            resolve('Singup Successful!');
        });
    });
    
    connection.end();
});

app.use(router.routes());

app.listen(3000);

console.log('listening on port 3000');

• 調整部分

index.js

// $ GET /package.json
app.use(serve('../client'));

• 切換至 server 路徑下，啓動靜態web服務器

node index.js

• 打開瀏覽器，輸入 127.0.0.1:3000，測試一下網站各個功能是否正常

開始編碼

• 至此，咱們從新對文件結構進行調整。

---

歡迎關注個人微信公衆號 ArthurSlog

若是你喜歡個人文章 歡迎點贊 留言

謝謝