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

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

项目编号:BS-XCX-015

一,环境介绍

语言环境:Java:  jdk1.8

数据库:Mysql: mysql5.7

应用服务器:Tomcat:  tomcat8.5.31

开发工具:IDEA或eclipse

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

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

二,项目简介

2.1 系统介绍

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

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

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智能应用

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


相关文章
|
6天前
|
小程序
微信小程序如何实现进入小程序自动连WiFi功能
微信小程序如何实现进入小程序自动连WiFi功能
|
1月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
107 1
|
1天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
1天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
1天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
1天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
1天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
6天前
|
人工智能 小程序 Java
Java智慧校园系统源码 微信小程序+电子班牌
通过设备管理对百纳智慧校园的智慧班牌以及百纳智慧屏(校牌)进行统一集中式管理,支持浏览所有设备的基本信息以及在离线状态,支持添加设备、设备一键开关机、一键重启、设置节假日开关机时间、设置日常开关机时间、远程班牌截屏、远程班牌升级等操作。
|
23天前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
25 2
|
1月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通

热门文章

最新文章