Vue-001：Vue-Resource 实现登录

发布于：2022-12-20 ⋅ 阅读:(187) ⋅ 点赞:(0)

第一步 相关组件安装

全局安装包管理器 bower：

npm install bower -g

cd转到相关目录，使用bower分别安装vue及vue-resource，默认最高版本，为熟悉Vue所有版本，此次学习使用Vue 1.x。（注意：vue-resource只支持Vue 1.x和Vue 2.x）

bower i vue#1.0.8
bower i vue-resource#0.7

第二步 界面呈现，相关HTML、CSS及Vue交互JS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue.js之vue-resource</title>
    <script src="/bower_components/vue/dist/vue.min.js"></script>
    <script src="/bower_components/vue-resource/dist/vue-resource.min.js"></script>
    <style>    
    input[type=button] {
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        border: none;
    }
    .wrap {
        display: block;
        width: 320px;
        padding: 0 30px;
        margin: 80px auto;
        position: relative;
    }
    .ou {
        border: 1px solid #e8e8e8;
        width: 100%;
        margin-top: 34px;
        position: relative;
    }
    .ou label {
        display: block;
        height: 24px;
        line-height: 24px;
        position: absolute;
        top: -24px;
        left: 0;
        font-size: 12px;
        color: #999;
    }
    .ou .in {
        border: none;
        outline: none;
        height: 32px;
        line-height: 32px;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
    }
    .btn {
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding: 0 20px;
        margin-top: 30px;
        cursor: pointer;
    }
    .btn.btn_ok {
        background: #2432d5;
        color: #fff;
    }
    
    .warnTrk {
        background: #fff;
        box-shadow: 0 0 3px #e8e8e8;
        position: fixed;
        width: 220px;
        top: 20%;
        left: 50%;
        margin-left: -110px;
        z-index: 99;
    }
    .warnTrk .warnTrk_con {
        font-size: 14px;
        color: #333;
        margin: 0;
        padding: 15px 20px;
        text-align: center;
    }
    .warnTrk .warnTrk_btn {
        font-size: 12px;
        display: block;
        width: 60px;
        height: 28px;
        line-height: 28px;
        background: #2432d5;
        color: #fff;
        text-align: center;
        margin: 0 auto;
        text-decoration: none;
        margin-bottom: 15px;
    }
    .back_drop {
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    </style>
</head>
<body>
<div id="loginBox" class="wrap">
    <form id="loginForm">
        <h1>vue-resource之<br>实现登录数据交互</h1> 
        <div class="ou">
            <label>用户名</label>
            <input type="text" class="in" v-model="usr" />
        </div>
        <div class="ou">
            <label>密码</label>
            <input type="text" class="in" v-model="psw" />
        </div>
        <input type="button" class="btn btn_ok" value="提交" @click="submitData" />
    </form>
</div>

<div id="warnTrk" class="warnTrk" v-show="isshow">
    <p class="warnTrk_con">{{ warn }}</p>
    <a class="warnTrk_btn" href="javascript:;" @click="closeWarn">确定</a>
</div>
<div class="back_drop" v-show="isshow"></div>

<script>
new Vue({
    el: 'body',
    data: {
        usr: "",
        psw: "",
        warn: "",
        isshow: false
    },
    methods: {
        submitData: function() {
            // console.log(this.user, " ", this.psw);
            this.$http.get('http://localhost:8001/login', {
                user: this.usr,
                password: this.psw
            }).then(function(data) {
                this.warn = data.data.msg;
                this.isshow = true;
            }, function() {
                this.warn = "异常错误！";
                this.isshow = true;
            })
            // ==>
            // .then(function() {}).catch() {}
        },
        // https://github.com/pagekit/vue-resource 官方文档
        closeWarn: function() {
            this.isshow = false;
        }
    }
})
</script>

</body>
</html>

第三步 建立本地服务server.js

为熟悉node.js，共写了两个版本，使用了express框架的，未使用express框架的

1、使用express框架版本，需要先在项目中安装express

cnpm install express 
// https://www.zybuluo.com/bajian/note/444152  express学习文档

const express = require("express");
const server = express();

server.listen(8001);

var json = {
    'chen': '123456'
};

server.use('/login', function(req, res) {
    // json[req.query.user] ==> json.req.query.user
    // json是键值对的形式，可以用中括号[]代替.来访问key所对应的value
    if (json[req.query.user] == req.query.password) {
        res.send({ok: true, msg: "登录成功！"});
    } else {
        res.send({ok: false, msg: "用户名或密码错误！"});
    }
})

server.use(express.static('./'))

2、未使用express框架版本 

var http = require("http");
var fs = require("fs");
var url = require("url");
var path = require("path");
var queryString = require("querystring");

function parseReq(res, pathName, query) {
    // nodejs => querystring.parse(str, sep, eq, option) sep默认&；eq默认=
    // url?user=chen&psw=123456 => querystring.parse("user=chen&psw=123456", "&", "=", function/number)
    var reqStr = queryString.parse(query);
    // path => 登录请求访问：url/getMsg
    var validInfo = {
        ok: false,
        msg: ""
    };
    switch (pathName) {
        case "/login":
            // 定义待验证的用户名和密码
            var json = {
                "chen": "123456"
            };
            // json[req.query.user] ==> json.req.query.user
            // json是键值对的形式，可以用中括号[]代替.来访问key所对应的value
            if (json[reqStr.user] == reqStr.password) {
                validInfo.ok = true;
                validInfo.msg = "登录成功！";
                // https://www.runoob.com/http/http-content-type.html => HTTP content-Type
                res.writeHead(200, {"content-Type": "application/json;charset=utf-8"});
                // tostring()、parse()、stringify()
                res.write(JSON.stringify(validInfo));
            } else {
                validInfo.msg = "用户名或密码错误！";
                // https://www.runoob.com/http/http-content-type.html => HTTP content-Type
                res.writeHead(200, {"content-Type": "application/json;charset=utf-8"});
                res.write(JSON.stringify(validInfo));
            }
            break;
        default:
            validInfo.msg = "请求失败，该请求不存在！";
            res.writeHead(501, {"content-Type": "application/json;charset=utf-8"});
            res.write(JSON.stringify(validInfo));
    }
    res.end();
}

// 用于加载静态页面
function staticReq(res, pathName, suffixStr) {
    fs.readFile(pathName.substr(1), function(err, data) {
        if (err) {
            var status = {
                ok: false,
                msg: '页面不存在'
            };
            res.writeHead(404, {"content-Type": "application/json;charset=utf-8"});
            res.write(JSON.stringify(status));
        } else {
            // switch...case和if...else if...else...的区别
            switch (suffixStr) {
                case ".js":
                    res.writeHead(200, {"content-Type": "application/x-javascript;charset=utf-8"});
                    break;
                case ".css":
                    res.writeHead(200, {"content-Type": "text/css;charset=utf-8"});
                    break;
                default:
                    res.writeHead(200, {"content-Type": "text/html;charset=utf-8"});
            }
            res.write(data.toString());
        }
        res.end();
    })
}

// 构建服务器
http.createServer(function(req, res) {
    // return urlObject
    var urlParse = url.parse(req.url);
    // nodejs => urlObject.pathname
    // nodejs => urlObject.query
    var pathName = urlParse.pathname;
    var validQ = urlParse.query;
    // path.extname("/vue-http.html") => return .html
    // 用于检索文件后缀
    var suffixStr = path.extname(pathName);
    
    // trim()删除字符串的头尾空白符
    if (suffixStr != null && suffixStr.trim() != "") {
        // 后缀不为空时执行
        staticReq(res, pathName, suffixStr);
    } else {
        // 后缀为空时执行
        parseReq(res, pathName, validQ);
    }
}).listen(8001);

console.log("http://localhost:8001");

第四步 启动服务，完成

node server.js

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布