哟妈妈

概述

哟妈妈是一个集成了聊天、购物、社区等功能的母婴生态APP。它致力于给妈妈们提供更便捷、高效的生活服务。

开发技术

哟妈妈是采用前后端分离架构进行开发，前端使用Vue.js框架，后端使用Spring Boot框架。数据库采用MySQL。

我们采用了如下技术：

• 前端：Vue.js、Element-UI、Axios、Vue-router等；
• 后端：Spring Boot、MyBatis、Druid等；
• 数据库：MySQL；
• 代码托管：GitLab；
• 部署：Docker、Nginx。

主要功能

哟妈妈主要包含如下功能：

1.聊天功能

在哟妈妈中，妈妈们可以自由聊天，分享育儿经验和知识，互相交流沟通。

2.购物功能

哟妈妈中还包含了商城功能，妈妈们可以在线购买婴儿用品、母婴用品等商品。

3.社区功能

哟妈妈中还有社区功能，妈妈们可以在社区中发布自己的育儿心得，也可以查看其他妈妈的分享。

4.文章分享功能

哟妈妈中还有文章分享功能，妈妈们可以查看和分享各种与育儿有关的文章。

代码示例

以下是哟妈妈前端使用Vue.js框架的代码示例：

<template>
  <div>
    <h2>聊天室</h2>
    <ul>
      <li v-for="item in chatList" :key="item.id">
        {{ item.content }}
      </li>
    </ul>
    <input type="text" v-model="content" />
    <button @click="sendMsg">发送消息</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      chatList: [],
      content: ''
    };
  },
  methods: {
    getChatList() {
      axios.get('/api/chat/list').then(response => {
        this.chatList = response.data;
      });
    },
    sendMsg() {
      const params = {
        content: this.content
      };
      axios.post('/api/chat/send', params).then(response => {
        this.getChatList();
        this.content = '';
      });
    }
  },
  mounted() {
    this.getChatList();
  }
};
</script>

<style scoped>
h2 {
  color: blue;
}
</style>

以上示例代码使用Vue.js框架实现了聊天室中的发送消息和显示消息功能。同时，这里也演示了使用axios这个ajax库发送异步请求的方法。