Vue+SpringBoot项目测试

Vue+SpringBoot项目测试

  我们做一个简单的项目功能测试一下这种前后端的开发方式。

功能需求

  项目功能需求:使用Vue编写前段内容，SpringBoot作为后端为其提供JSON数据。

Vue项目搭建

  Vue的项目搭建需要调出Vue的ui界面在ui界面中创建项目。

  调出命令行CMD，在其中输入vue ui就可以调出vue的项目管理器界面。

在Vue的项目管理界面中点击创建。

选择好要存放的路径，并点击创建

编写好要创建的项目名称，点击下一步。

选择手动配置，点击下一步。

勾选需要的插件功能。在这里我们选择了Bable、Router、Vuex。关掉了Lin/Formatter。点击下一步。

点击创建项目。

点击创建项目，不保存。

等待创建完成，我们就可以来到一个项目仪表盘。就代表项目创建成功。

可以点击任务，serve里面的运行，运行项目。

运行完之后可以访问localhost:8080就可以访问到初始页面。

Vue项目编写

我们用过IDEA将新创建好的Vue项目进行导入。

导入之后如下所示。

在控制台中输入 npm run sever 就可与运行Vue项目。

我们在views文件夹下创建并编写一个Book.vue文件。作为我们的项目的页面。

<template>
    <!--页面部分-->
    <div>
        <table>
            <tr>
                <td>编号</td>
                <td>图书名称</td>
                <td>作者</td>
            </tr>
            <!--通过循环获取到其中的信息-->
            <tr v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.author}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
    export default {
        name: "Book",
        data(){
            //虚假数据测试时使用
            return{
                msg:'Hello Vue',
                books:[
                    {
                        id:1,
                        name:'Java零基础实战',
                        author:'宁楠'
                    },
                    {
                        id:2,
                        name:'Vue零基础实战',
                        author:'张三'
                    },
                    {
                        id:3,
                        name:'Spring零基础实战',
                        author:'李四'
                    }
                ]
            }
        },
        created(){
            //通过跨端口传输,获取到SpringBoot里面的JSON数据
            const _this=this
            axios.get('http://localhost:8181/book/findAll').then(function (resp){
                _this.books=resp.data
            })
        }
    }
</script>
<style scoped>
</style>

我们在router文件夹下的index.js中编写跳转逻辑。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
//需要导入我们编写的页面
import Book from '../views/Book.vue'
Vue.use(VueRouter)
  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
//编写好页面跳转逻辑
  {
    path:'/book',
    component:Book
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

数据库内容

数据库的内容放在了文件夹里面的book.sql，在MySQL中创建一个新的数据库名为library，运行sql语句即可。

SpringBoot编写

通过IDEA创建一个SpringBoot项目。项目中导入Lombox、Spring Web、Spring Data JPA、MySQL Driver。

创建完之后，导入yml配置文件。数据库内容和端口设置。内容如下

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/library?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql: true
server:
  port: 8181

编写实体类。Book

@Entity
@Data
public class Book {
    @Id
    private Integer id;
    private String name;
    private String author;
}

编写实体类JPA接口。BookRepository

public interface BookRepository extends JpaRepository<Book,Integer>{
}

编写controller映射。BookHandler

@RestController
@RequestMapping("/book")
public class BookHandler {
    @Autowired
    private BookRepository bookRepository;
    @GetMapping("/findAll")
    private List<Book> findAll(){
        return bookRepository.findAll();
    }
}

编写配置器。Crosfig

@Configuration
public class Crosfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

跨端口传输配置

因为我们在8080端口上进行前段Vue项目的配置，在8181端口上部署我们的SpringBoot项目，所以想要在Vue上获取到SpringBoot的数据，就需要配置跨端口传输。以下是其中的一种方法。

我们通过配置Vue使Vue能够获取到SpringBoot中的JSON数据。

在vue项目的控制台上输入vue add axios 添加axios的扩展，代码中使用axios跨端口获取JSON数据。

效果展示

当我们启动Vue与SpringBoot项目时，链接访问localhost:8080/book

项目GitHub链接地址