SpringBoot+Vue项目快速入门
文章目录
- 1. 项目技术选型
- 2.数据库设计
- 3. 后台搭建
-
- 3.1 引入依赖
- 3.2 swagger配置
- 3.3实体类
- 3.4 自动填充配置
- 3.5 Mapper
- 3.6 service
- 3.7 controller
- 4. 前端搭建
-
- 4.1 环境搭建
-
- 4.1.1 Node环境
- 4.1.2 项目构建
- 4.1.3 安装插件
- 4.1.4 引入插件
- 4,2.搭建路由
- 4.3. echarts使用
- 4.4 element-ui使用
前言：本人目前从事java开发，但同时也在学习各种前端技术，下面是我做的一个前后端分离项目的一个小案例，不足之处请多多指教
1. 项目技术选型
Springboot+MyBatis-Plus+vue+element-ui+echarts
2.数据库设计
SET FOREIGN_KEY_CHECKS=0;
DROP TABLE IF EXISTS `fruit`;
CREATE TABLE `fruit` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL COMMENT '名称',
`sale` double DEFAULT NULL COMMENT '价格',
`num` int(11) DEFAULT NULL COMMENT '库存',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
`del_flag` tinyint(4) DEFAULT '0' COMMENT '删除标记',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8;
3. 后台搭建
3.1 引入依赖
org.springframework.boot
spring-boot-starter-thymeleaf
org.springframework.boot
spring-boot-starter-web
org.springframework.boot
spring-boot-devtools
runtime
true
mysql
mysql-connector-java
runtime
org.projectlombok
lombok
true
org.springframework.boot
spring-boot-starter-test
test
org.springframework.boot
spring-boot-starter
com.baomidou
mybatis-plus-boot-starter
3.1.1
com.baomidou
mybatis-plus-generator
3.1.1
org.webjars
velocity
1.1.0
org.mybatis
mybatis-spring
2.0.6
org.thymeleaf
thymeleaf
cn.hutool
hutool-all
5.7.22
org.apache.poi
poi-ooxml
5.0.0
io.springfox
springfox-swagger-ui
2.8.0
io.springfox
springfox-swagger2
2.8.0
3.2 swagger配置
@Configuration //什么此类为配置类
@EnableSwagger2 //开启swagger2
public class SwaggerConfig {
}
3.3实体类
@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
@ApiModel
public class Fruit {
@ApiModelProperty("id")
private int id;
@ApiModelProperty("name")
private String name;
@ApiModelProperty("sale")
private double sale;
@ApiModelProperty("num")
private int num;
@TableField(fill = FieldFill.INSERT)
private Date createTime;
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date updateTime;
@TableLogic
private boolean delFlag;
}
3.4 自动填充配置
@Component
public class DateHandler implements MetaObjectHandler {
@Override
public void insertFill(MetaObject metaObject) {
this.setFieldValByName("createTime",new Date(),metaObject);
this.setFieldValByName("updateTime",new Date(),metaObject);
}
//使用mp实现更新操作，执行此方法
@Override
public void updateFill(MetaObject metaObject) {
this.setFieldValByName("updateTime",new Date(),metaObject);
}
}
3.5 Mapper
@Repository
public interface FruitMapper extends BaseMapper<Fruit> {
}
3.6 service
public interface FruitService extends IService<Fruit> {
public FruitVO FruitVOList();
}
实现类
@Service
public class FruitServiceImpl extends ServiceImpl<FruitMapper, Fruit> implements FruitService {
@Autowired
private FruitMapper fruitMapper;
@Override
public FruitVO FruitVOList() {
List<Fruit> fruits = fruitMapper.selectList(null);
ArrayList<String> name = new ArrayList<>();
ArrayList<Integer> num = new ArrayList<>();
for(Fruit fruit:fruits){
name.add(fruit.getName());
num.add(fruit.getNum());
}
FruitVO fruitVO = new FruitVO();
fruitVO.setName(name);
fruitVO.setNum(num);
return fruitVO;
}
}
3.7 controller
@RequestMapping("/fruit")
@RestController
@Api(tags = "水果")
@CrossOrigin
public class FruitController {
@Autowired
private FruitService fruitService;
@GetMapping("/list")
@ApiOperation("获取水果列表")
public ResponseData list(){
List<Fruit> list = fruitService.list();
return new ResponseData(200,list,"ok");
}
@GetMapping("/list1")
@ApiOperation(("获取水果列表1"))
public List<Fruit> list1(){
List<Fruit> list = fruitService.list();
return list;
}
@DeleteMapping("/delete/{id}")
@ApiOperation(("通过id删除水果信息"))
public ResponseData deleteFruit(@PathVariable("id") int id){
// int id=1;
// System.out.println(name);
System.out.println(id);
boolean b = fruitService.removeById(id);
return new ResponseData().ok(b,"ok");
}
@GetMapping("/getById/{id}")
@ApiOperation("通过id获取水果信息")
public ResponseData getById(@PathVariable("id") int id){
Fruit fruit = fruitService.getById(id);
return new ResponseData().ok(fruit,"查找成功");
}
@PutMapping("/update")
@ApiOperation("添加水果信息")
public ResponseData update(@RequestBody Fruit fruit){
boolean b = fruitService.updateById(fruit);
if(b == true){
return new ResponseData().ok(fruit,"更新成功");
}else {
return new ResponseData(404,fruit,"更新失败");
}
}
@PostMapping("/save")
@ApiOperation("保存水果信息")
public ResponseData save(@RequestBody Fruit fruit){
boolean save = fruitService.save(fruit);
if(save == true){
return new ResponseData().ok(fruit,"保存成功");
}else {
return new ResponseData().error(fruit,"保存失败");
}
}
@GetMapping("barVo")
@ApiOperation("获取统计信息")
public ResponseData barVo(){
FruitVO fruitVO = fruitService.FruitVOList();
return new ResponseData().ok(fruitVO,"查找成功");
}
}
4. 前端搭建
4.1 环境搭建
4.1.1 Node环境
- 官方下载node
检查安装情况
node –v
npm –v - 安装cnpm
npm install –g cnpm --registry=https://registry.npm.taobao.org - 安装vue-cli
cnpm install vue-cli -g
4.1.2 项目构建
vue init webpack 项目名称
创建成功后，进入项目根目录，初始化项目并运行
cnpm install
cnpm run dev
4.1.3 安装插件
- 安装element-ui插件
cnpm install element-ui - 安装axios插件
cnpm install axios - 安装echarts插件
cnpm install echarts -S
4.1.4 引入插件
在main.js中引入插件
import Vue from 'vue'
import App from './App'
import router from './router'
import echarts from 'echarts'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
Vue.prototype.$axios = axios
Vue.use(ElementUI)
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '4,2.搭建路由
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/views/About'
import Pie from '@/views/Pie'
import Table from '@/views/Table'
import Edit from '@/views/Edit'
import Add from '@/views/Add'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/pie',
name: 'Pie',
component: Pie
},
{
path: '/table',
name: 'Table',
component:Table
},
{
path: '/edit',
name: 'Edit',
component:Edit
},
{
path: '/add',
name: 'Add',
component:Add
}
]
})
4.3. echarts使用
在pages下创建一个名为pie.vue的文件
<template>
<div>
<h2>vue中插入Echarts示例h2>
<div id="chart_example" :style="{width:'800px',height:'600px'}">
div>
div>
template>
<script>
const axios = require('axios');
export default {
data() {
},
mounted(){
let _this = this;
axios.get('http://localhost:9001/fruit/barVo').then(function(response) {
console.log(response.data.data)
let myCharts = _this.$echarts.init(document.getElementById('chart_example'))
myCharts.setOption( {
title:{
text:'数量统计表',
top:20
},
xAxis: {
type: 'category',
data: response.data.data.name
},
yAxis: {
type: 'value'
},
series: [
{
data: response.data.data.num,
type: 'bar',
name:'销量',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
})
})
}
}
script>
4.4 element-ui使用
- 表格的使用
在views下面创建table.vue
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="id"
label="id"
width="150">
el-table-column>
<el-table-column
prop="name"
label="名称"
width="120">
el-table-column>
<el-table-column
prop="num"
label="数量"
width="120">
el-table-column>
<el-table-column
prop="sale"
label="价格"
width="120">
el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="fruitDel(scope.row)" type="text" size="small">删除el-button>
<el-button @click="getFruitById(scope.row)" type="text" size="small">编辑el-button>
template>
el-table-column>
el-table>
template>
<script>
const axios = require('axios');
export default {
methods: {
handleClick(row) {
console.log(row);
},
fruitDel(row){
alert(row.id);
axios.delete("http://localhost:9001/fruit/delete/"+row.id)
location.reload();
},
getFruitById(object){
this.$router.push('/edit?id='+object.id)
}
},
created(){
let _this=this;
axios.get("http://localhost:9001/fruit/list")
.then(response => {
console.log(response);
console.log(response.data.data)
_this.tableData=response.data.data
})
},
data() {
return{
tableData:null
}
}
}
script>
- 表单的使用
在views下面常见文件Add.vue
<template>
<el-form ref="form" :model="fruit" label-width="80px">
<el-form-item label="水果名称">
<el-input v-model="fruit.name">el-input>
el-form-item>
<el-form-item label="水果数量">
<el-input v-model="fruit.num">el-input>
el-form-item>
<el-form-item label="水果售价">
<el-input v-model="fruit.sale">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('fruit')">立即创建el-button>
<el-button>取消el-button>
el-form-item>
el-form>
template>
<script>
const axios = require('axios');
export default {
data() {
return {
fruit: {
id:'',
name:'',
num:'',
sale: ''
}
}
},
methods: {
onSubmit(){
let _this = this;
axios.post('http://localhost:9001/fruit/save',this.fruit)
.then(function (response) {
if(response.data==200) {
this.$message({
message: '保存水果成功',
type: 'success'
});
}
_this.$router.push('/table')
})
}
}
}
script>
在views项目常见edit.vue
<template>
<el-form ref="form" :model="fruit" label-width="80px">
<el-form-item label="水果ID">
<el-input v-model="fruit.id">el-input>
el-form-item>
<el-form-item label="水果名称">
<el-input v-model="fruit.name">el-input>
el-form-item>
<el-form-item label="水果数量">
<el-input v-model="fruit.num">el-input>
el-form-item>
<el-form-item label="水售价">
<el-input v-model="fruit.sale">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('fruit')">编辑el-button>
<el-button>取消el-button>
el-form-item>
el-form>
template>
<script>
const axios = require('axios');
export default {
data() {
return {
fruit: {
id:'',
name:'',
num:'',
sale: ''
}
}
},
created() {
let id= this.$route.query.id
let _this=this
axios.get('http://localhost:9001/fruit/getById/'+id)
.then(response=>{
console.log(response)
_this.fruit=response.data.data
})
},
methods: {
onSubmit(){
alert(1)
let _this = this
axios.put("http://localhost:9001/fruit/update",this.fruit)
.then(function (response) {
console.log(response)
if(response.data.code==200){
_this.$alert(_this.fruit.name+'修改成功',"修改数据",{
confirmButtonText:'确定',
callback:action=>{
_this.$router.push('/table')
}
})
}
})
}
}
}
script>
不足之处请多多指教