Springboot+Vue服务器盲盒活动

一、项目要求

• G:\s_-project01_zy\Springboot_Vue\SpringBoot_Second\Spring_Project_SecondBack 包含Springboot

展示Spring_Project_SecondBack

• G:\s_-project01_zy\Springboot_Vue\vue 包含Vue

展示G:\s_-project01_zy\Springboot_Vue\vue

姓名拼音+学号（zhanyong）

随机获取2，3字符串random（）

2,3,3,2

盲盒系统（虚拟机）

加入随机的数字

这是没有加入本身内容的，即没有中奖，中奖内容如下：

• 打折扣
• 升降级（vm升级，指定cpu，内存，单向指定哪一台进行升级）可拆分5中策略
• 对购买时长的升级
• 送一台虚拟机

这五种自动生产或者指定生成

• 一个月最多三次，充中不能再抽中
• 虚拟机列表
• 随机组合(五种)

命名规则类似阿里云服务器的命名

【下图是阿里云的命名】

二、说明文档

1、用户抽奖主页/raffle

2、多种奖品链接

    { id: 1, selected: false, prize: false, prizeContent: "奖品1:打折扣" },
    { id: 2, selected: false, prize: false, prizeContent: "奖品2:cpu升级" },
    { id: 3, selected: false, prize: false, prizeContent: "奖品3:内存升级" },
    { id: 4, selected: false, prize: false, prizeContent: "奖品4:增加时长" },
    { id: 5, selected: false, prize: false, prizeContent: "奖品5:送服务器" },
    { id: 6, selected: false, prize: false, prizeContent: "奖品6:配置升级" },

1、奖品1 discont /discount

2、奖品2 CPU upgrade /cpu

3、奖品3 Memory upgrade /memory

4、奖品4 Increase duration /duration

5、奖品5 Send to server /server

6、奖品6 Configuration upgrade /upgrade

3、后台侧边栏/instance

1、商品兑换 Product exchange /exchange

2、中奖说明 Information /information

3、容器实例 Instance /instance

4、订单中心 Order/order

5、设置 Setting/setting

三、前端

1、用户主页

a、主体框架

使用elementUI控件

b、右上角用户展示

• 查看奖品
• 虚拟机实例
• 退出

2、后台根据奖品挑选内容

3、登录页面

4、实现右上角点击事件，查看奖品

5、设置后台最外层的页面包括header和aside

6、绑定侧边栏的点击事件跳转功能

使用push改变路径

 
                        
                            
                            
                                商品兑换
                                中奖说明
                            
                        
                        
                            
                            
                                容器实例
                                订单中心
                                设置
                            
                        

methods: {
      goToProductExchange() {
        this.$router.push('/back/exchange');
      },
      goToInformation() {
        this.$router.push('/back/information');
      },
      goToInstance() {
        this.$router.push('/back/instance');
      },
      goToOrder() {
        this.$router.push('/back/order');
      },
      goToSetting() {
        this.$router.push('/back/setting');
      },
      logout() {
        this.$store.commit("logout")
        this.$message.success("退出成功")
      }
      // 其他菜单项的跳转方法...
    },

7、商品兑换数据传输分页查询

8、商品兑换根据类型处理可操作范围

1、通过query携带参数，通过params获取内容

