vue-element-spring Boot前后端分离

标签: vue  spring boot

一、下载element
官网:https://element.eleme.cn/#/zh-CN/component/installation
1.在项目的目录下,下载element,当然你可以不用,下了更方便

cnpm i element-ui -S

2.在main.js中写

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

二、下载axios
官网:http://www.axios-js.com/docs/
1.用axios来发送和请求,下载axios

$ cnpm install axios

2…在main.js中写

import axios from 'axios'
Vue.prototype.$axios = axios

最后main.js是这样的

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.use(ElementUI)
Vue.prototype.$axios = axios
Vue.config.productionTip = false

三、后台创建和部署的话,太多,我太懒,而且每个人学的习惯,和写发方式不一样,不误导
四、其他的不说,就说一下跨域、前端请求、后台获取数据、后台传给前台json、前台接收数据
1.跨域,我就要先说跨域,可以说都是要做的
在config下找到index.js,然后找到在
在这里插入图片描述
在proxyTable中写

proxyTable: {
      '/api': {
              target: 'http://localhost:8080',//地址,公共部分
              changeOrigin: true,
              pathRewrite: {
                '^/api': '/' //把地址里的api替换成/
              }
            }
    },

在到main.js中写

Vue.prototype.HOST = '/api'

在地址前加上就跨域完成

this.HOST

2、前端请求和接收
在这里插入图片描述

 		var url=this.HOST+"/user/list";//地址,跨域加上this.HOST
      var that=this;//在成功后无法用this
      this.$axios.post(url,{
      //参数
        username:that.userInfo.username,
        password:that.userInfo.password
      })
      .then(function (response) {
        console.log(response.data);
        //userlist,接收数据
        that.userlist=response.data
      })
      .catch(function (error) {
        console.log(error);
      });

3.后台获取和返回json

	@ResponseBody
    @RequestMapping(value = "/list",method = RequestMethod.POST)
    public List<User> list(@RequestBody User user){//注意这里用@RequestBody
        System.out.println(user);
        return userService.list(user);
    }

版权声明:本文为qq_43270941原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43270941/article/details/103434047