关于【今天吃什么】的思考--随机答案

关于【今天吃什么】的思考

---

今天吃什么这个问题每天都很困扰，做个随机数的小练习来帮忙回答这个问题吧。

前端vue3

1. 随机数页面

<template>
  <div>
      <el-button type="primary" @click="randomThat()">点到谁就是谁</el-button>
      <el-divider/>
      <el-button v-for="(item, index) in listdata" :key="index"
       :class="{ 'el-button--success': listPrimary[index],
       'el-button--warning': listInfo[index] }">{{item}}</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

const listdata = ref([]);
const listPrimary=ref([]);
const listInfo=ref([]);
export default {
  name:'Choose-Food',
  components: {
  },
  data(){
    return{
      listdata,
      listPrimary,
      listInfo
    }
  },
  mounted(){
    this.getData()
  },
  methods:{
    async getData(){
      await axios.post('/api/foods/choose')
        .then(response => {
          listdata.value = response.data.foods;
          this.clearlist()
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    },
    doSleep(duration) {
      return new Promise((resolve) => {
        setTimeout(resolve, duration);
      });
    },
    clearlist(){
      listPrimary.value=[]
      listInfo.value=[]
      listdata.value.forEach(() => listPrimary.value.push(false));
      listdata.value.forEach(() => listInfo.value.push(false));
    },
    async randomThat(){
      let lastRam=0;
      for (let i = 0; i < 20; i++) {
          this.clearlist()
          const randomNumber = Math.floor(Math.random() * (listdata.value.length))
          listInfo.value[randomNumber]=true
          lastRam=randomNumber
          await this.doSleep(400);
      }
      this.clearlist()
      listPrimary.value[lastRam]=true
    }
  }
}
</script>

2. 记录下axios.js

import axios from 'axios'

const service=axios.create({
  //请求超时时间
  timeout:10000,
  baseURL: '/api'
});

export default service;

3. 记录下main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import router from './router';

window.__VUE_PROD_DEVTOOLS__ = false;
window.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false;

const app=createApp(App)
app.use(ElementPlus).use(router).mount('#app')

4. vue.config.js添加如下，代理访问接口处理跨域问题：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }

后端java

虽然前端直接实现即可，不过为了练习下mongodb，还是用下后端吧。

1. java 接口

@RestController
@RequestMapping("/foods")
public class FoodsChooose {
    @PostMapping("/choose")
    @ResponseBody
    public Map foodsChoose() {
        return MongoDBUtil.collection("foods");
    }

2. MongoDBUtil

public class MongoDBUtil {

    public static MongoClient conn() {
        String url = "mongodb://localhost:27017";
        MongoClient mongoClient = MongoClients.create(url);
        return mongoClient;
    }

    public static Map collection(String queryKey) {
        Map<String,Object> returnValue = new HashMap<>();
        MongoClient mongoClient = conn();
        MongoDatabase database = mongoClient.getDatabase("mongotest");
        MongoCollection<Document> collection = database.getCollection("mongotest");
        FindIterable<Document> result = collection.find();
        for(Document doc : result) {
            if(doc.containsKey(queryKey)){
                returnValue.put(queryKey,doc.get(queryKey));
            }
        }
        closeConn(mongoClient);
        return returnValue;
    }

    public static void closeConn(MongoClient mongoClient) {
        mongoClient.close();
    }
}

3. pom

<dependency>
    <groupId>org.mongodb</groupId>
    <artifactId>mongodb-driver-sync</artifactId>
    <version>5.1.2</version>
</dependency>