1、写入

      switch (priceType) {
        case 'discount':
          // 跳转到 discount 页面，传递选择的基本信息
          this.$router.push({
            path: 'discount',
            query: {
              award_id:row.id,
              award_type: row.priceType,
              // 其他选择的基本信息
            }
          });
          break;

2、接收

export default {
  mounted() {
    const awardId = this.$route.query.award_id;
    const awardType = this.$route.query.award_type;
    
    // 使用获取到的参数进行后续操作
    console.log(awardId);
    console.log(awardType);
  }
}

2、处理使用中奖卷对服务的选择界面

3、右侧的使用按钮的点击事件

四、后端

1、数据库设计

新增数据库

2、登录实现

大部分代码与之前权限部分的代码

唯一区别在与删除了权限目录简化开发过程，此外基本保持一致

a、使用用户密码登录成功

b、登录时数据写入本地成功

3、根据用户登录后自动补全左上角信息

4、点击盲盒，显示中奖后将用户和奖品类型存入award表

/**
 * @author daetz
 * @creat 2023/6/3
 **/
@RestController
public class AwardSaveOrUpdate {
		@Resource
		private AwardService awardService;

		@PostMapping("/award")
		public ResultDataDTO SaveAward(@RequestBody Award award){
				Date currentTime = new Date();
				award.setPriceTime(currentTime);
				boolean save = awardService.saveOrUpdate(award);
				return ResultDataDTO.success(save);
		}
}

 const data = {
          name: this.username,
          priceType: box.type,
          description:box.prizeContent,
        };
        this.request.post('/award', data)
            .then(response => {
              // 处理成功响应
              console.log(response.data);
            })
            .catch(error => {
              // 处理错误
              console.log(error);
            });

实现成功

5、实现右上角点击事件，查看奖品

6、商品兑换数据传输分页查询

注意使用之前写过的分页查询，忽略了MybatisConfig

		@Autowired
		private AwardMapper awardMapper;
/**
		 * 在exchange查询中奖信息
		 * @param PageNum
		 * @param size
		 * @return
		 */
		@RequestMapping("/findAward/{PageNum}/{size}")
		public ResultDataDTO findPage(@PathVariable("PageNum") Integer PageNum, @PathVariable("size") Integer size){
				Page<Award> page =new Page<>(PageNum,size);
				Page<Award> result = awardMapper.selectPage(page, null);
				return ResultDataDTO.success(result);
		}

7、处理使用中奖卷对服务的选择界面

1、使用分页查询返回用户的虚拟机列表

五、注意事项

1、路由的相对位置和绝对位置

path: 'exchange',  // 在子路由的路径前不加斜杠，表示相对路径

2、注意数据库的类型统一

3、同路径刷新页面重复导航

2vue-router.esm.js:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/back/instance".

使用location.reload();即可

4、同时传入两个id用来判断价格是否需要改变

类似于下面，但是需要传入两个参数

  created() {
    const _this = this;
    request
        .get("/instance/findById/" + this.$route.query.instance_id)
        .then(resp => {
          _this.ruleForm = resp.data.data;
          _this.initialData = { ...resp.data.data };
        })
        .catch(error => {
          console.log(error);
        });
  }

分别是instance_id

和award_id

后端如何接收

5、空指针异常

忘记了先进行查询

之前使用saveorupdate没设置id

忘记了修改内容后会立即删除原来的记录，导致id为null

交换一下位置即可解决

还是不行

必须要等待上面的结束再删除

6、忘记设计主键自增

7、公网私网空值

写了两个一样的值

数据与数据库不一致

JDBC Connection [HikariProxyConnection@995076997 wrapping com.mysql.cj.jdbc.ConnectionImpl@39eeb7ad] will be managed by Spring
==>  Preparing: INSERT INTO used_award ( award_id, instance_id, price_type, description, instance_public_ip, instance_private_ip, instance_name, used_time, receive_time ) VALUES ( ?, ?, ?, ?, ?, ?, ?, ?, ? )
==> Parameters: 22(Integer), 23(Integer), duration(String), 奖品4:增加时长(一年)(String), 192.168.220.121(String), 192.168.220.121(String), 华北二区(String), 2023-06-05 21:46:51.835(Timestamp), 2023-06-04 00:00:00.0(Timestamp)
<==    Updates: 1
Releasing transactional SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@101e8811]
Transaction synchronization committing SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@101e8811]
Transaction synchronization deregistering SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@101e8811]
Transaction synchronization closing SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@101e8811]
<==        Row: 1, 64, 23, upgrade, 奖品6:配置升级, null, 192.168.220.121, 华北二区, 2023-06-05 19:09:24, 2023-06-05 19:04:43

忘记保存数据库了

8、关闭程序后，Database需要重新连接

9、全局设置展示时间

参考链接：vue全局修改$message的显示时间

官方地址：https://element.eleme.cn/#/zh-CN/component/message#fang-fa

import Vue from 'vue'

import axios from "axios";
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import request from "@/utils/request";
import 'element-ui/lib/theme-chalk/index.css';
import './style/main.css';
Vue.config.productionTip = false
import { Message } from 'element-ui';

Vue.use(ElementUI);

Vue.prototype.$message = function(msg) {
  return Message({
    message: msg,
    duration: 1000
  });
};
// 分别对success、warning和error等样式进行设置
Vue.prototype.$message.success = function(msg) {
  return Message.success({
    message: msg,
    duration: 1000
  });
};
Vue.prototype.$message.info = function(msg) {
  return Message.info({
    message: msg,
    duration: 1000
  });
};
Vue.prototype.$message.error = function(msg) {
  return Message.error({
    message: msg,
    duration: 1000
  });
};

Vue.prototype.request=request

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

10、登录错误返回500

六、重点问题解决

1、ChooseInstance

1、前端

根据第三点的8-1-2以此传入两个表的id

