Java 代码编程 前端页面

SpringBoot+Vue+ElementUI初步整合

By 黯然gg #ElementUI, #Java, #SpringBoot, #Vue

要实现的效果

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

项目地址：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，就这样。

By 黯然gg

Related Post

Java

修改ZooKeeper Kafka底层offset值

黯然gg
Java

上传jar包到本地maven仓

黯然gg
Java

maven 删除.lastUpdated文件脚本

黯然gg

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

推荐文章

Java

修改ZooKeeper Kafka底层offset值

Linux

清理Hadoop集群磁盘

Linux 软件使用

密码保护：微信机器人说明

软件使用

MacOS使用指令