二非常钟秒懂：实现前后端分脱离发（vue+element+spring boot+mybatis+MySQ - ToB企服应用市场:ToB评测及商务社交产业平台

@RestController
@RequestMapping("/api")
public class ApiController {
@Autowired
private UserService userService;
@GetMapping("/users")
public List<User> getUsers() {
return userService.getUsers();
}
}

复制代码

import axios from 'axios'
export default {
data() {
return {
users: []
}
},
mounted() {
axios.get('/api/users')
.then(response => {
this.users = response.data
})
.catch(error => {
console.log(error)
})
}
}

复制代码

<template> <div> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div></template><script>import axios from 'axios'
export default {
data() {
return {
users: []
}
},
mounted() {
axios.get('/api/users')
.then(response => {
this.users = response.data
})
.catch(error => {
console.log(error)
})
}
}</script>

复制代码

<template>
<div class="big_box">
<div style="display:flex;">
<el-input v-model="newData.product_date" placeholder="请输入日期"></el-input>
<el-input v-model="newData.brand" placeholder="请输入品牌"></el-input>
<el-input v-model="newData.commodity_name" placeholder="请输入产品"></el-input>
<el-input v-model="newData.act" placeholder="请输入产品描述"></el-input>
<el-input v-model="newData.commodity_id" placeholder="请输入产品编号"></el-input>
<el-input v-model="newData.price" placeholder="请输入价格"></el-input>
<el-input v-model="newData.amount" placeholder="请输入库存量"></el-input>
<el-button @click="add" type="success" size="small">添加</el-button>
</div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="product_date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="brand"
label="品牌"
width="120">
</el-table-column>
<el-table-column
prop="commodity_name"
label="产品"
width="120">
</el-table-column>
<el-table-column
prop="act"
label="产品描述"
width="300">
</el-table-column>
<el-table-column
prop="commodity_id"
label="产品编号"
width="120">
</el-table-column>
<el-table-column
prop="price"
label="价格"
width="120">
</el-table-column>
<el-table-column
prop="amount"
label="库存量"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="warning" size="small">修改</el-button>
<el-button @click="del_data(scope.row.commodity_id)" type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<div v-if="this.update">
<div style="display:flex;">
<el-input v-model="upData.product_date" placeholder="请输入日期"></el-input>
<el-input v-model="upData.brand" placeholder="请输入品牌"></el-input>
<el-input v-model="upData.commodity_name" placeholder="请输入产品"></el-input>
<el-input v-model="upData.act" placeholder="请输入产品描述"></el-input>
<el-input v-model="upData.commodity_id" placeholder="请输入产品编号"></el-input>
<el-input v-model="upData.price" placeholder="请输入价格"></el-input>
<el-input v-model="upData.amount" placeholder="请输入库存量"></el-input>
<el-button @click="edit_put" type="success" size="small">修改</el-button>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default{
mounted(){
// 显示数据
axios.get('http://localhost:8090/car/query').then(res=>{
console.log(res.data.data);
this.tableData = res.data.data
})
},
methods: {
handleClick(row) {
this.update = true
this.row_data = row
console.log(this.row_data);
this.id = row.commodity_id
},
// 条件修改
edit_put(){
axios.post('http://localhost:8090/car/update',{
commodity_id:this.upData.commodity_id
}).then(res=>{
console.log(res.data)
this.update = false
})
},
// 添加数据
add(){
axios.post('http://localhost:8090/car/add',this.newData).then(res=>{
console.log(res.data)
})
},
// 删除数据
del_data(commodity_id){
console.log(commodity_id);
axios.get('http://localhost:8090/car/del?commodity_id='+commodity_id).then(res=>{
console.log(res.data)
})
}
},
data() {
return {
update:false,
id:'',
row_data:'',
// 添加数据data
newData:{
brand:'',
commodity_id:'',
commodity_name:'',
product_date:'',
act:'',
amount:null,
price:null
},
// 修改数据data
upData:{
brand:'',
commodity_id:'',
commodity_name:'',
product_date:'',
act:'',
amount:null,
price:null
},
tableData: []
}
}
}
</script>
<style scoped>
.big_box{
width: 1200px;
}
</style>

复制代码

@CrossOrigin(origins = "*")

复制代码

package com.wfit.boot.controller;
import com.wfit.boot.commons.Result;
import com.wfit.boot.model.Car;
import com.wfit.boot.service.CarService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/car")
public class CarController {
@Autowired
private CarService carService;
/**
* 新增汽车用品信息
* @param car
* @return
*/
@PostMapping("/add")
@CrossOrigin(origins = "*")
public Result addCar(@RequestBody Car car){
carService.saveCar(car);
return Result.success("新增汽车用品信息成功：" + car);
}
/**
* 修改
* @param car
* @return
*/
@PostMapping ("/update")
@CrossOrigin(origins = "*")
public Result updateCar(@RequestBody Car car){
carService.updateCar(car);
return Result.success("修改汽车用品信息成功：" + car);
}
/**
* 删除
* @param commodity_id
* @return
*/
@GetMapping("/del")
@CrossOrigin(origins = "*")
public Result delCar(String commodity_id){
carService.delCar(commodity_id);
return Result.success("删除编号为" + commodity_id + "汽车用品信息成功！");
}
/**
* 查询
* @return
*/
@GetMapping("/query")
@CrossOrigin(origins = "*")
public Result queryCar(){
List<Car> carList = carService.queryCar();
return Result.success(carList);
}
}

复制代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wfit.boot.mapper.CarMapper">
<insert id="saveCar" parameterType="com.wfit.boot.model.Car">
insert into car values (
#{brand},
#{commodity_id},
#{commodity_name},
#{act},
#{product_date},
#{amount},
#{price}
)
</insert>
<update id="updateCar" parameterType="com.wfit.boot.model.Car">
update car
set price = #{price}
where commodity_id =#{commodity_id}
</update>
<delete id="delCar" parameterType="java.lang.String">
delete from car where commodity_id = #{commodity_id};
</delete>
<select id="queryCar" resultType="com.wfit.boot.model.Car">
select *
from car
</select>
</mapper>

复制代码

package com.wfit.boot.service.impl;
import com.wfit.boot.mapper.CarMapper;
import com.wfit.boot.model.Car;
import com.wfit.boot.service.CarService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class CarServiceImpl implements CarService {
@Autowired
private CarMapper carMapper;
@Override
public void saveCar(Car car) {
carMapper.saveCar(car);
}
@Override
public void updateCar(Car car) {
carMapper.updateCar(car);
}
@Override
public void delCar(String commodity_id) {
carMapper.delCar(commodity_id);
}
@Override
public List<Car> queryCar() {
return carMapper.queryCar();
}
}

复制代码