简易的服务器主要实现功能：登录和注册
实现思路：服务器用一个对象存储浏览器发来的数据，即用户注册的账号信息；
发来的信息分别是用户名和密码，将用户名作为这个对象的一个属性，将密码当做这个属性的值。形成“user”:“pas”s这样的一对键值对，用户提交信息，就存到这里。
检测用户名是否已存在，就是检索存储信息的对象中是否由新传来的用户名的属性，有就是已经注册过了，没有就添加到对象中作为一个新属性添加，这是注册，
如果是登录，同样检测对象中是否有传递到服务器中的用户名这一属性，有，就是有这个账户可以进行下一步检测，这个属性的值，是否和传来的数据中的密码的值相等，相等则登录成功
简易的服务器，实现简单的登录注册检测，正常应该将传到服务器中的数据传递到数据库中，这里只要服务器重启数据就会丢失。
浏览器和服务器处于同一“域”，否则就会出现跨域，浏览器是通过服务器fs文件系统打开的，在fs中设置打开对应的浏览器页面，在浏览器中提交数据通过axios发送请求，服务器接收到请求-检测请求信息中的url地址和传来的数据，先判断要请求的是一个接口还是文件，文件就打开对应的文件（如果有的话），如果是接口，提取接口中含的信息，这个案例就是通过发送请求的方式将注册账户的信息发送给服务器，让服务器获取到浏览器中输入的数据进行检测，以发送接口的形式发送数据，正常发送接口请求是获取数据的，这里通过这种方式达到传递数据，进行判断，浏览器接收到请求，而请求中包含着登录信息，实现登录注册功能，
步骤，浏览器发送请求，请求中含有数据，判断请求中的url是否是规定的/user开头如果是，判断url中的query信息中的名和值对应正常的登陆注册检测，登录发送带有login的请求，注册则是register，来判断当前进行的是登录还是注册操作这里条件有限细一想太过简陋，实现方式也是剑走偏锋，敲这一边思路愈发清晰的，好使这里用fs打开html文件不知道为啥因本地的vue文件和axios文件不好用，可以使用cdn引入，按照要求发送的接口结构式登录：’’/user?login&user=xx&pass=xx";注册:’’/user?register&user=xx&pass=xx"先判断是否有/user然后判断是login还是register，然后就是传递来的数据了接口不能前面加localhost:8080什么的就是接口的形式
服务器
const http = require('http');
const fs = require('fs');
const url_hb = require('url');
const querystring = require('querystring');
//"Access-Control-Allow-Origin:*";//值为*或指定的域名。
var users = {};//用来保存和验证登录和注册，用户名当做属性存储，密码当做对应的属性名的值存储，一个用户名和一个密码构成一副键值对。
let server = http.createServer(function(req, res) {
//解析数据
let str = '';
req.on('data', function(data) {
str += data;
});
req.on('end', function() {
let obj = url_hb.parse(req.url, true);
const url = obj.pathname;
const GET = obj.query;
const POST = querystring.decode(str);
console.log(url, GET, POST);
//区分访问的类型：接口/文件
if (url === '/user') { //接口
switch(GET.act) {
case 'register':
if(users[GET.user]){
res.write('{"ok":false,"msg":"此用户已存在"}');
console.log(users)
}else{
users[GET.user]=GET.pass;
res.write('{"ok":true,"msg":"注册成功"}');
console.log(users)
}
break;
case "login":
if(users[GET.user]==null){
res.write('{"ok":false,"msg":"此用户不存在"}');
}else if(users[GET.user] != GET.pass){
res.write('{"ok":false,"msg":"用户名或密码有误"}')
}else{
res.write('{"ok":true,"msg":"登录成功"}')
}
break;
default:
}
res.end();
} else { //文件
let filename = url.split('/')[1];
fs.readFile(filename,function(err,data){
if(err){
}else{
res.write(data);
}
res.end();
})
}
});
}).listen(8080);
浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script src="../../Vue/js/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title></title>
</head>
<body>
<div class="app">
user:<input type="text" id="name" ref='user'>
pass:<input type="password" id="pass" ref='pass'>
<input type="button" value="Login" id="login" @click="login">
<input type="button" value="register" id="register" @click="register">
<!-- <input type="button" value="register" id="register">-->
</div>
<script type="text/javascript">
Vue.prototype.axios = axios;
let vm = new Vue({
el:".app",
mounted(){
console.log("ok")
},
methods:{
register(){
// this.axios.get('localhost:8080/user?act=register&user='+this.$refs.user.value+'&pass='+this.$refs.pass.value+'')
this.axios.get('/user?act=register&user='+this.$refs.user.value+'&pass='+this.$refs.pass.value+'')
.then(str=>{
console.log(str);
console.log(str.data);
if (str.data.ok){
alert(str.data.msg);
}else{
alert(str.data.msg);
}
})
.catch(err=>console.log(err))
},
login(){
this.axios.get('/user?act=login&user='+this.$refs.user.value+'&pass='+this.$refs.pass.value+'')
.then(str=>{
console.log(str);
console.log(str.data);
if (str.data.ok){
alert(str.data.msg);
}else{
alert(str.data.msg);
}
})
.catch(err=>console.log(err))
}
}
})
</script>
</body>
</html>
