SpringBoot与vue的简单小例子----学生与课程的增删改查

最新推荐文章于 2023-08-10 09:10:31 发布

hello_cmy

最新推荐文章于 2023-08-10 09:10:31 发布

阅读量1.2k

点赞数

分类专栏： SpringBoot与vue

本文链接：https://blog.csdn.net/hello_cmy/article/details/104491257

版权

SpringBoot与vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

附上github的地址：git@github.com:201705010201/SpringBoot-vue-demo.git

一 . 数据库信息：

create database mis;

use mis;

drop table student;
drop table course;
drop table sc;

create  table  student (
	sno  char(12)  not null ,
	sname  varchar(20) ,
	ssex  char(3) ,
	sage  int,
	sdept  varchar(20) ,
	primary  key(sno)  
);


insert into student(sno, sname, ssex, sage, sdept)
 values('200215121', '李勇', '男',20,'cs');

insert into student(sno, sname, ssex, sage, sdept)
 values('200215122', '刘晨', '女',19,'cs');

insert into student(sno, sname, ssex, sage, sdept)
 values('200215123', '王敏', '女',18,'ma');

insert into student(sno, sname, ssex, sage, sdept)
 values('200215125', '张立', '男',19,'is');

create  table course (
	cno varchar(6) not null ,
	cname varchar(20) not null ,
	cpno varchar(6) ,
	ccredit int ,
	primary  key (cno) 
    );

insert into course(cno, cname, cpno ,ccredit)
 values('1', '数据库','5',4);

insert into course(cno, cname, cpno ,ccredit)
 values('2', '数学',null,2);

insert into course(cno, cname, cpno ,ccredit)
 values('3', '信息系统','1',4);

insert into course(cno, cname, cpno ,ccredit)
 values('4', '操作系统','6',3);

insert into course(cno, cname, cpno ,ccredit)
 values('5', '数据结构','7',4);

insert intocourse(cno, cname, cpno ,ccredit)
 values('6', '数据处理',null,2);

insert into course(cno, cname, cpno ,ccredit)
 values('7', 'PASCAL语言','6',4);

create table sc (
	sno char(12)  not null ,
	cno varchar(6) not null ,
	grade int,
	PRIMARY KEY (sno,cno)
) ;

insert into sc(sno, cno, grade)
 values('200215121','1',92);

insert into sc(sno, cno, grade)
 values('200215121','2',85);

insert into sc(sno, cno, grade)
 values('200215121','3',88);

insert into sc(sno, cno, grade)
values('200215122','2',90);

insert into sc(sno, cno, grade)
 values('200215122','3',80);

关于数据库的操作，这里就不做介绍了。

二. 项目结构：

三. 主要后端代码介绍

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.xm</groupId>
	<artifactId>sbm_sc</artifactId>
	<version>0.0.1</version>
	<packaging>jar</packaging>

	<name>sbm_sc</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.4.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>2.1.0</version>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>
        
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

application.yml

#端口，项目上下文根
server:
  port: 8080
  servlet:
    context-path: /sc
    
#配置mybatis
mybatis:
  #配置xml映射路径
  mapper-locations: classpath:mapper/*.xml
   #配置实体类的别名
  type-aliases-package: com.xm.pojo
  configuration:
    #开启驼峰命名法
    map-underscore-to-camel-case: true
    

#配置mysql连接
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mis?serverTimezone=Asia/Shanghai
    username: root
    password: 123456

里面数据库的信息需要根据你自己的改。

bean包下的实体类。Student类

package com.xm.pojo;

/**
 * name:学生实体
 * @author xxm
 *
 */
public class Student {
    /**
     * content:学号
     */
    private String sno;
    /**
     * content:姓名
     */
    private String sname;
    /**
     * content:性别
     */
    private String ssex;
    /**
     * content:年龄
     */
    private int sage;
    /**
     * content:系别
     */
    private String sdept;

    public Student() {
    }

    public String getSno() {
        return sno;
    }

    public void setSno(String sno) {
        this.sno = sno;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public String getSsex() {
        return ssex;
    }

    public void setSsex(String ssex) {
        this.ssex = ssex;
    }

    public int getSage() {
        return sage;
    }

    public void setSage(int sage) {
        this.sage = sage;
    }

    public String getSdept() {
        return sdept;
    }

    public void setSdept(String sdept) {
        this.sdept = sdept;
    }

    @Override
    public String toString() {
        return "Student{" + "sno=" + sno + ", sname=" + sname + ", ssex=" + ssex + ", sage=" + sage + ", sdept=" + sdept + '}';
    }
           
}

Course类

package com.xm.pojo;

public class Course {
    private String cno;
    private String cname;
    private String cpno;
    private int ccredit;

