精华内容
下载资源
问答
  • vue项目接口的联调与真机测试 vue项目接口的联调 当前端的代码编写完毕,后端的接口也已经也编写完毕的时候,我们此时便需要进行接口联调,将模拟的数据替换为真实的后端接口vue项目中进行接口联调的步骤: 1...

    vue项目接口的联调与真机测试

    vue项目接口的联调

    当前端的代码编写完毕,后端的接口也已经也编写完毕的时候,我们此时便需要进行接口联调,将模拟的数据替换为真实的后端接口。

    vue项目中进行接口联调的步骤:

    1、删除之前的模拟数据,即static/mock下的所有json文件。

    2、修改config/index.js中的proxyTable内容,重启项目。

        proxyTable: {
          '/api': {
            target: 'http://192.168.0.102:8080', //真实的后端接口
          }
        }

    vue项目的真机测试

    vue项目真机测试的步骤:

    1、修改package.json文件,重启项目。

    "scripts": {
        "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", // 此处增加--host 0.0.0.0
        "start": "npm run dev",
        "build": "node build/build.js"
      }

    2、将手机与电脑处于同一个局域网下,手机浏览器地址栏输入:http://192.168.0.104:8080,即可实现手机预览项目。备注:192.168.0.104表示当前电脑的ip地址。

    附:电脑IP地址的查询方法

    打开终端,输入ipconfig/all即可查看当前的IP地址。

    若在手机端访问,该网页的时候,如果出现白屏的现象。原因可能有以下两种情况:

    (1)手机浏览器默认不支持promise。

    解决方法:安装babel-polyfill这个依赖,而后在main.js中引入。

    npm install babel-polyfill --save
    import 'babel-polyfill'

     

    展开全文
  • vue项目接口管理

    2020-12-06 20:19:53
    vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址 一、开发环境中跨域  使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口...

    这篇文章是引用的,主要是自己能够用到,方便查找,记录下
    具体文章链接: https://www.cnblogs.com/goloving/p/8901189.html

    vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
    一、开发环境中跨域
      使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole。
    不同域名之间的访问,需要跨域才能正确请求。

    跨域的方法很多,通常都需要后台配置,不过 Vue-cli 创建的项目,可以直接利用 Node.js 代理服务器,通过修改vue proxyTable接口实现跨域请求。

    在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev:

    dev: {  
        env: require('./dev.env'),  
        port: 8080,  
        autoOpenBrowser: true,  
        assetsSubDirectory: 'static',  
        assetsPublicPath: '/',  
        proxyTable: {}, 
        cssSourceMap: false  
      }
    

    只要修改里面的proxyTable: {}项

    proxyTable: {  
        '/api': {  //代理地址  
            target: 'http://10.1.0.34:8000/',  //需要代理的地址  
            changeOrigin: true,  //是否跨域  
            secure: false,    
            pathRewrite: {  
                '^/api': '/'   //本身的接口地址没有 '/api' 这种通用前缀,所以要rewrite,如果本身有则去掉  
            }
        }
    }
    

    然后重启项目npm run dev

    请求数据时URL前加上“/api”就可以跨域请求了

    self.$axios.get('/api/queryRole', {params: params})  
        .then((res) => {  
            console.log(res);  
        }).catch((err) => {  
            console.log(err);  
        })
    

    1、参数proxyTable详解:

    vue-cli的config文件里的参数:proxyTable,这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化,例如我们要请求的地址是api.xxxxxxxx.com/list/1,可以按照如下设置:

    proxyTable: {
      '/list': {
        target: 'http://api.xxxxxxxx.com',
        pathRewrite: {
          '^/list': '/list'
        }
      }
    }
    

    这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
      那么又是如何解决跨域问题的呢?
      其实在上面的’list’的参数里有一个changeOrigin参数,接收一个布尔值,
      如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,
      这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:

    proxyTable: {
      '/list': {
        target: 'http://api.xxxxxxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/list': '/list'
        }
      }
    }
    

    vue-cli的这个设置来自于其使用的插件http-proxy-middleware

    github:https://github.com/chimurai/http-proxy-middleware

    深入了解的话可以看该插件配置说明,似乎还支持websocket,很强大的插件。

    2、pathRewrite含义

    用代理,首先你得有一个标识,告诉他你这个连接要用代理,不然的话,可能你的 html,css,js这些静态资源都跑去代理。所以我们只要接口用代理,静态文件用本地。’/iclient’: {}, 就是告诉node,我接口只要是’/iclient’开头的才用代理。所以你的接口就要这么写 /iclient/xx/xx。最后代理的路径就是 http://xxx.xx.com/iclient/xx/xx。可是不对啊,我正确的接口路径里面没有/iclient啊,所以就需要 pathRewrite,用’^/iclient’:’’, 把’/iclient’去掉,这样既能有正确标识,又能在请求接口的时候去掉iclient。当然如果本身的接口中就有/iclient,那么就可以把pathRewrite这个参数去掉。

    二、在生产环境中跨域

    设置nginx配置文件:

    location /api {
        add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://fanyi.baidu.com/v2transapi;
    }
    

    三、设置不同的接口地址
      平常我们团队开发时都在公司的局域网内,调用接口也是局域网内部的,但是项目上线时,请求接口是线上服务器端的,那么就有接口之间的来回切换问题。

    在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口。

    1、设置不同的接口地址

    先找到以下文件

    /config/dev.env.js

    /config/prod.env.js

    可以看到dev.env.js里面内容如下

    在这里插入图片描述

    这是生产环境的参数配置,然后我们可以再上面文件加入一行代码,如下:这就是本地测试环境请求后台接口的域名

    在这里插入图片描述

    然后找到prod.env.js文件,如下:

    在这里插入图片描述

    我们加入一行代码,如下:这是我们上传服务器以后,请求后台接口的域名
    在这里插入图片描述

    2、在代码中调用设置好的参数:

    比如我在本项目中重新封装axios(api文件在/src/api/index.js中),将配置好的接口地址作为baseURL拼接到接口路径中,应用参数部分如下:

    在这里插入图片描述

    最后重新启动项目就可以了,当npm run dev的时候就运行在生产环境,当npm run build的时候就是正式的线上环境。

    展开全文
  • VUE项目中使用node.js搭建server连接本地mysql数据库

    千次阅读 多人点赞 2020-02-29 15:59:05
    最近在研究vue项目中使用node.js搭建server服务器,链接本地mysql数据库,进行数据操作。 准备工作: 1.vue 2.node.js 3:mysql 前面两项对于入行前端的小伙伴应该不是问题了吧, 如果有的话,可以参考vue安装项目。 ...

    最近在研究vue项目中使用node.js搭建server服务器,链接本地mysql数据库,进行数据操作。

    准备工作:
    1.vue
    2.node.js
    3:mysql

    前面两项对于入行前端的小伙伴应该不是问题了吧, 如果有的话,可以参考vue安装项目

    我选用的vue-cli构建项目,我好久没有用vue了,才发现快落伍了,现在3.0版本使用的vue create < project-name>,我就还是选用的2.0构建的项目,附vue-cli 3.0 和 2.0的区别

    附npm淘宝镜像

    npm install cnpm -g --registry=https://registry.npm.taobao.org
    

    然后去安装mysql了,不是专业后台人员,这个我也是鼓捣了好久,给大家附上几个靠谱的参考链接
    1、mysql下载以及安装配置方法
    2、mysql基础知识
    3、Navicat神器的安装以及使用教程

    准备工作会花费很多时间的,一定要细心和耐心啊
    准备好了,就开始进入正题啦

    1、第一步:
    在vue项目中创建server文件夹
    在这里插入图片描述
    2、先来看index.js做了什么事

    // node后端服务器
    const homeApi = require('./api/homeApi') // 上面说的后台接口文件
    
    const bodyParser = require('body-parser') 
    // body-parser是非常常用的一个express中间件,作用是对http请求体进行解析
    
    const express = require('express') // express框架
    const app = express()
    
    app.use(bodyParser.json())
    app.use(bodyParser.urlencoded({ extended: false }))
    
    // 后端api路由
    app.use('/home', homeApi) // 使用homeapi文件中的接口
    
    // 监听端口
    app.listen(3000) // 监听server3000端口
    console.log('success listen at port:3000')
    
    

    3、db.js就是数据库的基本配置

    module.exports = {
      mysql: {
        host: 'localhost',
        user: 'root',
        password: '123456', // mysql用户名密码
        database: 'test_ly', // mysql数据库名
        port: '3306' // mysql链接端口
      }
    }
    
    

    4、再来看一下api中honeApi.js

    // homeApi.js
    var models = require('../db') // 引入db配置
    var express = require('express') // express框架
    var router = express.Router()
    var mysql = require('mysql')
    var $sql = require('../sqlMap') // sql语句
    
    // 连接数据库
    var conn = mysql.createConnection(models.mysql)
    conn.connect()
    
    var jsonWrite = function (res, ret) {
      if (typeof ret === 'undefined') {
        res.json({
          code: '1',
          msg: '操作失败'
        })
      } else {
        res.json(ret)
      }
    }
    
    // 查询列表接口,
    // get接口,这里配置的/getlist,使用的时候就是 /home/getlist
    // 回看index.js 中 app.use('/home', homeApi) ,就懂了
    
    router.get('/getlist', (req, res) => {
      var sql = $sql.home.search
      var parms = req.query
      console.log(parms)
      conn.query(sql, function (err, result) {
        if (err) {
          console.log(err)
        }
        if (result) {
          console.log(result)
          res.send(result)
        }
      })
    })
    
    // 新增列表
    router.post('/addlist', (req, res) => {
      var sql = $sql.home.add
      var parms = req.body
      console.log(parms)
      conn.query(sql, [parms.title, parms.num], function (err, result) {
        if (err) {
          console.log(err)
        }
        if (result) {
          jsonWrite(res, result)
        }
      })
    })
    
    module.exports = router
    
    

    5、存放sql语句的sqlMap.js

    // sqlmap.js
    var sqlMap = {
      // home
      home: {
        search: 'select * from zp_list',
        add: 'insert into zp_list(name) values (?)'
      },
      other:{
      	delete:'', // delete sql语句
      	post: '',
      	get: ''
      }
    }
    module.exports = sqlMap
    
    

    6、项目根目录下安装

    npm install express mysql body-parser
    

    现在我们就可以使用home/getlist接口了么?我们的server服务还没有启动呢,启动有几个方法

    1、cmd到项目中server目录下执行 node index.js
    2、编辑器启动,我用的vscode

    启动服务以后,控制台打印“success listen at port:3000”,说明node服务已经启动了,如果报错,仔细看数据库的相关配置哦,别搞错了

    7、前端开始连接后台数据库

    export default {
        name: 'hello',
        data () {
            return {
                }
        },
        methods: {
            getList() {
                this.$http.get('/home/getlist',{}).then((response) => {
                    console.log(response);
                })
            }
        }
    }
    
    

    如果没有引用vue-resource,this.$http.post是不生效的,还会报错
    报错信息:

    Uncaught TypeError: Cannot read property ‘post’ of undefined
    解决方案:在main.js中引入vue-resource

    在根目录下还要安装vue-resource哦,如果用的axios也是一样,记得安装

    8、设置代理转发

    然后我们在前端目录下npm run dev执行getList方法,发现控制台报错404,那是因为直接访问8080端口,是访问不到的,这里需要设置一下代理转发。后端启动的服务是3000
    找到config目录下index.js中的proxyTable设置代理转发

    proxyTable: {
          '/api': {
            target: 'http://localhost:3000', // 你请求的第三方接口 
            changeOrigin: true, // 
            在本地会创建一个虚拟服务端,然后发送请求的数据,
            并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite: { // 路径重写,
              '^/api': '' // 替换target中的请求地址,也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
            }
          }
    

    这个时候接口地址前要加上api/home/getlist

    然后再重新启动npm run dev就可以看到数据,恭喜你!说明你的操作成功了。

    9、总结
    这是我花了两天空余时间研究出来的,突发兴趣,一下总结了几点容易犯的错误吧:

    1、mysql安装不小心,记得安装mysql server服务
    2、db.js文件配置数据库的用户名和密码记得别搞错了
    3、记得server搭建好了要启动服务
    4、vue中用到的express、axios、vue-resouce等,记得安装和配置
    5、设置代理转发
    6、mysql服务要启动

    希望能帮助到各位感兴趣的小伙伴

    展开全文
  • vue项目如何请求后端api? vue-cli脚手架生成的webpack标准模板项目 HTTP库使用axios 一、开发环境跨域与API接口服务通信 整体思路: 开发环境API接口请求baseURL为本地http://localhost:8080 为本地请求...

    背景

    vue项目如何请求后端api?

    vue-cli脚手架生成的webpack标准模板项目

    HTTP库使用axios

    一、开发环境跨域与API接口服务通信

    整体思路:

    • 开发环境API接口请求baseURL为本地http://localhost:8080
    • 为本地请求配置代理,代理目标服务器设置为接口服务所在地址或域名

    具体步骤如下:

    1、config/dev.env.js文件中配置baseURL

    module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      BASE_API: '"http://localhost:8080"' //配置为本地地址才会访问到本地虚拟的服务器,从而通过第1步中代理访问API服务,避免跨域
    })

    2、axios配置baseURL

    // 创建axios实例
    const service = axios.create({
      baseURL: process.env.BASE_API, // api的base_url
      timeout: 5000 // 请求超时时间
    })

    3、config/index.js文件中配置开发环境代理

    复制代码
    module.exports = {
      dev: {
    
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: { // 代理配置信息
          '/taskinfo': {
            target: 'http://192.168.162.22:8381/taskinfo', // API服务所在IP及端口号
            changeOrigin: true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,这样就不会有跨域问题(只适合开发环境)
            pathRewrite: {
              '^/taskinfo': '' // 重写路径
            }
          }
        },
    
    ……
      }
    }
    复制代码

    二、生产环境配置API接口服务信息

    生产环境直接指向API接口服务,使用IP或域名

    1、config/dev.env.js文件中配置baseURL

    'use strict'
    module.exports = {
      NODE_ENV: '"production"',
      BASE_API: '"http://192.168.162.22:8381/"' // API服务所在IP及端口,或域名
    }

    2、axios配置baseURL

    同开发环境,无需重复配置

    三、生产环境静态文件获取目录(静态文件独立部署)

    待续……

    转载于:https://www.cnblogs.com/zhq--blog/p/10206568.html

    展开全文
  • vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式。借助axios及node的express,在dev-server.js中实现后,重启项目,结果接口404了。代码如下: ...
  • 前言:在实际的项目中,面对大量的使用axios请求数据,会使项目代码又多又乱,封装接口API与Axios的重要性不言而喻,不仅可以使代码更加的简洁优雅,而且会使修改接口,维护代码变得更加简单清晰。 一.Axios的封装 ...
  • node接口时,session拿不到参数的一个原因是同时使用了127.0.0.1和localhost,这两者对于浏览器的session而言,并不是同一目标。 另外,在VUE项目中配置跟路由时,还有一个坑,如果conf的index中配置了跟路由,则...
  • Vue2、websocket 与node.js接口 本地测试 1. 安装vue-native-websocket模块 2. yarnaddvue-native-websocket 或者用 npminstallvue-native-websocket--save 3. 在main.js中引入websocket import websocket ...
  • vue本地设置请求接口及数据

    千次阅读 2018-09-20 20:32:00
    1、安装axios yarn add axios 2、在入口文件main.js中设置 import { getRequest, postRequest} from './libs/api';//导入 ...Vue.prototype.getRequest = getRequest;...Vue.prototype.postRequest = postRequest...
  • 这是第六篇,开始编写后台接口,为前端接口提供提供基础,主要讲node,koa2,redis,mysql的连接和接口的编写。 本文的目录一,连接mysql二,连接redis三,登陆、注册接口的编写 一,连接mysql 我们先创建一个conf...
  • 本地vue项目部署至服务器上

    千次阅读 2020-11-18 13:11:56
    跟着网上学习了一个vue项目,历经艰辛终于把它部署到阿里云服务器上。 工具:vscode navicat xshell filezilla vscode操作 :修改接口 1.把baseURL修改为自己的ip地址,原来的是本地的地址 端口号和后面的不用该...
  • 前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题。我初次配置跨域请求时由于...说明:本文项目基于 Vue CLI^4.3.0,Node.js v12.13.0. 和express ~4.16.1构建,未安装的话则需要...
  • vue项目连接后台数据库配置

    万次阅读 2019-05-04 10:53:42
    1、也就是项目如何配置生产...在使用vue-cli搭建项目以后,做相关配置就可以实现,不用手动更改接口路径,也可以请求不同环境下的接口. 首先现在vue项目里面找到config这个文件,配置里面的index.js , 代码如下: ...
  • vue项目中如何管理后台接口

    千次阅读 2018-03-14 09:44:12
    做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包,来回很是麻烦,今天网上...
  • 例如我们项目里axios的配置文件夹(自定义的)api下面的index.js文件里有如下配置 let env = process.env.NODE_ENV let BASE_1, BASE_2 if (env === 'production') {// 生产环境 正式打包使用 BASE_1 = BASE_2...
  • 写这个项目需要用到很多的依赖,node导入依赖也很方便,直接: let mysql=require('mysql') 以下是我做这个项目使用到的依赖: 后面都会一一来使用和介绍。 编写接口 编写接口之前需要配置数据库和写一个处理sql...
  • 但是,当项目推到线上的时候,我们会从真实服务器上获取接口,因此,我们可能在测试接口和真实接口之间频繁切换1.找到文件/config/dev.env.js/config/prod.env.js2、修改文件a、dev.env.js'use strict' const merge ...
  • vue项目中:统一封装 Axios 接口与异常处理

    万次阅读 多人点赞 2018-09-17 12:43:19
    如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!...在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截...
  • 使用Vue CLI新建的项目中,我需要使用本地数据进行测试,于是写了下面的数据请求: let url = '/src/assets/city.json' fetch(url).then(response => { return response.json() }).then(data => { conso....
  • 原有vue项目接入typescript 为什么要入typescript javascript由于自身的弱类型,使用起来非常灵活。 这也就为大型项目、多人协作开发埋下了很多隐患。如果是自己的私有业务倒无所谓,主要是对外接口和公共方法,...
  • 开发环境 config/dev.env.js ... NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/prod.env.js 'use strict' const merge = require('webpack-merge')
  • vue项目如何在node启动

    千次阅读 2019-01-11 17:55:00
    首先将vue项目通过命令npm run build 打包,然后创建start.js,代码如下:   // const userApi = require('./api');  const fs = require('fs');  const path = require('path');  const bodyParser = ...
  • vue简单接口封装

    2020-01-08 10:46:31
    接口请求,一般都会碰到跨域问题,在vue项目中,我们采用页面代理的方法解决跨域问题: 文件config——index.js文件 index.js 'use strict' // Template version: 1.2.7 // see http://vuejs-template...
  • 2,设置跨域 使用axios 的时候并不能跨域 要使用 target 插件 找到 vue 项目 config/index.js 文件 找到dev 修改 proxyTable设置 dev:{ . . . proxyTable:{ '接口名字':{//当这个接口在前台被调用的时候
  • vue项目本地打包运行

    2020-12-30 11:09:05
    目录一、项目运行需要依赖node.js环境二、安装cnpm三、安装vue-cli脚手架构建工具 需求:从git上拉下来一个前端vue代码,此时直接打开index.html是没有办法访问页面的,就像一个Java spring项目,直接运行main方法是...
  • 作者:小豪看世界来源:SegmentFault 思否社区前言本篇文章基于vuenode(koa)需求vue 项目开发过程中,接口跨域是一个很常见的问题。在开发时候可以用 vue 自带的 proxy 可以轻松解决。生产环境下,前端项目往往是...
  • Vue 简单配置公用接口地址

    千次阅读 2019-09-16 09:41:09
    Vue 简单配置公用接口地址 有时候需要本地和线上需要不同的接口地址, 这个时候可以根据 npm run build 判断 1. 首先配置 先新建一个 config.js 的文件 开发环境: 说明实在本地测试的时候链接的地址 测试环境: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,121
精华内容 4,048
关键字:

本地vue项目接node接口

vue 订阅