Vue-001：Vue-Resource 实现登录

已于 2022-09-12 14:16:52 修改
阅读量290 收藏
点赞数
分类专栏： Vue学习 文章标签： vue.js javascript 前端 node.js
于 2022-09-12 13:58:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LaLaLa_CZ/article/details/126816541
版权

第一步 相关组件安装

全局安装包管理器 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

肥六喵喵怪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-resource：Vue.js的HTTP客户端
02-04
Vue资源 插件提供了使用或JSONP发出Web请求... $ yarn add vue-resource$ npm install vue-resourceCDN 在 ， 或。 < script src =" https://cdn.jsdelivr.net/npm/vue-resource@1.5.1 " > </ script >例{
vue.config.js
总柴的博客
02-01 135
const path = require("path"); module.exports = { // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致 publicPath: "./", // 输出文件目录 outputDir: "dist", // eslint-loader 是否在保存的时候检查 lintOnSave: true, // 是否使用包含运行时编译器的 Vue 构建版本 runtimeCompiler:
【项目实战】Vue商城
one or only的博客
08-24 9756
【项目实战】Vue商城
基础的vue项目
HUSBANDL的博客
02-08 577
登录功能 创建分支 git checkout -b login(login是新建分支名) git branch 是查看所有的分支 带*号的是你目前所在的分支名 element-ui实现登录页面 开发依赖中安装less-loader和less,注意重新启动项目才会生效 src/assets/css下面添加全局css样式配置 main.js把全局css样式文件导入 2.1 Login实现基本布局 src/components/Login.vue代码如下： <!-- 登录页面 -->
Vue开发实例（20）之实现登录功能
热门推荐
编程界明世隐的博客
05-29 3万+
Vue开发实例（20）之实现 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！ 导航 ✪  Vue开发实例目录总索引 ◄ 上一篇【19】用户列表分页的实现 ► 下一篇【21】待更新 实现最简单的登录功能
vue实现简单的登入功能
ananzhangwei的博客
04-11 3431
vue实现简单的登入功能，axios的简单二次封装
vue-resource-1.3.4.zip
04-23
vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件，提供了一般的 HTTP请求接口和RESTful架构请求接口，并且提供了全局方法和Vue组件实例方法。
VUE中使用Vue-resource完成交互
01-19
本文介绍了VUE中使用Vue-resource完成交互，分享给大家，具体如下 使用vue-resource 引入vue-resource vue-resource就像jQuery里的$.ajax，是用来跟后端交互数据的，vue-resource是vue的一个插件，所以我们在开始...
vue-resource:jsonp请求百度搜索的接口示例
01-19
1. yarn add vue-resource 2. main.js引入vue-resource import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' import App from './App.vue' ...Vue.use(VueResource)
vue学习之vue-resource请求
01-07
npm install 引入vue-resource包 this.$http.get(’/someUrl’) this.$http.post(’/someUrl’,{foo:‘bar’}) (1) npm install vue-resource –save引入vue-resource包 (2)在store文件的main.js中配置vue-resource ...
Vue-resource.js
08-10
可以使用这个vue-resource.js在vue应用中发起get post 等请求
Vue——Vue-resource详解
吴声子夜歌的博客
05-31 2173
Vue-resource 提供了一种与 RESTful API 风格所匹配的写法，通过全局变量 Vue. resource 或者组件实例中的 this.$resource 对某个符合 RESTful 格式的 url 进行封装，使得 开发者能够直接使用增删改查等基础操作，而不用自己再额外编写接口。(resource)，所以路径中不推荐有动词，只能有名词，而且所用的名词往往与数据库的表格 名对应，且一般采取复数的形式命名。GET /api/products/:id :获取某个指定产品信息。
vue.js vue-resource——http请求
毛没齐的博客
08-06 553
在 vue项目中引用 vue-resource 模块 npm install vue-resource --save-dev 在 main.js 文件中 引用 //引入 vue-resource模板 import VueResource from 'vue-resource' Vue.config.productionTip = false; Vue.use(VueResourc...
vue-resource
alhivlhos222178181的博客
04-19 67
vue-resource特点 vue-resource插件具有以下特点： 1. 体积小 vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。 2. 支持主流的浏览器 和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。 3. 支持Promis...
vue-resource 的入门学习笔记
无解的菜鸟晖 的博客
11-04 648
Vue 要实现异步加载时需要使用到 vue-resource 库 一、安装和导入 npm install vue-resource --save-dev 出现 vue-resource 的版本号表示安装成功！接下来在 Vue 项目的 main.js 文件中导入： /*引入Vue框架*/ import Vue from 'vue' /*引入资源请求插件*/ import VueResource from 'vue-resource' /*使用VueResource插件*/ Vue.use(V
Vue-resource和axios区别
LM
03-03 6225
在Vue项目中前后端交互时，早期的Vue版本使用Vue-resource插件从后台获取数据。从Vue2.0之后就不再对vue-resource进行更新，而是推荐使用axios. vue-resource Vue.js的插件提供了使用XMLHttpRequest 或 JSONP进行Web请求和处理响应的服务。vue-resource像jQuery的$,ajax，用来进行数据交互。主要用于发送aja...
饿了么项目---5、vue-resource的使用（版本：1.3.4）
qq_36400099的博客
08-18 826
一、参考博客版本 0.9.3http://www.cnblogs.com/cnblogs-jcy/p/7055653.html 二、vue-resource的使用API在vue-resource的官网上已经解释的很清楚了，贴上链接链接： https://github.com/pagekit/vue-resource2.1 下载vue-resource插件首先在package配置"depende
vue-pdf :src=\pdfurl\" 跨域 access to fetch"
最新发布
09-04
3. 前端插件：可以使用vue-resource等第三方插件来实现跨域访问。这些插件具有更灵活的配置选项，可以直接在前端通过设置请求头等方式绕过浏览器的跨域限制。 综上所述，跨域访问的问题在Vue中使用vue-pdf插件时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值