SqlServer二非常钟秒懂：实现前后端分脱离发（vue+element+spring boot+mybatis+MySQ

莫张周刘王 发表于 2024-6-15 01:10:45

二非常钟秒懂：实现前后端分脱离发（vue+element+spring boot+mybatis+MySQ

目录
开发者介绍
什么是前后端分脱离发
vue与springboot开发的优势
Vue.js 的优势：
Spring Boot 的优势：
vue与springboot如何实现前后端连接
demo简介
紧张部门前端部门代码
紧张部门后端代码
后端办理跨域问题
Controller部门
xml部门
service部门
demo示例演示

开发者介绍

后端开发者：小昕ᵇᵃᵇʸ.的博客_CSDN博客-范畴博主小昕ᵇᵃᵇʸ.关注python,css,java,c语言,html5,数据结构范畴.https://g.csdnimg.cn/static/logo/favicon32.icohttps://blog.csdn.net/m0_68936458?type=blog前端开发者：
lqj_本人的博客_CSDN博客-python人工智能视觉（opencv）从入门到实战,微信小程序,前端范畴博主lqj_本人善于python人工智能视觉（opencv）从入门到实战,微信小程序,前端,等方面的知识https://g.csdnimg.cn/static/logo/favicon32.icohttps://blog.csdn.net/lbcyllqj?spm=1000.2115.3001.5343
什么是前后端分脱离发

前后端分脱离发是一种软件开发模式，将前端和后端的开发分脱离来，使得前端和后端可以独立开发、测试和部署。在前后端分脱离发中，前端负责展示数据和用户交互，后端负责处理业务逻辑和数据存储。具体来说，前端开发职员使用 HTML、CSS、JavaScript 等技能实现用户界面和交互逻辑，通过 AJAX 或 WebSocket 等技能与后端进行通信，获取数据并将数据展示给用户。后端开发职员则负责编写业务逻辑和数据存储的代码，提供 API 接供词前端调用。前后端分脱离发的长处包括：

[*]进步开发效率：前后端可以并行开发，减少了开发时间。
[*]进步可维护性：前后端分离后，代码耦合度降低，修改一个模块不会影响到其他模块。
[*]进步可扩展性：前后端分离后，可以更容易地添加新的功能模块。
[*]进步用户体验：前端可以更快地相应用户操作，进步用户体验。
vue与springboot开发的优势

Vue.js 和 Spring Boot 是两个非常流行的开发框架，它们分别用于前端和后端开发。它们的优势如下：
Vue.js 的优势：

[*]相应式数据绑定：Vue.js 的核心是相应式数据绑定，它可以主动追踪数据的厘革，而且更新视图。这使得开发者可以更加专注于业务逻辑的实现，而不消过多关注 DOM 操作。
[*]组件化开发：Vue.js 支持组件化开发，可以将一个页面拆分成多个组件，每个组件都有本身的状态和行为。这样可以进步代码的复用性和可维护性。
[*]轻量级：Vue.js 的体积非常小，只有 20KB 左右，加载速率非常快，可以进步用户体验。

Spring Boot 的优势：

[*]快速开发：Spring Boot 提供了主动设置和快速启动的特性，可以快速搭建一个基于 Spring 的应用程序。
[*]高度集成：Spring Boot 集成了大量的第三方库和框架，可以方便地与其他技能进行集成，如数据库、消息队列、缓存等。
[*]易于部署：Spring Boot 应用程序可以打包成一个可实行的 JAR 文件，可以方便地部署到任何支持 Java 的环境中。
综上所述，Vue.js 和 Spring Boot 都有各自的优势，它们可以很好地共同使用，实现高效的全栈开发。Vue.js 负责前端 UI 的实现和交互逻辑，Spring Boot 负责后端业务逻辑的实现和数据处理。
vue与springboot如何实现前后端连接

Vue和Spring Boot可以通过RESTful API实现前后端连接。
        首先，在Spring Boot中创建一个RESTful API，可以使用Spring Boot提供的@RestController注解来实现。在这个API中，你可以定义HTTP请求的处理逻辑，比如从数据库中获取数据并返回给前端。
        然后，在Vue中，你可以使用Vue提供的axios库来发送HTTP请求，获取后端数据。你可以在Vue组件中使用axios发送请求，然后将返回的数据渲染到页面上。
具体实现步骤如下：

[*]在Spring Boot中创建一个RESTful API，使用@RestController注解来标记这个API。
[*]在API中定义HTTP请求的处理逻辑，比如从数据库中获取数据并返回给前端。
[*]在Vue中使用axios库发送HTTP请求，获取后端数据。
[*]在Vue组件中将返回的数据渲染到页面上。
简单的示例：
在Spring Boot中创建一个RESTful API：
@RestController
@RequestMapping("/api")
public class ApiController {

@Autowired
private UserService userService;

@GetMapping("/users")
public List<User> getUsers() {
   return userService.getUsers();
}
}在Vue中使用axios发送HTTP请求：
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)
   })
}
}在Vue组件中将返回的数据渲染到页面上：
<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>
demo简介

注：小demo只是做了简单的演示示例，功能齐全但样式简单，望大家谅解！
此小demo实用于刚接触前端后分脱离发的小同伴，尤其针对前端vue+后端spring boot分脱离发的小同伴。
本项目紧张完成了通过前端的vue.js与后端的spring boot的连接，实现了简单的实现了通过前端页面来调用后端API接口，从而完成对数据库中内容的增删改查。
紧张部门前端部门代码

<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 = "*") Controller部门

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部门

<?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> service部门

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();
}

}
demo示例演示

https://img-blog.csdnimg.cn/2556df00145c4365a86831159dc8d36a.png

https://img-blog.csdnimg.cn/8be83ff8c4854b139420e8eef0dfe364.png

https://img-blog.csdnimg.cn/2c187d2403654c01ac09bb071f4df81d.png

https://img-blog.csdnimg.cn/7b7ab689b0264853b139cc7d66ac4737.png

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

二非常钟秒懂：实现前后端分脱离发（vue+element+spring boot+mybatis+MySQ