SpringBoot+Vue+ElementUI初步整合

要实现的效果

首页列表展示所有的接口,详情页展示接口的具体信息,还有测试接口的表单

项目地址:https://github.com/AnRan-727/AnRanUtils

开始实现

Idea启动Vue

上篇文章已经建好vue项目了,现在vue整合elementUI

我比较习惯再idea开发所以就在idea了

启动一下看看,输入npm run dev

没问题,浏览器访问8080端口跟上篇文章一样

安装ElementUI

整合ElementUI,他的官网有说明

用npm的命令安装就行

npm i element-ui -S

引用ElementUI

装好了   项目内引用

src目录下的main.js文件,我框住的这三行就是引入代码,elementUI的官网有说明

发现没  我的没有后面的分号,原因是我上篇里那个代码校验选的Yes   我要是加了分号就会报错

测试ElementUI

接下来随便引入一个样式看看

就在components目录的HelloWorld文件里写elementUI的样式吧

现在是这样的

引入按钮吧就   ,看官网  然后写

直接复制进来就可以了,看效果:

先简单美化一下

先弄App.vue。

<template>
  <div id='app'>
    <div class="layout">
      <el-container>
        <!-- 顶部 -->
        <el-header>
          Api工具箱
        </el-header>
        <!-- 内容 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- 页脚 -->
        <el-footer>
          <span>Copyright © 2021 Api工具箱</span>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.el-header {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 20px;
  line-height: 60px;
}

.el-main {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 20px;
}

.el-footer {
  align-content: center;
  text-align: center;
  font-size: 10px;
  padding-top: 20px;
}

.layout {
  font-family: 'FangSong', Georgia, '黑体', 'KaiTi', 'DFKai-SB', sans-serif;
  font-weight: bold;
  line-height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.el-container {
  height: 100%;
}
</style>

 

 

效果如图,加了个头,加了个脚,容器也是ElementUI的,样式和字体是后加的,代码里也有

再写个页面访问一下

现在中间这一块儿的内容是在HelloWorld里显示的,咱不要了,去掉,自己整个页面

src目录下创建个views目录,然后在里面创建一个Home页面,随便写点东西

接下来引用这个页面,照着引用HelloWorld的引用写法写就行,在router目录(路由)下的index.js里

path:'/'就是访问路径(/表示默认进入的页面,/hello的意思就是在浏览器里要是想跳转到HelloWorld页面就访问/hello路径)

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/views/Home'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

先启动看一下会不会在Home页面里

 

没问题,然后去HelloWorld页面看看

也是没问题的,Home里简单做个div   点击跳转到HelloWorld页面

代码里@click.native ,@click就是vue里点击事件的简写,vue写法是完整写法是v-on:click ,后面的.native是给vue组件绑定事件时候用的,必须加上native ,不然不会生效,刚开始没加,死活不知道问题所在,百度找到的。里面的就是正常的方法

vue里方法的声明是在export default里写的,添加一个属性methods(方法集),在这个里面写方法,就跟下面的代码一样,注意,方法名跟后面的圆括号,花括号中间必须加空格!!原因还是因为创建项目的时候选了代码校验了。

this.$.router.push() 就是跳转,{path: '/hello'} path里的值就是上面路由里的path值

<template>
  <div>
    <el-card class="box-card" shadow="hover" body-style="border-radius:50px;" @click.native="toApiInfo()">
      <div class="text item">
        接口名称
        <br>
        接口地址
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods: {
    toApiInfo () {
      this.$router.push({path: '/hello'})
    }
  }
}
</script>

<style scoped>

.text {
  font-size: 14px
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 150px;
  display: inline-block;
  margin: 10px;
}
</style>

 

 

这样就可以点这个div跳转到HelloWorld页面了

带参数跳转

其实就是在this.$router.push({path: '/hello'}) 里加个query属性而已,

this.$router.push({path: '/hello', query: {id: '1'}})

加上之后在HelloWorld页面里调用一下看看,把页面里的乱七八糟的先删了  只留下一排按钮,不然看着太乱了

解释一下,页面里要用的属性,必须在data 的 return 里有声明,不然用不了

created()就是在页面加载之后调用的方法,我这里在页面加载之后调用了一个方法(因为后边会用传过来的这个id去获取接口的详情,然后加载到页面上),用来给这个页面的id赋值

<template>
  <div class="hello">
    <h1>
      传过来的参数:{{ id }}
    </h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      id: ''
    }
  },
  created () {
    this.getParams()
  },
  methods: {
    getParams () {
      this.id = this.$route.query.id
    }
  }
}
</script>

<style scoped>

</style>

 

效果如图:

 

接下来前后端结合

集成SpringBoot

先启动个SpringBoot项目,我这儿设置的SpringBoot的端口是8000

自己随便写个Controller就可以,这个接口我就用来在首页展示接口列表,就跟文章开篇第一个图片一样,动态展示接口列表

再写一个获取详情的接口

再写个form表单提交的接口

使用axios

平常跟后端交互用的一直都是ajax,在vue里咱用axios,同样,先安装axios,指令:npm install axios

安装完成后集成到项目里,src路径下的main.js里

