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 &ndash;v
npm &ndash;v

安装cnpm

npm install &ndash;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>

来源：https://blog.csdn.net/m0_45432976/article/details/123616623