微信小程序开发|基于微信小程序的健身陪练系统的设计与实现

本课题主要实现通过小程序进行在线预约陪练，下单支付，信息反馈，对陪练行业员工及其它信息的相关管理功能。系统利用所学的JAVA开发技术，利用Springboot框架实现系统的后台接口服务开发，使用VUE完成系统的前端页面开发，并通过微信小程序客户端来让用户进行在线使用更加方便，采用前后端分离的开发方式来实现。数据库采用MYSQL对陪你动系统中的业务数据进行存储，最终实现一个前后端分离的并结合微信小程

编程千纸鹤

2868人浏览 · 2023-07-05 09:19:52

编程千纸鹤 · 2023-07-05 09:19:52 发布

作者主页：编程千纸鹤

作者简介：Java、前端、Python开发多年，做过高程，项目经理，架构师

主要内容：Java项目开发、Python项目开发、大学数据和AI项目开发、单片机项目设计、面试技术整理、最新技术分享

收藏点赞不迷路关注作者有好处

文末获得源码

项目编号：BS-XCX-015

一，环境介绍

语言环境：Java: jdk1.8

数据库：Mysql: mysql5.7

应用服务器：Tomcat: tomcat8.5.31

开发工具：IDEA或eclipse

前台开发技术：微信小程序+Vue+ElementUI

后台开发技术：SSM开发框架

二，项目简介

2.1 系统介绍

改革开放四十年来最大的成就就是让全国的老百姓都能吃得饱，穿得暖，过上物质生活相对优越的生活。人们也从最初追求基本的温饱问题转而追求更高的生活品质，包括更好的健康追求。最近这些年随着健身需求的迸发，培养出了一个新的行业，那就是陪练行业。它主要解决有些人想锻炼又怕自己坚持不住，或者需要一定的指导的客户需求，本次课题主要就是研究如何通过信息化技术有效的解决陪练行业的相关的预约等服务问题。

2.2 需求分析

本次开发设计的陪你动小程序，使用的用户主要分为三类角色，一是系统管理员，二是公司员工，三是前端客户。这三类用户登陆系统后进行的操作权限是不同的，其中前端客户主要通过微信小程序进行登陆使用相关的预约下单等服务，管理员和员工通过后台管理系统进入可以管理相应的数据信息。

前端用户登陆系统后主要进行的操作如下：

（1）注册登陆：用户可以在微信小程序上注册个人账户并进行登陆，登陆后可以操作相关的模块。

（2）个人信息管理：查看自己所在的宿舍情况以及个人信息情况，并可以对个人信息进行相应的管理操作。

（3）陪练员浏览：可以浏览陪练人员的相关信息，根据相关条件进行搜索查看等。

（4）在线预约服务：对于指定的陪练员，用户可以在线预约陪练人员，指定陪练的时间信息并在线下单，同时可以在个人中心中查看自己的预约记录。

（5）查看陪练排行：可以查看陪练员工的各项排行指标信息，并对陪练人员进行在线评论等操作。

（6）反馈留言：可以在线实现相应的留言反馈功能。

（7）交流论坛：可以小程序中发布各种交流探讨的贴子，为各位喜欢健身的朋友提供一个交流场所。

（8）反馈留言：可以在线实现相应的留言反馈功能。

（9）资讯查看：可以查看后台管理员发布的相关资讯信息。

陪你动平台管理员登陆后台管理系统后进行的操作如下：

（1）轮播图管理模块：主要管理在微信小程序端展现的轮播图片。

（2）公告管理模块：主要管理在小程序端展现的系统公告信息。

（3）资讯管理模块：主要包含行业资讯信息管理和资讯分类管理。

（4）交流管理模块：主要管理交流论坛的主题分类和交流贴子信息。

（5）用户管理模块：主要管理系统管理员、员工管理、前端注册用户的信息。

（6）陪练人员管理模块：用户管理陪练公司的陪练人员信息。

（7）预约记录管理模块：主要管理前端用户预约下单的订单信息。

