uni-app（优医咨询）项目实战 - 第3天

学习目标：

  • 掌握 luch-request 网络请求的用法

  • 能够对 Pinia 进行初始化操作

  • 掌握创建 Store 及数据操作的步骤

  • 能够对 Pinia 数据进行持久化的处理

  • 掌握用户登录的实现方法

一、项目启动

从零起步创建项目，完整的静态页面可以从 gitee 仓库获取。

1.1 创建项目

以 HBuilder X 的方式创建项目：

  • 项目名称：优医咨询

  • Vue 版本：Vue3

  • 模板：默认模板

1.1.1 .prettierrc

在项目根目录下创建 .prettierrc 文件，然后添加下述配置选项：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "vueIndentScriptAndStyle": true,
}

上述配置内容是关于 Prettier 的常用的配置项，以后实际开发过程中可以根据需要逐步完善。

1.1.2 配置 tabBar

根据设计稿的要求配置 tabBar，首先通过 HBuilder X 新建 3 个页面，然后再配置 pages.json 文件。

共有4个页面，分别为：首页、健康百科、消息通知、我的，在课堂上统一约束目录的名称：首页对应 index、健康百科对应 wiki、消息通知对应 notify、我的对应 my 。

tabBar 用的图片在课程资料中可以找到，将其拷贝到项目的根目录下，然后在 pages.json 中进行配置：

{
  "pages": [{
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "优医咨询"
    }
  }, {
    "path": "pages/my/index",
    "style": {
      "navigationBarTitleText": "我的",
      "enablePullDownRefresh": false
    }
​
  }, {
    "path": "pages/notify/index",
    "style": {
      "navigationBarTitleText": "消息通知",
      "enablePullDownRefresh": false
    }
​
  }, {
    "path": "pages/wiki/index",
    "style": {
      "navigationBarTitleText": "健康百科",
      "enablePullDownRefresh": false
    }
​
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "优医咨询",
    "navigationBarBackgroundColor": "#fff",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#6F6F6F",
    "selectedColor": "#6F6F6F",
    "borderStyle": "white",
    "list": [{
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/home-default.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "text": "健康百科",
        "pagePath": "pages/wiki/index",
        "iconPath": "static/tabbar/wiki-default.png",
        "selectedIconPath": "static/tabbar/wiki-active.png"
      },
      {
        "text": "消息通知",
        "pagePath": "pages/notify/index",
        "iconPath": "static/tabbar/notify-default.png",
        "selectedIconPath": "static/tabbar/notify-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/my/index",
        "iconPath": "static/tabbar/my-default.png",
        "selectedIconPath": "static/tabbar/my-active.png"
      }
    ]
  },
  "uniIdRouter": {}
}

除了配置 tabBar 外，还要配置每个页面的导航栏的标题 navigationBarTitleText 及全局导航栏背景颜色 navigationBarBackgroundColor 为白色。

1.1.3 公共样式

在 App.vue 中配置公共 css 代码，不仅能精简代码，将来样式的维护也会更方便，这些公共样式是由开发者根据不同的项目需要自定义的，因此不同的项目或者不同开发者定义的公共样式是不一致的，本项目中我定义了以下部分的公共样式：

<!-- App.vue -->
<script>
    // 省略这里的代码...
</script>
​
<style lang="scss">
  image {
    vertical-align: middle;
  }
​
  button:after {
    display: none;
  }
​
  .uni-button {
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    border-radius: 88rpx;
    color: #fff;
    font-size: 32rpx;
    background-color: #20c6b2;
​
    &[disabled],
    &.disabled {
      color: #fff !important;
      background-color: #ace8e0 !important;
    }
  }
</style>

关于 scss 本项目定义了一个变量和一个混入，这个混入是用来处理文字溢出的，溢出的部分会显示 ... 来代替。

