Slog49_支配vue框架初阶项目之博客网站-单页-客户端（浏览器）更新头像1

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

• GitHub
• 掘金主页
• 简书主页
• segmentfault

100个同样努力且水平差不多的人 其中有一个无私的教你 牺牲了他的时间成本和机会成本 其他的99个的水平和经济会在这段时间内超过他 慢慢的 他就被淘汰了 这样的人也就变少了

---

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

• 统一资源定位符(URL)
• XMLHttpRequest

开始编码

• 首先，先理一下思路：

1.用户登陆、客户端（浏览器）登陆 ->
2.向服务端发送一条信息，获取用户数据 ->
3.服务端处理客户端发来的数据，返回相应的数据 ->
4.客户端（浏览器）接收返回的数据 ->
5.客户端（浏览器）解析返回的数据 ->
6.客户端（浏览器）根据解析好的数据，进行业务处理
（将处理好的数据路由到相应的前端的逻辑功能） ->
7.客户端（浏览器）渲染页面

• 为了实现 “更新头像” 的功能，我们可以在服务端进行更新，让服务端在接收到图片之后，覆盖掉 client/image 路径下的图片
• 当你重新登陆的时候，因为原先的图片已经被覆盖了，所以现在登陆显示的是新的头像

server/index.js

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

// $ 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.body = datas;
    }

    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();
});

router.post('/uploadfiles', koaBody({multipart: true}), async (ctx) => {

    console.log('fields: ', ctx.request.fields);

    console.log('files: ', ctx.request.files);

    const file = ctx.request.files.myFile;
    const reader = fs.createReadStream(file.path);
    const stream = fs.createWriteStream('../client/image/ArthurSlog_icon' + '.jpg');
    reader.pipe(stream);
});

app.use(router.routes());

app.listen(3000);

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

• 更新部分：

server/index.js

const stream = fs.createWriteStream('../client/image/ArthurSlog_icon' + '.jpg');

• “../” 的意思是返回上一级目录，因为在这里服务端的目录为 server/index.js，所以需要先返回上一层目录，在进入 client/image
• 结果是 “路径+文件名+文件后缀”，即 ‘../client/image/ArthurSlog_icon.jpg’
• 同时，我们需要更新 html文件 里头像的路径

client/app.html

• 更新部分：

client/app.html

• 至此，我们实现了更新头像的功能。

---

欢迎关注我的微信公众号 ArthurSlog

如果你喜欢我的文章 欢迎点赞 留言

谢谢