先import导入axios,然后给Vue原型上加个$axios属性,后面等于的就是导入的那个,Vue.prototype.$aixos=axios

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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.config.productionTip = false

Vue.prototype.$axios = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 

get获取

现在去调用后端的接口获取列表,在Home页面里写,因为这个作为默认页了

因为是多个那个小盒子,所以直接循环那个小盒子就可以,直接在el-card上加循环就可以

v-for是vue的循环写法看官方文档就可以,{{ XXX }} 就是读取下面data里的属性的写法,里面的代码就是通过dataArray集合的下标点出属性呗

this.$axios.get 相当于ajax的$ajax.get,有get就是post,这个后边再说,then里就是接口请求成功之后执行的代码,catch里就是接口请求失败之后执行的方法

<template>
  <div>
    <el-card class="box-card" shadow="hover" body-style="border-radius:50px;" v-for="(v,i) in dataArray" :key="i" @click.native="toApiInfo()">
      <div class="text item">
        {{ dataArray[i].name }}
        <br>
        {{ dataArray[i].path }}
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      dataArray: []
    }
  },
  created () {
    this.$axios.get('http://localhost:8000/qrcode/getApiList').then(resq => {
      this.dataArray = resq.data.data
    }).catch(resp => {
      this.$alert('获取Api列表失败!!!', '温馨提示')
    })
  },
  methods: {
    toApiInfo () {
      this.$router.push({path: '/hello'})
    }
  }
}
</script>

<style scoped>

.text {
  font-size: 14px
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 150px;
  display: inline-block;
  margin: 10px;
}
</style>

效果图

这就跟文章开头的那个一样了,现在不管点哪个都是跳转到HelloWorld页面,接下来再加工一下

因为要根据不同的接口看不同详情,所以这个时候就用到上面说了的那个跳转页面的时候带参数了

先把这个接口的唯一id当做参数传过去,改下代码,在点击事件里把这个小盒子里的参数对象传下来,把id给HelloWorld页面传过去

<template>
  <div>
    <el-card class="box-card" shadow="hover" body-style="border-radius:50px;" v-for="(v,i) in dataArray" :key="i" @click.native="toApiInfo(dataArray[i])">
      <div class="text item">
        {{ dataArray[i].name }}
        <br>
        {{ dataArray[i].path }}
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      dataArray: []
    }
  },
  created () {
    this.$axios.get('http://localhost:8000/qrcode/getApiList').then(resq => {
      this.dataArray = resq.data.data
    }).catch(resp => {
      this.$alert('获取Api列表失败!!!', '温馨提示')
    })
  },
  methods: {
    toApiInfo (v) {
      this.$router.push({path: '/hello', query: {id: v.id}})
    }
  }
}
</script>

<style scoped>

.text {
  font-size: 14px
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 150px;
  display: inline-block;
  margin: 10px;
}
</style>

 

这就可以了,然后去HelloWorld页面根据这个id获取详情展示到页面。

获取详情并展示

用的就是elementUI的样式,一个描述的那个还有表格,表格的话用:data="XXX"绑定的就是你的对象集合,里面的prop就是对象的属性

