SpringBoot+Vue项目新手快速入门指南

原文

前言：本人目前从事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 引入依赖

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.1.1</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.1.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>velocity</artifactId>
            <version>1.1.0</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.6</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.7.22</version>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>5.0.0</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.8.0</version>
       </dependency>

        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.8.0</version>
        </dependency>
        </dependencies>

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: '<App/>'
})

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>

总结

到此这篇关于SpringBoot Vue项目新手快速入门指南的文章就介绍到这了,更多相关SpringBoot Vue项目入门内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！

SpringBoot+Vue项目新手快速入门指南的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

  2. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  3. vue使用动画实现滚动表格效果

    这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  4. 关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化，Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到，对vue监控数组知识是面试比较常见的问题，感兴趣的朋友一起看看吧

  5. Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  6. Vue h函数的使用详解

    本文主要介绍了Vue h函数的使用详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  7. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

  8. vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  9. vue+elemet实现表格手动合并行列

    这篇文章主要为大家详细介绍了vue+elemet实现表格手动合并行列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  10. iview+vue实现导入EXCEL预览功能

    这篇文章主要为大家详细介绍了iview+vue实现导入EXCEL预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

随机推荐

  1. 基于EJB技术的商务预订系统的开发

    用EJB结构开发的应用程序是可伸缩的、事务型的、多用户安全的。总的来说，EJB是一个组件事务监控的标准服务器端的组件模型。基于EJB技术的系统结构模型EJB结构是一个服务端组件结构，是一个层次性结构，其结构模型如图1所示。图2：商务预订系统的构架EntityBean是为了现实世界的对象建造的模型，这些对象通常是数据库的一些持久记录。

  2. Java利用POI实现导入导出Excel表格

    这篇文章主要为大家详细介绍了Java利用POI实现导入导出Excel表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  3. Mybatis分页插件PageHelper手写实现示例

    这篇文章主要为大家介绍了Mybatis分页插件PageHelper手写实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  4. (jsp/html)网页上嵌入播放器(常用播放器代码整理)

    网页上嵌入播放器，只要在HTML上添加以上代码就OK了，下面整理了一些常用的播放器代码，总有一款适合你，感兴趣的朋友可以参考下哈，希望对你有所帮助

  5. Java 阻塞队列BlockingQueue详解

    本文详细介绍了BlockingQueue家庭中的所有成员，包括他们各自的功能以及常见使用场景,通过实例代码介绍了Java 阻塞队列BlockingQueue的相关知识，需要的朋友可以参考下

  6. Java异常Exception详细讲解

    异常就是不正常，比如当我们身体出现了异常我们会根据身体情况选择喝开水、吃药、看病、等 异常处理方法。 java异常处理机制是我们java语言使用异常处理机制为程序提供了错误处理的能力，程序出现的错误，程序可以安全的退出，以保证程序正常的运行等

  7. Java Bean 作用域及它的几种类型介绍

    这篇文章主要介绍了Java Bean作用域及它的几种类型介绍，Spring框架作为一个管理Bean的IoC容器，那么Bean自然是Spring中的重要资源了，那Bean的作用域又是什么，接下来我们一起进入文章详细学习吧

  8. 面试突击之跨域问题的解决方案详解

    跨域问题本质是浏览器的一种保护机制，它的初衷是为了保证用户的安全，防止恶意网站窃取数据。那怎么解决这个问题呢？接下来我们一起来看

  9. Mybatis-Plus接口BaseMapper与Services使用详解

    这篇文章主要为大家介绍了Mybatis-Plus接口BaseMapper与Services使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  10. mybatis-plus雪花算法增强idworker的实现

    今天聊聊在mybatis-plus中引入分布式ID生成框架idworker，进一步增强实现生成分布式唯一ID,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

返回
顶部