使用switch根据类型判断下一步跳转的路由

2、CPUpgrade

1、前端

分别将两个表写入路径中，加上sum限制最大的范围

修改成功后返回exchange页面，并给出提示

2、后端

根据奖券内容修改

		/**
		 * 根据奖券修改内容
		 * @param allInstance
		 * @return
		 * @throws Exception
		 */
		@PostMapping("/saveOrUpdate")
		public ResultDataDTO saveALLInstance(@RequestBody AllInstance allInstance) throws Exception {
				boolean result = allInstanceService.saveOrUpdate(allInstance);
				return ResultDataDTO.success(result);
		}

修改表信息成功后，删除奖券的id

package com.demo.controller;

import com.demo.DTO.ResultDataDTO;
import com.demo.service.AwardService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author daetz
 * @creat 2023/6/4
 **/
@RestController
@RequestMapping("/award")
public class AwardController {

		@Autowired
		private AwardService awardService;

		@RequestMapping("deleteById/{id}")
		public ResultDataDTO deleteById(@PathVariable Integer id){
				boolean result = awardService.removeById(id);
				return ResultDataDTO.success(result);
		}
}

3、IncreaseDuration

1、前端

与之前类似，不在进行赘述

4、MemoryUpgrade

1、前端

5、ConfigurationUpgrade

1、前端

6、SendServer

获取服务器的列表，插入相同的配置

1、前端

7、/back/instance

用户可以删除虚拟机或者新增虚拟机

1、前端

新增和删除

    deleteInstance(row) {
      request.delete('/instance/deleteById/' + row.id).then((resp) => {
        console.log(resp.data.code)
        if (resp.data.code === "200") {
          this.$message.success("删除服务器成功");
          this.$router.push('/back/instance');
        } else {
          this.$message.error("服务器修改失败");
        }
      });
    },
    addUser(row){
      this.$router.push({
        path: '/addInstance',
        query: {
          id: row.id
        }
      })
    },
  },

2、后端

		/**
		 * 删除选定的实例
		 * @param id
		 * @return
		 */
		@RequestMapping("deleteById/{id}")
		public ResultDataDTO deleteById(@PathVariable Integer id){
				boolean result = allInstanceService.removeById(id);
				return ResultDataDTO.success(result);
		}

七、新建used_award表

1、新建used_award

2、前端设计

3、后端设计

只涉及了查询和删除的功能

package com.demo.controller;

import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.demo.DTO.ResultDataDTO;
import com.demo.domain.UsedAward;
import com.demo.mapper.UsedAwardMapper;
import com.demo.service.impl.UsedAwardServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author daetz
 * @creat 2023/6/5
 **/
@RestController
@RequestMapping("/used")
public class UsedAwardController {

		@Autowired
		private UsedAwardServiceImpl usedAwardService;


		@Autowired
		private UsedAwardMapper usedAwardMapper;


		/**
		 * 删除记录
		 * @param id
		 * @return
		 */
		@RequestMapping("deleteById/{id}")
		public ResultDataDTO deleteById(@PathVariable Integer id){
				boolean result = usedAwardService.removeById(id);
				return ResultDataDTO.success(result);
		}

		/**
		 * 查询已使用的信息
		 * @param PageNum
		 * @param size
		 * @return
		 */
		@RequestMapping("/findUsedAward/{PageNum}/{size}")
		public ResultDataDTO findPage(@PathVariable("PageNum") Integer PageNum, @PathVariable("size") Integer size){
				Page<UsedAward> page =new Page<>(PageNum,size);
				Page<UsedAward> result = usedAwardMapper.selectPage(page, null);
				return ResultDataDTO.success(result);
		}
}

八、新增price字段，计算价格

1、数据库设计

2、前端

微调，仅增加一个字段即可

3、后端

更新数据表

根据

    /**
     * 购买时长
     */
    @TableField(value = "instance_duration_time")
    private Integer instanceDurationTime;
    /**
     * CPU
     */
    @TableField(value = "instance_upgrade_cpu")
    private Integer instanceUpgradeCpu;
    /**
     * 内存
     */
    @TableField(value = "instance_upgrade_memory")
    private Integer instanceUpgradeMemory;
        /**
     * 磁盘
     */
    @TableField(value = "instance_upgrade_disk")
    private Integer instanceUpgradeDisk;
    

