6.14总结

编译工具：IntelliJ IDEA 2023.3.3，Visual Studio Code

实验内容：

1.首先创建sqlserverl数据库： create database sqlserver

2.建立students表create table student
(
    Sno   char(7)  not null
        primary key,
    Sname char(10) not null,
    Ssex  char(2)  null,
    Sage  tinyint  null,
    Sdept char(20) null
);

3.后端连接到数据库 application.yml：
spring:

  datasource:

    password: dbpassword

    url: jdbc:sqlserver://localhost:1433;databaseName=mydatabase

    username: dbuser

4.前端整体页面，一加载该页面数据库中的所有数据显示在网页


查找全部数据的sql语句

5.新增页面及其查询语句

6.查询的页面及sql语句

7.修改的页面及查询语句，在你想修改的右边操作按钮点击修改

将小红修改成男生

修改成功

8.删除操作就是在你先删除数据右边点击删除按钮即可删除，现在将小红删除

9.前端整体代码

<template>

 

  <div>

    <div class="card" style="margin-bottom: 10px;">

      <el-input style="width: 300px; margin-right: 10px" placeholder="请输入学号" icon="el-icon-search" v-model="sno" />

      <el-input style="width: 300px; margin-right: 10px" placeholder="请输入姓名" icon="el-icon-search" v-model="sname" />

      <el-button type="primary" @click="select">查询</el-button>

      <el-button type="info" style="margin: 0 10px" @click="reset">重置</el-button>

    </div>

 

    <div class="card" style="margin-bottom: 10px">

      <div style="margin-bottom: 10px">

        <el-button type="primary" @click="handleAdd">新增</el-button>

      </div>

      <el-table :data="tableData" style="width: 100%" max-height="250">

        <el-table-column fixed prop="sno" label="学号" width="150">

        </el-table-column>

        <el-table-column prop="sname" label="姓名" width="120">

        </el-table-column>

        <el-table-column prop="ssex" label="性别" width="120">

        </el-table-column>

        <el-table-column prop="sage" label="年龄" width="120">

        </el-table-column>

        <el-table-column prop="sdept" label="专业" width="140">

        </el-table-column>

        <el-table-column fixed="right" label="操作" width="300">

          <template slot-scope="scope">

            <el-button @click="updateStu(scope.row)" type="primary" size="small">

              修改

            </el-button>

            <el-button @click="deleteS(scope.row)" type="danger" size="small">

              删除

            </el-button>

          </template>

        </el-table-column>

      </el-table>

    </div>

 

    <el-dialog title="新增" :visible.sync="addvise">

      <el-form :model="student">

        <el-form-item label="学号" :label-width="formLabelWidth">

          <el-input v-model="student.sno" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="姓名" :label-width="formLabelWidth">

          <el-input v-model="student.sname" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">

          <el-select v-model="student.ssex" placeholder="请选择">

            <el-option label="男" value="男"></el-option>

            <el-option label="女" value="女"></el-option>

          </el-select>

        </el-form-item>

        <el-form-item label="年龄" :label-width="formLabelWidth">

          <el-input v-model="student.sage" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="专业" :label-width="formLabelWidth">

          <el-select v-model="student.sdept" placeholder="请选择">

            <el-option label="计算机科学与技术" value="计算机科学与技术"></el-option>

            <el-option label="软件工程" value="软件工程"></el-option>

            <el-option label="数字媒体与技术" value="数字媒体与技术"></el-option>

            <el-option label="信息工程" value="信息工程"></el-option>

            <el-option label="网络工程" value="网络工程"></el-option>

          </el-select>

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="addvis = false">取 消</el-button>

        <el-button type="primary" @click="add">确 定</el-button>

      </div>

    </el-dialog>

 

    <el-dialog title="修改" :visible.sync="updatevis">

      <el-form :model="updateData">

        <el-form-item label="学号" :label-width="formLabelWidth">

          <el-input v-model="updateData.sno" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="姓名" :label-width="formLabelWidth">

          <el-input v-model="updateData.sname" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">

          <el-select v-model="updateData.ssex" placeholder="请选择">

            <el-option label="男" value="男"></el-option>

            <el-option label="女" value="女"></el-option>

          </el-select>

        </el-form-item>

        <el-form-item label="年龄" :label-width="formLabelWidth">

          <el-input v-model="updateData.sage" autocomplete="off"></el-input>

        </el-form-item>

        <el-form-item label="专业" :label-width="formLabelWidth">

          <el-select v-model="updateData.sdept" placeholder="请选择">

            <el-option label="计算机科学与技术" value="计算机科学与技术"></el-option>

            <el-option label="软件工程" value="软件工程"></el-option>

            <el-option label="数字媒体与技术" value="数字媒体与技术"></el-option>

            <el-option label="信息工程" value="信息工程"></el-option>

            <el-option label="网络工程" value="网络工程"></el-option>

          </el-select>

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="updatevis = false">取 消</el-button>

        <el-button type="primary" @click="update">确 定</el-button>

      </div>

    </el-dialog>

  </div>

