关于【今天吃什么】的思考
今天吃什么这个问题每天都很困扰,做个随机数的小练习来帮忙回答这个问题吧。
前端vue3
- 随机数页面
javascript
<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>
- 记录下axios.js
javascript
import axios from 'axios'
const service=axios.create({
//请求超时时间
timeout:10000,
baseURL: '/api'
});
export default service;
- 记录下main.js
javascript
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')
- vue.config.js添加如下,代理访问接口处理跨域问题:
javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
}
后端java
虽然前端直接实现即可,不过为了练习下mongodb,还是用下后端吧。
- java 接口
java
@RestController
@RequestMapping("/foods")
public class FoodsChooose {
@PostMapping("/choose")
@ResponseBody
public Map foodsChoose() {
return MongoDBUtil.collection("foods");
}
- MongoDBUtil
java
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();
}
}
- pom
xml
<dependency>
<groupId>org.mongodb</groupId>
<artifactId>mongodb-driver-sync</artifactId>
<version>5.1.2</version>
</dependency>