Slog28_支配vue框架初阶项目之博客网站-文件结构调整

时间 2019-12-14

标签 slog28 slog 支配 vue 框架项目博客网站文件结构调整栏目网站开发繁體版

原文原文链接

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

当你头脑发热的时候手足无措的时候记得先面对遇到的事情和问题先看清本身认清问题而后把解决方法一个一个记下来最后选择一个合适的方法去解决css

开发环境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操做
这里可能有两种状况：

当在浏览器点击按钮的时候，浏览器里的js向后端发去一条信息，后端的nodejs写的服务接收到这条信息以后，对这条信息进行解析和响应或执行，把执行完的结果返回给前端浏览器的js，前端浏览器的js一直在等待着返回的信息，如今收到信息后，对信息进行解析和重组，渲染成咱们最终看到的页面
当在浏览器点击按钮的时候，浏览器里的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或者所谓的“模版”文件，在提醒前端浏览器下载，最后在浏览器中渲染出咱们所看到的页面：

vue & vue-server-renderer 2.3.0+
vue-router 2.5.0+
vue-loader 12.0.0+ & vue-style-loader 3.0.0+

说到这里，上面 vue这个体系的操做使用方式已经与入门学习脱离太远了呵呵
回到目前的项目教程，咱们回归单机开发的思路，就是彻底编写浏览器的js代码做为前端，编写nodejs代码做为服务器后端服务
咱们如今在设计一个用户管理模块，设计到用户管理前端页面和用户管理后端服务模块
前端页面使用vue，使用js编写，这样，就很明了了，咱们建立两个层次，一个层次放好服务端的js代码和其余服务端的资源和文件，另外一个层次放前端代码，供客户端浏览器下载，渲染
建立 server文件夹和 client文件夹，做用就是上面所说的
安排好文件结构，当前的文件结构以下

cd server
lshtml

server client README.md

server 中的文件结构是：

cd ..
cd client前端

lsvue

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

client 中的文件结构是：

cd ..
cd clientnode

lsmysql

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

文件结构从新调整好后，须要检查和调整各个文件的引用路径
从 server 开始检查：
调整 index.js 代码

index.jsgit

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.jsgithub

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

切换至 server 路径下，启动静态web服务器

node index.js

打开浏览器，输入 127.0.0.1:3000，测试一下网站各个功能是否正常

Slog28_支配vue框架初阶项目之博客网站-文件结构调整

开发环境MacOS(High Sierra 10.13.5)

须要的信息和信息源：

前端部分：

后端部分：

关键思路

开始编码

欢迎关注个人微信公众号 ArthurSlog

若是你喜欢个人文章欢迎点赞留言

谢谢

Slog28_支配vue框架初阶项目之博客网站-文件结构调整

开发环境MacOS(High Sierra 10.13.5)

须要的信息和信息源：

前端部分：

后端部分：

关键思路

开始编码

欢迎关注个人微信公众号 ArthurSlog

若是你喜欢个人文章 欢迎点赞 留言

谢谢

若是你喜欢个人文章欢迎点赞留言