SpringBoot+Vue项目新手快速入门指南
作者：smilecb 发布时间：2023-05-20 04:56:07
标签：springboot,vue,项目
前言：本人目前从事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;
@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<Fruit> {
}
3.6 service
public interface FruitService extends IService<Fruit> {
public FruitVO FruitVOList();
}
实现类
@Service
public 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 = "水果")
@CrossOrigin
public 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 –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"
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>
来源：https://blog.csdn.net/m0_45432976/article/details/123616623
0
投稿猜你喜欢
前言提前说明下：（该方法只适用于监控自己拥有的微信或者QQ ，无法监控或者盗取其他人的聊天记录。本文只写了如何获取聊天记录，服务器落地程序并- 本文实例为大家分享了WebView实现文件下载功能的具体代码，供大家参考，具体内容如下本节引言本节给大家介绍的是WebView下载文件的知识
- 在Android开发过程中，有时需要获取触摸位置的坐标，以便作进一步处理，比如做炫酷的动画效果，或者响应其他操作。本文简单介绍Android
- 1.1、定义从现有类派生的类被称作子类，也叫派生类，扩展类，或孩子类。现有类被称作超类，也叫基类，或父类。1.2、创建子类public cl
- 0、引言在开发的过程中，很多业务场景需要一个树形结构的结果集进行前端展示，也可以理解为是一个无限父子结构，常见的有报表指标结构、菜单结构等。
- 大家好，因为近期做需求中遇到了文件上传这个东西，而且我这个还是跨服务去传输文件的所以我这边使用了httpclient和RestTemplat
- 使用stream判断两个list元素的属性并输出/*** 使用stream判断两个list中元素不同的item*/@Testpublic v
- hibernate一级缓存和二级缓存的区别缓存是介于应用程序和物理数据源之间，其作用是为了降低应用程序对物理数据源访问的频次，从而提高了应用
- 本文实例讲述了Java实现的zip工具类。分享给大家供大家参考，具体如下：实现把zip解压到指定路径，把文件夹压缩到zip，把文件列表压缩为
- 一、背景今天心血来潮，准备测试一下项目中 logback 的自动刷新功能，但是测试时发现并不生效。logback 的配置如下：<con
- 先看代码：//设置可以同时处于活动状态的线程池的请求数目。 bool pool = ThreadPool.SetMaxThreads(8,
- mybatis update并非所有字段需要更新mybatis update需求：更新字段作为参数，未更新字段不传入解决办法<upda
- java中对数组进行排序使用Array.sort() 这个默认是升序@Test public void index4(){ &n
- 使用IDEA开发微服务项目，需要启动多个微服务，可以开启IDEA的Run DashBoard窗口，需要对IDEA中指定工程的父工程进行配置进
- 一、Java IO流1、概念在Java中，把不同的输入源 / 输出源（如：键盘、文件、网络链接等）抽象的表述为“流”（stream）通过 ”
- 最近需要做一个类似于电话客户的功能，要求拨打电话能自动录音。所以写了一个dome，希望能够帮到大家。主要思路就是监听手机通话状态在监听到接听
- 创建父级项目 只需保留pom.xml文件这里只需搭建一个微服务 其他操作并无<?xml version="1.0"
- 一、线程池简介线程池的使用主要是解决两个问题：①当执行大量异步任务的时候线程池能够提供更好的性能，在不使用线程池时候，每当需要执行异步任务的
- Java虚拟机栈1. 定义栈：线程运行时需要的内存空间，一个栈存在多个栈帧。栈具有先入后出，后入先出的特点。栈帧：每个方法运行时需要的内存（
- trim标记是一个格式化的标记，可以完成set或者是where标记的功能，如下代码：1、select * from user <tri
