SpringBoot+Vue项目快速入门
2024-05-06 11:47:08
文章目录
- 1. 项目技术选型
- 2.数据库设计
- 3. 后台搭建
- 3.1 引入依赖
- 3.2 swagger配置
- 3.3实体类
- 3.4 自动填充配置
- 3.5 Mapper
- 3.6 service
- 3.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 引入依赖
<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;@TableLogicprivate boolean delFlag;}
3.4 自动填充配置
@Component
public class DateHandler implements MetaObjectHandler {@Overridepublic void insertFill(MetaObject metaObject) {this.setFieldValByName("createTime",new Date(),metaObject);this.setFieldValByName("updateTime",new Date(),metaObject);}//使用mp实现更新操作，执行此方法@Overridepublic 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 {@Autowiredprivate FruitMapper fruitMapper;@Overridepublic 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 {@Autowiredprivate 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"borderstyle="width: 100%"><el-table-columnfixedprop="id"label="id"width="150"></el-table-column><el-table-columnprop="name"label="名称"width="120"></el-table-column><el-table-columnprop="num"label="数量"width="120"></el-table-column><el-table-columnprop="sale"label="价格"width="120"></el-table-column><el-table-columnfixed="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.idlet _this=thisaxios.get('http://localhost:9001/fruit/getById/'+id).then(response=>{console.log(response)_this.fruit=response.data.data})},methods: {onSubmit(){alert(1)let _this = thisaxios.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项目快速入门相关推荐
- Vue 项目快速入门
文章目录 说明 下载Node.js npm 配置 项目构建 安装vue-cli 创建应用 项目结构 Vue 项目的特点(webpack) 使用 webpack Vue 路由 路由使用基本架构 路由嵌套 ...
- .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用
写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
- SpringBoot系列: RestTemplate 快速入门
==================================== 相关的文章 ==================================== SpringBoot系列: 与Sprin ...
- （vue基础试炼_01）使用vue.js 快速入门hello world
文章目录 一.需求案例 二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法 三.案例vue简述? 四.案例趣味延伸 五.表达值作用及嘱咐语 一. ...
- 一键生成Springboot Vue项目！ 【私活神器】
今天给大家推荐一款自己公司正在打磨的一款一键部署,一键生成全自动化的低代码生成器工具,可以实现前端可视化操作(拖拽形式+配置就可以生成前端页面),后端直接结合前端代码一键生成,数据库(含表字段)可一键 ...
- Windows之vue-cli安装和vue项目快速搭建
Windows之vue-cli安装和vue项目快速搭建 1.提前安装好node.js, 安装步骤:https://blog.csdn.net/qq_43842093/article/details/1 ...
- 部署springboot+vue项目文档（若依ruoyi项目部署步骤）
部署springboot+vue项目文档(若依ruoyi项目部署步骤) 一:部署linux + nginx 二:部署windows + tomcat(无nginx) 三:解决调用第三方api如百度地图 ...
- 「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析 前言 一.我的开发环境 二.使用 Vue CLI (Vue 脚手架)快速搭建项目 三.初始项目的目录结构 ...
- springboot+vue项目大型实战（一）后端开发
源码下载地址!!!点我 数据库创建表 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0;-- ---------------------------- -- ...
最新文章
- matlab 实验6 高层绘图操作,实验06_高层绘图操作(第5章).doc
- log4j2 pattern 行号_Springboot整合log4j2日志全解总结
- sklearn自学指南(part45)--新颖性和离群值检测概述
- mysql-防止XSS攻击
- Lilishop开源商城系统 / lilishop
- xp 优化 转自天涯
- 积分竞猜网php源码_贵州省网络安全知识竞赛个人赛Writeup
- 玲珑杯round11-E：萌萌哒的第五题
- 扫地机器人湿地_黑五好价 美亚直邮 iRobot Braava 380t 拖地机器人
- 纯css制作导航下拉菜单
- Vue 使用 Apache Echarts 绘制地图（省市、地区）
- Ant 下载、安装、使用、教程全面了解
- 小程序开发API之mDNS
- VxWorks学习笔记一 ------Bootrom和VxWorks镜像的引导
- 图像视频滤镜算法---颜色滤镜
- （附源码）ssm招聘网站 毕业设计 250858
- 2018中国初创企业融资近千亿 人工智能领跑新经济破局
- SUSE12安装SAP HANA 2.0内存数据库
- Python基础之图像识别
- java榨汁机榨取不同水果,榨汁机别乱买，亲测榨水果翻车，九阳迷你原汁机评测...