【工作日记】基于Springboot+Vue项目工作中我写的部分代码，

原创 已于 2024-12-12 17:03:02 修改 · 977 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #spring boot #前端

于 2024-12-12 17:02:16 首次发布

工作中我写的部分代码

1.前端部分ActivityManager.vue

这是全部的代码，基础的框子是涛哥写的我在他的基础上进行了补充和完善

<template>
  <div id="activity">
    <!-- 活动名称查询模块 -->
    <div class="search">
      <el-form class="search-form" :model="search" label-width="80px" :inline="true">
        <el-form-item label="活动名称">
          <el-input v-model="search.nickname"></el-input>
          <!-- <el-input></el-input> -->
        </el-form-item>
        <el-form-item>
          <el-button @click="searchEvent()" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 活动链接表格模块 -->
    <div class = "dialog">
      <el-table :data="search.list" style="width: 100%" highlight-current-row>
        <el-table-column prop="name" label="活动名称"> </el-table-column>
        <el-table-column prop="begin_date" label="活动开始时间"> </el-table-column>
        <el-table-column prop="href" label="活动链接" width="580px"> </el-table-column>
        <el-table-column prop="address1" label="操作" width="280px">  
          <!-- scope是能获取到你点击的那一行的对象 -->
          <template slot-scope="scope" >
          <el-row>
            <el-button type="success" @click="insertDialog()" plain>新增</el-button>
            <el-button type="primary" @click="updateDialog(scope.row.id,scope.row.name,scope.row.href,scope.row.begin_date)" plain>修改</el-button>
            <el-button type="danger" @click="deleteDialog(scope.row.id)" plain>删除</el-button>
          </el-row>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-bottom: 20px;">
        <!-- 显示页码，切换页数等 -->
        <el-pagination v-if="search.totalPage > 1" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="search.page"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="search.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="search.totalRow">
        </el-pagination>
      </div>
    </div>

    <!-- 活动对话框模块（dialog） -->
    <div class="change">
      <!-- 新增对话框 -->
      <el-dialog title="新增活动信息" :visible.sync="insertShow">
        <!-- <span>新增对话框</span> -->
        <!-- 对话框里面的三个输入框 -->
        <div id="add"> 
            <div style="margin-bottom: 10px;">
              <label style="font-size: large;">活动名称</label>
              <div style="margin-top: 10px;">
                <el-input  
                  placeholder="请输入活动名称"
                  v-model="add.activityName"
                  clearable>
                </el-input>
              </div>
            </div>
            <div>
              <label style="font-size: large; ">活动链接</label>
              <div style="margin-top: 10px;">
                
                <el-input
                  placeholder="请输入活动链接"
                  v-model="add.activityHref"
                  clearable>
                </el-input>
              </div>
            </div>
       </div>
    
        <div slot="footer" class="dialog-footer">
          <el-button @click="insertShow = false">取 消</el-button>
          <el-button type="primary" @click="insert()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 修改对话框 -->
      <el-dialog title="修改活动信息" :visible.sync="updateShow">
        <!-- <span>修改对话框</span> -->
          <div id="update">
            <div style="margin-bottom: 10px;">
              <span class="demonstration" style="font-size: large;">活动名称</span>

                <el-input 
                  placeholder="请输入活动名称"
                  v-model="update.activityName"
                  clearable>
                </el-input>

            </div>
            <div style="margin-bottom: 10px;">
              <span class="demonstration" style="font-size: large;">活动链接</span>
              
              <div>
                <el-input
                  placeholder="请输入活动链接"
                  v-model="update.activityHref"
                  clearable>
                </el-input>
              </div>
            </div>
            <div class="block" style="margin-bottom: 10px;">
              <span class="demonstration"  style="font-size: large;">时间</span>
              <el-date-picker
                v-model="update.activityTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateShow = false">取 消</el-button>
          <el-button type="primary" @click="alter()">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 删除对话框 -->
      <el-dialog title="删除活动信息" :visible.sync="deleteShow" >
        <span>是否删除此条活动信息？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteShow = false">取 消</el-button>
          <el-button type="primary" @click="remove()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ActivityManager',
  data() {
    return {
      insertShow: false, //新增活动窗口
      updateShow: false, //修改活动窗口
      deleteShow: false, //删除活动窗口
      //这是持久层数据
      search: {
        name:'',date:'',address:'',list:[],page:1,totalPage:0,pageSize:20,totalRow:0
      }, //搜索数据对象
      add:{
        activityName:'',activityHref:'',begin_date:''
      },
      update:{
        activityName:'',activityHref:'',activityTime:'',activityId:''
      },
      cancel:{
        activityId:''
      }
      // tableData: [
      //   {
      //     date: '2016-05-02',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1518 弄',
      //   },
      //   {
      //     date: '2016-05-04',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1517 弄',
      //   },
      //   {
      //     date: '2016-05-01',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1519 弄',
      //   },
      //   {
      //     date: '2016-05-03',
      //     name: '王小虎',
      //     address: '上海市普陀区金沙江路 1516 弄',
      //   },
      // ], //静态表格数据
    }
  },
  created() {
    console.log(11111);//测试
    this.getData();//在渲染之前就出现的
  },
  mounted(){

  },
  methods: {
    // 按照活动名称查询
    searchEvent() {
      this.getData();//点击查询后，出现的
      console.log('查询');
    },
    //点击确认后，增加
    insert(){
        console.log(22222);//测试
        this.addData();//增加
        this.insertShow = false;
        this.searchEvent();
    },
    //点击确认后，修改
    alter(){
        console.log(454554);
        this.updateShow = false;
        this.updateData();//修改
        this.searchEvent();
        console.log("到这里啦");
    },
    remove(){
        this.deleteData();
        console.log("删除删除");
        this.deleteShow = false;
        this.searchEvent();
    },
    getTime(){//获取到当前时间
      let date = new Date();
      let year = date.getFullYear(); //月份从0~11，所以加一
      let dateArr = [date.getMonth() + 1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds()];
      for(let i=0;i<dateArr.length;i++){
        if (dateArr[i] >= 1 && dateArr[i] <= 9) { 
            dateArr[i] = "0" + dateArr[i];
        }
      }
      let strDate = year+'-'+dateArr[0]+'-'+dateArr[1]+' '+dateArr[2]+':'+dateArr[3]+':'+dateArr[4];
      console.log('strDate',strDate);
      console.log(77777);
      return strDate; 
    },

    deleteData(){
      let data = {
        "activityId":this.activityId
      }
      this.$api.post('/admin/activityinfo/delete.json',data).then( res=>{
        console.log(this.update.activityId);
      })
    },

    //更新
    updateData(){
        let data = {
          "name" :this.update.activityName,
          "begin_date": this.update.activityTime,
          "activityId" :this.activityId,
          "href":this.update.activityHref
        }
        this.$api.post('/admin/activityinfo/update.json',data).then( res=>{
          console.log(this.update.activityHref);
          console.log(this.update.activityTime);
          console.log(this.update.activityName);
          console.log(this.updateDialog);
        })
    },
    


    addData(){
      let data = {
        "name":this.add.activityName,
        "begin_date":this.getTime(),
        "href":this.add.activityHref
      }
      this.$api.post('/admin/activityinfo/save.json',data).then( res=>{
          console.log(this.add.activityName);
          console.log(this.add.activityHref);

      })
    },


    getData(){//查询相关
      let data = {
        "name" : this.search.nickname,
        "page": this.search.page,
        "pageSize":this.search.pageSize
      }

      this.$api.post('/admin/activityinfo/find.json',data).then( res=>{
          this.search.list = res.data.data.list;
          this.search.totalPage = res.data.data.totalPage;
          this.search.totalRow = res.data.data.totalRow;
          console.log(this.search);
      })
    },
    
    // 打开新增活动窗口
    insertDialog() {
      this.insertShow = true;
      
    },

    // 打开修改活动窗口
    updateDialog(asd,name,href,time) {
      this.updateShow = true;
      console.log("asd:"+ asd );
      console.log("asd:"+ name );
      console.log("asd:"+ href );
      console.log("asd:"+ time );
      this.activityId = asd;
      this.activityHref = href;
      this.activityTime = time;
      this.activityName = name;
      this.update.activityHref = this.activityHref;
      this.update.activityName =this.activityName;
      this.update.activityTime =this.activityTime;
    },

    // 打开删除活动窗口
    deleteDialog(asd) {
      this.deleteShow = true;
      this.activityId = asd;
      console.log("asd"+ asd);
    },
    handleCurrentChange(page){
      this.search.page = page;
      this.searchEvent();
    },
    // 这是处理表格多页查询
    handleSizeChange(pageSize){
      this.search.pageSize = pageSize;
      this.search.page = 1;
      this.searchEvent();
    }
  },
}
</script>
<style  scoped>
#activity {
  padding: 10px 20px 0;
  height: 100%;
  background-color: #fff;
}
#add {
  height: 200px;
}
</style>