<template>
  <div style="width: 80%;margin: 0 auto;">
    <div class="el-card-div">
      <el-card shadow="hover" border-radius='130'>
        <el-descriptions title="接口信息" :column="2" :colon="false" border>
          <el-descriptions-item label="接口名称:">
            {{ name }}
          </el-descriptions-item>
          <el-descriptions-item label="请求方式:">
            {{ request }}
          </el-descriptions-item>
          <el-descriptions-item label="请求地址:">
            {{ path }}
          </el-descriptions-item>
          <el-descriptions-item label="支持格式:">
            {{ format }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <div class="el-card-div">
      <el-card shadow="hover" style="text-align: left">
        <span style="font-size: 16px;">接口参数</span>
        <el-table :data="paramData">
          <el-table-column prop="param" label="参数名称"></el-table-column>
          <el-table-column prop="check" label="是否必填"></el-table-column>
          <el-table-column prop="type" label="参数类型"></el-table-column>
          <el-table-column prop="name" label="参数说明"></el-table-column>
        </el-table>
      </el-card>
    </div>

    <div class="el-card-div">
      <el-card shadow="hover" style="text-align: left">
        <span style="font-size: 16px;">返回说明</span>
        <el-table :data="resultData">
          <el-table-column prop="col" label="字段名称"></el-table-column>
          <el-table-column prop="type" label="字段类型"></el-table-column>
          <el-table-column prop="dest" label="字段说明"></el-table-column>
        </el-table>
      </el-card>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      id: '',
      name: '',
      request: '',
      format: '',
      path: '',
      paramData: [],
      resultData: []
    }
  },
  created () {
    this.getParams()
  },
  methods: {
    getParams () {
      const id = this.$route.query.id
      this.$axios.get('http://localhost:8000/qrcode/getApiDetail', {
        params: {
          id: id
        }
      }).then(res => {
        const data = res.data.data
        this.id = data.id
        this.name = data.name
        this.request = data.request
        this.format = data.format
        this.path = data.path
        this.paramData = data.param
        this.resultData = data.result
      }).catch(reason => {
        this.$alert('请求失败!!!', '温馨提示')
      })
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}

.el-card-div {
  margin: 10px;
}
</style>

 

可以看到跟文章开篇的图二一样了,接下来做个开篇图三的测试运行的form表单提交

加个form表单就可以,就加到返回说明的下面,:model数据绑定。:rules表单提交的校验规则,就是data里result里的那个formRules属性,url里的参数{required: true, message: '请输入网络图片链接!', trigger: 'blur'} ,第一个是否必填,第二个提示语,第三个触发事件(失去焦点)

<template>
  <div style="width: 80%;margin: 0 auto;">
    <div class="el-card-div">
      <el-card shadow="hover" border-radius='130'>
        <el-descriptions title="接口信息" :column="2" :colon="false" border>
          <el-descriptions-item label="接口名称:">
            {{ name }}
          </el-descriptions-item>
          <el-descriptions-item label="请求方式:">
            {{ request }}
          </el-descriptions-item>
          <el-descriptions-item label="请求地址:">
            {{ path }}
          </el-descriptions-item>
          <el-descriptions-item label="支持格式:">
            {{ format }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <div class="el-card-div">
      <el-card shadow="hover" style="text-align: left">
        <span style="font-size: 16px;">接口参数</span>
        <el-table :data="paramData">
          <el-table-column prop="param" label="参数名称"></el-table-column>
          <el-table-column prop="check" label="是否必填"></el-table-column>
          <el-table-column prop="type" label="参数类型"></el-table-column>
          <el-table-column prop="name" label="参数说明"></el-table-column>
        </el-table>
      </el-card>
    </div>

    <div class="el-card-div">
      <el-card shadow="hover" style="text-align: left">
        <span style="font-size: 16px;">返回说明</span>
        <el-table :data="resultData">
          <el-table-column prop="col" label="字段名称"></el-table-column>
          <el-table-column prop="type" label="字段类型"></el-table-column>
          <el-table-column prop="dest" label="字段说明"></el-table-column>
        </el-table>
      </el-card>
    </div>

    <div class="el-card-div">
      <el-card shadow="hover" style="text-align: left">
        <span style="font-size: 16px;">测试运行</span>
        <el-form :model="formData" :inline="true" :rules="formRules" class="form-inline">
          <el-form-item label="图片链接" prop="url">
            <el-input v-model="formData.url" placeholder="图片链接"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      id: '',
      name: '',
      request: '',
      format: '',
      path: '',
      paramData: [],
      resultData: [],
      formData: {
        url: '',
        file: {}
      },
      formRules: {
        url: [
          {required: true, message: '请输入网络图片链接!', trigger: 'blur'}
        ]
      }
    }
  },
  created () {
    this.getParams()
  },
  methods: {
    getParams () {
      const id = this.$route.query.id
      this.$axios.get('http://localhost:8000/qrcode/getApiDetail', {
        params: {
          id: id
        }
      }).then(res => {
        const data = res.data.data
        this.id = data.id
        this.name = data.name
        this.request = data.request
        this.format = data.format
        this.path = data.path
        this.paramData = data.param
        this.resultData = data.result
      }).catch(reason => {
        this.$alert('请求失败!!!', '温馨提示')
      })
    },
    onSubmit () {
      let _this = this
//new一个URLSearchParams对象,把要请求的参数append进去  代码复制进去之后记得把注释删了  不然报错
      let param = new URLSearchParams()
//  遍历整个表单,把参数append到URLSearchParams里面
      for (let key in _this.formData) {
        param.append(key, _this.formData[key])
      }
//然后post提交,把参数带上
      this.$axios.post('http://localhost:8000/qrcode/url', param).then(res => {
        this.$alert(res.data, '请求返回')
      })
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}

.el-card-div {
  margin: 10px;
}
</style>

 

提交的代码写在提交的点击事件里的onSubmit的方法里,new一个URLSearchParams对象,遍历整个表,把要提交的参数append进去,然后post提交就可以了

 

有没有发现,每个请求都要写同样的http://localhost:8000,而且在你调用不支持跨域的项目接口的时候可能还会调不通,这个时候前端就可以设置一下了

在config的index.js里设置一下proxyTable属性,加上下面这段代码就可以了

      '/api': {
        target: 'http://127.0.0.1:8000/',
        chunkOrigins: true,//允许跨域
        pathRewrite: {
          '^/api': ''//路径重写 使用“/api”代替target
        }
      }

 

 

这个时候你可以把烦人的http://localhost:8000省略了,替换成/api就可以了

诶   每次还得写个/api,也很烦,就是不想写,可以同样,再配置一下,在src的main.js里加一行代码

axios.defaults.baseURL = '/api'

大概意思就是axios的每个请求都默认加上/api,这样就可以不用在刚刚的那些地方加/api了,再改一下

可以把这个HelloWorld提出来,毕竟不太好看,同样放到views目录里,起个名叫ApiInfo,改一下路由里的引用就可以了

OK,就这样。

版权声明:
作者:黯然gg
链接:https://3zi.cn/archives/577
来源:阿龙爱吃肉
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录