    public Course() {
    }

    public Course(String cno, String cname, String cpno, int ccredit) {
        this.cno = cno;
        this.cname = cname;
        this.cpno = cpno;
        this.ccredit = ccredit;
    }

    public String getCno() {
        return cno;
    }

    public void setCno(String cno) {
        this.cno = cno;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public String getCpno() {
        return cpno;
    }

    public void setCpno(String cpno) {
        this.cpno = cpno;
    }

    public int getCcredit() {
        return ccredit;
    }

    public void setCcredit(int ccredit) {
        this.ccredit = ccredit;
    }

    @Override
    public String toString() {
        return "Course{" +
                "cno='" + cno + '\'' +
                ", cname='" + cname + '\'' +
                ", cpno='" + cpno + '\'' +
                ", ccredit=" + ccredit +
                '}';
    }
}

mapper包下的接口。

StudentMapper

package com.xm.mapper;

import java.util.List;

import com.xm.pojo.Student;
import java.util.Map;

public interface StudentMapper {

	/**
	 * 根据id查询
	 * @param sno
	 * @return
	 */
	public Student getById(String sno) ;
	
	/**
	 * 查询全部
	 * @return
	 */
	public List<Student> list();
	
	/**
	 * 查询成绩
	 * @return
	 */
	public List<Map>  grade();
        
	/**
	 * 插入
	 * @param student
         * @return 
	 */
	public int insert(Student student);

	/**
	 * 根据student的id修改
	 * @param student
         * @return 
	 */
	public int update(Student student);
	
	/**
	 * 根据id删除
         * @return 
	 * @param sno
	 */
	public int delete(String sno);
	
	
}

CourseMapper

package com.xm.mapper;

import com.xm.pojo.Course;
import com.xm.pojo.Student;

import java.util.List;
import java.util.Map;

public interface CourseMapper {

	/**
	 * 根据id查询
	 * @param cno
	 * @return
	 */
	public Course getById(String cno) ;
	
	/**
	 * 查询全部
	 * @return
	 */
	public List<Course> list();
	
	/**
	 * 查询成绩
	 * @return
	 */
//	public List<Map>  grade();
        
	/**
	 * 插入
	 * @param course
         * @return 
	 */
	public int insert(Course course);

	/**
	 * 根据course的id修改
	 * @param course
         * @return 
	 */
	public int update(Course course);
	
	/**
	 * 根据id删除
         * @return 
	 * @param cno
	 */
	public int delete(String cno);	
	
}

resources目录下的mapper中的 xml文件。

StudentMapper.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.xm.mapper.StudentMapper">

    <!-- 根据学号查询学生 -->
    <select id="getById" parameterType="String" resultType="Student">
        select * from student where sno=#{sno}
    </select>

    <!-- 查询所有学生 -->
    <select id="list"  resultType="Student">
        select * from student
    </select>
    
    <!-- 查询所有学生成绩 -->
    <select id="grade"  resultType="map">
        select sname,cname,grade from sc,course,student where sc.sno=student.sno and sc.cno=course.cno order by sname
    </select>
    
