Slog37_支配vue框架初阶项目之博客网站-注册页面-合并首页、登陆和注册页面

news/2024/4/28 16:17:33/文章来源:https://blog.csdn.net/weixin_33826268/article/details/88754454
  • ArthurSlog
  • SLog-37
  • Year·1
  • Guangzhou·China
  • Aug 13th 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

开始编码

  • 这一次，把首页跟注册登陆页面也合并在一起

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 class="container"><div>This is index's page by ArthurSlog</div><br><a href="./signin.html">Signin</a><br><a href="./signup.html">Signup</a></div><div id="signup-container"><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><a href="./index.html">Return index's page</a><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><a href="./index.html">Return index's page</a><br><br><div>{{ commits }}</div></div><script src="./js/signup.js"></script>
</body></html>
  • 然后我们来布置页面的路由，把之前三个页面的功能集成在一个页面上，然后相互之间正常衔接
  • 这里用到 vue.js 框架的模版语法 v-if
  • 不过，首先先把首页的两个超级链接更换成两个按钮

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><br><button v-on:click="return_index">ReturnIndex</button><br></template><template id="Signin_result" v-else-if="pagestate === '3'">{{ commits }}</template><template id="Signin_result" v-else-if="pagestate === '4'">{{ commits }}</template></div><script src="./js/signup.js"></script>
</body></html>
  • 然后呢，在来调整一下前端的 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,pagestate: '0'},methods: {signin_index: function () {this.pagestate = '1';},signup_index: function () {this.pagestate = '2'},return_index: function() {this.pagestate = '0'},signin: function() {var xhr = new XMLHttpRequest()var self = thisxhr.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 = thisxhr.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()}}})
  • 现在，打开浏览器，输入 127.0.0.1:3000/app.html
  • 点击 signin 按钮、 ReturnIndex 按钮和 signup 按钮试试
  • 至此，我们将 index.html 、 signin.html 、 signup.html 合并在了一个页面。

欢迎关注我的微信公众号 ArthurSlog

ArthurSlog

如果你喜欢我的文章 欢迎点赞 留言

谢谢

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_807050.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

3种方式社交媒体营销帮助SEO

3种方式社交媒体营销帮助SEO

3种方式社交媒体营销帮助SEO 除了作为一个伟大的独立营销策略&#xff0c;社交媒体营销也广泛用于搜索引擎优化。一个社会化媒体营销已经被那些在SEO行业如此广泛采用的原因之一是因为巨大的影响&#xff0c;社交媒体具有直接在搜索引擎列表。以下是社交媒体影响这些方式的三种…
阅读更多...
网站服务器iis7.5配置,IIS 7.5 配置伪静态

网站服务器iis7.5配置,IIS 7.5 配置伪静态

1)首先新建一个应用程序池&#xff0c;名称任意&#xff0c;比如&#xff1a;nettest&#xff0c;托管管道模式先暂时设置为集成模式&#xff0c;等下面的一系列设置完成之后再设置成经典模式&#xff1b;2)部署好站点&#xff0c;并将此站点的应用程序池设置为nettest;3)选中站…
阅读更多...
Task2 Django快速搭建一个简单的文章发布发布网站

Task2 Django快速搭建一个简单的文章发布发布网站

VScode Django项目插件 PylanceDjangoLive Server 一、Django项目与宝塔站点的绑定 1.1 VScode中创建Django项目 ① 进入所创建的Python环境的文件目录&#xff0c;激活当前Python环境 cd pyenv/ # 进入Python环境的目录 source bin/activate② 创建一个名为config的应用 …
阅读更多...
Task3 Django搭建个人博客网站

Task3 Django搭建个人博客网站

一、个人博客网站模块划分 常见的博客网站的模块有&#xff1a;首页、文章摘要&#xff0c;导航、点击加载更多、分页、友情链接、推荐文章、文章的点赞、收藏、分享、评论等等。我们可以根据自己的需求来定制一些功能&#xff0c;实现其中的一部分功能来开发个人博客。 具体的…
阅读更多...
社交网站界面设计

社交网站界面设计

社交网站界面设计 基本信息 原书名&#xff1a; Designing Social Interfaces 原出版社&#xff1a; Yahoo Press 作者&#xff1a; &#xff08;美&#xff09;Christian Crumlish Erin Malone 译者&#xff1a; 樊旺斌 师蓉 出版社&#xff1a;机械工业出版社 ISBN&…
阅读更多...
影视网站被黑客攻击，数百万用户账户被曝光

影视网站被黑客攻击，数百万用户账户被曝光

每天我们都听到有新数据被破坏&#xff0c;每天警告用户个人信息被曝光&#xff0c;他们应该重置密码&#xff0c;并加强安全措施来保护黑客根据他们的信息破解。 今天关注的是一个世界上最大的视频网站&#xff0c;影片下载&#xff0c;上传&#xff0c;观看和分享视频&#x…
阅读更多...
[转载]使用IntelliJ IDEA开发SpringMVC网站（一）开发环境

[转载]使用IntelliJ IDEA开发SpringMVC网站（一）开发环境

访问GitHub下载最新源码&#xff1a;https://github.com/gaussic/Sp... 文章已针对IDEA 2016做了一定的更新&#xff0c;部分更新较为重要&#xff0c;请重新阅读文章并下载最新源码。另外&#xff1a;文中的附图部分仍然为旧版本&#xff0c;请参照自身版本进行配置。 前言 由…
阅读更多...
一个自动上色网站

一个自动上色网站

同样是机器学习的一个应用 以前的可以看这个 http://blog.csdn.net/shenmifangke/article/details/56515413 网站是http://color.kvfrans.com/draw 貌似很早就有了 最近体验了下 下面是 上色的测试 又试了试不指认颜色的&#xff0c;其实效果也不错
阅读更多...
从零开始利用vue-cli搭建简单音乐网站（八）

