Slog26_支配vue框架初阶项目之博客网站-注册功能

news/2024/4/27 9:10:36/文章来源:https://blog.csdn.net/weixin_34041003/article/details/88747530
  • ArthurSlog
  • SLog-26
  • Year·1
  • Guangzhou·China
  • July 28th 2018

关注微信公众号“ArthurSlog”

  • GitHub
  • 掘金主页
  • 简书主页
  • segmentfault

勿让时光蹉跎,最宝贵的时间就是20几岁,这个时候的你能承受住一生中最大的风险,有着可以穷尽一博的底气,勿让时光蹉跎


开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源:

开始编码

  • 首先,安装homebrow这个工具来协助我们 (如果已经安装brow就跳过这一步)
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent...)"
  • 使用brew安装mysql (如果已经安装mysql就跳过这一步)
brew install mysql
  • 启动mysql,检查mysql是否完整安装
mysql.server start
  • Starting MySQL
  • .SUCCESS!
  • 配置Mysql,设置root账户的密码为8个8
mysqladmin -u root password 88888888
  • 登陆数据库
mysql -u root -p
  • 输入密码,再按enter键,命令行会变成以下状态
mysql>
  • 输入SQL命令,按enter键执行,列出已有的数据库
mysql> show databases;
Database
information_schema
mysql
performance_schema
sys

4 rows in set(0.01 sec)

  • 我们创建一个数据库"my_db"
mysql> create database my_db;

Query OK, 1 row affected (0.02 sec)

  • 进入my_db数据库
mysql> use my_db;

Database changed

  • 我们创建一个新表“ArthurSlogAccount"
mysql> CREATE TABLE ArthurSlogAccount
(
ID int NOT NULL AUTO_INCREMENT,
AccountName varchar(255) NOT NULL,
Password varchar(255) NOT NULL,
Firstname varchar(255) NOT NULL,
Lastname varchar(255) NOT NULL,
Birthday varchar(255) NOT NULL,
Sex varchar(255) NOT NULL,
Age varchar(255) NOT NULL,
Wechart varchar(255) NOT NULL,
Qq varchar(255) NOT NULL,
Email varchar(255) NOT NULL,
Contury varchar(255) NOT NULL,
Address varchar(255) NOT NULL,
Phone varchar(255) NOT NULL,
Websize varchar(255) NOT NULL,
Github varchar(255) NOT NULL,
Bio varchar(255) NOT NULL,
PRIMARY KEY (ID)
);

Query OK, 0 rows affected (0.09 sec)

  • 向ArthurSlogAccount表里插入一行数据
mysql> INSERT INTO ArthurSlogAccount (AccountName, Password, Firstname, Lastname, Birthday, Sex, Age, Wechart, Qq, Email, Contury, Address, Phone, Websize, Github, Bio)
VALUES ('ArthurSlog', 'ArthurSlog', 'a', 'xu', '2000/08/08', 'man', '18', 'ArthurSlog', '12345678888', '12345678888@qq.com', 'china', 'China/GuangZhou', '13666666666', 'https://github.com/BlessedChild', 'https://github.com/BlessedChild', 'This is mime ~');

Query OK, 1 row affected (0.08 sec)

  • 查看一下Account表
mysql> SELECT * FROM Account;

ID|AccountName|Password

1 | ArthurSlog | ArthurSlog
1 row in set (0.00 sec)

  • 退出mysql交互模式
exit;

Bye

  • 切换至项目路径下
cd node_vue_directive_learningload
  • 接下来,我们来完善一下注册页面 “signup.html”:

signup.html

<html><head><meta charset="utf-8"><title>signin_ArthurSlog</title>
</head><body><div>This is signin's page by ArthurSlog</div><p>Singin</p><form action="http://127.0.0.1:3000/singup" method="GET">Account: <br><input type="text" name="name"> <br>Password: <br><input type="text" name="password"><br>Again Password: <br><input type="text" name="repassword"><br>First Name: <br><input type="text" name="firstname"><br>Last Name: <br><input type="text" name="lastname"><br>Birthday: <br><input type="text" name="birthday"><br>Sex: <br><input type="text" name="sex"><br>Age: <br><input type="text" name="age"><br>Wechart: <br><input type="text" name="wechart"><br>QQ: <br><input type="text" name="qq"><br>Email: <br><input type="text" name="email"><br>Contury: <br><input type="text" name="contury"><br>Address: <br><input type="text" name="address"><br>Phone: <br><input type="text" name="phone"><br>Websize: <br><input type="text" name="websize"><br>Github: <br><input type="text" name="github"><br>Bio: <br><input type="text" name="bio"><br><br><input type="submit" value="完成注册"></form><a href="./account.html">Signin</a><br><a href="./index.html">Return index's page</a></body></html>
  • 上面的代码增加了用户注册模块,关于表单