    <!-- 插入一个学生 -->
    <insert id="insert" parameterType="Student">
        insert into student(sno,sname,ssex,sage,sdept) values(#{sno},#{sname},#{ssex},#{sage},#{sdept})
    </insert>

    <!-- 根据学号修改学生信息 -->
    <update id="update" parameterType="Student" >
        update student set sname=#{sname},ssex=#{ssex},sage=#{sage},sdept=#{sdept} where sno=#{sno}
    </update>

    <!-- 根据学号删除学生 -->
    <delete id="delete" parameterType="String" >
        delete  from student where sno=#{sno}
    </delete>
</mapper>

CourseMapper.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.xm.mapper.CourseMapper">

    <!-- 根据课程号查询课程 -->
    <select id="getById" parameterType="String" resultType="Course">
        select * from course where cno=#{cno}
    </select>

    <!-- 查询所有课程 -->
    <select id="list"  resultType="Course">
        select * from course
    </select>
    
    <!-- 查询所有学生成绩 -->
<!--    <select id="grade"  resultType="map">-->
<!--        select sname,cname,grade from sc,course,student where sc.sno=student.sno and sc.cno=course.cno order by sname-->
<!--    </select>-->
    
    <!-- 插入一门课程 -->
    <insert id="insert" parameterType="Course">
        insert into course(cno,cname,cpno,ccredit) values(#{cno},#{cname},#{cpno},#{ccredit})
    </insert>

    <!-- 根据课程号修改课程信息 -->
    <update id="update" parameterType="Course" >
        update course set cname=#{cname},cpno=#{cpno},ccredit=#{ccredit} where cno=#{cno}
    </update>

    <!-- 根据课程号删除课程 -->
    <delete id="delete" parameterType="String" >
        delete  from course where cno=#{cno}
    </delete>
</mapper>

controller包下的类。

StudentController类

package com.xm.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;

import com.xm.mapper.StudentMapper;
import com.xm.pojo.Student;
import java.util.Map;

@CrossOrigin//允许跨域访问
@RestController
public class StudentController {
	@Autowired
	private StudentMapper studentMapper;
	
	/**
	 * 根据id查询学生
	 * @param sno
	 * @return
	 */
	@GetMapping("/student/{sno}")
	public Student getById(@PathVariable("sno") String sno) {
            Student student = studentMapper.getById(sno);
            return student;
	}
	
	/**
	 * 查询全部学生
	 * @return
	 */
	@GetMapping("/students")
	public List<Student> list(){
            List<Student> students = studentMapper.list();
            return students; 
	}
	
	/**
	 * 查询学生成绩
	 * @return
	 */
	@GetMapping("/grades")
	public List<Map> gradelist(){
            List<Map> grademap = studentMapper.grade();
            return grademap; 
	}
        
        /**
	 * 插入
	 * @param student
         * @return
	 */
	@PostMapping("/student")
	public String insert(@RequestBody Student student) {
            int rows=studentMapper.insert(student);
            return "{\"rows\":\""+rows+"\"}" ;
	}
	
	/**
	 * 修改
	 * @param student
         * @return
	 */
	@PutMapping("/student")
	public String update(@RequestBody Student student) {
            int rows=studentMapper.update(student);
            return "{\"rows\":\""+rows+"\"}" ;
	}
	
	/**
	 * 根据id删除
	 * @param sno
         * @return
	 */
	@DeleteMapping("/student/{sno}")
	public String delete(@PathVariable("sno") String sno) {
            int rows=studentMapper.delete(sno);
            return "{\"rows\":\""+rows+"\"}" ;
	}

}

CourseController

package com.xm.controller;

import com.xm.mapper.CourseMapper;
import com.xm.pojo.Course;
import com.xm.pojo.Student;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Map;

@CrossOrigin//允许跨域访问
@RestController
public class CourseController {
	@Autowired
	private CourseMapper courseMapper;
	
	/**
	 * 根据id查询课程
	 * @param cno
	 * @return
	 */
	@GetMapping("/course/{cno}")
	public Course getById(@PathVariable("cno") String cno) {
		Course course = courseMapper.getById(cno);
            return course;
	}
	
	/**
	 * 查询全部课程
	 * @return
	 */
	@GetMapping("/courses")
	public List<Course> list(){
            List<Course> Courses = courseMapper.list();
            return Courses;
	}
	
	/**
	 * 查询学生成绩
	 * @return
	 */
//	@GetMapping("/grades")
//	public List<Map> gradelist(){
//            List<Map> grademap = courseMapper.grade();
//            return grademap;
//	}
        
        /**
	 * 插入
	 * @param course
         * @return
	 */
	@PostMapping("/course")
	public String insert(@RequestBody Course course) {
            int rows=courseMapper.insert(course);
            return "{\"rows\":\""+rows+"\"}" ;
	}
	
	/**
	 * 修改
	 * @param course
         * @return
	 */
	@PutMapping("/course")
	public String update(@RequestBody Course course) {
            int rows=courseMapper.update(course);
            return "{\"rows\":\""+rows+"\"}" ;
	}
	
	/**
	 * 根据id删除
	 * @param cno
         * @return
	 */
	@DeleteMapping("/course/{cno}")
	public String delete(@PathVariable("cno") String cno) {
            int rows=courseMapper.delete(cno);
            return "{\"rows\":\""+rows+"\"}" ;
	}

}

四. 前段代码。

student.html


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <title></title>
</head>

<body>
    <div id="app" class="container">
        <table class="table table-bordered table-striped text-center" style="margin-top:20px;">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>学院</th>
                    <th colspan="2">操作</th>
                </tr>
            </thead>
            <tr>
                <td><input v-bind:readOnly="isedit" type="text" v-model="rowtp.sno" class="form-control" placeholder="">
                </td>
                <td><input type="text" v-model="rowtp.sname" class="form-control" placeholder=""></td>
                <td><input type="text" v-model="rowtp.ssex" class="form-control" placeholder=""></td>
                <td><input type="text" v-model="rowtp.sage" class="form-control" placeholder=""></td>
                <td><input type="text" v-model="rowtp.sdept" class="form-control" placeholder=""></td>
                <td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
                <td><button type="button" class="btn btn-primary" v-on:click="Clear">放弃</button></td>
            </tr>
            <tr v-for="(row,index) in students">

                <td>{{ row.sno}}</td>
                <td>{{ row.sname}}</td>
                <td>{{ row.ssex}}</td>
                <td>{{ row.sage}}</td>
                <td>{{ row.sdept}}</td>
                <td><a href="#" v-on:click="Edit(row)">编辑</a> </td>
                <td><a href="#" v-on:click="Delete(index)">删除</a> </td>
            </tr>

        </table>

    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                students: [],
                rowtp: { sno: '', sname: '', ssex: '', sage: '', sdept: '' },
                isedit: false
            },
            mounted: function () {
                //发送get请求
                this.$http.get('http://localhost:8080/sc/students').then(function (res) {
                    this.students = res.body;
                }, function () {
                    alert('请求失败');
                });
            },
            methods: {
                Save: function () {
                    if (this.rowtp.sno == '' || this.rowtp.sname == '' || this.rowtp.ssex == '' || this.rowtp.sage == '' || this.rowtp.sdept == '') {
                        alert("学号、姓名等不能为空!");
                        return;
                    }

                    var temp = this.rowtp;

                    //var ejson = JSON.stringify(temp);

                    if (this.isedit == false) {
                        //增加数据库
                        //Vue.http.options.emulateJSON = true;  //  全局启用emulateJSON 选项
                        this.$http.post('http://localhost:8080/sc/student',JSON.stringify(temp)).then(function (res) {
                            //console.log(res);
                            if (res.body.rows > 0) {
                                this.students.push(temp);
                            }
                        }, function (res) {
                            // 这里是处理错误的回调
                            //console.log(res)
                        });

                    } else {
                        //修改数据库
                        this.$http.put('http://localhost:8080/sc/student',JSON.stringify(temp)).then(function (res) {
                            //console.log(res);
                            if (res.body.rows > 0) {
                                for (var i = 0; i < this.students.length; i++) {
                                    if (this.students[i].sno == temp.sno) {
                                        this.students[i].sname = temp.sname;
                                        this.students[i].ssex = temp.ssex;
                                        this.students[i].sage = temp.sage;
                                        this.students[i].sdept = temp.sdept;
                                        break;
                                    }
                                };
                            }
                        }, function (res) {
                            // 这里是处理错误的回调
                            console.log(res)
                        });

                    }
                    //还原模板
                    this.Clear();
                    this.isedit = false;
                },
                Delete: function (index) {
                    //数据库操作

                    this.$http.delete('http://localhost:8080/sc/student/' + this.students[index].sno ).then(function (res) {
                        if (res.body.rows > 0) {
                            this.students.splice(index, 1);//从下标i开始删除1个元素：删除下标为i的元素
                            this.Clear();
                        }
                    }, function (res) {
                        // 这里是处理错误的回调
                        console.log(res)
                    });
                },
                Edit: function (row) {
                    this.rowtp.sno = row.sno;
                    this.rowtp.sname = row.sname;
                    this.rowtp.ssex = row.ssex;
                    this.rowtp.sage = row.sage;
                    this.rowtp.sdept = row.sdept;

                    this.isedit = true;
                },
                Clear: function () {
                    this.rowtp = { sno: '', sname: '', ssex: '', sage: '', sdept: '' };
                    this.isedit = false;
                }

            }
        });
       