// uni.scss
​
// 省略了默认生成的 scss 代码...
​
$line: 2;
@mixin text-overflow($line) {
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
1.1.4 引入字体图标

项目中即用到了单色图标，也用到了多色图标:

  1. 单色图标，将字体图标文件解压缩到 static/fonts 目录中，将 iconfont.css 重命名为 iconfont.scss

@font-face {
  font-family: 'iconfont';
  src: url('/static/fonts/iconfont.ttf') format('truetype');
}
​
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
​
.icon-done:before {
  content: '\ea54';
}
​
.icon-location:before {
  content: '\e6ea';
}
​
.icon-edit:before {
  content: '\e6e9';
}
​
.icon-shield:before {
  content: '\e6e8';
}
​
.icon-checked:before {
  content: '\e6e5';
}
​
.icon-box:before {
  content: '\e6e6';
}
​
.icon-truck:before {
  content: '\e6e7';
}

图标成功导入项目后，在 App.vue 中导入自定义图标的样式文件

<!-- App.vue -->
<script>
    // 省略这里的代码...
</script>
​
<style lang="scss">
  // 单色图标
  @import '@/static/fonts/iconfont.scss'
    
  // 以下部分代码省略...
</style>

字体图标导入成功后要到页面测试一下图标是否能正常显示。

  1. 关于多色图标的使用在前面课程中已经介绍过了，关于图标的转换部分就不再演示了，我们直接将转换后代码引入项目中

先将生成的多色图标文件 color-fonts.scss 放到项目的根目录中，然后在 App.vue 中导入该文件

<!-- App.vue -->
<script>
    // 省略这里的代码...
</script>
​
<style lang="scss">
  // 单色图标
  @import '@/static/fonts/iconfont.scss';
  // 多色图标
  @import './color-fonts.scss';
​
    // 以下部分代码省略...
</style>

字体图标导入成功后要到页面测试一下图标是否能正常显示。

1.1.5 网站图标

浏览器在加载网页时会在标签页位置展示一个小图标，我们来指定一下这个图标：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
    
  <!-- 这里省略了部分代码... -->
    
  <!-- 这行代码用来指定网站图标 -->
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>
​
<body>
  <div id="app"><!--app-html--></div>
  <script type="module" src="/main.js"></script>
</body>
</html>
1.2 公共封装

封装一系列的公共的方法，如网络请求、轻提示、日期时间处理等。

1.2.1 网络请求

小程序或 uni-app 提供了专门用于网络请求的 API ，但结合实际开发还需要扩展一些与业务相关的逻辑，如基地址、拦截器等功能，通常会对 uni.request 进行封装，luch-request 就是这样一个工具模块，它仿照 axios 的用法对 uni.request 进行二次封装，扩展了基地址、拦截器等业务相关的功能。

  1. 安装 luch-request

npm install luch-request

  1. 实例化并配置基地址，项目根目录新建 utils/http.js

// utils/http.js
​
// 导入模块
import Request from 'luch-request'
​
// 实例化网络请求
const http = new Request({
  // 接口基地址
  baseURL: 'https://t1ps66c7na.hk.aircode.run',
})
​
// 导出配置好的模网络模块
export { http }
<!-- pages/test/index.vue -->
<script setup>
  import { http } from '@/utils/http.js'
​
  function onButtonClick() {
    // 1. 普通用法
    http.request({
      url: '/echo',
      method: 'GET',
      header: {
        customHeader: '22222222'
      }
    })
  }
</script>
<template>
  <view class="content">
    <button @click="onButtonClick" type="primary">luch-request 测试</button>
  </view>
</template>

  1. 配置请求拦截器

在请求之前执行一些逻辑，例如检测登录状态，添加自定义头信息等。

// utils/http.js

// 导入模块
import Request from 'luch-request'

// 实例化网络请求
const http = new Request({
  // 接口基地址
  baseURL: 'https://t1ps66c7na.hk.aircode.run',
})

// 请求拦截器
http.interceptors.request.use(
  function (config) {
    // 定义头信息，并保证接口调用传递的头信息
    // 能够覆盖在拦截器定义的头信息
    config.header = {
      Authorization: '11111111',
      ...config.header,
    }
    
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 导出配置好的模网络模块
export { http }

以上代码中要注意拦截器中配置的头信息不要将原有的头信息覆盖。

  1. 配置响应拦截器

// utils/http.js
​
// 导入模块
import Request from 'luch-request'
​
// 实例化网络请求
const http = new Request({
  // 接口基地址
  baseURL: 'https://t1ps66c7na.hk.aircode.run',
})
​
// 请求拦截器
http.interceptors.request.use(
  function (config) {
    // 定义头信息，并保证接口调用传递的头信息
    // 能够覆盖在拦截器定义的头信息
    config.header = {
      Authorization: '11111111',
      ...config.header,
    }
    
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)
​
// 响应拦截器
http.interceptors.response.use(
  function ({ statusCode, data, config }) {
    // 解构出响应主体
    return data
  },
  function (error) {
    return Promise.reject(error)
  }
)
​
// 导出配置好的模网络模块
export { http }
<!-- pages/test/index.vue -->
<script setup>
  import { http } from '@/utils/http.js'
​
  async function onButtonClick() {
    // 1. 普通用法
    const result = await http.request({
      url: '/echo',
      method: 'GET',
      header: {
        customHeader: '22222222'
      }
    })
    
    console.log(result)
  }
</script>
<template>
  <view class="content">
    <button @click="onButtonClick" type="primary">luch-request 测试</button>
  </view>
</template>

  1. 请求加载状态

在发请求之前展示一个加载提示框，请求结束后隐藏这个提示框，该部分的逻辑分别对应请求拦截器和响应拦截器，在请求拦截器中调用 uni.showLoading 在响应拦截器中调用 uni.hideLoading。

在设置加载提示框之前先来了解一下 luch-request 提供的自定义配置参数的功能，即 custom 属性，该属性的用法如下：

// utils/http.js
​
// 导入模块
import Request from 'luch-request'
​
// 实例化网络请求
const http = new Request({
  // 接口基地址
  baseURL: 'https://t1ps66c7na.hk.aircode.run',
  custom: {
    abc: 123,
    loading: true
  }
})
​
// 省略以下部分代码...

局部配置了相同的自定义参数时会覆盖全局配置的自定义参数

<!-- pages/test/index -->
<script setup>
  import { http } from '@/utils/http.js'
​
  async function onButtonClick() {
    // 1. 普通用法
    const result = await http.request({
      // 省略部分代码...
      
      // 局部配置自定义参数
      custom: {
        abc: 123,
      },
      // 省略部分代码...
    })
​
    console.log(result)
  }
</script>

在了解自定义参数的使用后，我们来自定义一个能控制是否需要 loading 提示框的属性，全局默认为 true 。

// utils/http.js

// 导入模块
import Request from 'luch-request'

// 实例化网络请求
const http = new Request({
  // 接口基地址
  baseURL: 'https://t1ps66c7na.hk.aircode.run',
  custom: {
    loading: true
  }
})

// 请求拦截器
http.interceptors.request.use(
  function (config) {
    // 显示加载状态提示
    if (config.custom.loading) {
      uni.showLoading({ title: '正在加载...', mask: true })
    }
    
    // 定义头信息，并保证接口调用传递的头信息
    // 能够覆盖在拦截器定义的头信息
    config.header = {
      Authorization: '11111111',
      ...config.header,
    }
    
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 响应拦截器
http.interceptors.response.use(
  function ({ statusCode, data, config }) {
    // 隐藏加载状态提示
    uni.hideLoading()
    
    // 解构出响应主体
    return data
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 导出配置好的模网络模块
export { http }

到此关于网络请求的基本用法就封装完毕了，后续会补充登录权限检测的业务逻辑。

1.2.2 轻提示

uni-app 提供了 uni.showToast API 用于轻提示，但其传的参数比较复杂，通过封装来简化参数的传递。

新建 utils/utils.js

/**
 * 项目中会用的一系列的工具方法
 */
u

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

软件工程习题答案2024最新版

软件工程习题答案2024最新版

习题一答案 一、选择题 软件的主要特性是(A B C)。 A) **无形 **B) 高成本 C) **包括程序和文档 ** D) 可独立构成计算机系统 软件工程三要素是(B)。 A) 技术、方法和工具 B) 方法、工具和过程 C) 方法、对象和类 D) 过程、模型、方法 包含风险分析的软件工程模型是(A)…
阅读更多...
Reactor模型详解