</template>

 

<script>

 

export default {

  name: 'HomeView',

  data () {

    return {

 

      sno: '',

      sname: '',

      tableData: [],

      updateData: {},

      student: {},

      addvise: false,

      updatevis: false,

      formLabelWidth: '120px'

    }

  },

  methods: {

    load () {

      console.log('加载')

 

      this.axios.get('http://localhost:9090/student')

        .then(res => {

          // console.log('所有庶几乎')

          console.log(res.data)

          this.tableData = res.data

        })

    },

    handleAdd () {

      console.log('新增')

      this.addvise = true

    },

    updateStu (row) {

      console.log('修改')

      console.log(row)

      this.updateData = row

      this.updatevis = true

    },

    deleteS (row) {

      console.log('删除')

      console.log(row)

      this.axios.delete('http://localhost:9090/student', {

        params: {

          sno: row.sno

        }

      }).then(res => {

        this.$message.success('删除成功')

        this.load()

      })

    },

    select () {

      console.log('查询')

      this.axios.get('http://localhost:9090/student/select', {

        params: {

          sno: this.sno,

          sname: this.sname

        }

      }).then(res => {

        this.tableData = res.data

      })

    },

    add () {

      this.axios.post('http://localhost:9090/student', this.student).then(res => {

        this.$message.success('添加成功')

        this.load()

      })

      this.student = {}

      this.addvise = false

    },

    update () {

      this.axios.post('http://localhost:9090/student/update', this.updateData).then(res => {

        this.$message.success('修改成功')

        this.updatevis = false

        this.load()

      }

      )

    },

    reset () {

      this.sno = ''

      this.sname = ''

      this.load()

    }

  },

  mounted () {

    this.load()

  }

 

}

</script>

 

后端接口代码

package com.example.sqlserver.controller;


import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.sqlserver.dao.StudentDao;
import com.example.sqlserver.entity.Student;
import com.example.sqlserver.service.StudentService;
import org.apache.ibatis.annotations.Delete;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.io.Serializable;
import java.util.List;


@CrossOrigin
@RestController
@RequestMapping("student")
public class StudentController {
    @Autowired
    StudentDao studentDao;
    @GetMapping
    public List<Student> getAllStudent(){
        return studentDao.selectall();
    }
    @PostMapping
    public void addStudent(@RequestBody Student student){
        studentDao.insertstu(student);
    }

    @PostMapping("/update")
    public void updateStudent(@RequestBody Student student){
        studentDao.updatestu(student);
    }
    @DeleteMapping
    public void deleteStudent(@RequestParam String sno){
        studentDao.deletestu(sno);
    }

    @GetMapping("select")
    public List<Student> selectStudent(@RequestParam String sno,@RequestParam String sname){
        return studentDao.selectby(sno,sname);
    }
}