（8）排行管理模块：由平台系统管理员在后台平台管理前端展示的陪练人员排行信息。

（9）留言管理模块：主要管理前端用户在线留言信息。

（10）打分管理模块：由系统管理员在后台平台查看前端用户的打分信息。

陪你动员工登陆后台系统可以进行的操作如下：

（1）预约记录管理模块：主要管理前端用户预约下单的订单信息。

（2）排行管理模块：由员工在后台平台管理前端展示的陪练人员排行信息。

（3）打分管理模块：由员工在后台平台查看前端用户的打分信息。

2.3 核心业务功能

核心业务流程

功能结构图：

下面根据分析出来的三类用户，来将他们对应的核心功能结构图进行展示：

图2 前端用户功能模块图

图3 管理员后台功能模块图

图4 员工后台功能模块图

2.4 数据库设计

下面根据业务实体数据模型的抽取，设计出相关数据库表的物理逻辑字段及相关结构，具体如下面所列数据表所示。

表1 appointment_record (预约记录)

列名	数据类型	长度	默认值	说明
appointment_record_id	int	10		预约记录ID
employee_information	int	10	0	员工信息
employee_name	varchar	64		员工姓名
employee_id	varchar	64		员工工号
type_of_sparring	varchar	64		陪练类型
sparring_price	varchar	64		陪练价格
customer_information	int	10	0	客户信息
customer_name	varchar	64		客户姓名
contact_number	varchar	64		联系电话
appointment_duration	int	10	0	预约时长
total_reservation_price	varchar	64		预约总价
time_of_appointment	datetime	19		预约时间
appointment_remarks	text	65535		预约备注
appointment_status	varchar	64		预约状态
appointment_reply	text	65535		预约回复
pay_state	varchar	16	未支付	支付状态
pay_type	varchar	16		支付类型: 微信、支付宝、网银
recommend	int	10	0	智能推荐
create_time	datetime	19	CURRENT_TIMESTAMP	创建时间
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间

表2 article (文章：用于内容管理系统的文章)

名称	数据类型	长度	说明
article_id	mediumint	8	文章id：[0,8388607]
title	varchar	125	标题：[0,125]用于文章和html的title标签中
type	varchar	64	文章分类：[0,1000]用来搜索指定类型的文章
hits	int	10	点击数：[0,1000000000]访问这篇文章的人次
praise_len	int	10	点赞数
create_time	timestamp	19	创建时间：
update_time	timestamp	19	更新时间：
source	varchar	255	来源：[0,255]文章的出处
url	varchar	255	来源地址：[0,255]用于跳转到发布该文章的网站
tag	varchar	255	标签：[0,255]用于标注文章所属相关内容，多个标签用空格隔开
content	longtext	2147483647	正文：文章的主体内容
img	varchar	255	封面图
description	text	65535	文章描述

表3 article_type (文章分类)

名称	数据类型	长度	默认值	说明
type_id	smallint	5		分类ID：[0,10000]
display	smallint	5	100	显示顺序：[0,1000]决定分类显示的先后顺序
name	varchar	16		分类名称：[2,16]
father_id	smallint	5	0	上级分类ID：[0,32767]
description	varchar	255		描述：[0,255]描述该分类的作用
icon	text	65535		分类图标：
url	varchar	255		外链地址：[0,255]如果该分类是跳转到其他网站的情况下，就在该URL上设置
create_time	timestamp	19	CURRENT_TIMESTAMP	创建时间：
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间：

表4 comment (评论)

名称	数据类型	长度	默认值	说明
comment_id	int	10		评论ID：
user_id	int	10	0	评论人ID：
reply_to_id	int	10	0	回复评论ID：空为0
content	longtext	2147483647		内容：
nickname	varchar	255		昵称：
avatar	varchar	255		头像地址：[0,255]
create_time	timestamp	19	CURRENT_TIMESTAMP	创建时间：
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间：
source_table	varchar	255		来源表：
source_field	varchar	255		来源字段：
source_id	int	10	0	来源ID：

