首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

支配vue框架初阶项目之博客网站-登陆功能

ArthurSlog

SLog-25

Year·1

Guangzhou·China

July 27th 2018

人的成长 几乎是决定于资源和平台 天份再怎么好的人 没有资源的支持 也无法成才 没有平台的扶持 也无法发挥作用

开发环境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

我们创建一个表“Account”

Query OK, 0 rows affected (0.09 sec)

向Account表里插入一行数据

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

接下来,我们来完善一下登陆页面 “signin.html”:

signin.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),如下面代码一样,它将等待承诺得到解决或拒绝

登陆模块 signin()

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

点击 Signin 进入登陆界面

输入账号: ArthurSlog 密码:ArthurSlog

点击登陆,成功返回 Json 数据

至此,我们完成了前端的登陆功能和后端的登陆模块。

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

谢谢

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180731G0AIRS00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券