devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于前后端分离技术做增删改查操作（SpringBoot+Mybatis Plus+Vue）_尝试编写使用id(主键)实现前后端分离的数据修改、删除功能。

作者：煮酒与君饮 | 2024-06-21 10:12:52

赞

踩

尝试编写使用id(主键)实现前后端分离的数据修改、删除功能。

通过SpringBoot后端项目，mybatis plus，和前端Vue来实现前后端分离技术

第一步：

1、准备sql

本项目主要实现两张表的增删改查（老师+专业）+分页

  1. CREATE TABLE `teacher` (
  2.   `id` int(11) NOT NULL AUTO_INCREMENT,
  3.   `name` varchar(255) DEFAULT NULL,
  4.   `age` int(11) DEFAULT NULL,
  5.   `sex` int(255) DEFAULT NULL,
  6.   `hobby` varchar(255) DEFAULT NULL,
  7.   `birthday` date DEFAULT NULL,
  8.   `mid` int(11) DEFAULT NULL,
  9.   PRIMARY KEY (`id`)
  10. ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;
  11.  
  12. CREATE TABLE `major` (
  13.   `id` int(11) NOT NULL AUTO_INCREMENT,
  14.   `name` varchar(255) DEFAULT NULL,
  15.   PRIMARY KEY (`id`)
  16. ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
  17.

2、sql准备完毕

添加数据即可

第二步：

搭建后端项目

后端项目还是跟我们之前编写的代码一样

1、创建项目

这是之前讲解的使用SpringBoot开发的详细步骤（可以参考）

使用SpringBoot开发（完整项目）_java spring boot 项目开发-CSDN博客

2、加入依赖

你需要什么你就拿什么依赖

  1.  <properties>
  2.         <java.version>8</java.version>
  3.         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  4.         <mybatis-plus.version>3.5.2</mybatis-plus.version>
  5.         <mysql.version>8.0.30</mysql.version>
  6.         <junit.version>4.12</junit.version>
  7.         <swagger.version>3.0.0</swagger.version>
  8.         <lombok.version>1.18.24</lombok.version>
  9.         <hutool.version>5.8.5</hutool.version>
  10.         <druid.version>1.2.11</druid.version>
  11.         <jackson.version>2.13.4</jackson.version>
  12.         <fastjson2.version>2.0.23</fastjson2.version>
  13.         <commonsio.version>2.11.0</commonsio.version>
  14.         <aspectj-weaver.version>1.9.7</aspectj-weaver.version>
  15.         <commons-fileupload.version>1.3.1</commons-fileupload.version>
  16.         <commons-lang3.version>3.12.0</commons-lang3.version>
  17.         <hibernate-validator.version>6.2.3.Final</hibernate-validator.version>        <pagehelper.version>5.2.0</pagehelper.version>
  18.  
  19.  
  20.     </properties>
  21.     <dependencies>
  22.  
  23.         <!--junit-->
  24.         <dependency>
  25.             <groupId>junit</groupId>
  26.             <artifactId>junit</artifactId>
  27.             <version>${junit.version}</version>
  28.             <scope>test</scope>
  29.         </dependency>
  30.  
  31.         <!--lombok-->
  32.         <dependency>
  33.             <groupId>org.projectlombok</groupId>
  34.             <artifactId>lombok</artifactId>
  35.             <version>${lombok.version}</version>
  36.             <scope>provided</scope>
  37.         </dependency>
  38.  
  39.         <!--spring-boot-web相关依赖-->
  40.         <dependency>
  41.             <groupId>org.springframework.boot</groupId>
  42.             <artifactId>spring-boot-starter-web</artifactId>
  43.         </dependency>
  44.  
  45.         <!--hutool-->
  46.         <dependency>
  47.             <groupId>cn.hutool</groupId>
  48.             <artifactId>hutool-all</artifactId>
  49.             <version>${hutool.version}</version>
  50.         </dependency>
  51.  
  52.         <!--mysql-->
  53.         <dependency>
  54.             <groupId>mysql</groupId>
  55.             <artifactId>mysql-connector-java</artifactId>
  56.             <version>${mysql.version}</version>
  57.         </dependency>
  58.  
  59.         <!--mybatis-plus-->
  60.         <dependency>
  61.             <groupId>com.baomidou</groupId>
  62.             <artifactId>mybatis-plus-boot-starter</artifactId>
  63.             <version>${mybatis-plus.version}</version>
  64.         </dependency>
  65.  
  66.         <!--代码生成器-->
  67.         <dependency>
  68.             <groupId>com.baomidou</groupId>
  69.             <artifactId>mybatis-plus-generator</artifactId>
  70.             <version>3.4.0</version>
  71.         </dependency>
  72.         <!--mybatis-plus-generator需要此依赖-->
  73.         <dependency>
  74.             <groupId>org.apache.velocity</groupId>
  75.             <artifactId>velocity</artifactId>
  76.             <version>1.7</version>
  77.         </dependency>
  78.  
  79.         <!--fastjson 工具-->
  80.         <dependency>
  81.             <groupId>com.alibaba.fastjson2</groupId>
  82.             <artifactId>fastjson2</artifactId>
  83.             <version>${fastjson2.version}</version>
  84.         </dependency>
  85.  
  86.         <!--aop相关-->
  87.         <dependency>
  88.             <groupId>org.aspectj</groupId>
  89.             <artifactId>aspectjweaver</artifactId>
  90.             <version>${aspectj-weaver.version}</version>
  91.         </dependency>
  92.         <dependency>
  93.             <groupId>org.springframework.boot</groupId>
  94.             <artifactId>spring-boot-starter-aop</artifactId>
  95.         </dependency>
  96.  
  97.         <!--加解密、编码-->
  98.         <dependency>
  99.             <groupId>commons-codec</groupId>
  100.             <artifactId>commons-codec</artifactId>
  101.         </dependency>
  102.  
  103.         <dependency>
  104.             <groupId>org.apache.commons</groupId>
  105.             <artifactId>commons-lang3</artifactId>
  106.             <version>${commons-lang3.version}</version>
  107.         </dependency>
  108.         <dependency>
  109.             <groupId>commons-io</groupId>
  110.             <artifactId>commons-io</artifactId>
  111.             <version>${commonsio.version}</version>
  112.         </dependency>
  113.  
  114.         <!-- <dependency>
  115.                 <groupId>io.springfox</groupId>
  116.                 <artifactId>springfox-boot-starter</artifactId>
  117.                 <version>${swagger.version}</version>
  118.             </dependency>-->
  119.         <dependency>
  120.             <groupId>org.springframework.boot</groupId>
  121.             <artifactId>spring-boot-starter-data-redis</artifactId>
  122.         </dependency>
  123.  
  124.         <dependency>
  125.             <groupId>org.springframework.boot</groupId>
  126.             <artifactId>spring-boot-starter-test</artifactId>
  127.         </dependency>
  128.         <dependency>
  129.             <groupId>org.hibernate.validator</groupId>
  130.             <artifactId>hibernate-validator</artifactId>
  131.             <version>6.2.3.Final</version>
  132.         </dependency>
  133.         <!--pagehelper-->
  134.         <dependency>
  135.             <groupId>com.github.pagehelper</groupId>
  136.             <artifactId>pagehelper-spring-boot-starter</artifactId>
  137.             <version>1.4.0</version>
  138.         </dependency>
  139.         <!--阿里云短信-->
  140.         <dependency>
  141.             <groupId>com.aliyun</groupId>
  142.             <artifactId>tea-openapi</artifactId>
  143.             <version>0.2.5</version>
  144.         </dependency>
  145.  
  146.         <dependency>
  147.             <groupId>com.aliyun</groupId>
  148.             <artifactId>dysmsapi20170525</artifactId>
  149.             <version>2.0.20</version>
  150.         </dependency>
  151.  
  152.         <dependency>
  153.             <groupId>com.aliyun.oss</groupId>
  154.             <artifactId>aliyun-sdk-oss</artifactId>
  155.             <version>3.15.1</version>
  156.         </dependency>
  157.  
  158.         <!--文件上传-->
  159.         <dependency>
  160.             <groupId>commons-fileupload</groupId>
  161.             <artifactId>commons-fileupload</artifactId>
  162.             <version>${commons-fileupload.version}</version>
  163.         </dependency>
  164.  
  165.         <!-- https://mvnrepository.com/artifact/org.apache.poi/poi -->
  166.         <dependency>
  167.             <groupId>org.apache.poi</groupId>
  168.             <artifactId>poi</artifactId>
  169.             <version>3.14</version>
  170.         </dependency>
  171.  
  172.         <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-ooxml -->
  173.         <dependency>
  174.             <groupId>org.apache.poi</groupId>
  175.             <artifactId>poi-ooxml</artifactId>
  176.             <version>3.14</version>
  177.         </dependency>
  178.  
  179.         <dependency>
  180.             <groupId>org.freemarker</groupId>
  181.             <artifactId>freemarker</artifactId>
  182.             <version>2.3.31</version>
  183.         </dependency>
  184.         <!--定时任务-->
  185.         <dependency>
  186.             <groupId>org.springframework.boot</groupId>
  187.             <artifactId>spring-boot-starter-quartz</artifactId>
  188.         </dependency>
  189.         <!--rabbitmq-->
  190.         <dependency>
  191.             <groupId>org.springframework.boot</groupId>
  192.             <artifactId>spring-boot-starter-amqp</artifactId>
  193.         </dependency>
  194.         <!--热部署-->
  195.         <dependency>
  196.             <groupId>org.springframework.boot</groupId>
  197.             <artifactId>spring-boot-devtools</artifactId>
  198.         </dependency>
  199.     </dependencies>
  200.  
  201.     <build>
  202.         <plugins>
  203.             <!--springboot打包插件-->
  204.             <plugin>
  205.                 <groupId>org.springframework.boot</groupId>
  206.                 <artifactId>spring-boot-maven-plugin</artifactId>
  207.             </plugin>
  208.         </plugins>
  209.     </build>

3、创建启动类

  1. package cn.jiyun;
  2.  
  3. import org.mybatis.spring.annotation.MapperScan;
  4. import org.springframework.boot.SpringApplication;
  5. import org.springframework.boot.autoconfigure.SpringBootApplication;
  6.  
  7. @SpringBootApplication
  8. @MapperScan("cn.jiyun.mapper")
  9. public class Application {
  10.     public static void main(String[] args) {
  11.         SpringApplication.run(Application.class,args);
  12.         System.out.println("启动成功");
  13.     }
  14. }

 之前的博客中也讲到了SpringBootApplication注解的作用

SpringBoot运行原理（超详细！！！面试必考）-CSDN博客

4、添加application.yml配置文件

  1. server:
  2.   port: 82 #端口号
  3. spring:
  4.   mvc:
  5.     pathmatch:
  6.       matching-strategy: ant_path_matcher
  7.   rabbitmq:
  8.     host: 127.0.0.1        #rabbitmq的ip地址
  9.     username: guest        #用户名
  10.     password: guest        #密码
  11.     virtual-host: /        #空间
  12.   redis:
  13.     host: 127.0.0.1
  14.     port: 6379
  15.     # password: 123456
  16.     # 连接超时时间（毫秒）
  17.     timeout: 5000ms
  18.     # 连接池配置
  19.     jedis:
  20.       pool:
  21.         # 连接池最大连接数（使用负值表示没有限制）
  22.         max-active: 8
  23.         # 连接池最大阻塞等待时间（使用负值表示没有限制）
  24.         max-wait: 1ms
  25.         # 连接池中的最大空闲连接
  26.         max-idle: 8
  27.         # 连接池中的最小空闲连接
  28.         min-idle: 0
  29.   datasource:
  30.     driver-class-name: com.mysql.cj.jdbc.Driver #驱动
  31.     url: jdbc:mysql://127.0.0.1:3306/qizhongb?useSSL=false #数据库地址
  32.     username: root #用户名
  33.     password: aaaa #密码
  34.   # 允许循环依赖
  35.   main:
  36.     allow-circular-references: true
  37.  
  38. # mybatis-plus配置
  39. mybatis-plus:
  40.   configuration:
  41.     # 打印sql
  42.     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  43.   # mapper xml路径
  44.   mapper-locations: classpath:mapper/*.xml

这里面配置了redis，rabbitmq

（注意！！！前后端项目的端口号尽量不一样） 

5、编写controller层，service层，mapper层

1、controller层
  1. package cn.jiyun.controller;
  2.  
  3. import cn.jiyun.mapper.MajorMapper;
  4. import cn.jiyun.pojo.Major;
  5. import cn.jiyun.pojo.Teacher;
  6. import cn.jiyun.service.TeacherService;
  7. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.web.bind.annotation.CrossOrigin;
  10. import org.springframework.web.bind.annotation.RequestBody;
  11. import org.springframework.web.bind.annotation.RequestMapping;
  12. import org.springframework.web.bind.annotation.RestController;
  13.  
  14. import javax.rmi.CORBA.Stub;
  15. import java.util.List;
  16.  
  17. @RestController
  18. @CrossOrigin
  19. @RequestMapping("teacher")
  20. public class TeacherController {
  21.     @Autowired
  22.     private TeacherService teacherService;
  23.     @Autowired
  24.     private MajorMapper majorMapper;
  25.     @RequestMapping("teacherList")
  26.     public Page<Teacher> teacherList(int current , int size, @RequestBody Teacher teacher){
  27.         System.out.println(teacher.getName());
  28.         return teacherService.teacherList(current,size,teacher);
  29.     }
  30.     @RequestMapping("findById")
  31.     public Teacher findById(Integer id){
  32.         return teacherService.findById(id);
  33.  
  34.     }
  35.     @RequestMapping("findAll")
  36.     public List<Major> findAll(){
  37.         return majorMapper.selectList(null);
  38.     }
  39.     @RequestMapping("addTeacher")
  40.     public Boolean addTeacher(@RequestBody Teacher teacher){
  41.         return teacherService.addTeacher(teacher);
  42.     }
  43.     @RequestMapping("delById")
  44.     public Boolean delById(Integer id){
  45.  
  46.         return teacherService.delById(id);
  47.     }
  48.     @RequestMapping("updateTeacher")
  49.     public Boolean updateTeacher(@RequestBody Teacher teacher){
  50.         return teacherService.updateTeacher(teacher);
  51.     }
  52.  
  53. }
2、service层
1、service接口层
  1. package cn.jiyun.service;
  2.  
  3. import cn.jiyun.pojo.Teacher;
  4. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  5.  
  6. public interface TeacherService {
  7.     Page<Teacher> teacherList(int current, int size, Teacher teacher);
  8.  
  9.     Boolean addTeacher(Teacher teacher);
  10.  
  11.     Boolean updateTeacher(Teacher teacher);
  12.  
  13.     Teacher findById(Integer id);
  14.  
  15.     Boolean delById(Integer id);
  16. }
2、service实现类层
  1. package cn.jiyun.service.impl;
  2.  
  3. import cn.jiyun.mapper.TeacherMapper;
  4. import cn.jiyun.pojo.Teacher;
  5. import cn.jiyun.service.TeacherService;
  6. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.stereotype.Service;
  9.  
  10. import javax.xml.ws.Action;
  11.  
  12. @Service
  13. public class TeacherServiceImpl implements TeacherService {
  14.     @Autowired
  15.     private TeacherMapper teacherMapper;
  16.     @Override
  17.     public Page<Teacher> teacherList(int current, int size, Teacher teacher) {
  18.         Page<Teacher> page = new Page<>(current, size);
  19.         page=teacherMapper.teacherList(page,teacher);
  20.         return page;
  21.     }
  22.  
  23.     @Override
  24.     public Boolean addTeacher(Teacher teacher) {
  25.          teacherMapper.insert(teacher);
  26.         return true;
  27.     }
  28.  
  29.     @Override
  30.     public Boolean updateTeacher(Teacher teacher) {
  31.         teacherMapper.updateById(teacher);
  32.         return true;
  33.     }
  34.  
  35.     @Override
  36.     public Teacher findById(Integer id) {
  37.         Teacher teacher = teacherMapper.selectById(id);
  38.         return teacher;
  39.     }
  40.  
  41.     @Override
  42.     public Boolean delById(Integer id) {
  43.         teacherMapper.deleteById(id);
  44.         return true;
  45.     }
  46. }
3、mapper层
  1. package cn.jiyun.mapper;
  2.  
  3. import cn.jiyun.pojo.Teacher;
  4. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  5. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  6. import org.apache.ibatis.annotations.Param;
  7.  
  8. public interface TeacherMapper extends BaseMapper<Teacher> {
  9.     Page<Teacher> teacherList(Page<Teacher> page,@Param("vo") Teacher teacher);
  10. }

6、编写mapper.xml文件

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  3.         "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
  4. <mapper namespace="cn.jiyun.mapper.TeacherMapper">
  5.     <select id="teacherList" resultType="cn.jiyun.pojo.Teacher">
  6.         select t.*,m.name mname from teacher t join major m on m.id=t.mid
  7.         <if test="vo.name!=null and vo.name!=''">
  8.             and t.name like '%${vo.name}%'
  9.         </if>
  10.     </select>
  11. </mapper>

7、整体后端项目就是这样的

第三步：

搭建前端项目

前端项目搭建好之后，开始编写代码

1、首先我们要先用两个命令来下载axios和elelementUI

1、npm i element-ui
2、npm i axios

当上面两个命令执行之后，我们看package.json里面的内容（相当于后端项目的maven依赖），有了这两个就证明是下载成功了

3、成功之后我们需要在main.js中添加相应的包
import axios from 'axios'
//Vue对象使用axios
Vue.prototype.axios = axios;
//导入组件库
import ElementUI from 'element-ui'
//导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件 将El安装到Vue上
Vue.use(ElementUI);

2、接下来我们编写相关的页面（展示所有+分页、添加、修改）

.vue页面中包含的是

<template></template> （前端代码）和 <script></script>（js代码）

我们之前写的普通项目中定义全局变量和方法是通过Vue对象来实现的，现在用了前后端fen'li'ji我们也有一种方式是通过 export default{}来实现

1、展示所有的前端代码
  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       page: {},
  6.       pageParam: {
  7.         current: 1,
  8.         size: 4
  9.       },
  10.       requestParam: {},
  11.       majorList:[],
  12.     }
  13.   },
  14.   methods: {
  15.     initData() {
  16.       axios.post(`http://localhost:82/teacher/teacherList?current=${this.pageParam.current}&size=${this.pageParam.size}`, this.requestParam).then(res => {
  17.         this.page = res.data;
  18.       })
  19.     },
  20.     //当每页最大展示条数发生改变的时候执行-->
  21.     handleSizeChange(val) {
  22.       this.pageParam.size = val;
  23.       this.initData();
  24.     },
  25.     handleCurrentChange(val) {
  26.       this.pageParam.current = val;
  27.       this.initData();
  28.     },
  29.     toAddPage(){
  30.       this.$router.push("/add");
  31.     },
  32.     initMajorData(){
  33.       axios.post(`http://localhost:82/teacher/findAll`).then(res => {
  34.         this.majorList = res.data;
  35.       })
  36.     },
  37.     handleEdit(id){
  38.       this.$router.push({
  39.         path: '/update',
  40.         query:{id:id}
  41.       })
  42.     },
  43.     handleDel(id){
  44.       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  45.         confirmButtonText: '确定',
  46.         cancelButtonText: '取消',
  47.         type: 'warning'
  48.       }).then(() => {
  49.         axios.post("http://localhost:82/teacher/delById?id="+id).then(res=>{
  50.           if(res.data){
  51.             this.$message.success("成功")
  52.             this.initData();
  53.           }
  54.         })
  55.       }).catch(() => {
  56.         this.$message({
  57.           type: 'info',
  58.           message: '已取消删除'
  59.         });
  60.       });
  61.  
  62.     }
  63.  
  64.   },
  65.   created() {
  66.     this.initData();
  67.     this.initMajorData();
  68.   }
  69. }
  70. import axios from "axios";
  71. </script>
  72.  
  73. <template>
  74.   <div>
  75.     姓名：
  76.     <el-input v-model="requestParam.name" style="width: 200px" placeholder="请输入内容"></el-input>
  77.  
  78.     <el-button type="primary" size="mini" @click="initData">搜索</el-button>
  79.     <el-button type="primary" size="mini" @click="toAddPage">添加</el-button>
  80.     <el-table
  81.         :data="page.records"
  82.         stripe
  83.         style="width: 100%">
  84.       <el-table-column
  85.           prop="id"
  86.           label="编号">
  87.       </el-table-column>
  88.       <el-table-column
  89.           prop="name"
  90.           label="姓名">
  91.       </el-table-column>
  92.       <el-table-column
  93.           prop="sex"
  94.           label="性别">
  95.         <!--template:模板 自定义展示内容-->
  96.         <template slot-scope="scope">
  97.           {{ scope.row.sex == 1 ? '男' : '女' }}
  98.         </template>
  99.       </el-table-column>
  100.       <el-table-column
  101.           prop="age"
  102.           label="年龄">
  103.       </el-table-column>
  104.       <el-table-column
  105.           prop="hobby"
  106.           label="爱好">
  107.       </el-table-column>
  108.       <el-table-column
  109.           prop="birthday"
  110.           label="创建日期">
  111.         <template slot-scope="scope">
  112.           {{ scope.row.birthday|format('yyyy-MM-dd') }}
  113.         </template>
  114.       </el-table-column>
  115.       <el-table-column
  116.           prop="mname"
  117.           label="专业">
  118.       </el-table-column>
  119.       <el-table-column label="操作">
  120.         <template slot-scope="scope">
  121.           <el-button
  122.               size="mini"
  123.               @click="handleEdit(scope.row.id)">编辑
  124.           </el-button>
  125.           <el-button
  126.               type="danger"
  127.               size="mini"
  128.               @click="handleDel(scope.row.id)">删除
  129.           </el-button>
  130.         </template>
  131.       </el-table-column>
  132.     </el-table>
  133.     <!--分页-->
  134.     <el-pagination
  135.         @size-change="handleSizeChange"
  136.         @current-change="handleCurrentChange"
  137.         :current-page="page.current"
  138.         :page-sizes="[2, 200, 300, 400]"
  139.         :page-size="page.size"
  140.         layout="total, sizes, prev, pager, next, jumper"
  141.         :total="page.total">
  142.     </el-pagination>
  143.   </div>
  144. </template>

（另外axios我是在show页面又导了包，所以在上面才能直接使用axios.post()，否则只能通过this.axios.post()）

2、添加的前端代码
  1. <script>
  2. import axios from "axios";
  3.  
  4. export default {
  5.   data() {
  6.     return {
  7.       hobbyArr: [],
  8.       majorList: [],
  9.       form: {},
  10.       formLabelWidth: "200px",
  11.       dialogFormVisible: true,
  12.     }
  13.   },
  14.   methods: {
  15.     addTeacher() {
  16.       this.form.hobby=this.hobbyArr.join(",");
  17.       axios.post(`http://localhost:82/teacher/addTeacher`, this.form).then(res => {
  18.         if (res.data) {
  19.           this.$message.success("成功")
  20.           this.dialogFormVisible = false;
  21.           this.$router.push("/");
  22.         }
  23.       })
  24.     },
  25.     initMajorData() {
  26.       axios.post(`http://localhost:82/teacher/findAll`).then(res => {
  27.         this.majorList = res.data;
  28.       })
  29.     },
  30.     quxiao(){
  31.       this.dialogFormVisible=false;
  32.       this.$router.push("/");
  33.     }
  34.   },
  35.   created() {
  36.     this.initMajorData();
  37.   }
  38. }
  39. </script>
  40.  
  41. <template>
  42.   <div>
  43.     <el-dialog title="添加" :visible.sync="dialogFormVisible" :show-close="false">
  44.       <el-form :model="form">
  45.         <el-form-item label="姓名" :label-width="formLabelWidth">
  46.           <el-input v-model="form.name" autocomplete="off"></el-input>
  47.         </el-form-item>
  48.         <el-form-item label="年龄" :label-width="formLabelWidth">
  49.           <el-input v-model="form.age" autocomplete="off"></el-input>
  50.         </el-form-item>
  51.         <el-form-item label="性别" :label-width="formLabelWidth">
  52.           <el-radio-group v-model="form.sex">
  53.             <el-radio :label="1">男</el-radio>
  54.             <el-radio :label="2">女</el-radio>
  55.           </el-radio-group>
  56.         </el-form-item>
  57.         <el-form-item label="爱好" :label-width="formLabelWidth">
  58.           <el-checkbox-group v-model="hobbyArr">
  59.             <el-checkbox label="篮球"></el-checkbox>
  60.             <el-checkbox label="足球"></el-checkbox>
  61.             <el-checkbox label="乒乓球"></el-checkbox>
  62.           </el-checkbox-group>
  63.         </el-form-item>
  64.  
  65.         <el-form-item label="生日" :label-width="formLabelWidth">
  66.           <el-date-picker
  67.               v-model="form.birthday"
  68.               type="date"
  69.               placeholder="日期">
  70.           </el-date-picker>
  71.         </el-form-item>
  72.         <el-form-item label="专业" :label-width="formLabelWidth">
  73.           <el-select v-model="form.mid" placeholder="请选择">
  74.             <el-option
  75.                 v-for="item in majorList"
  76.                 :key="item.id"
  77.                 :label="item.name"
  78.                 :value="item.id">
  79.             </el-option>
  80.           </el-select>
  81.         </el-form-item>
  82.       </el-form>
  83.       <el-button  @click="quxiao()">取消</el-button>
  84.       <el-button type="primary" @click="addTeacher">确 定</el-button>
  85.     </el-dialog>
  86.   </div>
  87. </template>
3、修改的前端代码
  1. <script>
  2. import axios from "axios";
  3. export default {
  4.   data() {
  5.     return {
  6.       hobbyArr: [],
  7.       majorList: [],
  8.       form: {},
  9.       formLabelWidth: "200px",
  10.       dialogFormVisible: true,
  11.     }
  12.   },
  13.   methods: {
  14.     addTeacher() {
  15.       this.form.hobby=this.hobbyArr.join(",");
  16.       axios.post(`http://localhost:82/teacher/updateTeacher`, this.form).then(res => {
  17.         if (res.data) {
  18.           this.$message.success("成功")
  19.           this.dialogFormVisible = false;
  20.           this.$router.push("/");
  21.         }
  22.       })
  23.     },
  24.     quxiao(){
  25.       this.dialogFormVisible=false;
  26.       this.$router.push("/");
  27.     },
  28.     initMajorData() {
  29.       axios.post(`http://localhost:82/teacher/findAll`).then(res => {
  30.         this.majorList = res.data;
  31.       })
  32.     },
  33.     findById(id) {
  34.       this.form.hobby=this.hobbyArr.join(",");
  35.       axios.post(`http://localhost:82/teacher/findById?id=`+id).then(res => {
  36.  
  37.         this.form = res.data;
  38.         this.hobbyArr=this.form.hobby.split(",");
  39.       })
  40.     }
  41.   },
  42.   created() {
  43.     // this.initData();
  44.     var id = this.$route.query.id;
  45.     this.initMajorData();
  46.     this.findById(id);
  47.   }
  48. }
  49. </script>
  50. <template>
  51.   <div>
  52.     <el-dialog title="修改" :visible.sync="dialogFormVisible" :show-close="false">
  53.       <el-form :model="form">
  54.         <el-form-item label="姓名" :label-width="formLabelWidth">
  55.           <el-input v-model="form.name" autocomplete="off"></el-input>
  56.         </el-form-item>
  57.         <el-form-item label="年龄" :label-width="formLabelWidth">
  58.           <el-input v-model="form.age" autocomplete="off"></el-input>
  59.         </el-form-item>
  60.         <el-form-item label="性别" :label-width="formLabelWidth">
  61.           <el-radio-group v-model="form.sex">
  62.             <el-radio :label="1">男</el-radio>
  63.             <el-radio :label="2">女</el-radio>
  64.           </el-radio-group>
  65.         </el-form-item>
  66.         <el-form-item label="爱好" :label-width="formLabelWidth">
  67.           <el-checkbox-group v-model="hobbyArr">
  68.             <el-checkbox label="篮球"></el-checkbox>
  69.             <el-checkbox label="足球"></el-checkbox>
  70.             <el-checkbox label="乒乓球"></el-checkbox>
  71.           </el-checkbox-group>
  72.         </el-form-item>
  73.         <el-form-item label="生日" :label-width="formLabelWidth">
  74.           <el-date-picker
  75.               v-model="form.birthday"
  76.               type="date"
  77.               placeholder="日期">
  78.           </el-date-picker>
  79.         </el-form-item>
  80.         <el-form-item label="专业" :label-width="formLabelWidth">
  81.           <el-select v-model="form.mid" placeholder="请选择">
  82.             <el-option
  83.                 v-for="item in majorList"
  84.                 :key="item.id"
  85.                 :label="item.name"
  86.                 :value="item.id">
  87.             </el-option>
  88.           </el-select>
  89.         </el-form-item>
  90.       </el-form>
  91.       <el-button @click="quxiao">取消</el-button>
  92.       <el-button type="primary" @click="addTeacher">确 定</el-button>
  93.     </el-dialog>
  94.   </div>
  95.  
  96. </template>

添加和修改没啥区别，修改就是多了一个数据的回显，在show页面将id传递到update页面，然后axios向后台发送请求，返回一个对象，然后赋值给form表单，就完成了回显，需要特别注意的是hobby爱好是复选框，需要单独处理，以上代码中有处理方法

3、页面写好了，但是会不会跳转呢？以及如何解决？

答：不会的，因为我们前端项目主要是靠路由来实现的，我们到目前为止并没有配置路由

解决方案：
1、找到router包下的index.js
2、给文件中添加相应的路径以及改路径会跳转到的页面
  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import HomeView from '../views/HomeView.vue'
  4. import LoginView from '../views/LoginView.vue'
  5. import HelloView from '../views/HelloView.vue'
  6. import ShowView from '../views/ShowView.vue'
  7. import AddView from '../views/AddView.vue'
  8. import UpdateView from '../views/UpdateView.vue'
  9.  
  10. Vue.use(VueRouter)
  11.  
  12. const routes = [
  13.   {
  14.     path: '/home',
  15.     name: 'home',
  16.     component: HomeView
  17.   },
  18.   {
  19.     path: '/update',
  20.     name: 'update',
  21.     component: UpdateView
  22.   },
  23.   {
  24.     path: '/add',
  25.     name: 'add',
  26.     component: AddView
  27.   },
  28.   {
  29.     path: '/login',
  30.     name: 'login',
  31.     component: LoginView
  32.   },
  33.   {
  34.     path: '/',
  35.     name: 'show',
  36.     component: ShowView
  37.   },
  38.   {
  39.     path: '/hello',
  40.     name: 'hello',
  41.     component: HelloView
  42.   },
  43.   {
  44.     path: '/about',
  45.     name: 'about',
  46.     // route level code-splitting
  47.     // this generates a separate chunk (about.[hash].js) for this route
  48.     // which is lazy-loaded when the route is visited.
  49.     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  50.   }
  51. ]
  52. const router = new VueRouter({
  53.   routes
  54. })
  55.  
  56. export default router

4、前端项目整体

（注意！！！前后端项目的端口号尽量不一样） 

前端项目额端口号默认是8080

第四步

 运行项目

1、运行前端项目

可以在idea上控制台通过npm run -serve，也可以点击package.json里面的

2、运行后端项目

点击启动类的三角

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/742862
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号