接下来我一步一步大概解析一下这些代码

初始化的一些操作

  created() {
    console.log(11111);//测试
    this.getData();//在渲染之前就出现的
  },
  mounted(){

  },

这块代码，就是Vue是有个生命周期的，这里的created就是在界面经过渲染脚本前就执行的函数，所以我在渲染之前执行getData()，也就能获取到从后端传来的数据了，所以一旦渲染完毕，就会马上在此页面显示出来那个查询到后的列表

 data() {
    return {
      insertShow: false, //新增活动窗口
      updateShow: false, //修改活动窗口
      deleteShow: false, //删除活动窗口
      //这是持久层数据
      search: {
        name:'',date:'',address:'',list:[],page:1,totalPage:0,pageSize:20,totalRow:0
      }, //搜索数据对象
      add:{
        activityName:'',activityHref:'',begin_date:''
      },
      update:{
        activityName:'',activityHref:'',activityTime:'',activityId:''
      },
      cancel:{
        activityId:''
      }

这块代码，就是存的是一些持久层的数据


查询

    <div class="search">
      <el-form class="search-form" :model="search" label-width="80px" :inline="true">
        <el-form-item label="活动名称">
          <el-input v-model="search.nickname"></el-input>
          <!-- <el-input></el-input> -->
        </el-form-item>
        <el-form-item>
          <el-button @click="searchEvent()" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

这一块代码对应这个样式，在输入框里用了绑定监听来监视用户所输入的内容,查询按钮绑定了searchEvent()事件
在这里插入图片描述

  methods: {
    // 按照活动名称查询
    searchEvent() {
      this.getData();//点击查询后，出现的
      console.log('查询');
    },
    
    
    getData(){//查询相关
      let data = {
        "name" : this.search.nickname,//这个就是那个绑定search.nickname
        "page": this.search.page,
        "pageSize":this.search.pageSize
      }
      
      this.$api.post('/admin/activityinfo/find.json',data).then( res=>{
          this.search.list = res.data.data.list;
          this.search.totalPage = res.data.data.totalPage;
          this.search.totalRow = res.data.data.totalRow;
          console.log(this.search);
      })
    },

getData()是与后端交互数据的函数，里面封装了data这个对象，按照json的格式，传递到后端，

this.search.list = res.data.data.list;这个是看你预览中，那个数据在哪一层，如下图：
在这里插入图片描述
then后面就是你数据从后端返回来之后，你的处理了


增删改就是一些重复性的操作了，无需再说明了


后端代码

  1. 首先在这里创建文件，主要的分层为，service层，model层，dao层，controller层，

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述


  2. 就是说，controller层是用于和前端交互数据还有一些处理逻辑，model层存的是映射的实体类，dao层存的与数据库交互数据相关，即mapper接口，为与数据库交互，需要有数据库语句

    service为交互过程中间的一些接口，实现类等，

    就是controller层调用service层，service层调用mapper层

  3. 我们需要将一些用于传输的数据进行序列化
    在这里插入图片描述

    在这里插入图片描述


package com.zhiwei.rent.service.activity.impl;

import com.github.pagehelper.Page;
import com.zhiwei.rent.common.ActivityStatus;
import com.zhiwei.rent.controller.platform.activity.vo.ActivityInfoVo;
import com.zhiwei.rent.dao.activity.ActivityInfoMapper;
import com.zhiwei.rent.dao.product.ActivityMapper;
import com.zhiwei.rent.model.activity.ActivityInfo;
import com.zhiwei.rent.model.order.OrderMaster;
import com.zhiwei.rent.service.BaseService;
import com.zhiwei.rent.service.activity.ActivityInfoService;
import com.zhiwei.rent.service.product.ActivityService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ActivityInfoServiceImpl extends BaseService implements ActivityInfoService {

    @Autowired
    private ActivityInfoMapper activityInfoMapper;

    //查询
    @Override
    public Page<ActivityInfo> find(ActivityInfoVo activityInfoVo) {
        this.setPage(activityInfoVo.getPage(), activityInfoVo.getPageSize());

        return (Page<ActivityInfo>) activityInfoMapper.find(activityInfoVo);
    }

    //增加
    @Override
    public boolean save(ActivityInfo model) {
        int row = activityInfoMapper.save(model);
        return row > 0;//如果受到影响的行数>0那么就是增加成功
    }

    @Override
    //更新
    public boolean update(Long id, ActivityInfo update) {
        update.setId(id);
        int row = activityInfoMapper.update(update);
        return row > 0;
    }

    @Override
    //删除
    public boolean delete(ActivityInfo del) {
        int row = activityInfoMapper.delete(del);
        return row > 0;
    }


}



package com.zhiwei.rent.service.activity;


import com.github.pagehelper.Page;
import com.zhiwei.rent.controller.platform.activity.vo.ActivityInfoVo;
import com.zhiwei.rent.model.activity.ActivityInfo;

import java.util.List;


//活动信息的接口
public interface ActivityInfoService {

    Page<ActivityInfo> find(ActivityInfoVo activityInfoVo);//模糊查询

    boolean save(ActivityInfo model);  //增

    boolean update(Long id,ActivityInfo update);  //改

    boolean delete(ActivityInfo del);   //删




}



package com.zhiwei.rent.controller.platform.activity;

import com.alibaba.fastjson.JSONObject;
import com.github.pagehelper.Page;
import com.zhiwei.rent.common.PageInfo;
import com.zhiwei.rent.common.ResData;
import com.zhiwei.rent.controller.BaseController;
import com.zhiwei.rent.controller.platform.activity.vo.ActivityInfoVo;
import com.zhiwei.rent.model.activity.ActivityInfo;
import com.zhiwei.rent.model.product.Activity;
import com.zhiwei.rent.model.sys.CityArea;
import com.zhiwei.rent.model.user.User;
import com.zhiwei.rent.model.user.UserContacts;
import com.zhiwei.rent.service.activity.ActivityInfoService;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.xml.crypto.Data;
import java.util.Date;

@RestController
@RequestMapping("/admin/activityinfo")
public class ActivityInfoController extends BaseController {

    @Autowired
    private ActivityInfoService activityInfoService;


    @PostMapping("/find")
    //对应模糊查询功能,通过用户传过来的名字
    public ResData<PageInfo> find(@RequestBody ActivityInfoVo activityInfoVo){
        if (StringUtils.isNotBlank(activityInfoVo.getName())) {
            activityInfoVo.setName("%".concat(activityInfoVo.getName()).concat("%"));
        }
        Page<ActivityInfo> result = activityInfoService.find(activityInfoVo);
        return success(new PageInfo<>(result));

    }

    //对应增加功能
    @PostMapping("/save")
    public ResData<Boolean> save(@RequestBody JSONObject json){
        String name = json.getString("name");//获取到前端输入来的活动名称
        if(StringUtils.isBlank(name))
            return this.error("姓名不能为空");
        //获取到前端输入来的活动链接
        String href = json.getString("href");
        if (StringUtils.isBlank(href))
            return this.error("链接不能为空");
        //获取前端输入来的活动开始时间
        Date date  =json.getDate("begin_date");
        String dateString = String.valueOf(json.getDate("begin_date"));
        if (StringUtils.isBlank(dateString))
            return this.error("时间不能为空");
        ActivityInfo activityInfo = new ActivityInfo();
        activityInfo.setName(name);
        activityInfo.setBegin_date(date);
        activityInfo.setHref(href);
        activityInfoService.save(activityInfo);
        return this.success(true);
    }

    //对应修改功能
    @PostMapping("/update")
    public ResData<Boolean> update(@RequestBody JSONObject json){
        Long activityId = json.getLong("activityId");//获取到前端输入的活动id
//        if (this.isNotId(activityId)){
//            return this.error("活动Id错误");
//        }
        String name = json.getString("name");//获取到前端输入来的活动名称
        if(StringUtils.isBlank(name))
            return this.error("姓名不能为空");
        //获取到前端输入来的活动链接
        String href = json.getString("href");
        if (StringUtils.isBlank(href))
            return this.error("链接不能为空");
//        获取前端输入来的活动开始时间
        Date begin_date  =json.getDate("begin_date");
        String dateString = String.valueOf(json.getDate("begin_date"));
        if (StringUtils.isBlank(dateString))
            return this.error("时间不能为空");
        ActivityInfo activityInfo = new ActivityInfo();
        activityInfo.setId(activityId);
        activityInfo.setName(name);
        activityInfo.setBegin_date(begin_date);
        activityInfo.setHref(href);
        activityInfoService.update(activityId,activityInfo);
        return this.success(true);
    }


    //对应删除功能
    @PostMapping("/delete")
    public ResData<Boolean> delete(@RequestBody JSONObject json){
        Long activityId = json.getLong("activityId");//获取到前端输入的活动id
        if (this.isNotId(activityId)){
            return this.error("活动Id错误");
        }

        ActivityInfo activityInfo = new ActivityInfo();
        activityInfo.setId(activityId);

        activityInfoService.delete(activityInfo);
        return this.success(true);
    }
}



package com.zhiwei.rent.dao.activity;

import com.github.pagehelper.Page;
import com.zhiwei.rent.controller.platform.activity.vo.ActivityInfoVo;
import com.zhiwei.rent.model.activity.ActivityInfo;
import com.zhiwei.rent.model.product.Activity;
import org.apache.ibatis.annotations.*;

import java.util.List;  

@Mapper
//与前端对接数据库
public interface ActivityInfoMapper {

    @Select("<script>" +
            "select * from  zhiwei_activityinfo "+
            "where is_delete=0" +
            "<if test='param.name != null and param.name!=\"\"'> and name like #{param.name} </if>" +
            "</script>")
    List<ActivityInfo> find(@Param("param") ActivityInfoVo param);//返回的是查询的结果集

    @Insert("insert into zhiwei_activityinfo(name,begin_date,href,is_delete) values(#{name},#{begin_date},#{href},#{is_delete})")
    int save(ActivityInfo model);

    @Update("update zhiwei_activityinfo set name = #{name},begin_date = #{begin_date},href=#{href} where id = #{id}")
    int update(ActivityInfo update);

    @Update("update zhiwei_activityinfo set is_delete = 1 where id = #{id}")
    int delete(ActivityInfo del);


}



package com.zhiwei.rent.controller.platform.activity.vo;

import com.zhiwei.rent.controller.vo.BaseRequestVo;
import lombok.Data;

import java.io.Serializable;

@Data
public class ActivityInfoVo extends BaseRequestVo implements Serializable {

    private String name;

    private Long id;

}



package com.zhiwei.rent.model.activity;

import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;

import java.text.SimpleDateFormat;
import java.util.Date;

@Data
//活动信息实体类
public class ActivityInfo {


    private Long id; // 注册

    private String name; // 活动名称

    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")//转换时间戳
    private Date begin_date; //活动开始时间

    private String href; //活动链接

    private int is_delete =0;//是否删除

    public Long getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

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

    public Date getBegin_date() {
        return begin_date;
    }

    public void setBegin_date(Date begin_date) {
        this.begin_date = begin_date;
    }

    public String getHref() {
        return href;
    }

    public void setHref(String href) {
        this.href = href;
    }

    public int getIs_delete() {
        return is_delete;
    }

    public void setIs_delete(int is_delete) {
        this.is_delete = is_delete;
    }
}

显示页码，页数等的代码

 <div style="padding-bottom: 20px;">
        <!-- 显示页码，切换页数等 -->
        <el-pagination v-if="search.totalPage > 1" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="search.page"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="search.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="search.totalRow">
        </el-pagination>
  </div>

一般来说都会用到模糊查询，这个再数据库里就是用like来查询,

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会爆发的火山_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值