安卓开发日记58
编译工具：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);
}
}
