前后端结合测试（Vue + Spring Boot）

该篇文章接前面的 Vue项目中实现简单的页面间跳转和 创建一个SpringBoot项目进行

版本说明

可在命令行或package.json中进行版本查看

• IDEA 2020.3.2
• node.js 10.15.1
• npm 6.4.1
• vue 2.9.6
• vue-cli 4.5.13
• axios 0.21.1
• element-ui 2.15.3
• vue-router 3.5.2

前端修改

项目目录结构图

添加依赖

在Terminal终端输入代码，安装axios模块

npm i axios --save

axios，作为前后端联系的桥梁，是一个http请求库,可用于客户端浏览器,也可以用于nodejs.

代码

• 删除HelloWorld.vue，在src/components下新建Login.vue，也可直接重命名（要修改相关文件）,代码如下

  // Login.vue
  <template>
    <div class = "login">
      <el-input class = "username" v-model="userData.username" placeholder="请输入用户名"></el-input>
      <br><br>
      <el-input  class = "password" placeholder="请输入密码" v-model="userData.password" show-password></el-input>
      <br><br>
      <el-button class="button1" type="primary" @click="toLogin()">登录</el-button>
    </div>
  </template>
  
  <script>
  export default {
       
    name: 'Login',
    data () {
       
      return{
       
        userData:{
       
          username: '',
          password: '',
        },
      }
    },
    methods: {
       
      toLogin(){
       
        this.$axios.post('/login', {
       
          username: this.userData.username,
          password: this.userData.password
        })
            .then(successResponse => {
       
              if (successResponse.data.code === 200) {
       
                this.$router