SpringMVC+ElementUl+Vue实现增、删、改、查、多条件搜索、分页功能（前端后端分离）

SuperProgMan.SYJ

已于 2022-11-08 18:11:47 修改

阅读量1.4k

点赞数 5

分类专栏： SpringMvc ElmentUI SSM 文章标签：前端后端 elementui springmvc vue.js

于 2022-01-17 07:58:37 首次发布

本文链接：https://blog.csdn.net/m0_55400356/article/details/122344633

版权

SpringMvc 同时被 3 个专栏收录

7 篇文章 3 订阅

订阅专栏

SSM

5 篇文章 1 订阅

订阅专栏

ElmentUI

1 篇文章 0 订阅

订阅专栏

使用vue+element+springMVC来实现增、删、改、查、搜索、分页这几个功能！

										对于今天老师留的作业小张与小红对话：

一班小红同学对二班小张同学说：今天我们班里学了ElementUl组件可是我学没明白，老师还留了个基于vue+ElementUI+SpringMVC实现增删改查的作业可是我不会，明天又老师被挨批了哭哭哭…。
小张同学摸着小红他头说：没事没事别哭，我把我这一套教给你，以后每次留这类似作业就够你用的了，非常易上手。
小红擦拉擦眼泪说：怎么用
小张以说：代码都给你整理好了，直接复制就可以用，功能一样不差，你可以去试试
小红说：好，行那我赶紧回家去试试吧！

----------问这次小红的作业能不能写完？能不能不被老师挨批？而且功能一样不差？

1、动态演示（GIF）

在这里插入图片描述

2、项目结构

在这里插入图片描述

3、数据表

CREATE TABLE `rikao_t_goods` (
  `noid` int(11) NOT NULL AUTO_INCREMENT,
  `goods_name` varchar(32) NOT NULL COMMENT '商品名称',
  `price` decimal(10,2) DEFAULT NULL COMMENT '价格',
  `weight` int(11) NOT NULL DEFAULT '0' COMMENT '重量',
  `buy_date` datetime DEFAULT NULL COMMENT '购买时间',
  PRIMARY KEY (`noid`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8mb4

一、前端代码

（一）添加.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="axios.min.js"></script>
  <script src="vuejs-2.5.16.js"></script>
</head>
<body>
  <h1>新增商品</h1>
  <div id="app">
      <p>
        <el-input placeholder="请输入商品名称"   v-model="gdzc.goods_name"  clearable :style="{width:'400px'}"></el-input>
      </p>
      <p>
        <el-input placeholder="请输入商品名称金额"  v-model="gdzc.price"  clearable :style="{width:'400px'}"></el-input>
      </p>
      <p>
        <el-input placeholder="请输入商品重量"  v-model="gdzc.weight"  clearable :style="{width:'400px'}"></el-input>
      </p>
      <p>
        <!-- <el-date-picker v-model="gdzc.buy_date" align="right" type="Date" placeholder="选择日期"  :picker-options="{pickerOptions}"></el-date-picker> </el-date-picker> -->
        <el-date-picker
        :style="{width:'400px'}"
        v-model="gdzc.buy_date"
            type="datetime"
            format="yyyy-MM-dd hh:mm"
            value-format="yyyy-MM-dd hh:mm"
            placeholder="请选择日期时间">
    </el-date-picker>
    </p>
      <p>
        <el-row>
            <el-button type="primary" @click="tianjia()" plain>添加</el-button>
            <el-button type="info" @click="liebiao()" plain>返回列表</el-button>
        </el-row>
      </p>
   
  </el-input>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
            gdzc:{},
          
          pickerOptions: {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
            shortcuts: [{
                text: '今天',
                onClick(picker) {
                picker.$emit('pick', new Date());
                }
            }, {
                text: '昨天',
                onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit('pick', date);
                }
            }, {
                text: '一周前',
                onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', date);
                }
            }]
            },
        };
      },

      methods:{
        
             //添加
            tianjia:function(){
                let url = "http://localhost:8080/rikao13_goods/addGDZCPost.do";
                let data1 = this.gdzc;
                let option = {Headers:{'Content-type':'application/json'}}
                axios.post(url,data1,option).then((rel)=>{
                    if(rel.data.code==0){
                        this.tishi=rel.data.msg;
                        location.href="listGDZC.html";
                    };

                });
            },

            //返回列表
            liebiao:function(){
                location.href="listGDZC.html"
            }
        }
    })
  </script>
</html>

（二）搜索、列表、修改、分页.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="axios.min.js"></script>
    <script src="vuejs-2.5.16.js"></script>