从零开始利用vue-cli搭建简单音乐网站（八）

这是完成了预想中的最后两个功能&#xff1a;歌曲评论以及歌曲搜索。 1、评论效果&#xff1a; 用户点击评论按钮&#xff0c;评论框获取焦点。 输入之后点击提交&#xff0c;下方显示评论&#xff0c;用户名称以及日期。相应的用户也可以删除自己评论。 当然只能删除自己的评…
阅读更多...
从零开始利用vue-cli搭建简单音乐网站（四）

从零开始利用vue-cli搭建简单音乐网站（四）

上一篇文章中说到这一篇博客会实现音乐播放功能&#xff0c;只是令我意外的是&#xff0c;如果利用h5的audio标签&#xff0c;几行代码就实现了......先来看一下最终效果吧。 这里直接用了audio标签&#xff0c;样式没有怎么管&#xff0c;能获得音乐文件并且播放就足够了。 所…
阅读更多...
免费建站系统 Joomla 3.9.5 发布

免费建站系统 Joomla 3.9.5 发布

开发四年只会写业务代码&#xff0c;分布式高并发都不会还做程序员&#xff1f; >>> Joomla 3.9.5现已推出。这是针对3.x系列Joomla的安全修复程序版本&#xff0c;它解决了三个安全漏洞&#xff0c;包含20多个错误修复和改进。 什么是3.9.5&#xff1f; Joomla 3.9…
阅读更多...
大型网站技术架构（一）大型网站架构演化

大型网站技术架构（一）大型网站架构演化

2019独角兽企业重金招聘Python工程师标准>>> 看完了有一本书&#xff0c;就应该有所收获&#xff0c;有所总结&#xff0c;最近把《大型网站技术架构》一书给看完了&#xff0c;给人的印象实在深刻&#xff0c;再加上之前也搞过书本上讲的反向代理和负载均衡以及ses…
阅读更多...
网站优化--让你的网页飞起来

网站优化--让你的网页飞起来

摘要&#xff1a; 网站快要上线了&#xff0c;但是网站打开速度很慢怎么办&#xff1f;这里介绍一下对网页进行优化的方法和技巧&#xff0c;加快网页浏览速度&#xff0c;让网页速度飞起来 测试网页性能工具 ⑴Page Speed&#xff1a; 是开源 Firefox/Firebug 插件。网站管理员…
阅读更多...
网站优化--让你的网页飞起来

网站优化--让你的网页飞起来

摘要&#xff1a; 网站快要上线了&#xff0c;但是网站打开速度很慢怎么办&#xff1f;这里介绍一下对网页进行优化的方法和技巧&#xff0c;加快网页浏览速度&#xff0c;让网页速度飞起来 测试网页性能工具 ⑴Page Speed&#xff1a; 是开源 Firefox/Firebug 插件。网站管理员…
阅读更多...
让网站飞起来02--服务器缓存

让网站飞起来02--服务器缓存

前提提要&#xff1a; 第一个介绍的是《让网站飞起来01---浏览器缓存技术》 介绍服务器&#xff0c;肯定要先支持服务器在网站架构中的位置和作用&#xff0c;然后在介绍几种常见的服务器缓存配置。 正文 对服务器在网站中位置作用有个大概了解&#xff1a;lamp架构图 上图主要…
阅读更多...
Digital Ocean 搭建属于自己的网站

Digital Ocean 搭建属于自己的网站

首先&#xff0c;需要Digital Ocean账号申请以及环境搭建的参考博客&#xff1a;https://blog.csdn.net/hunzhangzui9837/article/details/85209245 下面&#xff0c;开始Digital Ocean 网站搭建 1、WDCP的安装和管理 WDCP相当于一个服务器管理界面&#xff0c;可以直接在we…
阅读更多...
Mozilla出了个网站安全评估工具 93%的网站居然都不合格

Mozilla出了个网站安全评估工具 93%的网站居然都不合格

2019独角兽企业重金招聘Python工程师标准>>> Mozilla的安全工程师April King发现&#xff0c;世界上绝大多数的网站 - 高达93.45&#xff05; - 并没有实施许多现代安全技术&#xff0c;为用户提供安全的连接&#xff0c;并保护他们免受跨站点的攻击脚本&#xff08…
阅读更多...
构架高性能WEB网站的几点知识

构架高性能WEB网站的几点知识

构架高性能WEB网站的几点知识 前言&#xff1a; 对于构架高性能的web网站大家都很感兴趣&#xff0c;本文从几点粗谈高性能web网站需要考虑的问题。 HTML静态化 什么是html静态化&#xff1f; 说得简单点&#xff0c;就是把所有不是.htm或者.html的页面改为.htm或者.html 1.纯静…
阅读更多...
高性能建站之前端优化篇

高性能建站之前端优化篇

高性能建站之前端优化篇 2011-10-25 17:50 by PHP淮北, 560 visits,收藏,编辑 前言&#xff1a; 这算是对前端优化的总结吧&#xff0c;之前零零星星总结和学习&#xff0c;这次做一个完整的总结。 测试网页性能工具 ⑴Page Speed&#xff1a; 谷歌开发的工具&#xff0c;网…
阅读更多...
8个应该去逛逛JQuery的学习网站

8个应该去逛逛JQuery的学习网站

根据国外科技网站 W3Techs 一项调查了近100万个网站数据显示&#xff0c;jQuery是目前最流行的 JavaScript 库。对于初学者来说&#xff0c;有的时候很难找到一个好的学习jQuery的网站&#xff0c;所以本文收集了8个很棒的 jQuery 学习网站推荐给大家。 1. Learning jQuery 最…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业