springboot使用vue,springboot集成vue前端

2022-07-31 15:18:22 分类：java 阅读()

　　springboot使用vue,springboot集成vue前端

　　

目录

1.项目技术选型2.数据库设计3.后台搭建3.1 引入依赖3.2霸气配置3.3实体类3.4 自动填充配置3.5映射器3.6服务3.7控制器4 .前端搭建4.1 环境搭建节点环境4.1.2 项目构建4.1.3 安装插件4.1.4 引入插件4,2.搭建路由4.3.展示使用4.4元素-用户界面使用总结前言：本人目前从事爪哇岛开发，但同时也在学习各种前端技术，下面是我做的一个前后端分离项目的一个小案例，不足之处请多多指教

 

　　

1. 项目技术选型

弹簧靴MyBatis-Plus vue元素-ui e图表

 

　　

2.数据库设计

设置FOREIGN _ KEY _ CHECKS=0；如果存在"水果",则删除表格；创建表` fruit `(` id ` int(11)NOT NULL AUTO _ INCREMENT，` name ` varchar(255)DEFAULT NULL COMMENT 名称，`销售双重默认空注释价格， num int(11)默认空注释库存，创建时间日期时间默认空注释创建时间，`更新时间日期时间默认空注释更新时间，` del_flag` tinyint(4)默认 0 注释删除标记，主键(` id `))ENGINE=InnoDB AUTO _ INCREMENT=16默认字符集=utf8

 

　　

3. 后台搭建

 

　　

3.1 引入依赖

依赖项依赖项groupIdorg.springframework.boot/groupId artifactId spring-boot-starter-百里香叶/artifactId/dependency依赖项groupIdorg.springframework.boot/groupId artifact id spring-boot-starter-web/artifact id/依赖关系依赖项groupIdorg.springframework.boot/groupId artifact id spring-boot-dev tools/artifact id范围运行时/范围选项true/optional/dependency依赖项依赖项groupId MySQL/groupId artifact id MySQL-connector-Java/artifact id作用域运行时/作用域/依赖性依赖项依赖项groupIdorg.projectlombok/groupId artifact id lombok/artifact id选项true/optional/依赖项依赖项groupIdorg.springframework.boot/group

 

　　Id> <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 //开启swagger2public class SwaggerConfig {}

 

　　

3.3实体类

@Data@ToString@AllArgsConstructor@NoArgsConstructor@ApiModelpublic 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 自动填充配置

@Componentpublic 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

@Repositorypublic interface FruitMapper extends BaseMapper<Fruit> {}

 

　　

3.6 service

public interface FruitService extends IService<Fruit> { public FruitVO FruitVOList();}

实现类

 

　　

@Servicepublic 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 = "水果")@CrossOriginpublic 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 –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 vueimport App from ./Appimport router from ./routerimport echarts from echartsimport ElementUI from element-uiimport element-ui/lib/theme-chalk/index.cssimport axios from axiosVue.prototype.$axios = axiosVue.use(ElementUI)Vue.prototype.$echarts = echartsVue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: #app, router, components: { App }, template: <App/>})

 

　　

4,2.搭建路由

import Vue from vueimport Router from vue-routerimport HelloWorld from @/components/HelloWorldimport About from @/views/Aboutimport Pie from @/views/Pieimport Table from @/views/Tableimport Edit from @/views/Editimport Add from @/views/AddVue.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项目入门内容请搜索盛行IT以前的文章或继续浏览下面的相关文章希望大家以后多多支持盛行IT！

 

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

标签：

相关文章阅读

  • ,,详解SpringBoot整合MyBatis详细教程
  • ,,详解SpringBoot中Session超时原理说明
  • ,,浅谈springboot中tk.mapper代码生成器的用法说明
  • ,,SpringBoot项目微信云托管入门部署实践
  • ,,SpringBoot集成JPA持久层框架,简化数据库操作
  • ,,SpringBoot整合Ureport2报表及常见使用方法
  • ,,SpringBoot整合Swagger3生成接口文档过程解析
  • ,,SpringBoot实现动态定时任务
  • ,,Springboot基础之RedisUtils工具类
  • ,,Springboot单元测试无法读取配置文件的解决方案
  • ,,SpringBoot事件发布和监听详解
  • ,,SpringBoot之HandlerInterceptor拦截器的使用详解
  • ,,SpringBoot+阿里云OSS实现在线视频播放的示例
  • ,,SpringBoot+WebSocket实现即时通讯的方法详解
  • ,,SpringBoot+Tess4j实现牛逼的OCR识别工具的示例代码
    • 留言与评论（共有 条评论）
       
    验证码：