- ArthurSlog
- SLog-49
- Year·1
- Guangzhou·China
- Aug 26th 2018
100个同样努力且水平差不多的人 其中有一个无私的教你 牺牲了他的时间成本和机会成本 其他的99个的水平和经济会在这段时间内超过他 慢慢的 他就被淘汰了 这样的人也就变少了
开发环境MacOS(High Sierra 10.13.5)
需要的信息和信息源：
开始编码
- 首先，先理一下思路：
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>signin_ArthurSlog</title>
</head>
<body>
<div id="signup-container">
<template class="container" v-if="pagestate === '0'">
<div>This is index's page by ArthurSlog</div>
<br>
<button v-on:click="signin_index">Signin</button>
<br>
<button v-on:click="signup_index">Signup</button>
</template>
<template id="Signin" v-else-if="pagestate === '1'">
<div>This is signin's page by ArthurSlog</div>
<p>Singin</p>
<form id="form1" v-on:submit.prevent="signin">
<br>
<div>
Account: {{ name_signin }}
<br>
<input type="text" v-model="name_signin" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password_signin }}
<br>
<input type="text" v-model="password_signin" placeholder="password">
</div>
<br>
<input type="submit" value="登陆">
</form>
<br>
<button v-on:click="return_index">ReturnIndex</button>
</template>
<template id="Signup" v-else-if="pagestate === '2'">
<div>This is signup's page by ArthurSlog</div>
<p>Singup</p>
<form id="form2" v-on:submit.prevent="addUser">
<br>
<div>
Account: {{ name }}
<br>
<input type="text" v-model="name" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password }}
<br>
<input type="text" v-model="password" placeholder="password">
</div>
<br>
<br>
<div>
Again Password: {{ repassword }}
<br>
<input type="text" v-model="repassword" placeholder="repassword">
</div>
<br>
<br>
<div>
First Name: {{ firstname }}
<br>
<input type="text" v-model="firstname" placeholder="firstname">
</div>
<br>
<br>
<div>
Last Name: {{ lastname }}
<br>
<input type="text" v-model="lastname" placeholder="lastname">
</div>
<br>
<br>
<div>
Birthday: {{ birthday }}
<br>
<input type="text" v-model="birthday" placeholder="2000/08/08">
</div>
<br>
<br>
<div>
<span>Sex: {{ currentSex }}</span>
<br>
<input type="radio" id="sex" value="male" v-model="currentSex">
<label for="sex">male</label>
<br>
<input type="radio" id="sex" value="female" v-model="currentSex">
<label for="sex">female</label>
</div>
<br>
<br>
<div>
<span>Age: {{ currentAge }}</span>
<br>
<select v-model="currentAge" id="age">
<option disabled value="">Select</option>
<option v-for="age in ages">{{ age }}</option>
</select>
</div>
<br>
<br>
<div>
Wechart: {{ wechart }}
<br>
<input type="text" v-model="wechart" placeholder="wechart's name">
</div>
<br>
<br>
<div>
QQ: {{ qq }}
<br>
<input type="text" v-model="qq" placeholder="12345678">
</div>
<br>
<br>
<div>
Email: {{ email }}
<br>
<input type="text" v-model="email" placeholder="12345678@qq.com">
</div>
<br>
<br>
<div>
Contury: {{ contury }}
<br>
<input type="text" v-model="contury" placeholder="China">
</div>
<br>
<br>
<div>
Address: {{ address }}
<br>
<input type="text" v-model="address" placeholder="Guangzhou">
</div>
<br>
<br>
<div>
Phone: {{ phone }}
<br>
<input type="text" v-model="phone" placeholder="138********">
</div>
<br>
<br>
<div>
Websize: {{ websize }}
<br>
<input type="text" v-model="websize" placeholder="xxx.com">
</div>
<br>
<br>
<div>
Github: {{ github }}
<br>
<input type="text" v-model="github" placeholder="Github's URl">
</div>
<br>
<br>
<div>
Bio: {{ bio }}
<br>
<input type="text" v-model="bio" placeholder="This is the world~">
</div>
<br>
<br>
<input type="submit" value="完成注册">
</form>
<button v-on:click="addUser">addUser</button>
<br>
<button v-on:click="return_index">ReturnIndex</button>
<br>
</template>
<template id="returnResult" v-else-if="pagestate === '3'">
<div>
<img id="ArthurSlog_icon" src="/image/ArthurSlog_icon.jpg" alt="ArthurSlog_icon" />
</div>
<div>
<div>Uploading {{ image }} files...</div>
<br>
<input type="file" v-on:change="filesChange">
<br>
<button v-on:click="uploadfiles">uploadfiles</button>
</div>
<div id="signinResult">
<div v-for="(value, key) in commits">
{{ key }}: {{ value }}
</div>
</div>
</template>
</div>
<script src="./js/signup.js"></script>
</body>
</html>- 更新部分：
client/app.html
<div>
<img id="ArthurSlog_icon" src="/image/ArthurSlog_icon.jpg" alt="ArthurSlog_icon" />
</div>- 至此，我们实现了更新头像的功能。
欢迎关注我的微信公众号 ArthurSlog
