医依通小程序项目总结

news2024/10/7 14:21:41

一、项目介绍：

这是一个医疗类的小程序，主要用于新冠疫苗预约，HPV疫苗预约，核酸预约，和咨询等，主要作用就是方便快捷，可以在手机上进行预约挂号，和一些健康自测的功能，还有一些医生专家讲座，分享一些疾病宣传及预防

二、项目使用技术栈：

✨脚手架工具：uniapp 和 高效、快速的 Vite

🔥前端框架：眼下最时髦的 Vue3

🍍状态管理器：vue3新秀 Pinia，犹如 react zustand般的体验，友好的api和异步处理

🏆开发语言 TypeScript

三、项目模块：

bec3aaa5ddaa418bb5cfc196e54024b2.png

项目目录：

a05ec90f72b649bdabb07c4f05b01819.png

com-components：

       文件名                         页面属性
point.vue页面没有数据，为空的时候显示该页面

st-member.vue

模态框，点击显示模态框，选择就诊人，提价数据

pages：

        文件夹名                                   页面属性
login-page登录授权
index首页
registered挂号
video

医师课堂

mine我的
xinguan-vaccine

新冠接种疫苗接种预约

hpv-vaccine

hpv页面和详情页

hesuan-vaccine

核酸检测预约

graphics

图文咨询

phy-exam

体检套餐列表页面和体检详情页

my-service存放的是每个页面的二级三级....页面

 my-service：

        文件夹名                                   页面属性
hesuan

核酸预约列表

hpv-view

hpv 预约列表

my-patient

我的就诊人和添加就诊人

xinguan

新冠疫苗预约订单

phy-view

体检预约订单

public：

     文件名                                        页面属性
request.ts接口封装
decl-type.d.ts

类型声明文件

.d.ts文件 不能执行逻辑操作 只能用来声明 不会转化成js文件

misc.ts上传图片的方法

四、 项目开发前期准备工作：

1、打开uniapp官网下载项目框架

77b9746a607541d6a2fb6a65865b6d3a.png

 这次做的是uniapp，vue3，ts的项目，以下图片可根据需求下载，点击gitee到git码云仓库下载

35e138f68fce410592032ea7e9a7a7b1.png

2、获取Appid

重定项目Appid

打开src/manifest.json文件，微信小程序配置里，更改为你自己的小程序APPID

3507b60b197f477797bb3389a75f2b34.png

3，下载依赖

 npm install

 4、运行

在命令窗口输入： npm run dev:mp-weixin  ，用于解析代码转换小程序原生代码

运行完之后会生成一个dist文件夹，

0555ecdf329a4702b0925bad6e18e9e6.png

 5、生成dist文件包，因为本项目用到vue3+ts语法，所以选用vs code编译器，但是不能主动调去微信开发者工具。所以手动拖动项目到微信开发者平台

五、封装接口

1、在src下创建public文件夹，在这个文件夹加下面创建request.ts文件

2、在这个页面下定义一个对象，用于接口管理，然后用export导出

3、登录授权，下载js-base64，封装一个方法用于获取本地存储的token，在请求接口request()里的header使用这个方法

//公用请求
const baseUrl = 'https://meituan.thexxdd.cn/api'

//获取token npm install -- save js-base64
import { Base64 } from 'js-base64'
import {
    Rescovidapi,
    Wxloginapi,
    Covidcancelapi,
    Hpvorder,
    Resnuataapi,
    AddPatient,
    Graphics,
    FilterData,
    PhyRes
} from "@/public/decl-type"
function getToken(): string {
    const token = uni.getStorageSync('wxuser').user_Token || ''
    //后端和前端的约定 
    const base64_token = Base64.encode(token + ':')
    return 'Basic ' + base64_token
}

