1. Backend writing interface
先写 entity, dao,service,controller.xml
1. Query:
As shown in the previous article
controller:
@RestController
@Api(value = "v1", tags = "8-0.后台管理系统医生信息模块接口")
@RequestMapping("/manage-api/v1")
public class DoctorController {
@Resource
private DoctorMapper doctorMapper;
@Resource
private DoctorService doctorService;
/*查看数据*/
@GetMapping("/doctor/info")
public Result1<?> getDoctor(){
// return doctorMapper.findALL();
return Result1.success(doctorMapper.findALL());
}
dao:
public interface DoctorMapper extends Mapper<Doctor> {
@Select("select * from doctor")
List<Doctor> findALL();
vue code:
data() {
return {
form:{
},
dialogVisible :false,
tableData:[
// {"id":1,"name":"王医生","sex":"男","age":29,"department":"风湿科","position":"医师","description":"类风湿关节炎、骨关节炎、痛风"},{"id":2,"name":"李医生","sex":"男","age":35,"department":"皮肤性病科","position":"主任医师","description":"常见皮肤病及性传播疾病"}
]
}
},
created() {
this.load()
},
methods:{
load(){
axios.get("/doctor/info").then(res=>{
console.log(res)
this.tableData=res;
}).catch(error=>{
})
},
2. Add/modify (post)
rear end:
controller:
The save method is implemented in service and requires passing parameters. The controller layer only defines methods and does not write specific implementations. The specific implementation is in the service layer.
/*插入或修改*/
@PostMapping("/doctor/insert")
public Integer save(@RequestBody Doctor doctor){
return doctorService.save(doctor);
}
service layer:
Service has interface and class implementation, and the methods are written in the class
@Service
public class DoctorService {
@Autowired
private DoctorMapper doctorMapper;
public int save(Doctor doctor){
if(doctor.getId()==null){
//doctor没有id就是新增,否修改
return doctorMapper.insert(doctor);
}else{
return doctorMapper.update(doctor);
}
}
}
dao:
SQL statements can be written directly here, such as findAll() above. But they are generally written in xml.
int insert(Doctor doctor);
int update(Doctor doctor);
xml：
sql statement
insert
<mapper namespace="ltd.newbee.mall.dao.DoctorMapper">
<insert id="insert" >
INSERT into doctor(id,name,sex,age,department,position,description)
values (#{id,jdbcType=INTEGER}, #{name,jdbcType=VARCHAR},#{sex,jdbcType=VARCHAR},#{age,jdbcType=INTEGER},#{department,jdbcType=VARCHAR},
#{position,jdbcType=VARCHAR},#{description,jdbcType=VARCHAR})
</insert>
Modify: If the modified value is not null, modify it. If it is null, the original default value will be saved.
<update id="update">
update doctor
<set>
<if test="name!=null" >
name= #{name},
</if>
<if test="sex!=null" >
sex= #{sex},
</if>
<if test="age!=null" >
age= #{age},
</if>
<if test="department!=null" >
department= #{department},
</if>
<if test="position!=null" >
position= #{position},
</if>
<if test="description!=null" >
description=#{description}
</if>
</set>
<where>
id= #{id}
</where>
</update>
A common error may appear here, xml cannot be found.
Solution:
Next, use postman to test and the interface is normal.
There are so many pitfalls here. First enter the interface address, and then post. To write and insert data, usually use raw json text in the body . In addition , there must be no less commas, not even a little bit. If there is something in UTF-8 in the error report, it means that the json has not been changed. Successfully displays 1 below. The picture above is a new one, so there is no ID. The ID is auto-incremented. To modify, you need to add the id, and it is the id of the data that already exists in the database.
The backend is now complete.
front end:
Add : Mainly to realize clicking the add button->pop-up box->write the information, click confirm->refresh the list
<el-button type="primary" size="small" icon="el-icon-plus" @click="add">增加</el-button>
<el-dialog
title="提示"
v-model="dialogVisible"
width="30%"
>
<el-form label-width="80px" v-model="form">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<el-form label-width="80px" v-model="form">
<el-form-item label="性别">
<el-input v-model="form.sex"></el-input>
</el-form-item>
</el-form>
<el-form label-width="80px" v-model="form">
<el-form-item label="年龄">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-form>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</el-dialog>
add(){
//弹出框展开
this.dialogVisible=true
this.form={
}
},
save(){
axios.post("/doctor/insert",this.form).then(res=>{
console.log(res)
this.dialogVisible=false
//刷新列表,这是一个get请求列表的方法,在前面写过
this.load()
}).catch(error => {
})
},
Modification: Don't write too much, because the interface is one. In the operation column, define a method to obtain the data of that row, scope.row, and then assign it to the form. The pop-up box will pop up. There is always one pop-up box, so there is no need to move it.
<template #default="scope">
<a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row)">编辑</a>
</template>
//修改
handleEdit (row){
//修改和新增都是一个接口,有id是修改;直接这一行数据赋到form
this.form=row;
this.dialogVisible=true;
}
3. delete
backend:
controller:
//删除
@DeleteMapping("/doctor/{id}")
public Integer delete(@PathVariable Integer id ){
return doctorMapper.deleteById(id);
}
service:
none
dao:
Integer deleteById(@Param("id") Integer id);
xml:
<delete id="deleteById" >
delete from doctor
where id= #{id}
</delete>
Test: Delete the data with ID 47.
Front-end:
<template #default="scope">
<el-popconfirm
title="确定删除吗？"
@confirm="handleDeleteOne(scope.row.id)"
>
<template #reference>
<a style="cursor: pointer;margin-right: 10px">删除</a>
</template>
</el-popconfirm>
</template>
// 单个删除
handleDeleteOne(id){
axios.delete('/doctor/' + id
).then(() => {
ElMessage.success('删除成功')
this.load()
})
},
OK