表5 customer_user (客户用户)

名称	数据类型	长度	默认值	说明
customer_user_id	int	10		客户用户ID
customer_name	varchar	64		客户姓名
customer_gender	varchar	64		客户性别
customer_age	varchar	64		客户年龄
examine_state	varchar	16	已通过	审核状态
recommend	int	10	0	智能推荐
user_id	int	10	0	用户ID
create_time	datetime	19	CURRENT_TIMESTAMP	创建时间
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间

表6 employee_user (员工用户)

名称	数据类型	长度	默认值	说明
employee_user_id	int	10		员工用户ID
employee_name	varchar	64		员工姓名
employee_gender	varchar	64		员工性别
employee_id	varchar	64		员工工号
examine_state	varchar	16	已通过	审核状态
recommend	int	10	0	智能推荐
user_id	int	10	0	用户ID
create_time	datetime	19	CURRENT_TIMESTAMP	创建时间
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间

表6 forum (论坛)

名称	数据类型	长度	默认值	说明
forum_id	mediumint	8		论坛id
display	smallint	5	100	排序
user_id	mediumint	8	0	用户ID
nickname	varchar	16		昵称：[0,16]
praise_len	int	10	0	点赞数
hits	int	10	0	访问数
title	varchar	125		标题
keywords	varchar	125		关键词
description	varchar	255		描述
url	varchar	255		来源地址
tag	varchar	255		标签
img	text	65535		封面图
content	longtext	2147483647		正文
create_time	timestamp	19	CURRENT_TIMESTAMP	创建时间：
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间：
avatar	varchar	255		发帖人头像：
type	varchar	64	0	论坛分类：[0,1000]用来搜索指定类型的论坛帖

表6 message_feedback (留言反馈)

名称	数据类型	长度	默认值	说明
message_feedback_id	int	10		留言反馈ID
title_name	varchar	64		标题名称
customer_user	int	10	0	客户用户
customer_name	varchar	64		客户姓名
message_content	text	65535		留言内容
reply_content	text	65535		回复内容
recommend	int	10	0	智能推荐
create_time	datetime	19	CURRENT_TIMESTAMP	创建时间
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间

表7 notice (公告)

名称	数据类型	长度	小数位	默认值	说明
notice_id	mediumint	8	0		公告id：
title	varchar	125	0		标题：
content	longtext	2147483647	0		正文：
create_time	timestamp	19	0	CURRENT_TIMESTAMP	创建时间：
update_time	timestamp	19	0	CURRENT_TIMESTAMP	更新时间：

表8 ranking_information (排行信息)

名称	数据类型	长度	默认值	说明
ranking_information_id	int	10		排行信息ID
title_name	varchar	64		标题名称
employee_information	int	10	0	员工信息
employee_name	varchar	64		员工姓名
employee_id	varchar	64		员工工号
type_of_sparring	varchar	64		陪练类型
comprehensive_score	varchar	64		综合评分
employee_photo	varchar	255		员工照片
ranking_content	longtext	2147483647		排行内容
praise_len	int	10	0	点赞数
recommend	int	10	0	智能推荐
create_time	datetime	19	CURRENT_TIMESTAMP	创建时间
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间

表9 scoring_record (打分记录)

名称	数据类型	长度	默认值	说明
scoring_record_id	int	10		打分记录ID
employee_information	int	10	0	员工信息
employee_name	varchar	64		员工姓名
employee_id	varchar	64		员工工号
type_of_sparring	varchar	64		陪练类型
customer_information	int	10	0	客户信息
customer_name	varchar	64		客户姓名
contact_number	varchar	64		联系电话
the_customer_gave_a_score	varchar	64		客户打分
scoring_remarks	text	65535		打分备注
recommend	int	10	0	智能推荐
create_time	datetime	19	CURRENT_TIMESTAMP	创建时间
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间

表4-10 slides (轮播图)

