- 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
<!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>- 至此，我们实现了更新头像的功能。
