支配vue框架初階項目之博客網站-登錄功能

時間  2019-12-05
標籤 支配 vue 框架 項目 博客 網站 登錄 功能 欄目 網站開發 简体版
原文   原文鏈接

  • ArthurSloghtml

  • SLog-25前端

  • Year·1vue

  • Guangzhou·Chinanode

  • July 27th 2018mysql

關注微信公衆號「ArthurSlog」
微信掃描二維碼，關注個人公衆號

人的成長 幾乎是決定於資源和平臺 天份再怎麼好的人 沒有資源的支持 也沒法成才 沒有平臺的扶持 也沒法發揮做用git

開發環境MacOS(High Sierra 10.13.5)

須要的信息和信息源：

開始編碼

  • 首先，安裝homebrow這個工具來協助咱們 （若是已經安裝brow就跳過這一步）

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"github

  • 使用brew安裝mysql （若是已經安裝mysql就跳過這一步）

brew install mysqlweb

  • 啓動mysql,檢查mysql是否完整安裝

mysql.server startsql

  • 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

  • 咱們建立一個表「Account"
mysql> CREATE TABLE Account
(
ID int NOT NULL AUTO_INCREMENT,
AccountName varchar(255) NOT NULL,
Password varchar(255) NOT NULL,
PRIMARY KEY (ID)
);
複製代碼

Query OK, 0 rows affected (0.09 sec)

  • 向Account表裏插入一行數據
mysql> INSERT INTO Account (AccountName, Password)
VALUES ('ArthurSlog','ArthurSlog); 複製代碼

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

  • 接下來，咱們來完善一下登錄頁面 「signin.html」：

signin.html

<!DOCTYPE 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/singin" method="GET">
        Name: <br>
        <input type="text" name="name"> 
        <br>
        Password: <br>
        <input type="text" name="password">
        <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/singin" method="GET">
    Name: <br>
    <input type="text" name="name"> 
    <br>
    Password: <br>
    <input type="text" name="password">
    <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 Account 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();
});

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":req.query.name,
        "password":req.query.password
    };

    var  addSql = 'INSERT INTO Account(AccountName, Password) VALUES(?,?)';
    var  addSqlParams = [response.name, response.password];

    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），以下面代碼同樣，它將等待承諾獲得解決或拒絕

登錄模塊 signin()

var response = {
    "name": ctx.query.name,
    "password": ctx.query.password
};

var addSql = 'SELECT * FROM Account 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 ^_^!');
        }
    });
});
複製代碼

  • 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~';
複製代碼

sudo npm install mysql koa-router

  • 你還能夠選擇 mysql2中間件，使用方法參考連接的官方手冊

  • ok，如今，啓動靜態web服務器

node index.js

  • 打開瀏覽器，在地址欄輸入 127.0.0.1:3000

  • 點擊 Signin 進入登錄界面

  • 輸入帳號: ArthurSlog 密碼：ArthurSlog

  • 點擊登錄，成功返回 Json 數據

{"ID":1,"AccountName":"ArthurSlog","Password":"ArthurSlog"}
複製代碼
  • 至此，咱們完成了前端的登錄功能和後端的登錄模塊。

歡迎關注個人微信公衆號 ArthurSlog

ArthurSlog
微信掃描二維碼，關注個人公衆號

若是你喜歡個人文章 歡迎點贊 留言

謝謝

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程