给出自动计算价格的公式

    /**
     * 虚拟机价格
     */
    @TableField(value = "price")
    private BigDecimal price;

		/**
		 * 根据奖券修改内容
		 * @param allInstance
		 * @return
		 * @throws Exception
		 */
		@PostMapping("/saveOrUpdate")
		public ResultDataDTO saveALLInstance(@RequestBody AllInstance allInstance) throws Exception {
				Date currentTime = new Date();
				allInstance.setCreatedTime(currentTime);
				Integer instanceDurationTime = allInstance.getInstanceDurationTime();
				Integer instanceUpgradeCpu = allInstance.getInstanceUpgradeCpu();
				Integer instanceUpgradeMemory = allInstance.getInstanceUpgradeMemory();
				Integer instanceUpgradeDisk = allInstance.getInstanceUpgradeDisk();

				Integer price = instanceDurationTime * instanceUpgradeCpu + instanceUpgradeMemory + instanceUpgradeDisk;
				BigDecimal convertedPrice = new BigDecimal(price);
				allInstance.setPrice(convertedPrice);
				boolean result = allInstanceService.saveOrUpdate(allInstance);
				return ResultDataDTO.success(result);
		}

九、新增订单表

1、数据库设计

2、前端

3、后端

调用instance的后端

十、新增中奖编码

根据用户的登录信息，获取用户名和密码

1、前端

      username:'',
      password:'',
      
          const storedUser = localStorage.getItem('user');
    const user = JSON.parse(storedUser);
    //console.log(user);
    //console.log(user.username)
    this.username=user.username
    this.password=user.password

将用户名和密码拼接起来

每次从左到右随机取两个或者三个数据，存入type中

2、数据库

award表中新增字段identity

3、后端

新增字段

		/**
		 * 在exchange查询中奖信息
		 * @param PageNum
		 * @param size
		 * @return
		 */
		@RequestMapping("/findAward/{PageNum}/{size}")
		public ResultDataDTO findPage(@PathVariable("PageNum") Integer PageNum, @PathVariable("size") Integer size){
				Page<Award> page =new Page<>(PageNum,size);
				Page<Award> result = awardMapper.selectPage(page, null);
				return ResultDataDTO.success(result);
		}

4、identity字段为空

忘记删去之前的记录

十一、增加Redis

后端config

后端controller

		@RequestMapping("findById/{id}")
		public ResultDataDTO findById(@PathVariable Integer id){
//				AllInstance result = allInstanceService.getById(id);
//				return ResultDataDTO.success(result);
				String cacheKey = "instance:" + id; // 设置缓存的键

				// 从Redis缓存中尝试获取数据
				AllInstance result = (AllInstance) redisTemplate.opsForValue().get(cacheKey);

				if (result == null) {
						// 如果缓存中不存在数据，则从数据库中获取数据
						result = allInstanceService.getById(id);

						if (result != null) {
								// 将数据存储到Redis缓存中
								redisTemplate.opsForValue().set(cacheKey, result);
						}
				}

				return ResultDataDTO.success(result);
		}

未将数据写入redis

SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@22b27e9f] was not registered for synchronization because synchronization is not active
JDBC Connection [HikariProxyConnection@745903289 wrapping com.mysql.cj.jdbc.ConnectionImpl@23b07769] will not be managed by Spring

这个错误信息表明，你正在尝试使用Spring管理一个JDBC连接，但是这个连接没有被注册到Spring的事务管理中。

在Spring中，你需要将你的数据源(DataSource)或者JdbcTemplate等与Spring的事务管理进行关联，这样Spring才能自动管理这些资源的事务。

如果你使用的是Spring Boot,那么你可以在配置文件(如application.properties或application.yml)中设置数据源和事务管理的相关配置。

package com.demo.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.demo.DTO.ResultDataDTO;
import com.demo.domain.AllInstance;
import com.demo.mapper.AllInstanceMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;



/**
 * @author daetz
 * @creat 2023/5/17
 **/
@RestController
public class ContentShowByPage {

		@Autowired
		private AllInstanceMapper allInstanceMapper;

		@Autowired
		private RedisTemplate redisTemplate; // 注入RedisTemplate

		@RequestMapping("/findAllInstance/{pageNum}/{size}")
		public ResultDataDTO findPage(@PathVariable("pageNum") Integer pageNum, @PathVariable("size") Integer size) {
				// 设置当前页码和每页数量
				Page page = new Page<>(pageNum, size);
				// 分页查询
				Page result = allInstanceMapper.selectPage(page, null);

				// 将内容存储在Redis中
				for (AllInstance instance : result.getRecords()) {
						String key = String.valueOf(instance.getId());
						String value = instance.getInstanceName();
						redisTemplate.opsForValue().set(key, value);
				}

				return ResultDataDTO.success(result);
		}
}