</head>
<body>
  <div id="app">

    <el-row style="height:400px;">
        <template>
            
            <el-button type="primary" @click="tianjia()" plain>返回添加</el-button>
            <el-input placeholder="商品名称"   v-model="goods_name"  clearable :style="{width:'200px'}"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="listGDZC1()">搜索</el-button>

            <!-- 列表 -->
            <el-table :data="listGDZC1Show":class="{ 'alt': listGDZC.index%2==1}" style="width: 99%">
                <el-table-column  type="index" label="序号"  width="180"></el-table-column>
                <el-table-column  prop="goods_name" label="商品名称"  width="180"></el-table-column>
                <el-table-column  prop="price" label="商品金额"></el-table-column>
                <el-table-column  prop="weight" label="重量"></el-table-column>
                <el-table-column  prop="buy_date" label="购买时间"></el-table-column>
                <el-table-column  label="操作">
                    <template slot-scope="scope">
                        <!-- 修改按钮 -->
                        <el-button type="text" @click="dialogFormVisible = true">
                            <el-button type="primary"  icon="el-icon-edit" circle  @click="selectNoid(scope.row)"></el-button>
                        </el-button>
                            <el-dialog title="编辑商品" :visible.sync="dialogFormVisible">
                                <el-form :model="form">
                                    <p>
                                        编辑商品名称
                                        <input type="hidden" v-model="gdzc.noid">
                                        <el-input placeholder="请输入商品名称"  v-model="gdzc.goods_name"    clearable :style="{width:'400px'}"></el-input>
                                      </p>
                                      <p>
                                        编辑商品金额
                                        <el-input placeholder="请输入商品金额" v-model="gdzc.price" clearable :style="{width:'400px'}"></el-input>
                                      </p>
                                      <p>
                                        编辑商品重量
                                        <el-input placeholder="请输入重量" v-model="gdzc.weight"  clearable :style="{width:'400px'}"></el-input>
                                      </p>
                                      <p>
                                        编辑商品时间
                                        <el-date-picker
                                        v-model="gdzc.buy_date"
                                            :style="{width:'400px'}"
                                            type="datetime"
                                            format="yyyy-MM-dd hh:mm"
                                            value-format="yyyy-MM-dd hh:mm"
                                            placeholder="请选择日期时间">
                                    </el-date-picker>
                                    </p>
                        
                                </el-form-item></el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogFormVisible = false"><a  @click="xiugai()">确 定</a></el-button>
                                </div>
                            </el-dialog>


                        <!-- 删除按钮 -->
                        <el-button @click="deleteGDZD(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
                
            </el-table>
            
        </template>
        
    </el-row>

    <!-- 分页 -->
    <el-row>
        <el-button-group>
                <a href="#"  @click="prePageFirst">
                    <el-button type="warning">首页</el-button>
                </a>

                <a href="#"  @click="prePage">
                    <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
                </a>
                
                <span v-for="(item, index) in pageNum">
                    <a href="#" @click="toPage(index)" :class="{active: currentPage==index}">  
                        <el-button type="primary" >&nbsp; {{ index+1 }}</el-button>
                    </a>
                </span>

                <a href="#" @click="nextPage">
                    <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </a>

                <a href="#"  @click="prePageLast">
                    <el-button type="warning">末页</el-button>
                </a>
        </el-button-group>
    </el-row>
    <p style="margin-right: 30px;">
        第<span>{{yeshu}}</span>/{{pageNum}}页
        总条数：<span>{{zongtioashu}}</span>条记录
    </p>
        
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
       QueryString = {
        data: {},
        initial: function () {
            var aPairs, aTmp;
            var queryString = new String(window.location.search);
            queryString = queryString.substr(1, queryString.length); //remove   "?"
            aPairs = queryString.split("&");
            for (var i = 0; i < aPairs.length; i++) {
                aTmp = aPairs[i].split("=");
                this.data[aTmp[0]] = aTmp[1];
            }
        },
        getValue: function (key) {
            return this.data[key];
        }
    }
    QueryString.initial();
    let aVal= QueryString.getValue('noid');

    new Vue({
      el: '#app',
      data() {
        return{
            goods_name:null,
            gdzc:{},
            listGDZC:[],
            pageSize:3,
            currentPage:0,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
        }
      },
    
        computed:{
                listGDZC1Show: function(){
                    let start = this.currentPage*this.pageSize;
                    let end = Math.min((this.currentPage+1)*this.pageSize, this.listGDZC.length)
                    return this.listGDZC.slice(start, end)
                },
                pageNum: function(){
                    return Math.ceil(this.listGDZC.length / this.pageSize) || 1 ;
                },
                zongtioashu:function(){
                    return this.listGDZC.length
                },
                yeshu:function(){
                    return this.currentPage+1
                },
            
            },

        mounted(){
            this.listGDZC1();
        },

        
        methods:{

            //列表
            listGDZC1:function (){
                let url = "http://localhost:8080/rikao13_goods/listGDZCPost.do";
                // let data1 = {};
                let data1={"goods_name":this.goods_name};
                let option = {headers: {'Content-Type':'application/json'}};
                axios.post(url,data1,option).then((rel)=>{
                    this.listGDZC = rel.data.data;
                    console.log(this.listGDZC)   
                     
                });
            },


            //分页
            nextPage: function(){//下一页
                var vm = this;
                if (vm.currentPage == vm.pageNum - 1) return;
                vm.currentPage++;
 
            },
            prePage: function(){//上一页
                var vm = this;
                if (vm.currentPage == 0)
                return;
                vm.currentPage--;
 
            },
            prePageFirst:function(){//首页
                var vm = this;
                vm.currentPage=0;
            },
            prePageLast:function(){//末页
                var vm = this;
                vm.currentPage=vm.pageNum-1;
            },
            toPage: function(page){
                var vm = this;
                vm.currentPage = page
            },

            tianjia:function(){
                location.href="addGdzc.html"
            },


            
            //删除
            deleteGDZD(noid){
                if(confirm("确定要删除")){
                    let url = "http://localhost:8080/rikao13_goods/deleteGDZCPost.do";
                    let data1 = noid;
                    let option = {Headers:{'Content-type':'application/json'}};
                    axios.post(url,data1,option).then((rel)=>{
                        for(let i = 0;i<this.listGDZC.length;i++){
                            if(this.listGDZC[i].noid==noid){
                                this.listGDZC.splice(i,1);
                            };
                        };
                        this.listGDZC1();
                    }); 
                }
            },



           //修改
           selectNoid(noid){
                let url = "http://localhost:8080/rikao13_goods/selectGDZCNoidPost.do";
                let data1 = {"noid":noid.noid};
                let option = {Headers:{'Content-type':'application/json'}};
                axios.post(url,data1,option).then((rel)=>{
                    this.gdzc=rel.data.data;
                })
            },

            xiugai:function(){
                let url = "http://localhost:8080/rikao13_goods/alterGDZCPost.do";
                let data1 = this.gdzc;
                console.log(this.gdzc)
                 let option = {Headers:{'Content-type':'application/json'}}
                 axios.post(url,data1,option).then((rel)=>{
                    this.listGDZC1();
                })

            }




        }
    })
  </script>