名称	数据类型	长度	默认值	说明
slides_id	int	10		轮播图ID：
title	varchar	64		标题：
content	varchar	255		内容：
url	varchar	255		链接：
img	varchar	255		轮播图：
hits	int	10	0	点击量：
create_time	timestamp	19	CURRENT_TIMESTAMP	创建时间：
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间：

表11 sparring_personnel (陪练人员)

名称	数据类型	长度	默认值	说明
sparring_personnel_id	int	10		陪练人员ID
employee_information	int	10	0	员工信息
employee_name	varchar	64		员工姓名
employee_id	varchar	64		员工工号
type_of_sparring	varchar	64		陪练类型
sparring_price	int	10	0	陪练价格
working_hours	varchar	64		工作时间
employee_photo	varchar	255		员工照片
employee_profile	longtext	2147483647		员工简介
hits	int	10	0	点击数
praise_len	int	10	0	点赞数
recommend	int	10	0	智能推荐
create_time	datetime	19	CURRENT_TIMESTAMP	创建时间
update_time	timestamp	19	CURRENT_TIMESTAMP	更新时间

表12 user (用户账户：用于保存用户登录信息)

名称	数据类型	长度	默认值	说明
user_id	mediumint	8		用户ID：[0,8388607]用户获取其他与用户相关的数据
state	smallint	5	1	账户状态：[0,10](1可用\|2异常\|3已冻结\|4已注销)
user_group	varchar	32		所在用户组：[0,32767]决定用户身份和权限
login_time	timestamp	19	CURRENT_TIMESTAMP	上次登录时间：
phone	varchar	11		手机号码：[0,11]用户的手机号码，用于找回密码时或登录时
phone_state	smallint	5	0	手机认证：[0,1](0未认证\|1审核中\|2已认证)
username	varchar	16		用户名：[0,16]用户登录时所用的账户名称
nickname	varchar	16		昵称：[0,16]
password	varchar	64		密码：[0,32]用户登录所需的密码，由6-16位数字或英文组成
email	varchar	64		邮箱：[0,64]用户的邮箱，用于找回密码时或登录时
email_state	smallint	5	0	邮箱认证：[0,1](0未认证\|1审核中\|2已认证)
avatar	varchar	255		头像地址：[0,255]
create_time	timestamp	19	CURRENT_TIMESTAMP	创建时间：

三，系统展示

小程序端登录

陪练员列表展示

公告信息展示

在线预约管理

陪练排行榜

反馈留言

论坛交流

后台管理功能

轮播图管理

公告管理

资讯管理

预约记录管理

四，核心代码展示

小程序首页核心代码

<template>
  <view id="home" class="home--new">
    <!-- 广告模块(开始) -->
    <view>
      <list_ad :list="list_ad" location="店招"></list_ad>
    </view>
    <!-- 广告模块(结束) -->

    <!-- 轮播图模块(开始) -->
    <view class="swiper">
      <Slide :list="list_slide" />
    </view>
    <!-- 轮播图模块(结束) -->

    <!-- 菜单模块(开始) -->
    <view class="menu">
      <list_menu :list="list_menu"></list_menu>
    </view>
    <!-- 菜单模块(结束) -->

    <!-- 公告模块(开始) -->
    <view class="notice">
      <navigator url="/pages/notice/list">
        <Notice :list="list_notice" />

      </navigator>
    </view>
    <!-- 公告模块(结束) -->

    <!-- 广告模块(开始) -->
    <view>
      <list_ad :list="list_ad" location="顶部广告"></list_ad>
    </view>
    <!-- 广告模块(结束) -->

	<!-- 资讯中心模块(开始) -->
    <Card
      title="资讯中心"
      url="/pages/article/list"
      :list="list_article"
      v-if="$check_action('/article/list', 'get')"
      class="article_list"
    >
      <list_article :list="list_article"></list_article>
    </Card>
	<!-- 资讯中心模块(结束) -->



    <!-- 广告模块(开始) -->
    <view>
      <list_ad :list="list_ad" location="中部广告"></list_ad>
    </view>
    <!-- 广告模块(结束) -->


				<!-- 推荐陪练人员模块(开始) -->
    <Card
      class="list_diy"
      title="陪练人员推荐"
      url="/pages/sparring_personnel/list"
      :list="list_article"
      v-if="$check_action('/sparring_personnel/list', 'get')"
    >
	  <list_sparring_personnel :list="list_sparring_personnel"></list_sparring_personnel>

    </Card>
    <!-- 推荐陪练人员模块(结束) -->
						

    <!-- 广告模块(开始) -->
    <view>
      <list_ad :list="list_ad" location="底部广告"></list_ad>
    </view>
    <!-- 广告模块(结束) -->

    <!-- 链接模块(开始) -->
    <!-- <view>
      <list_link :list="list_link"></list_link>
    </view> -->
    <!-- 链接模块(结束) -->

    <!-- 版权模块(开始) -->
    <view class="copyright">
      <text>@版权归属 XX 所有</text>
    </view>
    <!-- 版权模块(结束) -->


  </view>