<form action="http://127.0.0.1:3000/singup" method="GET">Account: <br><input type="text" name="name"> <br>Password: <br><input type="text" name="password"><br>Again Password: <br><input type="text" name="repassword"><br>First Name: <br><input type="text" name="firstname"><br>Last Name: <br><input type="text" name="lastname"><br>Birthday: <br><input type="text" name="birthday"><br>Sex: <br><input type="text" name="sex"><br>Age: <br><input type="text" name="age"><br>Wechart: <br><input type="text" name="wechart"><br>QQ: <br><input type="text" name="qq"><br>Email: <br><input type="text" name="email"><br>Contury: <br><input type="text" name="contury"><br>Address: <br><input type="text" name="address"><br>Phone: <br><input type="text" name="phone"><br>Websize: <br><input type="text" name="websize"><br>Github: <br><input type="text" name="github"><br>Bio: <br><input type="text" name="bio"><br><br><input type="submit" value="完成注册">
</form>
  • 上面的代码完成一个注册信息的表单
  • 接下来我们编写后端对应的部分

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('.'));//登陆模块 signin()
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];ctx.body = 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 ^_^!');}});});connection.end();
});//注册模块 signup() 
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');
  • 在使用express框架的时候,express 用来传值的是 req 和 res,req 就是从前端网页传过来的信息,而 res 就是我们后端传给前端的信息,这样的设计是根据 http协议 决定的,其中
  • http_URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]] 这是http协议定义的URL协议标准

在express框架环境中

app.get('/signup', function (req, res) {var mysql      = require('mysql');var connection = mysql.createConnection({host     : 'localhost',user     : 'root',password : '88888888',database : 'my_db'});connection.connect();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];connection.query(addSql,addSqlParams,function (err, result) {if(err){console.log('[INSERT ERROR] - ',err.message);res.send('执行sql出错!');return;}res.send('Welcome~ SingUp Success ^_^');});connection.end();});
  • 关键的地方在于,koa框架 不同于 express框架,我们需要让页面在数据库命令执行完成后再进行渲染,以便我们把从数据库获取到的值完整的传给前端,所以我们需要修改一下语法
  • 因为 mysql中间件 使用回调而不是承诺(promise),因此,要使用await来构建承诺(promise),如下面代码一样,它将等待承诺得到解决或拒绝

注册模块 signup()

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();
});
  • koa 框架与 express 框架不同的地方还在于,koa 使用 “ctx” 代替了 express 框架的 “req” 和 “res”
  • 把 request 和 response 集合成一个 ctx,ctx对应了 req 和 res 的每个属性,参考 koa官方手册

Request 别名

以下访问器和 Request 别名等效:ctx.header
ctx.headers
ctx.method
ctx.method=
ctx.url
ctx.url=
ctx.originalUrl
ctx.origin
ctx.href
ctx.path
ctx.path=
ctx.query
ctx.query=
ctx.querystring
ctx.querystring=
ctx.host
ctx.hostname
ctx.fresh
ctx.stale
ctx.socket
ctx.protocol
ctx.secure
ctx.ip
ctx.ips
ctx.subdomains
ctx.is()
ctx.accepts()
ctx.acceptsEncodings()
ctx.acceptsCharsets()
ctx.acceptsLanguages()
ctx.get()

Response 别名

以下访问器和 Response 别名等效:ctx.body
ctx.body=
ctx.status
ctx.status=
ctx.message
ctx.message=
ctx.length=
ctx.length
ctx.type=
ctx.type
ctx.headerSent
ctx.redirect()
ctx.attachment()
ctx.set()
ctx.append()
ctx.remove()
ctx.lastModified=
ctx.etag=
  • 例如,你需要获取前端表单里的 “name” 值:
var name = ctx.query.name;
  • 再举个栗子,给前端返回一些数据:
ctx.body = 'Hello ArthurSlog~';
  • 现在,使用 npm 指令,安装 mysql中间件 和 koa-router中间件
sudo npm install mysql koa-router
  • 你还可以选择 mysql2中间件,使用方法参考链接的官方手册
  • ok,现在,启动静态web服务器
node index.js
  • 打开浏览器,在地址栏输入 127.0.0.1:3000
  • 点击 Signup 进入注册界面
  • 输入注册信息如下:

