文章目录
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 引入依赖
<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 //开启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;@TableLogicprivate boolean delFlag;}
3.4 自动填充配置
@Componentpublic 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
@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 {@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 = "水果")@CrossOriginpublic 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.安装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 = 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 '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>
不足之处请多多指教
