慕课网前端项目：Vue2.0+Node.js+MongoDB全栈打造商城系统笔记整理【4/18】

最新推荐文章于 2021-03-04 11:46:35 发布

南北极之间

最新推荐文章于 2021-03-04 11:46:35 发布

阅读量670

点赞数

分类专栏：前端项目前端开发

本文链接：https://blog.csdn.net/qq_22182989/article/details/95774232

版权

前端开发同时被 2 个专栏收录

570 篇文章 54 订阅

订阅专栏

前端项目

3 篇文章 1 订阅

订阅专栏

第四章：

vue-resource

上面打错了、应该是：

cnpm i vue-resource -s

安装vue-resource

cnpm i vue-resource --save

新建文件vue-resource.html

引入vue.js和vue-resource.js

<a href="javascript:;">Get请求</a>的作用：防止页面刷新和跳转

完整代码：

//vue-resource.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div id="app">
  <h1>vue-resource插件讲解</h1>
  <!--  防止页面刷新和跳转-->
  <!--  为了好看,使用bootstrap样式-->
<!--  <a href="javascript:;" class="btn btn-primary" v-on:click="get">Get请求</a>-->
<!--  <a href="javascript:;" class="btn btn-primary" @click="post">Post请求</a>-->
<!--  <a href="javascript:;" class="btn btn-primary" @click="jsonp">JSONP请求</a>-->
<!--  <a href="javascript:;" class="btn btn-primary" @click="http">http请求</a>-->
  <a href="javascript:;" class="btn btn-primary" @click="sendGet">Get请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="sendPost">Post请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="sendJsonp">JSONP请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="send">全局函数</a>

  <div>
    <h2>打印请求报文：</h2>
    <span>{{msg}}</span>
  </div>
  <p v-text="response"></p>
</div>
<script>

  new Vue({
    el:"#app",
    data:{
      response:'',
      msg:''
    },
    methods:{
      sendGet: function () {
        var _this = this;
        //http://www.imooc.com/course/ajaxskillcourse?cid=796
        this.$http.get("/login",{
          params:{
            userId:"123"
          },
          headers:{
            access_token:"abcded"
          }
        }).then(function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        }, function (error) {
          console.log("error:"+error);
          _this.response = error;
        });
      },
      sendPost: function () {
        var _this = this;
        var params = {
          username:"sunnyboysoft@163.com",
          password:"hdeeciu4ZauaDaWF/g+92R8FqNMVA8zoX0UWHinjRM6ND8PMFP9Bt2dr0vGUzZPKXDkzhOJbn3Le0ZcbCiQ1Nx7AIvsrwMzjcSStWNzdyBftzsJS0xsUrtmhqzqaWquXKQoEYgDrP+mNrv0C2ITSpbs+QOql4fPvNSWeAVu54XE=",
          remember:"1",
          pwencode:"1",
          browser_key:"c1eafecb03c5ef07651fb7bd9a7f4b72",
          referer:"http://www.imooc.com"
        }
        //http://www.imooc.com/passport/user/login
        this.$http.post("/login",params).then(function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        }, function (error) {
          console.log("error:"+error);
          _this.response = error;
        });
      },
      sendJsonp: function () {
        var _this = this;
        this.$http.jsonp("http://www.imooc.com/course/ajaxskillcourse?cid=796",{
          params:{
            userId:"1001"
          }
        }).then(function (res) {
          console.log("res:"+res.data.msg);
          _this.response = res.data;
        }, function (error) {
          console.log("error:"+error);
        });
      },
      send: function () {
        var _this = this;
        this.$http({
          url:"package.json",
          method:"get",
          params:{
            userId:"103"
          },
          headers:{
            token:"123"
          },
          timeout:5,
          before: function () {
            console.log("before init")
          }
        }).then(function (res) {
          this.msg = res.data;
        });
      }
    }
  });
</script>
</body>
</html>

**************

尤雨溪不推荐vue-resoure，推荐使用axios：

安装axios插件：

cnpm i axios --save

新建axios.html

引入axios插件

完整代码：

//axios.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script src="../node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="app">
  <h1>axios插件讲解</h1>
  <!--  防止页面刷新和跳转-->
  <!--  为了好看,使用bootstrap样式-->
  <a href="javascript:;" class="btn btn-primary" v-on:click="get">Get请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="post">Post请求</a>
  <a href="javascript:;" class="btn btn-primary" @click="http">http请求</a>
  <div>
    <h2>打印请求报文：</h2>
    <span>{{msg}}</span>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      msg: ''
    },
    mounted: function () {
      axios.intercepters.request.use(function (config) {
        console.log("request init...")
        return config;
      })
      axios.intercepters.response.use(function (response) {
        console.log("response init...")
        return response;
      })
    },
    methods: {
      get: function () {
        axios.get("../package.json", {
          params: {
            userId: "999"
          },
          headers: {
            token: "jack"
          }
        }).then(res => {
          this.msg = res.data;
        }).catch(function (error) {
          console.log("error init..." + error)
        })
      },
      post: function () {
        axios.post("../package.json", {
            userId: "888"
          },
          {
            headers: {
              token: "tom"
            }
          }).then(res => {
          this.msg = res.data;
        }).catch(function (error) {

        })
      },
      http: function () {
        axios({
          url: "../package.json",
          method: "get",
          data: {
            userId: "102"
          },
          headers: {
            token: "http-test"
          }
        }).then(res => {
          this.msg = res.data;
        })
      }
    }
  });
</script>
</body>
</html>

效果：