项目系列目录：

前言

在本篇文章中，我们将进行对项目的结尾，实现增、删、改、查四个功能！

一、添加信息功能

实现添加信息功能实际上非常简单，原理就是需要将数据库的每个字段添加上自己想添加的信息即可。所以我们顺着这个思路进行对具体功能的实现。

首先，我们需要书写具体代码实现点击添加信息按钮，弹出具体的对话框的功能，然后再将想添加各个的字段以输入框的形式展示出来。

user.html具体代码实现：

 <!--对话框-->
    <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="50%">
        <!--form表单-->
        <el-form   class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="pass"  placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="beizhu"  type="textarea" placeholder="备注"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="operate()">确 定</el-button>
  </span>
    </el-dialog>

 data:{
            tableData:[],
            dialogVisible:false,
            name:'',
            pass:'',
            beizhu:'',
            sename:'',
            title:'用户添加',
            key:'save',
            id:''
        },


operate(){
                //保存
                if (this.key == 'save') {
                    this.save();
                }else{
                    this.updateInfo();
                }
            },
            openSave(){
                this.key = 'save';
                this.title = '用户添加';
                //打开对话框
                this.dialogVisible= true;
                vue.name = '';
                vue.pass = '';
                vue.beizhu = '';
            },

以上就是实现对话框的具体功能的代码，接下来需要书写保存方法和加载数据方法的功能的相关代码。

user.html具体实现代码：

//保存方法
            save(){
                axios({
                    method:'post',
                    url:'http://localhost:8080/spring_study_war_exploded/user/save.do',
                    params:{
                        name:vue.name,
                        pass:vue.pass,
                        beizhu:vue.beizhu
                    }

                }).then(function (re) {
                    var re = re.data;
                    if (re.result == 'success') {
                        alert('保存成功');
                        vue.dialogVisible=false;
                        vue.loadData();
                    }else{
                        alert('保存失败');
                    }

                }).catch(function (error) { // 请求失败处理

                });
            },
 //加载数据
            loadData() {
                axios({
                    method:'post',
                    url:'http://localhost:8080/spring_study_war_exploded/user/loadData.do',
                    params:{
                    }

                }).then(function (re) {
                    vue.tableData =  re.data;

                }).catch(function (error) { // 请求失败处理

                });
            }

然后再去添加相关的类，来促使功能可以实现：

创建以上四个类（大家可以根据自己的命名习惯来命名!）

UserBean就是定义每个字段名，这里就直接贴代码就行了！

UserBean.java具体代码如下：

package com.study.user;

public class UserBean {
    private int id;

    private String name;

    private String pass;

    private String beizhu;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPass() {
        return pass;
    }

    public void setPass(String pass) {
        this.pass = pass;
    }

    public String getBeizhu() {
        return beizhu;
    }

    public void setBeizhu(String beizhu) {
        this.beizhu = beizhu;
    }
}

接下来和登录功能一样，都需要一个控制器。

UserController具体代码如下：

package com.study.user;


import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    UserService userService;

@RequestMapping("/loadData.do")
    @ResponseBody
    public List loadData(){
        return userService.loadData();
    }

@RequestMapping("/save.do")
    @ResponseBody
    public Map save(UserBean bean){
        return userService.save(bean);
    }
}

UserDao里面需要书写具体的SQL语句来达到实现功能的方法。

UserDao的具体代码如下：

package com.study.user;


import com.study.db.DB;
import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Component;


import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Component
public class UserDao {
@Autowired
    private DB db;
 public List loadData() {
        String sql = "select * from study.t_user where WhetherDelete=0";
        JdbcTemplate tem = db.getTem();
        return tem.queryForList(sql);
    }

    public Map save(UserBean bean) {
        Map map = new HashMap();
        try {
            String sql = "insert into study.t_user values(0,'"+bean.getName()+"','"+bean.getPass()+"','"+bean.getBeizhu()+"',0)";
            JdbcTemplate tem = db.getTem();
            tem.execute(sql);
            map.put("result", "success");
        } catch (Exception e) {
            map.put("result", "error");
            e.printStackTrace();
        }
        return map;
    }
}

UserService的具体代码如下：

package com.study.user;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;

@Service
public class UserService {
    @Autowired
    UserDao dao;
    public List loadData() {
        {
            return   dao.loadData();
        }

    }

    public Map save(UserBean bean) {

        return   dao.save(bean);
    }
}

到这里，保存方法已经可以实现了，接下来还需要继续写查询、修改和删除的功能，其实都是差不多的写法。几乎都是同样的套路。

下面就直接贴上相关的代码，如果有什么不懂，可以私信我或者评论区留言问我！

二、查询信息功能

user.html具体实现代码：

   selectInfos(){
                axios({
                    method:'post',
                    url:'http://localhost:8080/spring_study_war_exploded/user/selectInfos.do',
                    params:{
                        name:vue.sename
                    }

                }).then(function (re) {
                    vue.tableData =  re.data;

                }).catch(function (error) { // 请求失败处理

                });
            },

UserController具体代码如下：

 @RequestMapping("/selectInfos.do")
    @ResponseBody
    public List  selectInfos(UserBean bean){
        return userService.selectInfos(bean);
    }