//请求
function request(url: string, method: 'GET' | 'POST', data: string | object | ArrayBuffer) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + url,
            method,
            data,
            header: {
                Authorization: getToken()
            },
            success: (res: any) => {
                if (res.statusCode == 200) {
                    resolve(res)
                } else if (res.statusCode == 401) {
                    //权限过期
                    // 没有权限访问接口:跳转到登陆界面
                    uni.navigateTo({ url: '/pages/login-page/index' });
                    uni.showToast({
                        title: "信息过期",
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                } else if (res.statusCode == 400) {
                    uni.showToast({
                        title: '开发者某个字段或参数填写不对',
                        icon: 'none',
                        duration: 1000,
                    });
                    reject(res);
                } else if (res.statusCode == 500) {
                    uni.showToast({
                        title: "服务器错误",
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                } else if (res.statusCode == 202) {
                    uni.showToast({
                        title: res.data.msg,
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                } else {
                    uni.showToast({
                        title: "服务器错误",
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                }
            },
            fail: (err: any) => {
                uni.showToast({
                    title: "服务器错误",
                    icon: 'none',
                    duration: 1000
                })
                reject(err)
            }
        })
    })

}
//接口管理
const RequestApi = {
    //首页数据
    Frontpage: () => request('/frontpage', 'GET', {}),
    //新冠疫苗预约时段
    NewappTime: () => request('/newapptime', 'GET', {}),
}
//上传图片
let IMAGEURL = baseUrl + "/upload_picture"
//上传图片，身份证信息
let AICARD = baseUrl + "/ai_card";
export { RequestApi, IMAGEURL, AICARD }

登录逻辑： 

 1、下载js-base64  下载方法：npm install -- save js-base64

 2、在封住的request里面写请求头

 3、请求小程序登录接口，我这个使用ts写的蓝色的单词是ts的规范接口类型，用js的把这个删了就行了

4、在登录页面登录按钮添加点击事件、当点击事件触发的时候进行的操作

在登录页面调用封装好的登录接口

 

 5、 登录写一个方法用于调用api接口登录

 6、点击登录

 7、在访问一些需要登录的页面，没有登录或者登录过期的时候后台会返回一个失败信息，这个失败信息的statusCode是401，所以需要在请求接口的时候判断，如果返回的是401，需要跳转到登录页面，重新登陆。 

 代码：

const baseUrl = 'https://meituan.thexxdd.cn/api'
 
//获取token npm install -- save js-base64
import { Base64 } from 'js-base64'
function getToken(): string {
    const token = uni.getStorageSync('wxuser').user_Token || ''
    //后端和前端的约定 
    const base64_token = Base64.encode(token + ':')
    return 'Basic ' + base64_token
}
 
//请求
function request(url: string, method: 'GET' | 'POST', data: string | object | ArrayBuffer) {
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + url,
            method,
            data,
            header: {
                Authorization: getToken()
            },
            success: (res: any) => {
                if (res.statusCode == 200) {
                    resolve(res)
                } else if (res.statusCode == 401) {
                    //权限过期
                    // 没有权限访问接口:跳转到登陆界面
                    uni.navigateTo({ url: '/pages/login-page/index' });
                    uni.showToast({
                        title: "信息过期",
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                } else if (res.statusCode == 400) {
                    uni.showToast({
                        title: '开发者某个字段或参数填写不对',
                        icon: 'none',
                        duration: 1000,
                    });
                    reject(res);
                } else if (res.statusCode == 500) {
                    uni.showToast({
                        title: "服务器错误",
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                } else if (res.statusCode == 202) {
                    uni.showToast({
                        title: res.data.msg,
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                } else {
                    uni.showToast({
                        title: "服务器错误",
                        icon: 'none',
                        duration: 1000
                    })
                    reject(res)
                }
            },
            fail: (err: any) => {
                uni.showToast({
                    title: "服务器错误",
                    icon: 'none',
                    duration: 1000
                })
                reject(err)
            }
        })
    })
 
}

//接口管理
const RequestApi = {
    //首页数据
    Frontpage: () => request('/frontpage', 'GET', {}),
    //新冠疫苗预约时段
    NewappTime: () => request('/newapptime', 'GET', {}),
    // 新冠疫苗提交预约
    RescoVid: (data: Rescovidapi) => request('/rescovid', 'POST', data),
    // 小程序登陆
    WxLogin: (data: Wxloginapi) => request('/wx_login', 'POST', data),
}
export { RequestApi}

首页代码：

<template>
  <view class="Login-page">
    <image
      mode="aspectFill"
      src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/denglu-yemian.jpg"
    ></image>
    <button @click="Login">授权登陆</button>
  </view>
</template>
 
<script setup lang="ts">
import { ref, onMounted, reactive, toRefs } from "vue";
import { RequestApi } from "@/public/request";
// 授权登陆
function Login() {
  uni.getUserInfo({
    // desc: "获取个人信息",
    withCredentials: false,
    lang: "zh_CN",
    timeout: 10000,
    success: (res) => {
      let { avatarUrl, nickName } = res.userInfo;
      // 获取code
      uni.login({
        success: (code) => {
          console.log(code);
 
          uni.showLoading({ title: "登陆中", mask: true });
          ApiLogin(avatarUrl, nickName, code.code);
        },
        fail: (err) => {
          uni.showToast({ title: "登录失败", icon: "none", duration: 1000 });
        },
      });
    },
    fail: (err) => {
      uni.showToast({ title: "登录失败", icon: "none", duration: 1000 });
    },
  });
}
 
// 调用api接口登陆
async function ApiLogin(avatarUrl: string, nickName: string, code: string) {
  try {
    let obj = {
      appid: "",//id
      secret: "",//秘钥
      avatarUrl,
      nickName,
      code,
    };
    let res: any = await RequestApi.WxLogin(obj);
    // 存储用户信息到本地缓存，然后返回上一页
    uni.setStorageSync("wxuser", res.data.data);
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
      uni.hideLoading();
    }, 600);
  } catch (error) {
    uni.showToast({ title: "登录失败", icon: "none", duration: 1000 });
  }
}
</script>

六、首页

效果图：

因为我们每个人的手机型号不一样，尺寸不一样，所以要做到没个手机型号和尺寸的自适应一样。

逻辑：

在app.vue页面一开始加载的时候需要获取按钮高度，这里用到onLaunch（）生命周期

 在首页页面挂载钱获取按钮高度

 在style里面用v-bind()绑定获取到的高度

 剩下的就是调取接口，获取数据，渲染数据，样式布局，以及点击响应的区域跳转到响应的模块

七、新冠疫苗（亮点：选择时段）

效果图：

                            

这个页面的输入框是小程序自带的，他的需要就是绑定所有数据，调取提交接口

比较难的业务逻辑就是上午时段和下午时段只能选择一个

然后用这些下标用三元表达式绑定动态class，这样能实现效果图的效果了

点击提交预约，发送后台需要的字段，调取接口

字段：

 

 提交成功后，跳转到订单页面

 

 渲染数据，点击取消预约调用接口，传递ID，就成功取消预约

八、HPV疫苗（亮点：Top切换）

效果图： 

                                      

列表页：

1、点击获取下标，用三元表达式的方法绑定动态class

2、每一个分类他的商品都有相同的id，用id进行筛选显示相应的数据

3、将获取到的数据设置两个变量。一个用于筛选，一个用于展示全部数据

 点击去预约需要把id，套餐名，价格，描述用字符串的形式传给页面

预约页：

跟新冠疫苗页面相似，也渲染数据，调取接口，跳转页面，提交。

HPV订单页面：

提交成功后跳转到HPV订单页面

效果图：

九、核酸检测（亮点：电话）

核酸检测预约效果图：

亮点逻辑：

写完之后，需要去微信公众平台绑定接口路径

 下滑找到一下区域   这个接口不需要在后面拼接/api

 逻辑写完后跳转到订单页面

核酸检测订单：

 

十、首页——图文咨询（重点：亮点是上传图片）：

以下是图文咨询的页面效果，每个红色的盒子是一个模块，方便后期遍历数据

41c819e7bf53485e9328bef46ee0572b.png                1e6b906b45584b4389c20ea17062dc1e.png

当前页面的重点逻辑：

1、上传图片：在这个项目中我们有很多地方会用到长传图片的这个功能，所以把这个方法封装了一下，方便后期复用。

操作如下：

在public问价夹创建misc.ts文件，把上传图片的方法放在这个文件夹里。

在request.ts写自己的接口地址 

ba2891ae547a49369a3e486b15efcde1.png0e402dfb39754ab1b0c0725d36b3cd0f.png

69203d30147a4b2c91f89961e0844f44.png   3adb92953c76426c9f052d6d7ea30689.png

代码：

function uploadImage(url: string, su_title: string, err_title: string) {
  return new Promise((reactive, reject) => {
    uni.chooseMedia({
      count: 1, //每次可选择几张图片
      mediaType: ["image"], //文件类型，图片、视频
      sizeType: ["compressed"], //压缩图片
      success(res) {
        console.log(res);
        
        uni.showLoading({
          title: su_title,
          mask: true
        })
        uni.uploadFile({
          url, //自己的接口地址
          filePath: res.tempFiles[0].tempFilePath, //请求成功返回的临时地址
          name: "file",
          success(res: any) {
            reactive(res)
            uni.hideLoading()
          },
          fail(err: any) {
            uni.showToast({
              title: err_title,
              icon: "error",
              duration: 1000
            })
            reject(err)
          }
        });
      },
    });
  });
}
export { uploadImage };

 在图文咨询页面引入这个方法

9ea29868f1e248788d45f65d0228fa7d.png

3751bd3221754b25aa2bad61560d7fab.png

控制台输出：

014783e792b94cebbd3c04dc37bed4f8.png b5aa400a791f403885e25d75090025f0.png

 代码：

const unload = async () => {
  const res: any = await uploadImage(IMAGEURL, "上传中", "上传失败");
  const res_data = JSON.parse(res.data);
  submitData.ins_report.push(res_data);
};

添加就诊人需要跳转到就诊人页面，如果需要添加就诊人 要调到添加就诊人页面

04f66ceefbd94dba977c1daa465fc15d.png                                    fd24feede5d4424e83e3843217a4f4ec.png

 这个两个页面也是比较简单，主要考验css功底，和渲染数据，比较难的就是身份证识别，但这个功能是上传图片后台识别后返回身份证信息的数据，然后绑定数据就行了，方法跟上面一致。

8de38ea3eba3412ea45206bca1045208.png

1eec076ffbe6468dac1d86def3810b50.png

224f2e0915594c10b47600dde540eff1.png

 这有一个bug，看一下效果图

31a8b92d0c9b437b9f30e4e2da75da2b.png                a4e0035587c24f0dbbe77f7ac7700f09.png

 想要实现我们需要的效果把那段注释的代码解开

代码：

const AIcardupload = async () => {
  const res: any = (await uploadImage(AICARD, "识别中", "识别失败")) as {
    statusCode: number;
  };
  const res_data = JSON.parse(res.data).data;
  if (res.statusCode == 200) {
    submitData.name = res_data.name;
    submitData.sex = res_data.sex;
    submitData.born = res_data.born;
    submitData.id_card = res_data.id_card;
    console.log(submitData.born);
    submitData.born = submitData.born.slice(0, 4)+"-" +submitData.born.slice(4, 6)+"-"+submitData.born.slice(6, 8)
  }
  console.log(submitData, "submitData");
};

存储到pinia仓库

在选择就诊人页面选择就诊人保存到pinia，因为在上一个页面（图文咨询）需要用到name和ID

npm install pinia --save  下载

在src下面添加store文件夹，再添加一个index.ts文件（可以去参考pinia官网）

pinia仓库代码：

import { defineStore } from "pinia";

interface patient {
  name:string;
  id:string
}
export const myData = defineStore('my_data', {
  state: () => {
    return {
      patient: {
        name: "",
        id: ""
      } as patient
    }
  },
  actions:{
    addPatient(value :patient){
      this.patient = value
    }
  }
})

 就诊人页面代码：

//引入pinia仓库
import { myData } from "@/store/index";
let store = myData();
//点击事件触发向pinia发送数据
const checkedData = (name: string, id: string) => {
  store.addPatient({ name, id });
};

图文咨询页面：

41a018c89df741b3be1104a21d602462.png e0ec2972c17d42fe9b0dfec38494d725.png

 提交数据：

添加就诊人提交接口提交参数

1544dd5e788c40459516545a31c480ad.png

d2773218cb7449ad8b5b35ab8485070f.png

 图文咨询提交接口提交参数

de5c5b363b0f4e73a1b222dc9b5d4787.png

5673b3a0d40b441080d4e8f26e4e411c.png

十一、健康体检（亮点：点击全部点击相应的套餐显示响应的数据、销量排序、价格排序，uniapp模态框二次封装，方便后期复用）

体检预约和体检详情页面效果：

8f5c69a94869430e8e04f65a6cddef79.png                            e47de3c6207748e494a0dc4b92cca418.png 

 页面逻辑：

 全部、销量、价格 这个盒子是定位在头部的，数据上划的时候需要显示在头部

它们都需要绑定一个点击事件，用来触发后续的筛选，和调用接口

html和逻辑代码：

1，样式结构

5ac742dd076b4651942fbe0a68f92d1f.png

控制台输出 

014b7f96d0c64545a657d9fcdb8732b4.png

 2、用于存放数据

664f1953c3bc4ff09ba011258d30251e.png

3、请求接口方法

6ff8f7da17954a28969b4381fd44ac62.png

4、点击触发 全部、销量、价格的筛选方法

40e503fd906a46e0a8e02b78080e95e7.png

 5、点击全部打开模态框，点击相应的筛选数据进行筛选

cf1320b7022e447eb26e6a1a8ccc4749.png

 6、套餐数据请求渲染完之后，点击需要的套菜，携带id到体检详情页面

体检详情：

效果图：

1ffda6aef098429f90661da0ab1884c0.png       d07f2bf6608b4828851297cc86ef7825.png

 这个页面的时间选择 使用uniapp的组件进行实现的，调一下css的样式就行了

    

 二次封装模态框：

1、在子组件文件夹在新建一个vue文件，用来当做子组件

2、在体检详情页面注册这个子组件，并在子组件标签上绑定ref获取子组件实例

3、点击通过子组件标签上的ref获取到的实例，调取子组件的方法传递数据

父组件：

    

 子组件：

         接收到的数据也是用来提交预约触发了调取接口发送后台的

点击选择成员跳转到就诊人页面，这个页面之前就已经写好了，只需要跳转过去就行

点击提交成功后跳转到体检预约订单

效果图：

 十二、健康自测

     

 1、首页点击测评，判断点击的是哪一个测评模块

 2、跳转到测评页面后，做完页面的样式进行的业务逻辑

2.1  在进入页面的时候接受上个页面传递过来的数据，进行下一步的请求接口的判断

 2.2  在页面也开始加载的时候处理接口请求，看首页点击的是哪个自测进行判断，进行相应的接口请求       

 2.3  再点击选项的时候触发相应的业务逻辑

 2.4  页面优化   跳转页面

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/63462.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MySQL的零拷贝技术

MySQL的零拷贝技术

1.需要了解Buffer 与 cache 的区别 Bbuffer 与 Cache 非常类似&#xff0c;因为它们都用于存储数据数据&#xff0c;被应用层读取字节数据。在很多场合它们有着相同的概念: 首先从翻译上&#xff0c;Buffer应该翻译为“缓冲”&#xff0c;Cache应该翻译为“缓存”&#xff0c…
阅读更多...
高企技术企业对企业的作用

高企技术企业对企业的作用

高新技术企业认定的作用 1、促进企业科技转型 创新是企业发展的根本动力&#xff0c;高新技术企业认定政策是一项引导政策&#xff0c;目的是引导企业调整产业结构&#xff0c;走自主创新、持续创新的发展道路&#xff0c;激发企业自主创新的热情&#xff0c;提高科技创新能力…
阅读更多...
堆排序（大根堆与小根堆）

堆排序（大根堆与小根堆）

&#xff08;1&#xff09;是什么&#xff1f; 是一种适用于关键字较多的情况下的排序算法&#xff0c;例如在十亿个数中选出前1000个最大值或者最小值 如果在传统的排序算法中&#xff08;例如冒泡&#xff0c;插入等&#xff09;&#xff0c;我们习惯把目标数据整体进行一次…
阅读更多...
Cisco ASA应用——NAT的类型

Cisco ASA应用——NAT的类型

作者简介&#xff1a;一名在校云计算网络运维学生、每天分享网络运维的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.NAT的类型 1.动态NAT 2.静态NAT 3.静态PAT 4.动态PAT 前言…
阅读更多...
爱奇艺：基于龙蜥与 Koordinator 在离线混部的实践解析

爱奇艺：基于龙蜥与 Koordinator 在离线混部的实践解析

在 2022 云栖大会龙蜥峰会云原生专场上&#xff0c;来自爱奇艺的基础架构研究员赵慰分享了《基于龙蜥与 Koordinator 的在离线混部实践》技术演讲&#xff0c;以下为本次演讲内容&#xff1a; 一、爱奇艺离线业务混部背景 与众多互联网公司一样&#xff0c;爱奇艺常见的负载类…
阅读更多...
WSN final fighting 12.05

WSN final fighting 12.05

0.网络时间协议(NTP) p54 1.Min-Max定位 p63 2.质心算法定位 p64 3.覆盖修复过程 p95 4.数据融合的卡尔曼滤波法 p72 5.数据融合的神经网络算法 p73 6.TMAC协议 p135 7.基于分分簇网络的MAC协议 p140 8.蓝牙协议 p170 9.GEM路由协议 p206 10.MECN路由协议 p206 11.阐…
阅读更多...
INTERSPEECH 2022——基于层级上下文语义信息的多尺度语音合成风格建模

INTERSPEECH 2022——基于层级上下文语义信息的多尺度语音合成风格建模

本文由清华大学与虎牙信息科技有限公司、元象唯思控股&#xff08;深圳&#xff09;有限公司和香港中文大学合作。 人类语音的风格表达是多尺度的&#xff0c;不仅包括全局尺度的情感表达&#xff0c;还包括局部尺度的韵律表达。 而现有关于表现力语音合成的工作只考虑了单一尺…
阅读更多...
C++ 静态成员变量与静态成员函数

C++ 静态成员变量与静态成员函数

在C的类中&#xff0c;有静态成员变量和静态成员函数 #include <iostream> #include <string>using namespace std;class test { private:static int m_value; //定义类的静态成员变量public:static int getValue() //定义类的静态成员函数{return m_value;} };in…
阅读更多...
Mybatis-Plus中的and和or用法

Mybatis-Plus中的and和or用法

先看Mybatis-Plus官网中对这两个关键字用法的介绍 数据库文件&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1KzY32Jq0srDQU9m-a-YtBQ?pwdrsdg 提取码&#xff1a;rsdg 表数据&#xff1a; 比如我们想查age等于23并且school_id等于300的 sql语句为&#xff1a;select…
阅读更多...
FL Studio 20音乐制作教程

FL Studio 20音乐制作教程

FL Studio 20音乐制作教程 FL Studio 20 中的音乐制作 – 制作 3 首完整曲目 – 只需一天即可管理 FL Studio&#xff0c;音乐、混音和母带制作 课程英文名&#xff1a;FL Studio 20 Music Production In FL Studio for Mac & PC 此视频教程共20.0小时&#xff0c;中英双…
阅读更多...
【C++11多线程】线程的创建、结束、传递参数

【C++11多线程】线程的创建、结束、传递参数

文章目录1.普通函数作为线程函数1.1 thread1.2 join()1.3 detach()1.4 joinable()2.函数对象作为线程函数3.lambda表达式作为线程函数4.类成员函数作为线程函数5.向线程函数传递参数1.普通函数作为线程函数 程序运行起来&#xff0c;生成一个进程&#xff0c;其中主线程从 mai…
阅读更多...
毕业设计 基于单片机的地震探测器系统 - stm32 物联网 嵌入式

毕业设计 基于单片机的地震探测器系统 - stm32 物联网 嵌入式

文章目录0 前言1 简介2 主要器件3 实现效果4 硬件设计3轴加速度计ADXL335ADXL335加速度计的工作原理电路图和连接5 部分核心代码最后0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到毕…
阅读更多...
[附源码]计算机毕业设计基于Springboot物品捎带系统

[附源码]计算机毕业设计基于Springboot物品捎带系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
拳头游戏教程

拳头游戏教程

文章目录一、初谈游戏美术游戏美术师的作用视觉效果二、概念创造1.项目前期准备2.生成创意3.获取反馈三、角色设计从概念到3D模型3D建模的过程表面改变解剖学协作改变四、环境设计什么是环境美术创建的过程视觉层次可信度效率五、技术美术骨骼制作定制化工具移植开发流程shader…
阅读更多...
模拟百度网盘

模拟百度网盘

linux下基于多线程和tcp去实现了一个模拟网盘，实现cs之间的下载互传大文件，实现断点续传，秒传，利用md5进行校验，实时显示百分比 整体框架： 整个项目是在Linux环境下用C语言开发的，基于TCP协议，采用多线程的socket通信方式。 普通上传和秒传：客户端会先计算文件的MD…
阅读更多...
（六）Vue之MVVC

（六）Vue之MVVC

文章目录MVVCVue中的MVVCVue代码中的MVVMVue学习目录 上一篇&#xff1a;&#xff08;五&#xff09;Vue之data与el的两种写法 MVVC MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。 MVC参考&#xff1a;MVC架构模式 MVVM 就是将其中的View 的状态和行为抽象…
阅读更多...
YOLOv5实现车辆检测(含车辆检测数据集+训练代码)

YOLOv5实现车辆检测(含车辆检测数据集+训练代码)

YOLOv5实现车辆检测(含车辆检测数据集训练代码) 目录 YOLOv5实现车辆检测(含车辆检测数据集训练代码) 1. 前言 2. 车辆检测数据集说明 &#xff08;1&#xff09;车辆检测数据集 &#xff08;2&#xff09;自定义数据集 3. 基于YOLOv5的车辆检测模型训练 &#xff08;1…
阅读更多...
【Python】-- Turtle绘图（使用代码画喜欢的图形！）

【Python】-- Turtle绘图（使用代码画喜欢的图形！）

什么是Turtle&#xff1f; turtle库是Python语言中一个很流行的绘制图像的函数库&#xff0c;可以想象一个小乌龟在爬行&#xff0c;它的爬行轨迹就是绘制出来的图形&#xff0c;在一个横轴为x、纵轴为y的坐标系原点&#xff0c;(0,0)位置开始&#xff0c;它根据一组函数指令的…
阅读更多...
罐头食品市场向好，APS车间排产软件保证食品制造企业有序生产

罐头食品市场向好，APS车间排产软件保证食品制造企业有序生产

这些年&#xff0c;随着人们健康意识的不断提升&#xff0c;一些消费者认为&#xff0c;罐头的保质期长是因为添加了大量的防腐剂&#xff0c;但实际上这是一种错误的认知。罐头食品不需要添加防腐剂&#xff0c;而是采用热力杀菌和密封工艺&#xff0c;达到商业无菌和真空保存…
阅读更多...
如何管好一个迭代？让数据帮你回答这些关键问题

如何管好一个迭代？让数据帮你回答这些关键问题

对软件从业者来说&#xff0c;『敏捷开发』早已不是一个新名词。 相比瀑布模型&#xff0c;敏捷开发模型更强调演进式开发&#xff0c;快速灵活地应对变化&#xff0c;最终交付使客户满意的产品。这就要求研发团队内部、研发团队与产品乃至与业务、客户之间的密切沟通。当变化…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023