由于篇幅限制，我无法提供完整的源代码和数据库。但我可以提供一个简化的Node.js后端框架，以及Vue前端框架的基本结构。
后端使用Express.js：
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json()); // 用于解析JSON的中间件
// 口红推荐接口示例
app.get('/recommend', (req, res) => {
const { color, size } = req.query;
// 假设有一个简单的推荐逻辑
const recommended = getRecommendedLipstick(color, size);
res.json(recommended);
});
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
// 假设的推荐逻辑函数
function getRecommendedLipstick(color, size) {
// 这里会根据color和size进行一些数据分析和推荐
return {
color: 'red',
size: 'medium',
// 其他口红信息
};
}前端使用Vue.js：
<template>
<div>
<input v-model="color" type="text" placeholder="Color">
<input v-model="size" type="text" placeholder="Size">
<button @click="recommend">Recommend</button>
<div v-if="recommended">
Recommended Lipstick: {{ recommended.color }} - {{ recommended.size }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
color: '',
size: '',
recommended: null
};
},
methods: {
async recommend() {
try {
const response = await this.$http.get('/recommend', {
params: { color: this.color, size: this.size }
});
this.recommended = response.data;
} catch (error) {
console.error('Error fetching recommended lipstick:', error);
}
}
}
};
</script>这个例子展示了如何使用Express.js创建一个简单的API接口，以及如何在Vue.js前端中发送请求并展示响应数据。在实际应用中，你需要实现更复杂的逻辑，比如与数据库交互，以及处理更多的接口路由。