UserDao的具体代码如下：

  public List selectInfos(UserBean bean) {
        String sql = "select * from study.t_user where WhetherDelete=0 and name like '%"+bean.getName()+"%'";
        JdbcTemplate tem = db.getTem();
        return tem.queryForList(sql);
    }

UserService的具体代码如下：

 public List selectInfos(UserBean bean) {
        {
            return   dao.selectInfos(bean);
        }
    }

三、修改信息功能

user.html具体实现代码：

 openupdateInfo(id){
                this.id=id;
                this.key = 'update';
                this.title = '用户修改';
                //打开对话框
                this.dialogVisible= true;

                this.loadData();
                //加载数据
                axios({
                    method:'post',
                    url:'http://localhost:8080/spring_study_war_exploded/user/getInfo.do',
                    params:{
                        id:id,
                    }

                }).then(function (re) {
                    var re = re.data;
                    var id = re.id;
                    vue.name = re.name;
                    vue.pass = re.pass;
                    vue.beizhu = re.beizhu;

                }).catch(function (error) { // 请求失败处理

                });
            },


 //修改
            updateInfo(){
                axios({
                    method:'post',
                    url:'http://localhost:8080/spring_study_war_exploded/user/updateInfo.do',
                    params:{
                        name:vue.name,
                        pass:vue.pass,
                        beizhu:vue.beizhu,
                        id:vue.id
                    }

                }).then(function (re) {
                    var re = re.data;
                    if (re.result == 'success') {
                        alert('修改成功');
                        vue.dialogVisible=false;
                        vue.loadData();
                    }else{
                        alert('修改失败');
                    }

                }).catch(function (error) { // 请求失败处理

                });
            },

UserController具体代码如下：

@RequestMapping("getInfo.do")
    @ResponseBody
    public Map getInfo(UserBean bean){
        return userService.getInfo(bean);
    }
    @RequestMapping("updateInfo.do")
    @ResponseBody
    public Map updateInfo(UserBean bean){
        return userService.updateInfo(bean);
    }

UserDao的具体代码如下：

public Map getInfo(UserBean bean) {
        String sql = "select * from study.t_user where id="+bean.getId();
        JdbcTemplate tem = db.getTem();
        return tem.queryForMap(sql);
    }
    public Map updateInfo(UserBean bean) {
        Map map = new HashMap();
        try {
            String sql = "update study.t_user set name = '"+bean.getName()+"',pass = '"+bean.getPass()+"',beizhu = '"+bean.getBeizhu()+"' where id="+bean.getId();
            JdbcTemplate tem = db.getTem();
            tem.execute(sql);
            map.put("result", "success");
        } catch (Exception e) {
            map.put("result", "error");
            e.printStackTrace();
        }
        return map;
    }

UserService的具体代码如下：

  public Map getInfo(UserBean bean) {
        return   dao.getInfo(bean);
    }

    public Map updateInfo(UserBean bean) {
        return dao.updateInfo(bean);
    }

四、删除信息功能

user.html具体实现代码：

 deleteInfo(id){
                axios({
                    method:'post',
                    url:'http://localhost:8080/spring_study_war_exploded/user/deleteInfo.do',
                    params:{
                        id:id,
                    }

                }).then(function (re) {
                    var re = re.data;
                    if (re.result == 'success') {
                        alert('删除成功');
                        vue.loadData();
                    }else{
                        alert('删除失败');
                    }

                }).catch(function (error) { // 请求失败处理

                });
            },

UserController具体代码如下：

   @RequestMapping("deleteInfo.do")
    @ResponseBody
    public Map deleteInfo(UserBean bean){
        return userService.deleteInfo(bean);
    }

UserDao的具体代码如下：

 public Map deleteInfo(UserBean bean) {
        Map map = new HashMap();
        try {
            String sql = "update study.t_user set WhetherDelete=1 where id="+bean.getId();
            JdbcTemplate tem = db.getTem();
            tem.execute(sql);
            map.put("result", "success");
        } catch (Exception e) {
            map.put("result", "error");
            e.printStackTrace();
        }
        return map;
    }

UserService的具体代码如下：

public Map deleteInfo(UserBean bean) {
        return   dao.deleteInfo(bean);
    }

到这里为止，项目的增、删、改、查四个功能已经全部实现。大家可以试一下具体的功能操作。

大家觉得专栏文章有用的话，给个免费的赞和收藏！！

谢谢大家！！！

手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（五）（完结）

前言

一、添加信息功能

user.html具体代码实现：

user.html具体实现代码：

UserBean.java具体代码如下：

UserController具体代码如下：

UserDao的具体代码如下：

UserService的具体代码如下：

二、查询信息功能

user.html具体实现代码：

UserController具体代码如下：

UserDao的具体代码如下：

UserService的具体代码如下：

三、修改信息功能

user.html具体实现代码：

UserController具体代码如下：

UserDao的具体代码如下：

UserService的具体代码如下：

四、删除信息功能

user.html具体实现代码：

UserController具体代码如下：

UserDao的具体代码如下：

UserService的具体代码如下：

猜你喜欢