用vue开发老项目

最新推荐文章于 2023-11-01 10:41:59 发布

丁大聪明

最新推荐文章于 2023-11-01 10:41:59 发布

阅读量1.2k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42283360/article/details/100553139

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用vue开发老项目

一、原项目结构
二、技术栈
三、需求
四、改造后的页面
五、request.js 接口文件

一、原项目结构

html
css
js
images
font
没有项目管理工具

二、技术栈

js + jquery

三、需求

在老项目的基础上，增加新的页面。
由于jquery玩的不熟，且包比较重，所以想加入vue来改造成自己习惯的技术栈

四、改造后的页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>创建订单</title>
  <link rel="stylesheet" href="./css/creatOrder.css">
</head>
<body>
  <div id="app">
    被vue管理的内容
  </div>
</body>

<!-- js要在dom以后引入，否则获取不到dom节点 -->
// 引入vue并且创建vue实例，就可以使用vue了
<script src="./js/vue.min.js"></script>
// 使用axios发送请求（一下三个配合） 参考博客：https://www.cnblogs.com/dreamcc/p/10752604.html
<script src="./js/axios.min.js"></script>
<script src="./js/qs.js"></script>
<script src="./js/request.js"></script>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
     
    },
    mounted: function () {
      var data = {
        planId: 123456,
        xyId: 123456
      }
      request.getList(Qs.stringify(data), function (res) {
        console.log(res);
      })
    },
    methods: {
     
    }
  })
</script>
</html>

五、request.js 接口文件

// axios配置
var token = getCookie('token');
// 创建axios实例，并且对请求进行自定义改造
var instance = axios.create({
  baseURL: url(),
  timeout: 30000,
  headers: {
    'x-token': token,
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  }
});

// 所有请求统一对象
var request = {
  // 封装axios的get
  _get: function (url, callback) {
    var requestObj = instance;
    var requestUrl = '/api/' + url;
    if (url.indexOf('http') == 0) {
      requestObj = axios;
      requestUrl = url;
    }

    requestObj.get(requestUrl).then(function (response) {
      if (response && response.data) {
        if (callback) {
          // console.log(response.data)
          callback(response.data)
        }
      }
    }).catch(function (error) {
      if (error.response) {
       
      } else if (error.request) {
        console.log(error.request)
      } else {
        alert('Error', error.message)
      }
    })
  },
  // 封装axios的post
  _post: function (url, data, callback) {
    var requestObj = instance;
    var requestUrl = '/api/' + url;
    if (url.indexOf('http') == 0) {
      requestObj = axios;
      requestUrl = url;
    }
    requestObj.post(requestUrl, data).then(function (response) {
      if (response && response.data) {
        if (callback) {
          // console.log(response.data)
          callback(response.data)
        }
      }
    }).catch(function (error) {
      if (error.response) {
        console.log(error.response)
      } else if (error.request) {
        console.log(error.request)
      } else {
        console.log('Error', error.message)
      }
    })
  },

  // 测试接口
  getList: function (data, callback) {
    this._post("order/list", data, callback)
  },


}

丁大聪明

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
用vue开发老项目

用vue开发老项目一、原项目结构二、技术栈三、需求四、改造后的页面五、request.js 接口文件一、原项目结构htmlcssjsimagesfont没有项目管理工具二、技术栈js + jquery三、需求在老项目的基础上，增加新的页面。由于jquery玩的不熟，且包比较重，所以想加入vue来改造成自己习惯的技术栈四、改造后的页面<!DOCTYPE html...
复制链接

扫一扫