    </script>
</body>

</html>

course.html类似的


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <title></title>
</head>

<body>
    <div id="app" class="container">
        <table class="table table-bordered table-striped text-center" style="margin-top:20px;">
            <thead>
                <tr>
                    <th>课程号</th>
                    <th>课程名</th>
                    <th>cpno</th>
                    <th>学分</th>
                    <th colspan="2">操作</th>
                </tr>
            </thead>
            <tr>
                <td><input v-bind:readOnly="isedit" type="text" v-model="rowtp.cno" class="form-control" placeholder="">
                </td>
                <td><input type="text" v-model="rowtp.cname" class="form-control" placeholder=""></td>
                <td><input type="text" v-model="rowtp.cpno" class="form-control" placeholder=""></td>
                <td><input type="text" v-model="rowtp.ccredit" class="form-control" placeholder=""></td>
            
                <td><button type="button" class="btn btn-primary" v-on:click="Save">保存</button></td>
                <td><button type="button" class="btn btn-primary" v-on:click="Clear">放弃</button></td>
            </tr>
            <tr v-for="(row,index) in courses">

                <td>{{ row.cno}}</td>
                <td>{{ row.cname}}</td>
                <td>{{ row.cpno}}</td>
                <td>{{ row.ccredit}}</td>
                <td><a href="#" v-on:click="Edit(row)">编辑</a> </td>
                <td><a href="#" v-on:click="Delete(index)">删除</a> </td>
            </tr>

