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

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

目录1. 项目技术选型2.数据库设计3. 后台搭建3.1 引入依赖3.2 swagger配置3.3实体类3.4 自动填充配置3.5 Mapper3.6 service3.7 controller4. 前端搭建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 –vnpm –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 installcnpm 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的文件

4.4 element-ui使用

表格的使用

在views下面创建table.vue

:data="tableData"

border

style="width: 100%">

fixed

prop="id"

label="id"

width="150">

prop="name"

label="名称"

width="120">

prop="num"

label="数量"

width="120">

prop="sale"

label="价格"

width="120">

fixed="right"

label="操作"

width="100">

删除

编辑

表单的使用

在views下面常见文件Add.vue

立即创建

取消

在views项目常见edit.vue

编辑

取消

总结

:data="tableData"

border

style="width: 100%">

fixed

prop="id"

label="id"

width="150">

fixed

prop="id"

label="id"

width="150">

prop="name"

label="名称"

width="120">

prop="name"

label="名称"

width="120">

prop="num"

label="数量"

width="120">

prop="num"

label="数量"

width="120">

prop="sale"

label="价格"

width="120">

prop="sale"

label="价格"

width="120">

fixed="right"

label="操作"

width="100">

删除

编辑

fixed="right"

label="操作"

width="100">

删除

编辑

表单的使用

在views下面常见文件Add.vue

立即创建

取消

在views项目常见edit.vue

编辑

取消

总结

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。