你的vue起步

   最近刚开始接触vue这个比较流行的框架,自己的目标是前端工程师，所以想把自己的学习经历和大家一起分享，共同进步

如果你已经开始动手操作你的vue,那我觉得你值得继续看下去，但是如果你从未接触过我建议你先看一下vue的官方文档

链接：https://cn.vuejs.org/v2/guide/

①介绍vue是如何获取后端数据的，目前的开发都是前端和后端的开发是独立完成的，只需要接口的链接即可，如果这个时候你能看到第一步该怎么获取数据，接下的进程自然也会很好学

工具webstorm idea

首先在你新建的webstorm项目里src文件建这样一个含这样代码的文件

我命名为api

适用范围：你需要获取对应

这个接口提供的数据，需要传i一个参数这样举例为id 你定义你需要的即可

http://localhost:8090/api/show/`

import axios from 'axios';
import config from './config';

export default {
  show(id, success, failure) {
    axios.get(`http://localhost:8090/api/show/${id}`, config).then((response) => {
      success(response);
    }).catch((error) => {
      failure(error);
    });
  },
};

我来介绍一下代码的含义

上面的import输入学过python的都懂，但是如果没有建议百度看一下 Python中import

show里的第一个参数为id,即页面会有一个地方显示了id,然后下一个事件是传入id获取数据再显示

第二个参数即显示获取成功，后一个当然是失败，这里的then(response)中的response即为从接口获取到的数据

那么idea的接口定义是什么样子呢？

@RestController
public class Demo {
    @RequestMapping(value= "/api/show/{id}")
    public ViewModel show(@PathVariable String id)
    {
        return new ViewModel(id);
    }

ViewModel

public class ViewModel {

    private String Title;
    private String Entitle;
    private String id;
  

    public String getTitle() {
        return Title;
    }

    public void setTitle(String title) {
        Title = title;
    }

    public String getEntitle() {
        return Entitle;
    }

    public void setEntitle(String entitle) {
        Entitle = entitle;
    }

    public String getid() {
        return id;
    }

    public void setid(String id) {
        id = id;
    }


    public ViewModel(String id) {

        this.Title = "title1";
        this.Entitle = "entitle1";
        this.id = id;
     
    }
}

这样当点击show事件的时候就可以获取到对应的数据，那到底怎么看到数据呢

建一个show.vue写入这行代码

<button @click="show('123')">显示</button>

methods: {
  ...mapActions('api/show', [
    'show',
  ]),
},

设置好路由的时候就可以看到获取的数据

建议在vue的调试工具上看

请自行百度 vue 调试工具