要成就一番事业 既要靠本事上位 又得懂拉拢站队css
1.用户登录、客户端(浏览器)登录 -> 2.向服务端发送一条信息,获取用户数据 -> 3.服务端处理客户端发来的数据,返回相应的数据 -> 4.客户端(浏览器)接收返回的数据 -> 5.客户端(浏览器)解析返回的数据 -> 6.客户端(浏览器)根据解析好的数据,进行业务处理 (将处理好的数据路由到相应的前端的逻辑功能) -> 7.客户端(浏览器)渲染页面
client/signup.jshtml
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, pagestate: '0', image: '', imageSrc: '/image/ArthurSlog_icon.jpg' }, methods: { uploadfiles: function () { var xhr = new XMLHttpRequest() var fd = new FormData() var self = this xhr.open('POST', host + 'uploadfiles', true) xhr.onload = function () { //self.commits = xhr.responseText self.commits = xhr.responseText } fd.append('myFile', this.image) xhr.send(fd) }, filesChange: function (event) { this.image = event.target.files[0] this.imageSrc = window.URL.createObjectURL(event.target.files[0]) }, return_index: function () { this.pagestate = '0' }, signin_index: function () { this.pagestate = '1' }, signup_index: function () { this.pagestate = '2' }, signin: function () { //当点击登录的时候,在页面上渲染从服务端返回的数据,把其余的部分隐藏掉 this.pagestate = '3' 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 var myObj = JSON.parse(xhr.responseText); self.commits = myObj } xhr.send() }, addUser: function () { //当点击注册的时候,在页面上渲染从服务端返回的数据,把其余的部分隐藏掉 this.pagestate = '3' 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() } } })
server/index.js前端
//data部分 data: { imageSrc: '/image/ArthurSlog_icon.jpg' } //methods部分 methods: { filesChange: function (event) { this.image = event.target.files[0] this.imageSrc = URL.createObjectURL(event.target.files[0]) } }
client/app.htmlvue
<!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" v-bind:src="imageSrc" 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.htmlgit
<div> <img id="ArthurSlog_icon" v-bind:src="imageSrc" alt="ArthurSlog_icon" /> </div>