- ArthurSlog
- SLog-36
- Year·1
- Guangzhou·China
- Aug 12th 2018
- GitHub
- 掘金主页
- 简书主页
- segmentfault
生活需要惊喜和新鲜 人有时候因为很执着一件事 而忘记了自己人生的意义
开发环境MacOS(High Sierra 10.13.5)
需要的信息和信息源：
- HTTP概述
- HTTP
- 互联网是如何工作的
- 万维网是如何工作的
- 统一资源定位符(URL)
- 什么是超链接
- 创建超链接
- AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）
- XMLHttpRequest
- Using files from web applications
开始编码
- 我们开始向单页应用前进，意思就是把多个网页集成到一个网页，把所有的业务都集成到这个页面上来
- 首先，调整一下服务端的 js 文件
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();
// $ 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();
});
app.use(router.routes());
app.listen(3000);
console.log('listening on port 3000');- 其中的
if(datas){
ctx.redirect('account.html');
}- 调整为
if (datas) {
ctx.body = datas;
}- ok，服务端的代码调整完毕
- 现在启动静态服务器
node index.js
- 接着继续，我们把 signin.html 和 signup.html 合并在一个页面里 app.html
app.html
signin_ArthurSlog
This is signin's page by ArthurSlog
Singin
Return index's page
This is signup's page by ArthurSlog
Singup
Return index's page
{{ commits }}
- 然后呢，在来调整一下前端的 js 文件
signup.js
var host = 'http://127.0.0.1:3000/';
var signup_container = new Vue({
el: '#signup-container',
data: {
name_signin: '',
password_signin: '',
name: '',
password: '',
repassword: '',
firstname: '',
lastname: '',
birthday: '',
sexs: ['male', 'female'],
currentSex: 'male',
ages: ['1', '2', '3', '4', '5', '6', '7', '8',
'9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
currentAge: '18',
wechart: '',
qq: '',
email: '',
contury: '',
address: '',
phone: '',
websize: '',
github: '',
bio: '',
commits: null,
},
methods: {
signin: function() {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', host + 'signin?' + 'name=' + self.name_signin + '&password=' + self.password_signin, true)
xhr.onload = function () {
self.commits = xhr.responseText
}
xhr.send()
},
addUser: function () {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', host + 'signup?' + 'name=' + self.name + '&password=' + self.password + '&firstname=' +
self.firstname + '&lastname=' + self.lastname + '&birthday=' + self.birthday
+ '&sex=' + self.currentSex + '&age=' + self.currentAge + '&wechart=' + self.wechart
+ '&qq=' + self.qq + '&email=' + self.email + '&contury=' + self.contury
+ '&address=' + self.address + '&phone=' + self.phone + '&websize=' + self.websize
+ '&github=' + self.github + '&bio=' + self.bio, true)
xhr.onload = function () {
self.commits = xhr.responseText
}
xhr.send()
}
}
})- 注意看到 html 和 js 文件里发生了变化的部分
- 现在，打开浏览器，输入 127.0.0.1:3000/app.html
- 输入之前注册过的账号密码，然后点击 登陆 按钮
- 正常执行的话，你会在页面的底部发现，登陆后服务端返回的数据
- 至此，我们将 signin.html 和 signup.html 合并在了一起。
欢迎关注我的微信公众号 ArthurSlog