</html>

二、后端代码

（一）实体类

package com.wanshi.spring.entity;

import lombok.Data;

@Data
public class GDZC {
    private String noid;
    private String goods_name;
    private String price;
    private String weight;
    private String buy_date;
}

package com.wanshi.spring.entity;

import lombok.Data;

@Data
public class JsonResut {
    private Integer code;
    private  String msg;
    private  Object data;
}

（二）Mapper接口层

package com.wanshi.spring.mapper;

import com.wanshi.spring.entity.GDZC;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface GDZCMapper {
    Integer addGDZC(GDZC gdzc);

    List<GDZC> listGDZC();

    Integer deleteGDZC(String noid);

    GDZC seletByNoid(String noid);
    Integer alterGDZC(GDZC gdzc);

    List<GDZC> selectGDZC (@Param("goods_name") String goods_name);
}

（三）Service接口层

package com.wanshi.spring.service;

import com.wanshi.spring.entity.GDZC;
import com.wanshi.spring.entity.JsonResut;

public interface GDZCService {
    JsonResut addGDZC(GDZC gdzc);

    JsonResut listGDZC();

    JsonResut delteGDZC(String noid);

    JsonResut seletByNoid(String noid);
    JsonResut alterGDZC(GDZC gdzc);

    JsonResut selectGDZC(String goods_name);
}

（四）ServiceImpl接口实现层

package com.wanshi.spring.service.impl;

