En realidad, es muy simple implementar la función de agregar información.El principio es que necesita agregar la información que desea agregar a cada campo de la base de datos. Así que seguimos esta línea de pensamiento para implementar funciones específicas.

En primer lugar, necesitamos escribir un código específico para realizar la función de hacer clic en el botón Agregar información para abrir un cuadro de diálogo específico y luego mostrar los campos que queremos agregar en forma de cuadros de entrada.

Implementación de código específico de 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 = '';
            },

Lo anterior es el código para realizar la función específica del cuadro de diálogo. A continuación, debe escribir el código relevante para la función de método de guardado y método de carga de datos.

código de implementación específico de 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) { // 请求失败处理

                });
            }

Luego agregue clases relacionadas para hacer que la función sea realizable:

Cree las cuatro clases anteriores (¡puede nombrarlas de acuerdo con sus propios hábitos de nomenclatura!)

UserBean es para definir cada nombre de campo, ¡simplemente pegue el código aquí!

El código específico de UserBean.java es el siguiente:

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

A continuación, al igual que la función de inicio de sesión, se requiere un controlador.

El código específico de UserController es el siguiente:

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 necesita escribir declaraciones SQL específicas para lograr la función.

El código específico de UserDao es el siguiente:

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

El código específico de UserService es el siguiente:

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

En este punto, se puede realizar el método de guardar, y luego debe continuar escribiendo las funciones de consulta, modificación y eliminación. De hecho, todas están escritas de la misma manera. Prácticamente la misma rutina.

Pegue el código correspondiente directamente debajo. Si no entiende nada, puede enviarme un mensaje privado o dejar un mensaje en el área de comentarios para preguntarme.

2. Función de consulta de información

código de implementación específico de 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) { // 请求失败处理

                });
            },

El código específico de UserController es el siguiente:

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

El código específico de UserDao es el siguiente:

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

El código específico de UserService es el siguiente:

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

3. Modificar la función de información

código de implementación específico de 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) { // 请求失败处理

                });
            },

El código específico de UserController es el siguiente:

@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);
    }

El código específico de UserDao es el siguiente:

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

El código específico de UserService es el siguiente:

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

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

4. Función de eliminación de información

código de implementación específico de 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) { // 请求失败处理

                });
            },

El código específico de UserController es el siguiente:

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

El código específico de UserDao es el siguiente:

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

El código específico de UserService es el siguiente:

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

Hasta ahora, se han realizado las cuatro funciones de agregar, eliminar, modificar y verificar elementos. Puede probar la operación de función específica.

Si encuentra útil el artículo de la columna, ¡dé un me gusta gratis y un favorito! !

¡gracias a todos! ! !

Indicarle que aprenda a usar el marco Spring para escribir el [Sistema de gestión de información estudiantil] básico (5) (Fin)

prefacio

1. Agregar función de información

Implementación de código específico de User.html:

código de implementación específico de user.html:

El código específico de UserBean.java es el siguiente:

El código específico de UserController es el siguiente:

El código específico de UserDao es el siguiente:

El código específico de UserService es el siguiente:

2. Función de consulta de información

código de implementación específico de user.html:

El código específico de UserController es el siguiente:

El código específico de UserDao es el siguiente:

El código específico de UserService es el siguiente:

3. Modificar la función de información

código de implementación específico de user.html:

El código específico de UserController es el siguiente:

El código específico de UserDao es el siguiente:

El código específico de UserService es el siguiente:

4. Función de eliminación de información

código de implementación específico de user.html:

El código específico de UserController es el siguiente:

El código específico de UserDao es el siguiente:

El código específico de UserService es el siguiente:

Supongo que te gusta