后台管理系统简单的数据库增删改 sringboot+vue

管理系统简单的数据库增删改 sringboot+vue"/>

后台管理系统简单的数据库增删改 sringboot+vue

一.后端写接口

先写 entity, dao,service,controller.xml

1.查询：

如上篇文章所示

controller:

@RestController
@Api(value = "v1", tags = "8-0.后台管理系统医生信息模块接口")
@RequestMapping("/manage-api/v1")
public class DoctorController {@Resourceprivate DoctorMapper doctorMapper;@Resourceprivate  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代码：

    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.增加/修改(post)

后端:

controller:

save方法在service中实现，要传参数。controller层只定义方法，不写具体实现，具体实现在service层

  /*插入或修改*/@PostMapping("/doctor/insert")public Integer save(@RequestBody Doctor doctor){return   doctorService.save(doctor);}

service层：

service有接口和类的实现，方法写在类里

@Service
public class DoctorService {@Autowiredprivate DoctorMapper doctorMapper;public int save(Doctor doctor){if(doctor.getId()==null){ //doctor没有id就是新增,否修改return doctorMapper.insert(doctor);}else{return  doctorMapper.update(doctor);}}
}

dao:

sql语句可以直接写在这里,如上面的findAll()。但一般都写在xml中。

 int insert(Doctor doctor);int update(Doctor doctor);

xml：

sql语句
插入

<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>

修改：修改的值不为null，则修改，如果为null，还保存原来的默认值。

<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>

这里可能会出现一个常见的报错，xml找不到
解决方法：

接下来，用postman测试，接口是正常的

这里面可多小坑了。先输入接口地址，然后post嘛，要写插入数据，一般在 body 处用 raw 形式的 json 文本写，另外逗号不能少，一点点都不行。如果报错有UTF-8的啥啥啥，就是那个json没换。成功下面显示1。上图是新增，所以没有id，id是自增。修改就要加上id，且是数据库中已存在数据的id。

至此后端完成了。

前端：

增加 : 主要是实现点击增加按钮->弹出框->写好信息,点击确认->列表刷新

<el-button type="primary" size="small" icon="el-icon-plus" @click="add">增加</el-button><el-dialogtitle="提示"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=truethis.form={}},save(){axios.post("/doctor/insert",this.form).then(res=>{console.log(res)this.dialogVisible=false//刷新列表,这是一个get请求列表的方法,在前面写过this.load()}).catch(error => {})},

修改: 不要写太多,因为接口是一个。在操作那一栏，定义一个方法，获取那一行的数据，scope.row，再把它赋给form表单，弹出框弹出，弹出框一直是一个，所以不用动。

 <template #default="scope"><a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row)">编辑</a></template>

   //修改handleEdit (row){ //修改和新增都是一个接口,有id是修改;直接这一行数据赋到formthis.form=row;this.dialogVisible=true;}

3.删除(delete)

后端:
controller:

  //删除@DeleteMapping("/doctor/{id}")public  Integer delete(@PathVariable Integer id ){return  doctorMapper.deleteById(id);}

service:

无

dao:

 Integer deleteById(@Param("id") Integer id);

xml:

  <delete id="deleteById" >delete from doctorwhere  id= #{id}</delete>

测试: 删id为47的数据

前端:

 <template #default="scope"><el-popconfirmtitle="确定删除吗？"@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了