Reactor模型详解

目录 1.概述 2.Single Reactor 3.muduo库的Multiple Reactors模型如下 1.概述 维基百科对Reactor模型的解释 The reactor design pattern is an event handling pattern for handling service requests delivered concurrently to a service handler by one or more inputs.…
阅读更多...
【Java基础】三大特性——封装

【Java基础】三大特性——封装

封装 只对外提供有用的属性和行为 方法的封装 外界不会用到的方法 class MyMath {//private私有 封装函数&#xff1a;只对外提供有用的属性和行为private void toAny(int num,int base,int offSet){……}public void toHex( int num){toAny( num,15,4);}…… } class Demo…
阅读更多...
GNU Radio创建FFT、IFFT C++ OOT块

GNU Radio创建FFT、IFFT C++ OOT块

文章目录 前言一、GNU Radio官方FFT弊端二、创建自定义的 C OOT 块1、创建 OOT 模块2、创建 OOT 块3、修改 C 和 CMAKE 文件4、编译及安装 OOT 块 三、测试1、grc 图2、运行结果①、时域波形对比②、频谱图对比 四、资源自取 前言 GNU Radio 自带的 FFT 模块使用起来不是很方便…
阅读更多...
新型直膨式光伏光热热泵/动力热管复合循环系统

新型直膨式光伏光热热泵/动力热管复合循环系统

太阳能光伏光热热泵&#xff08;即PVT热泵&#xff09;技术是建筑领域内实现碳中和的有效技术手段&#xff0c;该技术具有优越的热电冷联产能力。然而&#xff0c;现有的PVT热泵在良好的室外工况下能耗较高。为了解决这一问题&#xff0c;本文提出了一种新型的DX-PVT热泵/动力热…
阅读更多...
书接上文，助力智能化诊断高质提效，基于轻量级CNN模型MobileNet开发构建人体手骨X光骨骼骨龄分析识别系统

书接上文，助力智能化诊断高质提效，基于轻量级CNN模型MobileNet开发构建人体手骨X光骨骼骨龄分析识别系统

骨龄是骨骼年龄的简称&#xff0c;需要借助于骨骼在X光摄像中的特定图像来确定。通常要拍摄左手手腕部位的X光片&#xff0c;医生通过X光片观察来确定骨龄。这在临床上是一件非常消耗精力和时间的一项放射临床工作。写一个骨龄可能要10多分钟去完成。如果一天要写几十个骨龄&am…
阅读更多...
10G MAC层设计系列-（4）MAC TX模块

10G MAC层设计系列-（4）MAC TX模块

一、前言 MAC TX模块就是要将IP层传输过来的数据封装前导码、MAC地址、帧类型以及进行CRC校验&#xff0c;并与CRC值一块组成以太网帧。 二、模块设计 首先对输入的数据进行缓存&#xff0c;原因是在之后要进行封装MAC帧头&#xff0c;所以需要控制数据流的流动 FIFO_DATA_6…
阅读更多...
基于K8S构建Jenkins持续集成平台

基于K8S构建Jenkins持续集成平台

文章目录 安装和配置NFSNFS简介NFS安装 在Kubernetes安装Jenkins-Master创建NFS client provisioner安装Jenkins-Master Jenkins与Kubernetes整合实现Jenkins与Kubernetes整合构建Jenkins-Slave自定义镜像 JenkinsKubernetesDocker完成微服务持续集成拉取代码&#xff0c;构建镜…
阅读更多...
茶树（山茶属）CCoAOMT基因家族的全基因组鉴定、表达分析和蛋白质相互作用分析-全基因组家族分析-文献精读13

茶树（山茶属）CCoAOMT基因家族的全基因组鉴定、表达分析和蛋白质相互作用分析-全基因组家族分析-文献精读13

Genome-wide identification, expression profiling, and protein interaction analysis of the CCoAOMT gene family in the tea plant (Camellia sinensis) 茶树&#xff08;山茶属&#xff09;CCoAOMT基因家族的全基因组鉴定、表达分析和蛋白质相互作用分析&#xff0c;一篇…
阅读更多...
详解SDRAM基本原理以及FPGA实现读写控制（一）

详解SDRAM基本原理以及FPGA实现读写控制（一）

文章目录 一、SDRAM简介二、SDRAM存取结构以及原理2.1 BANK以及存储单元结构2.2 功能框图2.3 SDRAM速度等级以及容量计算 三、SDRAM操作命令3.1 禁止命令&#xff1a; 4b1xxx3.2 空操作命令&#xff1a;4b01113.3 激活命令&#xff1a;4b00113.4 读命令&#xff1a;4b01013.5 写…
阅读更多...
5分钟速通大语言模型（LLM）的发展与基础知识

5分钟速通大语言模型（LLM）的发展与基础知识

✍️ 作者&#xff1a;哈哥撩编程&#xff08;视频号同名&#xff09; 博客专家全国博客之星第四名超级个体COC上海社区主理人特约讲师谷歌亚马逊演讲嘉宾科技博主极星会首批签约作者 &#x1f3c6; 推荐专栏&#xff1a; &#x1f3c5; 程序员&#xff1a;职场关键角色通识宝…
阅读更多...
【UnityRPG游戏制作】Unity_RPG项目_玩法相关

【UnityRPG游戏制作】Unity_RPG项目_玩法相关

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;就业…
阅读更多...
大语言模型教程与实践（开源）

大语言模型教程与实践（开源）

1.简介 大语言模型&#xff08;Large Language Models, LLMs&#xff09;的兴起确实始于OpenAI在2018年发布的GPT&#xff08;Generative Pre-trained Transformer&#xff09;&#xff0c;这一开创性工作引领了自然语言处理领域的新纪元。随后&#xff0c;2022年底ChatGPT的横…
阅读更多...
高颜值好看客户端UI设计

高颜值好看客户端UI设计

阅读更多...
基于Spring Boot的在线BLOG网设计与实现

基于Spring Boot的在线BLOG网设计与实现

基于Spring Boot的在线BLOG网设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 前台首页管理界面&#xff0c;用户经过登录前台首页查看通…
阅读更多...
SQL Server 存储过程中的字符串本身包含单引号的用法

SQL Server 存储过程中的字符串本身包含单引号的用法

文章目录 引言I 存储过程中的字符串本身包含单引号的用法1.1 问题1.2解决方法引言 使用场景： 字符串类型字段的值比较 I 存储过程中的字符串本身包含单引号的用法 在SQL Server中，单引号用于表示字符串常量。如果你的存储过程中的字符串本身包含单引号，你需要用两个连续的…
阅读更多...
3.2Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3框架-企业级应用- Vuex

3.2Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3框架-企业级应用- Vuex

Vuex简介 Vuex概述 Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规 则保证状态以一种可预测的方式发生变化. 试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vu…
阅读更多...
【C++】文件

【C++】文件

目录 文件文件分类文本文件的读写(ASCII文件)的读写打开文件打开文件的方式关闭文件将数据写入ASCII文件从ASCII文件读入数据 二进制存储对比ASCII和二进制存储用成员函数read和write读写二进制文件打开方式文件的读入与读出 文件 所谓文件&#xff0c;一般指存储在外部介质上…
阅读更多...
【k8s】利用Kubeadm搭建k8s1.29.x版本+containerd

【k8s】利用Kubeadm搭建k8s1.29.x版本+containerd

文章目录 前言1.准备的三台虚拟机2.安装 kubeadm 前的准备工作3.安装containerd1.解压安装包2.生成默认配置文件3.使用systemd托管containerd4.修改默认配置文件 4.安装runc5.安装 CNI plugins6.安装 kubeadm、kubelet 和 kubectl6.1 配置crictl 7.初始化集群1.打印初始化配置到…
阅读更多...
DETR类型检测网络---思考和Tricks测试

DETR类型检测网络---思考和Tricks测试

目录 batch_size的影响辅助损失的作用学习率的影响Decoder层数增多的影响3D检测中, feats位置编码和query位置编码是否共享mpl层背景-关于query的生成方式 利用widthformer类似的方式简化注意力机制 batch_size的影响 batch8: batch20: 由实验结果可知:这里实验有问题,横坐标…
阅读更多...
最新文章

Copyright @ 2022~2023