        </table>

    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                courses: [],
                rowtp: { cno: '', cname: '', cpno: '', ccredit: ''},
                isedit: false
            },
            mounted: function () {
                //发送get请求
                this.$http.get('http://localhost:8080/sc/courses').then(function (res) {
                    this.courses = res.body;
                }, function () {
                    alert('请求失败');
                });
            },
            methods: {
                Save: function () {
                    if (this.rowtp.cno == '' || this.rowtp.cname == '') {
                        alert("课程号、课程名不能为空!");
                        return;
                    }

                    var temp = this.rowtp;

                    //var ejson = JSON.stringify(temp);

                    if (this.isedit == false) {
                        //增加数据库
                        //Vue.http.options.emulateJSON = true;  //  全局启用emulateJSON 选项
                        this.$http.post('http://localhost:8080/sc/course',JSON.stringify(temp)).then(function (res) {
                            //console.log(res);
                            if (res.body.rows > 0) {
                                this.courses.push(temp);
                            }
                        }, function (res) {
                            // 这里是处理错误的回调
                            //console.log(res)
                        });

                    } else {
                        //修改数据库
                        this.$http.put('http://localhost:8080/sc/course',JSON.stringify(temp)).then(function (res) {
                            //console.log(res);
                            if (res.body.rows > 0) {
                                for (var i = 0; i < this.courses.length; i++) {
                                    if (this.courses[i].cno == temp.cno) {
                                        this.courses[i].cname = temp.cname;
                                        this.courses[i].cpno = temp.cpno;
                                        this.courses[i].ccredit = temp.ccredit;
                                        break;
                                    }
                                };
                            }
                        }, function (res) {
                            // 这里是处理错误的回调
                            console.log(res)
                        });

                    }
                    //还原模板
                    this.Clear();
                    this.isedit = false;
                },
                Delete: function (index) {
                    //数据库操作

                    this.$http.delete('http://localhost:8080/sc/course/' + this.courses[index].cno ).then(function (res) {
                        if (res.body.rows > 0) {
                            this.courses.splice(index, 1);//从下标i开始删除1个元素：删除下标为i的元素
                            this.Clear();
                        }
                    }, function (res) {
                        // 这里是处理错误的回调
                        console.log(res)
                    });
                },
                Edit: function (row) {
                    this.rowtp.cno = row.cno;
                    this.rowtp.cname = row.cname;
                    this.rowtp.cpno = row.cpno;
                    this.rowtp.ccredit = row.ccredit;

                    this.isedit = true;
                },
                Clear: function () {
                    this.rowtp = { cno: '', cname: '', cpno: '', ccredit: '' };
                    this.isedit = false;
                }

            }
        });
       
    </script>
</body>

</html>

五. 运行。

首先你用IDEA或者别的软件将后端项目跑起来，然后进入浏览器，输入http://localhost:8080/sc/students，然后再运行前端html即可，就可以显示出来学生信息，进行增删改查。课程也是类似的。

这里展示一下student的页面。

可以进行一下简单的增删改查操作。

hello_cmy

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot与vue的简单小例子----学生与课程的增删改查

一 . 数据库信息：create database mis;use mis;drop table student;drop table course;drop table sc;create table student ( sno char(12) not null , sname varchar(20) , ssex char(3) , sage in...
复制链接

扫一扫