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

一.后端写接口

先写 entity, dao,service,controller.xml

1.查询：

如上篇文章所示

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代码：

    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 {
    @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语句可以直接写在这里,如上面的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-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 => {
              })
                  },

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

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

后端:
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 doctor
    where  id= #{id}
  </delete>

测试: 删id为47的数据

前端:

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