</template>

<script>


				import list_sparring_personnel from "@/components/diy/list_sparring_personnel.vue";
						import Card from "@/components/common/card.vue";
import bar_title from "@/components/diy/bar_title.vue";
import list_menu from "@/components/diy/list_menu.vue";
import list_ad from "@/components/diy/list_ad.vue";
	import list_article from "@/components/diy/list_article.vue";
import list_link from "@/components/diy/list_link.vue";
import Slide from "@/components/common/slide.vue";
import Notice from "@/components/common/notice.vue";


import mixin from "@/libs/mixins/page.js";
export default {
  mixins: [mixin],
  components: {
					list_sparring_personnel,
						    Card,
    bar_title,
	list_ad,
    list_menu,
			list_article,
    list_link,
    Slide,
    Notice,
  },
  data() {
    return {
      isSmall: false,
      sendValue: "",
      chatList: [],
      showChat: false,
      isAdmin: false,
      token: "",
      scrollTop: 0,
      oldScrollTop: 0,

      str: "<div>测试一下</div>",
							list_sparring_personnel: [],
						      list_ad: [],
      list_slide: [],
	  list_article: [],
      list_menu: [],
      list_link: [],
      list_notice: [],
    };
  },
  methods: {
    // toggle
    toToggle() {
      this.isAdmin = !this.isAdmin;
    },

					/**
		*  获取陪练人员
		*/
		get_sparring_personnel() {
			let url = "~/api/sparring_personnel/get_list?";
															url = "~/api/sparring_personnel/get_list?orderby=hits desc";
										
			this.$get(url, {
											}, (json) => {
					if (json.result && json.result.list) {
					console.log("陪练人员" ,json.result.list);
					this.list_sparring_personnel = json.result.list;
											this.list_sparring_personnel.map((o)=>{
							o["praise_len"];
						});
						this.get_praise(this.list_sparring_personnel ,"sparring_personnel" ,"11514");
									}
			});
		},
    					
    /**
     * 当前年月日时分秒方法
     * @param {Object} fmt
     */
    dateFormat(fmt) {
      var myDate = new Date();
      var o = {
        "M+": myDate.getMonth() + 1, // 月份
        "d+": myDate.getDate(), // 日
        "h+": myDate.getHours(), // 小时
        "m+": myDate.getMinutes(), // 分
        "s+": myDate.getSeconds(), // 秒
        "q+": Math.floor((myDate.getMonth() + 3) / 3), // 季度
        S: myDate.getMilliseconds(), // 毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (myDate.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    },

    /**
     *  获取轮播图
     */
    get_slides() {
      this.$get("~/api/slides/get_list?", {}, (json) => {
        if (json.result && json.result.list) {
          console.log("轮播图", json.result.list);
          this.list_slide = json.result.list;
          this.list_slide.map((o) => {
            o["praise_len"];
          });
          this.get_praise(this.list_slides, "slides", "slides_id");
        }
      });
    },

    /**
     *  获取导航栏
     */
    get_menu() {
      var user_group = this.$store.state.user.user_group;
      console.log(user_group,6666)
      this.$get(
        "~/api/auth/get_list?",
        { size: "0", get: "", user_group, get: 1, position: "top" },
        (json) => {
          if (json.result && json.result.list) {
            this.list_menu = json.result.list;
            this.list_menu.map((o) => {
              o["praise_len"];
            });
            this.get_praise(this.list_auth, "auth", "auth_id");
          }
        }
      );
    },

    /**
     *  获取文章
     */
    get_article() {
      this.$get("~/api/article/get_list?", { page: 1, size: 5 }, (json) => {
        console.log(json, 5666);
        if (json.result && json.result.list) {
          console.log("文章", json.result.list);
          this.list_article = json.result.list;
          this.list_article.map((o) => {
            o["praise_len"];
          });
          this.get_praise(this.list_article, "article", "article_id");
        }
      });
    },

    /**
     *  获取广告
     */
    get_ad() {
      this.$get("~/api/ad/get_list?", { page: 1, size: 5 }, (json) => {
        if (json.result && json.result.list) {
          console.log("广告", json.result.list);
          this.list_ad = json.result.list;
          this.list_ad.map((o) => {
            o["praise_len"];
          });
          this.get_praise(this.list_ad, "ad", "ad_id");
        }
      });
    },



    /**
     *  获取链接列表
     */
    get_link() {
      this.$get("~/api/link/get_list?", { page: 1, size: 3 }, (json) => {
        if (json.result && json.result.list) {
          console.log("链接", json.result.list);
          this.list_link = json.result.list;
          this.list_link.map((o) => {
            o["praise_len"];
          });
          this.get_praise(this.list_link, "link", "link_id");
        }
      });
    },

    /**
     *  获取公告列表
     */
    get_notice() {
      this.$get("~/api/notice/get_list?", { page: 1, size: 3 }, (json) => {
        if (json.result && json.result.list) {
          console.log("公告", json.result.list);
          this.list_notice = json.result.list;
          this.list_notice.map((o) => {
            o["praise_len"];
          });
          this.get_praise(this.list_notice, "notice", "notice_id");
          console.log(this.list_notice);
        }
      });
    },

    /**
     *  获取点赞数
     *  @param {Object} list
     */
    get_praise(list, table, idName) {
      this.$get(
        "~/api/praise/count_group?source_table=" + table + "&groupby=source_id",
        {},
        (res) => {
          if (res.result) {
            res.result.map((o) => {
              for (let i = 0; i < list.length; i++) {
                let oj = list[i];
                if (oj[idName] === o["source_id"]) {
                  oj["praise_len"] = o["count"];
                  break;
                }
              }
            });
          } else if (res.error) {
            console.error(res.error);
          }
        }
      );
    },
  },
  onShow() {
    						this.get_sparring_personnel();
						    this.get_menu();
    this.get_slides();
			this.get_article();
    this.get_link();
    this.get_notice();
    this.get_ad();

    this.get_praise();
  },
};
</script>
<style lang="scss" scoped>
	.support_icon {
		width: 50px;
		height: 50px;
		position: fixed;
		right: 0%;
		bottom: 10%;
		z-index: 9999;
	}
	  .support_module .container{
	    height: 64%;
	    width: 19.4rem;
	    border-radius: 4px;
	    border: 0.5px solid #e0e0e0;
	    background-color: #f5f5f5;
	    overflow: hidden;
	    position: fixed;
	    padding: 0;
	    margin-left: -9.7rem;
	    z-index: 99999999;
	    }
		.support_module	.small_css{
			height: 40px;
	    width: 200px;
	    right: -15px;
	    bottom: 0px;
		}
		.support_module	.big_css{
					top: 12%;
					left: 50%;
					}
	    .support_module .content{
	        width: calc(100% - 0px);
	        overflow-y: scroll;
					height: 64%;
					padding: 0 10px 10px 0;
	    }
			.support_module .content::-webkit-scrollbar{
		display: none
	}
	.support_module_title{
		text-align: right;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #ccc;

	}
	.support_module_title .title_btn{
		font-size: 20px;
		cursor: pointer;
		margin-right: 20px;
		color: #888;

	}
	    .support_module .content:hover::-webkit-scrollbar-thumb{
	        background:rgba(0,0,0,0.1);
	    }
	    .support_module .bubble{
	        max-width: 182px;
	        padding: 10px;
	        border-radius: 5px;
	        position: relative;
	        color: #000;
	        word-wrap:break-word;
	        word-break:normal;
					font-size: 12px;
	    }
	    .support_module .item_left .bubble{
	        margin-left: 10px;
	        background-color: #fff;
	    }
	    .support_module .item_left .bubble:before{
	        content: "";
	        position: absolute;
	        width: 0;
	        height: 0;
	        border-left: 10px solid transparent;
	        border-top: 10px solid transparent;
	        border-right: 10px solid #fff;
	        border-bottom: 10px solid transparent;
	        left: -20px;
	    }
	    .support_module .item_right .bubble{
	        margin-right: 10px;
	        background-color: #9eea6a;
	    }
	    .support_module .item_right .bubble:before{
	        content: "";
	        position: absolute;
	        width: 0;
	        height: 0;
	        border-left: 10px solid #9eea6a;
	        border-top: 10px solid transparent;
	        border-right: 10px solid transparent;
	        border-bottom: 10px solid transparent;
					left: none;

					        right: -20px;
	    }
	    .support_module .item{
	        margin-top: 15px;
	        display: flex;
	        width: 100%;
	    }
	    .support_module .item.item_right{
	        justify-content: flex-end;
	    }
	    .support_module .item.item-center{
	        justify-content: center;
	    }
	    .support_module .item.item-center span{
	        font-size: 12px;
	        padding: 2px 4px;
	        color: #fff;
	        background-color: #dadada;
	        border-radius: 3px;
	        -moz-user-select:none; /*火狐*/
	        -webkit-user-select:none; /*webkit浏览器*/
	        -ms-user-select:none; /*IE10*/
	        -khtml-user-select:none; /*早期浏览器*/
	        user-select:none;
	    }

	    .support_module .avatar image{
	        width: 42px;
	        height: 42px;
	        border-radius: 50%;
	    }
	    .support_module .input-area{
	        border-top:0.5px solid #e0e0e0;
	        height: 15%;
	        background-color: #fff;
	    }
	    .support_module textarea{
	        flex: 1;
	        padding: 10px;
	        font-size: 12px;
	        border: none;
	        overflow-y: auto;
	        overflow-x: hidden;
	        outline:none;
	        resize:none;
					width: 102%;
					height: 100%;
					min-height: 100%;
					max-height: 100%;
					box-sizing: border-box;
	    }
	    .support_module .button-area{
	      display: flex;
	    height: 50px;
	    line-height: 50px;
	    padding: 5px;
	    justify-content: flex-end;
	    text-align: right;
	    width: 100%;
			background: #fff;
	    }
	    .support_module .button-area .send-btn{
	           width: 80px;
	    height: 28px;
	    line-height: 28px;
	    border: none;
	    outline: none;
	    border-radius: 4px;
	    float: right;
	    cursor: pointer;
	    background: #9eea6a;
	    font-size: 12px;
	    color: #333;
	    margin: 0px;
	    text-align: center;
	    }
</style>

五，相关作品展示

基于Java开发、Python开发、PHP开发、C#开发等相关语言开发的实战项目

基于Nodejs、Vue等前端技术开发的前端实战项目

基于微信小程序和安卓APP应用开发的相关作品

基于51单片机等嵌入式物联网开发应用

基于各类算法实现的AI智能应用

基于大数据实现的各类数据管理和推荐系统

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^