SpringBoot+Vue项目快速入门

文章目录

1. 项目技术选型2.数据库设计3. 后台搭建

3.1 引入依赖3.2 swagger配置3.3实体类3.4 自动填充配置3.5 Mapper3.6 service3.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 {
}

3.6 service

public interface FruitService extends IService {

    public FruitVO FruitVOList();
}

实现类

@Service
public class FruitServiceImpl extends ServiceImpl implements FruitService {

    @Autowired
    private FruitMapper fruitMapper;

    @Override
    public FruitVO FruitVOList() {
        List fruits = fruitMapper.selectList(null);
        ArrayList name = new ArrayList<>();
        ArrayList 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 list = fruitService.list();
        return new ResponseData(200,list,"ok");
    }

    @GetMapping("/list1")
    @ApiOperation(("获取水果列表1"))
    public List list1(){
        List 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

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的文件

4.4 element-ui使用

表格的使用
在views下面创建table.vue

表单的使用
在views下面常见文件Add.vue

在views项目常见edit.vue

不足之处请多多指教