vue+springboot

使用vue+springboot 完成前后端分离，实现查询数据库中的数据并展示

1.创建vue项目，创建springboot项目。

使用指令在黑窗口创建vue项目，执行指令

vue init webpack "项目名"

在创建项目的时候，选择安装路由，router，安装npm

然后还需要安装element-ui axios 以及 qs

npm install element-ui -S

npm install axios

npm install qs

安装完成之后，在main.js中引入这三项

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import qs from 'qs'

Vue.use(ElementUI)

Vue.prototype.$axios = axios.create({
baseURL:'http://localhost:8083/',
withCredentials:true
});
Vue.prototype.$qs = qs;

对于springboot项目要引入依赖

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>
</dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.46</version><scope>runtime</scope>
</dependency>
<dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.2.5</version>
</dependency>
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.1</version>
</dependency>
<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional>
</dependency>

2.在vue 项目中创建一个新的vue组件，用来存放table表格

<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="userid"
label="id">
</el-table-column>
<el-table-column
prop="username"
label="姓名">
</el-table-column>
<el-table-column
prop="userpwd"
label="密码">
</el-table-column>
<el-table-column
prop="salt"
label="盐值">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
<el-button type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>

编写脚本，向后端发出axios请求，查询全部的用户数据

<script>
export default {
data() {
return {
tableData:[]
}
},
methods: {
showTable() {
this.$axios({
method: 'get',
url: 'user/queryAll'
}).then( result => {
this.tableData = result.data.data
})
}
},
created() {
this.showTable()
}
}
</script>

创建 HomePage组件，项目运行的时候，默认直接展示HomePage，并且将查询出的用户数据在HomePage中进行展示

<template>
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:router="true">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>操作</span>
</template>
<el-menu-item-group>
<el-menu-item index="/showUser">查询全部</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</template>

<script>
export default {
name: ""
}
</script>

<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}

.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}

.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}

body > .el-container {
margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

3.编写springboot项目，创建一个配置文件，让前端发出的请求可以被后端接收，并且前端可以接收到后端返回的数据

package com.hyn.vueshiro.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CrossConfig {@Beanpublic CorsFilter corsFilter() {final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();final CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.setAllowCredentials(true);corsConfiguration.addAllowedHeader("*");// 前端路径corsConfiguration.addAllowedOrigin("http://localhost:8080");corsConfiguration.addAllowedMethod("*");source.registerCorsConfiguration("/**", corsConfiguration);return new CorsFilter(source);}
}

vue+springboot相关推荐

Java项目:仿小米商城系统(前后端分离+java+vue+Springboot+ssm+mysql+maven+redis)
源码获取:博客首页 "资源" 里下载! 一.项目简述本系统功能包括: 基于vue + Springboot前后端分离项目精简版仿小米商城系统,注册登录,首页展示,商品展示,商品 ...
Linux入门最终集！ Vue SpringBoot Mybatis-Plus Linux 阿里云！
Linux入门最终集! Vue & SpringBoot & Mybatis-Plus & Linux & 阿里云! 一.Xshell连接时出现警告 The remot ...
【vue+springboot】excel模板下载、导入功能实现
基于VUE+SpringBoot实现excel模板下载.导入功能背景最近在工作中经常遇到批量导入的功能,而且前端还要提示导入成功几条.失败几条.哪一条数据重复.是哪一条导入的数据出现问题等,抽空写 ...
入门vue+springboot项目
介绍为了应付毕业设计,花了一个多月学习了vue+springboot做一个项目.现在把项目的一些架构和重点整理一下. 1.vue前端 vue主要还是配置问题,我在项目中用到的ajax和element ...
V部落博客管理平台开源啦! Vue+SpringBoot强强联合！ 1
V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发. 演示地址: http://45.77.146.32:8081/index.html 项目地址:https://github.co ...
计算机毕业设计-基于神经网络APP-整合Vue+SpringBoot+TensorFlow框架-诗联AI
诗联AI-基于神经网络APP-整合Vue+SpringBoot+TensorFlow框架目录诗联AI-基于神经网络APP-整合Vue+SpringBoot+TensorFlow框架 1.项目整体概 ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...
【024】Vue+Springboot+mysql员工考勤管理系统(多角色登录、请假、打卡)(含源码、数据库、运行教程、实验报告)
前排提示:项目源码已放在文末基于Vue+Springboot+mysql员工考勤管理系统(多角色登录.请假.打卡) 开发环境:Springboot+Mysql+Vue+Nodejs+Maven+JD ...
计算机毕业设计-基于VUE+SpringBoot+MyBatis+MySQL的学生作业管理系统
简介基于VUE+SpringBoot的学生成绩管理系统,支持在线做作业和学生分数段统计. 1.项目功能概述 1.1学生功能概述 (1)登录功能学生输入姓名密码即可完成登录 (2)浏览作业信息学生 ...
Vue+SpringBoot图书管理系统前后端分离（教你一步一步搭建）
Vue+SpringBoot图书管理系统前后端分离(教你一步一步搭建) 介绍: 说明: 环境搭建后端环境搭建 1.新建一个工程(只有收费版的idea才有这个选项哦) 2.选择Java8 4.配置工程 ...

vue+springboot

vue+springboot相关推荐

最新文章

热门文章