ArthurSlog
SLog-26
Year·1
Guangzhou·China
July 28th 2018
勿让时光蹉跎,最宝贵的时间就是20几岁,这个时候的你能承受住一生中最大的风险,有着可以穷尽一博的底气,勿让时光蹉跎
开发环境MacOS(High Sierra 10.13.5)
需要的信息和信息源:开始编码
首先,安装homebrow这个工具来协助我们 (如果已经安装brow就跳过这一步)
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
使用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键,命令行会变成以下状态
输入SQL命令,按enter键执行,列出已有的数据库
mysql> show databases;
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”
Query OK, 0 rows affected (0.09 sec)
向ArthurSlogAccount表里插入一行数据
Query OK, 1 row affected (0.08 sec)
查看一下Account表
mysql> SELECT * FROM Account;
1 row in set (0.00 sec)
退出mysql交互模式
exit;
Bye
切换至项目路径下
cd node_vue_directive_learningload
接下来,我们来完善一下注册页面 “signup.html”:
signup.html
上面的代码增加了用户注册模块,关于表单
上面的代码完成一个注册信息的表单
接下来我们编写后端对应的部分
index.js
在使用express框架的时候,express 用来传值的是 req 和 res,req 就是从前端网页传过来的信息,而 res 就是我们后端传给前端的信息,这样的设计是根据 http协议 决定的,其中
http_URL = “http:” “//“ host [ “:” port ] [ abs_path [ “?” query ]] 这是http协议定义的URL协议标准
在express框架环境中
关键的地方在于,koa框架 不同于 express框架,我们需要让页面在数据库命令执行完成后再进行渲染,以便我们把从数据库获取到的值完整的传给前端,所以我们需要修改一下语法
因为 mysql中间件 使用回调而不是承诺(promise),因此,要使用await来构建承诺(promise),如下面代码一样,它将等待承诺得到解决或拒绝
注册模块 signup()
koa 框架与 express 框架不同的地方还在于,koa 使用 “ctx” 代替了 express 框架的 “req” 和 “res”
把 request 和 response 集合成一个 ctx,ctx对应了 req 和 res 的每个属性,参考 koa官方手册
Request 别名
Response 别名
例如,你需要获取前端表单里的 “name” 值:
再举个栗子,给前端返回一些数据:
现在,使用 npm 指令,安装 mysql中间件 和 koa-router中间件
sudo npm install mysql koa-router
你还可以选择 mysql2中间件,使用方法参考链接的官方手册
ok,现在,启动静态web服务器
node index.js
打开浏览器,在地址栏输入 127.0.0.1:3000
点击 Signup 进入注册界面
输入注册信息如下:
点击注册,提示注册成功
返回主页,点击 Signin 进入登陆界面
输入刚刚注册的账户和密码,然后点击登陆,成功返回 JSON 字符串:
至此,我们完成了前端的注册功能和后端的注册模块。
如果你喜欢我的文章 欢迎点赞 留言
谢谢
领取专属 10元无门槛券
私享最新 技术干货