精华内容
下载资源
问答
  • vue 获取后端数据

    千次阅读 2019-09-29 15:25:59
    1、vue-resource从后端请求我们需要...模拟后端数据,启动测试服务器 注意哦:最新的(我用的3.6)webpack 的build目录下删除了dev-server.js , 在webpack.dev.conf.js这个文件中编辑。 圈1//webpack.dev.conf...

    1、vue-resource从后端请求我们需要的数据

    下载安装npm install vue-resource

    装完之后重新启动项目

     

    模拟后端数据,启动测试服务器 

    注意哦:最新的(我用的3.6)webpack 的build目录下删除了dev-server.js ,

    webpack.dev.conf.js这个文件中编辑。

     

    圈1//webpack.dev.conf.js

    //第一种模拟服务器json-server

    //json-server 模拟后端数据,启动测试服务器 只能get 获取数据

    //安装npm install json-server

    const jsonServer = require('json-server')
    const apiServer = jsonServer.create()
    const apiRouter = jsonServer.router('db.json')
    const middlewares = jsonServer.defaults()

     

    apiServer.use(middlewares)
    apiServer.use('/api',apiRouter)
    apiServer.listen(8001, () => {
    console.log('JSON Server is running')
    })
    //end json-server

     

    //第二种模拟服务器 不需要安装,get post 都支持    (推荐)

    var express = require('express')


    var apiServer = express()
    var bodyParser=require('body-parser')
    apiServer.use(bodyParser.urlencoded({extended:true}))
    apiServer.use(bodyParser.json())
    var apiRouter = express.Router()
    var fs = require('fs') //node自带的fs
    apiRouter.route('/:apiName') //指的是/api 下一级的路由路径名字
    .all(function (req, res) { //all只得是get post都支持
    fs.readFile('./db.json', 'utf8', function (err, data) {
    if (err) throw err
    var data = JSON.parse(data)
    if (data[req.params.apiName]) {
    res.json(data[req.params.apiName])  
    }
    else {
    res.send('no such api name')
    }

    })
    })
    apiServer.use('/api', apiRouter);
    apiServer.listen(8001, function (err) {
    if (err) {
    console.log(err)
    return
    }
    console.log('Listening at http://localhost:' + 8001 + '\n')
    })

    //end测试服务器

    圈2//在config 文件夹下的index.js 里面找到dev

    //添加代理服务器

    proxyTable: { // 服务器端代理
    '/api/':'http://localhost:8001/' //就是访问8000端口下的/api路由的时候,其实是访问的代理端口8001
    }

     同时build > webpack.dev.conf.js >由 apiServer.use(apiRouter) > 改为 apiServer.use('/api',apiRouter)

    快看!!接收到了请求代理服务器的数据  哈哈哈好开心

     

     

    可以把后台模拟数据写在devServer中

    圈3//在webpack.dev.conf.js找到devServer

    before(app) {

      app.get('/api/someApi', (req, res) => {
        res.json({ // 这里是你的json内容 })  }) }

     

    圈4 箭头函数里面的this 是代码环境下的 this 而不是执行环境下的 this

     

     

    转载于:https://www.cnblogs.com/Home-Yzz/p/8595785.html

    展开全文
  • 用axios从后端获取了一个list,list包含id和name两项。前端使用下拉菜单。 <p><img alt="" height="302" src="https://img-ask.csdnimg.cn/upload/1622359546581.png" width="1093" />设另一输入框的v-model...
  • 今天做项目时后端有一个要展示到页面上的附件需要前端获取,我获取到了那个附件的信息,但打印fj.name或fj.url时控制台就会显示undefined,后来才发现是json数据没有解析对,应该使用JS...

    今天做项目时后端有一个要展示到页面上的附件需要前端获取,我获取到了那个附件的信息,但打印fj.name或fj.url时控制台就会显示undefined,后来才发现是json数据没有解析对,应该使用JSON.parse来从字符串里解析出json对象:

    this.init.fj = JSON.parse(response.data.map.init.fj)
    然后在页面渲染的时候用v-for循环遍历:
    1 <el-form-item label="附件:">
    2     <a :href="item.url" v-for="item in init.fj" class="fj"><i class="el-icon-document"></i>{{item.name}}<br/></a>
    3 </el-form-item>

     


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • } } 4、为了方便打包后去除'/api',建议把'/api'设成全局,在main.js中添加 Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/apis' 调用接口的时候的url就可以写成api + '接口地址'

    1、打开config下面的index.js,找到proxyTable,添加以下代码即可:

    '/apis': {
        target: 'http://localhost',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/apis': ''   //这里会把path路径的【/apis】替换成空,
        }              
    }

    2、配置完之后需要重启下项目 npm run dev。重启之后,就可以调用,实现跨域了

     

    3、

    export default {
        name: 'Header',
        data(){
            return {
    
            }
        },
        created:function(){
            this.$http.get('/apis'+'你的api地址').then(function(response) {
                return response.json();
            }).then(function(data) {
                console.dir(data);//得到的数据
            }).catch(function(e) {
                console.dir(e);
            });
        }
    }

     

    4、为了方便打包后去除'/api',建议把'/api'设成全局,在main.js中添加 

     Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/apis' 

    调用接口的时候的url就可以写成api + '接口地址'

    展开全文
  • Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。,此时获取关于此dom的一切操作都是无效的,怎么办?在nextTick的回调中执行即可。$nextTick 是在下次 DOM 更新循环结束之后...

    一般放到created即可。
    如果你修改了某个dom中的数据,视图并不会立即更新。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。,此时获取关于此dom的一切操作都是无效的,怎么办?在nextTick的回调中执行即可。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。

    展开全文
  • 最近在用echarts做数据可视化,从后端接收数据成为至关重要的一步(第一次ಥ_ಥ 然后查了一下最简单的接收例子是这样的(来源): created(){ this.$http.get("http://jsonplaceholder.typicode.com/users") ....
  • 今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。 先看下效果图: 页面效果: 点击 导出Excel 调用导出接口成功了: 后台...
  • 本人对vue后端数据交互不是很懂,搜索了很多关于vue后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: ...
  • async getDataList() { const _res = await this.$... caseNumbers: ['cdx12', '131'], columns: this.codeCol, },{responseType: 'arraybuffer'}) let blob = new Blob([_res.data], { type: 'application/vnd.ms-
  • 后端返回图片数据流,打印结果是乱码,如下: Chrome浏览器的preview中可以看到二维码(图片),如下: 解析思路: 尝试用二进制大对象Blob解析,然后生成图片的URL,代码如下: // QRCode 为后端接口返回的图片...
  • 后端项目框架:beego 实现功能:从数据库中读取数据绑定到选择菜单栏 前端定义请求的路由地址 文件:src/api/demands.js // 获取集群列表 export const getClusterList = ()=>{ return SiodAxios.request( { ...
  • vue处理后端数据

    2021-08-05 19:58:02
    方法一:如果后端是已类的方式传递给前端数据,...方法二:vue请求后端返回的数据res[object object] 使用JSON.stringify()和JSON.parse()转化 返回的数据显示res[object object]是不可读状态的解决办法: ...
  • 如果要用vue2.0进行前后端分离官网提供了一个插件:vue-resource,安装方法我就不在这里介绍了官网有记得要...但是有一点是不同的就是ajax获取到的数据会自动转成json格式,而vue-resource获取到的数据要手段转成jso...
  • Vue+axios获得后端数据并展示

    千次阅读 2020-05-31 21:48:46
    Vue中利用axios客户端实现对后端数据的处理与展示。 首先,安装axios: 利用npm安装: npm install axios ...对于获取后端数据,课使用axios的get方法: axios.get('api').then(res=>{ //alert("111"); this.
  • 一,安装vue中安装echarts,axios和vue-axios npm install echarts -S npm install axios npm install --save vue-axios 二,全局引入echarts和axios main.js import echarts from 'echarts' import echarts from '...
  • 后端传送过来的一个 map集合,获取成功了,但是无法调用,数据就在眼前,想通过 v-for 渲染,就是调不出来。 经过大神解惑,map的原理是 K V ,映射关系,调用的时候是 map.key 问题重现: 后端传送过来的map数据...
  • 前端VUE访问后端接口获取列表数据报序列化错误,具体错误 前端访问接口报错截图 后端响应信息 2021-08-07 13:33:10,832 WARN --- [http-nio-8741-exec-4] o.s.w.s.m.s.DefaultHandlerExceptionResolver : Resolved ...
  • 主要介绍了详解vue渲染从后台获取的json数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue element admin从后端获取数据动态生成路由 登录、获取角色什么这些简单,按照后台调用vuex再调用接口就完事了。 以上截图的例子与后端接口有关,没有接口前端可以也可以自行模拟。先看后端接口返回的数据格式是...
  • Vue+iview---从后端获取数据并且渲染到表格上

    万次阅读 热门讨论 2019-03-18 20:51:23
      订餐系统前端使用的是vue框架,基于iview组件,前后端分离,所以需要从后端获取表格中的数据并且渲染到表格上。 方法介绍  1.整体介绍  2.方法介绍  2.1 时间绑定 请选择时间段: <DatePicker type=...
  • 目录获取的json数据vue & axios 处理后端返回数据index.vue运行界面点击 `点击 jump_to_new_tab` 按钮点击首页中的 `点击`点击 `点击 jump_to_self` 按钮注意 获取的json数据 {“status”:"success","data":...
  • vue前端是主域名,用js-cookies获取不到cookies,且axios已经设置withCredentials: true,这是怎么回事?如果有效域名是主域名或带点的主域名(.xxx.cn)就可以获取,但是后端...
  • get请求获取后端传来的图片流不能直接再页面进行展示,需要在接口处进行转化再赋值,转化的方式就是 window.URL.createObjectURL( ) ,将图片流转化为本地请求地址。 let res= await this.$http.get('url',{ ...
  • vue后端获取数据绑定复选框

    千次阅读 2019-06-26 08:20:07
    首先看后端传过来的数据是什么形式的, 如果是布尔类型的话可以直接绑定 <input name="checkbox" v-bind:value="good.id" v-bind:checked="good.checked" type="checkbox" class="checkbox" @click="changeStatus...
  • vue搭建的前端项目中运用axios实现前后台数据交互及开发过程中跨域问题的解决:https://blog.csdn.net/qq_40773976/article/details/82496940 使用vue-cli+axios配置代理进行跨域访问数据:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,892
精华内容 13,556
关键字:

vue获取后端数据

vue 订阅