Tap | Values

Account | ArthurSlog1
Password | ArthurSlog1
Again Password | ArthurSlog1
First Name | A
Last Name | Xu
Birthday | 2008/08/08
Sex | man
Age | 10
Wechat | ArthurSlog
QQ | 12345678
Email | 12345678@qq.com
Contury | China
Address | China/Guangzhou
Phone | 12345678
Websize | https://github.com/BlessedChild
Github | https://github.com/BlessedChild
Bio | This is mime~

  • 点击注册,提示注册成功
  • 返回主页,点击 Signin 进入登陆界面
  • 输入刚刚注册的账户和密码,然后点击登陆,成功返回 JSON 字符串:
{"ID":2,"AccountName":"ArthurSlog1","Password":"ArthurSlog1","Firstname":"a","Lastname":"xu","Birthday":"2008/08/08","Sex":"man","Age":"10","Wechart":"ArthurSlog","Qq":"12345678","Email":"12345678@qq.com","Contury":"China","Address":"China/GUangzhou","Phone":"12345678","Websize":"https://github.com/BlessedChild","Github":"https://github.com/BlessedChild","Bio":"This is mime~"}
  • 至此,我们完成了前端的注册功能和后端的注册模块。

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

ArthurSlog

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

谢谢

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

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

相关文章

Linux服务器上搭建Centos7.0+Apache+php+Mysql网站

一.安装Linux系统 1.1虚拟机搭建Linux Centos7.0版本&#xff0c;搭建过程省略。 二. 安装apache、php、mysql、php-gd等组件。 2.1安装Apache服务程序(apache服务的软件包名称叫做httpd)。 [rootlocalhost ~]# yum install httpd –y 2.2将Apache服务添加到开机自启中。 [root…

从零搭建Web网站

前言 工作也有几多年了&#xff0c;无论是身边遇到的还是耳间闻到的&#xff0c;多多少少也积攒了自己的一些经验和思考&#xff0c;当然&#xff0c;博主并没有太多接触高大上的分布式架构实践&#xff0c;相对比较零碎&#xff0c;随时补充。俗话说得好&#xff0c;冰冻三尺非…

如何让你的网站拥有网盘功能, 一分钟搞定

网站可以说是网上的门面&#xff0c;用户进来就能看到门面里面所展示的商品或者资讯信息。我们如何充分利用这个门面储存更多的东西能。今天教大家一个实用的方法&#xff0c;简单高效的将wordpress程序网站秒变私有网盘&#xff0c;当然不会网站正常使用&#xff0c;只是多了一…

网站安全检测之图片验证码

2019独角兽企业重金招聘Python工程师标准>>> 在对网站安全进行整体的安全检测的时候&#xff0c;用户登陆以及用户留言&#xff0c;评论&#xff0c;设置支付密码&#xff0c;以及一些网站功能方面都会用到图片验证码&#xff0c;针对于验证码我们SINE安全对其进行了…

制作chrome插件/扩展程序,禁止谷歌浏览器访问某些网站

简单地说&#xff0c;浏览器插件&#xff0c;可以大大的扩展你的浏览器的功能。包括但不仅限于这些功能&#xff1a; 捕捉特定网页的内容捕捉HTTP报文捕捉用户浏览动作&#xff0c;改变浏览器地址栏/起始页/书签/Tab等界面元素的行为与别的站点通信&#xff0c;修改网页内容………

更改了react-redux 官方网站的todolist结构

最近在学习胡子大哈的react小书&#xff0c;内容讲的由浅入深&#xff0c;很值得react&#xff0c;react-redux小白一读。 废话不多说直接上地址&#xff1a;http://huziketang.mangojuice.top/books/react/ react小书看过两遍&#xff0c;而且都认真跟着操作了&#xff0c;里面…

大型网站技术架构(一)大型网站架构演化

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

支付宝手机网站支付接入详细教程

点击查看 商户系统按照手机网站支付接口alipay.trade.wap.payAPI的参数规范生成订单数据&#xff0c;然后在前端页面通过Form表单的形式请求到支付宝。 不是商户系统直接调用的支付宝接口&#xff0c;而是支付宝的工具类生成一个form表单&#xff0c;然后返回给前端页面&#…

一个在线练习sql语句的网站

不用自己搭建数据库&#xff0c;轻量简单&#xff0c;方便进行练习及测试 地址为&#xff1a;http://sqlfiddle.com/ 一个不错的练习题汇总 https://blog.csdn.net/qq_41936662/article/details/80393172

网站收藏(Java)虫洞栈