import com.wanshi.spring.entity.GDZC;
import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.mapper.GDZCMapper;
import com.wanshi.spring.service.GDZCService;
import lombok.Data;
import org.apache.ibatis.annotations.Select;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class GDZCServiceImpl implements GDZCService {
    @Autowired
    private GDZCMapper gdzcMapper;


    @Override
    public JsonResut addGDZC(GDZC gdzc) {
        JsonResut json = new JsonResut();
        gdzcMapper.addGDZC(gdzc);
        json.setMsg("添加成功");
        json.setCode(0);
        return json;
    }

    @Override
    public JsonResut listGDZC() {
        JsonResut json = new JsonResut();
        List<GDZC> listGDZC = gdzcMapper.listGDZC();
        json.setData(listGDZC);
        return json;
    }

    @Override
    public JsonResut delteGDZC(String noid) {
        JsonResut json = new JsonResut();
        gdzcMapper.deleteGDZC(noid);
        json.setCode(2);
        return json;
    }

    @Override
    public JsonResut seletByNoid(String noid) {
        JsonResut json = new JsonResut();
        GDZC selectGDZCNoid = gdzcMapper.seletByNoid(noid);
        json.setData(selectGDZCNoid);
        return json;
    }

    @Override
    public JsonResut alterGDZC(GDZC gdzc) {
        JsonResut json = new JsonResut();
        gdzcMapper.alterGDZC(gdzc);
        json.setCode(3);
        json.setMsg("修改成功");
        return json;
    }

    @Override
    public JsonResut selectGDZC(String goods_name) {
        JsonResut json = new JsonResut();
        List<GDZC> selectGDZC = gdzcMapper.selectGDZC(goods_name);
        json.setData(selectGDZC);
        return json;
    }
}

（五）Controller层

package com.wanshi.controller;
import com.wanshi.spring.entity.GDZC;
import com.wanshi.spring.entity.JsonResut;
import com.wanshi.spring.service.GDZCService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@CrossOrigin
public class AjaxController {
    @Autowired
    private GDZCService gdzcService;

    @RequestMapping("/addGDZCPost.do")
    @ResponseBody
    public JsonResut addGDZCPost(@RequestBody  GDZC gdzc){
        System.out.println("col"+gdzc.toString());
        return gdzcService.addGDZC(gdzc);
    }

    @RequestMapping("/listGDZCPost.do")
    @ResponseBody
    public JsonResut listGDZCPost(@RequestBody GDZC gdzc){
        return gdzcService.selectGDZC(gdzc.getGoods_name());
    }

    @RequestMapping("/deleteGDZCPost.do")
    @ResponseBody
    public JsonResut deleteGDZCPost(@RequestBody GDZC gdzc){
        return gdzcService.delteGDZC(gdzc.getNoid());
    }

    @RequestMapping("/selectGDZCNoidPost.do")
    @ResponseBody
    public JsonResut selectGDZCNoidPost(@RequestBody GDZC gdzc){
        return gdzcService.seletByNoid(gdzc.getNoid());
    }

    @RequestMapping("/alterGDZCPost.do")
    @ResponseBody
    public JsonResut alterGDZCPost(@RequestBody GDZC gdzc){
        return gdzcService.alterGDZC(gdzc);
    }


}

三、sql语句（Mapper.xml文件）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wanshi.spring.mapper.GDZCMapper">
    <insert id="addGDZC" parameterType="com.wanshi.spring.entity.GDZC">
        insert into rikao_t_goods (goods_name,price,weight,buy_date)
         values (#{goods_name},#{price},#{weight},#{buy_date})
    </insert>

    <select id="listGDZC"  resultType="com.wanshi.spring.entity.GDZC">
        select * from rikao_t_goods
    </select>

    <delete id="deleteGDZC" parameterType="String">
        delete  from rikao_t_goods
        <where>
            noid = #{noid}
        </where>
    </delete>

    <select id="seletByNoid"  parameterType="String" resultType="com.wanshi.spring.entity.GDZC">
        select * from rikao_t_goods
        <where>
            noid = #{noid}
        </where>
    </select>

    <update id="alterGDZC" parameterType="com.wanshi.spring.entity.GDZC">
        update rikao_t_goods
        <set>
            goods_name =  #{goods_name},
            price =  #{price},
            weight = #{weight},
            buy_date = #{buy_date}
        </set>
        <where>
            noid = #{noid}
        </where>
    </update>


    <select id="selectGDZC"  parameterType="String" resultType="com.wanshi.spring.entity.GDZC">
        select * from rikao_t_goods
        <where>
            <if test="goods_name != null and goods_name != ''">
                goods_name like concat('%',#{goods_name},'%')
            </if>
        </where>
    </select>
</mapper>

SuperProgMan.SYJ

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
SpringMVC+ElementUl+Vue实现增、删、改、查、多条件搜索、分页功能（前端后端分离）

使用vue+element+springMVC来实现增、删、改、查、搜索、分页这几个功能！小张与小红对话：一班小红同学对二班小张同学说：今天我们班里学了ElementUl组件可是我学没明白，老师还留了个作业基于vue+element+springMVC实现增删改查可是我不会，明天又老师被挨批了哭哭哭…。小张同学摸着小红他头说：没事没事别哭，我把我这一套教给你，以后每次留这类似作业就够你用的了，非常易上手。小红擦拉擦眼泪说：怎么用小张以暧昧的眼神说:代码都给你整理好了，直接复制就可以用，功能一样
复制链接

扫一扫