字节跳动的小傅哥 设计模式 bugstack 虫洞栈https://bugstack.cn/用Java实现JVM, Netty4.x专题 中间件开发 领域驱动设计 全链路监控 字节码编程 Home fuzhengwei/CodeGuide Wiki GitHubhttps://github.com/fuzhengwei/CodeGuide/wiki

Python程序员一般都是靠这几个网站赚外快,赶紧收藏

当下python需求量还是挺大的&#xff0c;对于想要做兼职的程序员还是挺友好的&#xff1a;起码不用愁找不到&#xff1b;目前来看&#xff0c;其兼职方向大致有三&#xff1a;开发、爬虫、数据分析。 就开发来说&#xff0c;目前python的轮子在Github上一抓一大把&#xff0c;…

Python兼职有些坑你一定要知道,附接活网站

说点想说的 程序员就是当今时代的手艺人&#xff0c;程序员可以通过个人的技术来谋生。而在工作之余接私单可以作为一种创富的途径&#xff0c;受到程序员的广泛认可。说句实在话&#xff0c;现在这个时代&#xff0c;很多人仅靠主业顶多维持基本生活&#xff0c;想让自己、家…

如何快速搭建自己的网站:阿里云+宝塔+wordpress

自媒体快速发展的时代&#xff0c;很多人都有搭建自己网站的想法&#xff0c;这里我就教大家一种简单的搭建方法。 搭建自己的网站&#xff0c;可以使用网上的免费资源&#xff0c;当然免费的资源需要你花时间去找&#xff0c;而且有些资源不是很稳定。 本教程是基于阿里云的…

程序员必备网站收集

一、源码学习 GitHub&#xff1a;https://github.com 开发者非常重要的网站&#xff0c;程序员都用过&#xff0c;代码托管&#xff0c;上面有很多资源&#xff0c;可以根据自己的需求去查找源码&#xff0c;不用重复造轮子。上面有很多优秀的程序员&#xff0c;你可以和他们开…

Python程序员:8个接私活的网站,只要你有码,那“我”就有钱

前言&#xff1a; “好马配好鞍&#xff0c;兵器不趁手”好马配上好的马鞍那是如虎添翼&#xff0c;兵器不趁手那是“江湖大忌”放在古时候与人过招时&#xff0c;一不留神会丢掉性命的&#xff0c;两者的区别可想而知&#xff01;照这么说的话&#xff0c;程序员的键盘就是武…

我,研究生在读,推荐自学Python必去的5个网站!

hi&#xff0c;今天和大家分享我过去两年自学Python的学习网站&#xff5e; 最近几年&#xff0c;Python刮起了大风&#xff0c;仿佛不学Python就会比同龄人落后一步&#xff0c;学习Python是不是只是跟风现象呢&#xff1f; 诚然&#xff0c;Python于学术研究于职场发展都有…

iis服务器上网站w3wp.exe占用内存过高!

iis服务器上网站过段时间就无法打开&#xff0c;回收进程&#xff0c;关闭网站都没作用&#xff01;只有重启服务器&#xff0c;网站才能恢复正常访问&#xff0c;但是过段时间网站就有打不开了! 最后在任务管理器里面发现了问题&#xff1a;w3wp.exe占用内存过高&#xff01;…

帝国cms手机和pc站数据同步建站教程

帝国cms手机和pc站数据同步建站教程 (2018-03-20 17:18:08) 转载▼ 标签&#xff1a; 帝国cms同步网站 帝国cms手机端同步 http://tangjiusheng.com/EmpireCMS/90.html 帝国cms功能强大的很&#xff0c;百万数据更新几秒内完成&#xff0c;非常的棒我很喜欢&#xff0c…

解决宝塔管理面板用户新开网站空间无法使用独立ftp功能的问题

问题&#xff1a;我的学员用宝塔模板搭建好服务器环境以后&#xff0c;添加了ftp账号&#xff0c;却链接不起来&#xff0c;通过我的不断的研究&#xff0c;问题终于被我解决了&#xff0c;于是在这里一起分享给大家。 现在建站越来越多的人使用服务器了&#xff0c;而且大部分…

JS 劫持来源网站并做指定跳转

JS 劫持来源网站并做指定跳转 如何检测自己的网站是否被劫持了呢&#xff1f;有个工具可以检测 工具&#xff1a;IIS7网站监测工具 它可以让你知道网站是否被黑&#xff0c;被入侵&#xff0c;被改标题&#xff0c;被挂黑链等等功能&#xff0c;让你作为站长能清楚知道自己网…