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

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

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

相关文章

JavaEE 多线程详细讲解（1）

JavaEE 多线程详细讲解（1）

1.线程是什么 &#xff08;shift F6&#xff09;改类名 1.1.并发编程是什么 &#xff08;1&#xff09;当前的CPU&#xff0c;都是多核心CPU &#xff08;2&#xff09;需要一些特定的编程技巧&#xff0c;把要完成的仍无&#xff0c;拆解成多个部分&#xff0c;并且分别让…
阅读更多...
中国打造成熟工艺产能，台积电力推先进工艺，反杀成功了！

中国打造成熟工艺产能，台积电力推先进工艺，反杀成功了！

分析机构指出2023年Q4全球芯片市场28纳米及以上工艺芯片占比在快速下降&#xff0c;已跌穿五成&#xff0c;这主要是台积电力推芯片企业向先进工艺发展&#xff0c;与中国大陆打造的成熟工艺芯片抗衡。 分析机构指出2023年Q4全球芯片以工艺划分&#xff0c;28纳米及以上工艺的芯…
阅读更多...
考研入门55问---基础知识篇

考研入门55问---基础知识篇

考研入门55问---基础知识篇 01 &#xff1e;什么是研究生入学考试&#xff1f; 研究生是指大专和本科之后的深造课程。以研究生为最高学历, 研究生毕业后&#xff0c;也可称研究生&#xff0c;含义为研究生学历的人。在中国大陆地区&#xff0c;普通民众一般也将硕士毕业生称…
阅读更多...
[入门] Unity Shader前置知识(5) —— 向量的运算

[入门] Unity Shader前置知识(5) —— 向量的运算

在Unity中&#xff0c;向量无处不在&#xff0c;我想很多人都使用过向量类的内置方法 normalized() 吧&#xff0c;我们都知道该方法是将其向量归一化从而作为一个方向与速度相乘&#xff0c;以达到角色朝任一方向移动时速度都相等的效果&#xff0c;但内部具体是如何将该向量进…
阅读更多...
Spring - 8 ( 10000 字 Spring 入门级教程 )

Spring - 8 ( 10000 字 Spring 入门级教程 )

一&#xff1a; MyBatis 1.1 引入 MyBatis 我们学习 MySQL 数据库时&#xff0c;已经学习了 JDBC 来操作数据库, 但是 JDBC 操作太复杂了. 我们先来回顾⼀下 JDBC 的操作流程: 创建数据库连接池 DataSource通过 DataSource 获取数据库连接 Connection编写要执行带 ? 占位符…
阅读更多...
21岁的人生赚51W！拒绝捞男捞女，翻身也要爱惜身体！——早读(逆天打工人爬取热门微信文章解读)

21岁的人生赚51W！拒绝捞男捞女，翻身也要爱惜身体！——早读(逆天打工人爬取热门微信文章解读)

身体是革命的本钱 引言Python 代码第一篇 卢克文工作室 捞女在今天的中国是怎样的存在第二篇 人民日报 来啦 新闻早班车要闻社会政策 结尾 我将我的健康视为生活的基石 不会为了短暂的成功而牺牲 我珍惜身体 知道健康是实现梦想的前提 引言 这里毕竟是一个程序员的代码学习平台…
阅读更多...
LVS/NAT工作模式介绍及配置

LVS/NAT工作模式介绍及配置

1.1 LVS/NAT模式工作原理 LVS&#xff08;Linux Virtual Server&#xff09;的网络地址转换&#xff08;NAT&#xff09;模式是一种在网络层&#xff08;第四层&#xff09;实现负载均衡的方法。在NAT模式中&#xff0c;Director Server&#xff08;DS&#xff09;充当所有服务…
阅读更多...
54.HarmonyOS鸿蒙系统 App(ArkTS)tcp socket套接字网络连接收发测试

54.HarmonyOS鸿蒙系统 App(ArkTS)tcp socket套接字网络连接收发测试

工程代码https://download.csdn.net/download/txwtech/89258409?spm1001.2014.3001.5501 54.HarmonyOS鸿蒙系统 App(ArkTS)tcp socket套接字网络连接收发测试 import socket from ohos.net.socket; import process from ohos.process; import wifiManager from ohos.wifiMana…
阅读更多...
sql 中having和where区别

sql 中having和where区别

where 是用于筛选表中满足条件的行&#xff0c;不可以和聚类函数一起使用 having 是用于筛选满足条件的组 &#xff0c;可与聚合函数一起使用 所以having语句中不能使用select中定义的名字
阅读更多...
51单片机软件环境安装

51单片机软件环境安装

keli5的安装 把CID放到破解程序中 破解程序会给一串数字然后填到那个框中 驱动程序的安装 安装完了以后 设备管理器会出现这个 同时c盘会出现这个文件夹
阅读更多...
区块链 | IPFS：IPNS（实操版）

区块链 | IPFS：IPNS（实操版）

&#x1f98a;原文&#xff1a;Publishing IPNS names Publishing IPNS names with Kubo Step1&#xff1a; 启动你的 IPFS 守护进程&#xff08;如果尚未运行&#xff09;&#xff1a; $ ipfs daemon说明&#xff1a;以 $ 开头的是命令&#xff0c;以 > 开头的是执行结果…
阅读更多...
php 常见的判断语句和用法

php 常见的判断语句和用法

在 PHP 中&#xff0c;常见的判断语句主要使用 if、else、elseif&#xff08;或 else if&#xff09;、switch 和 case。这些语句用于根据条件执行不同的代码块。以下是这些判断语句的详细用法&#xff1a; 1. if 语句 if 语句用于在条件为真时执行代码块。 if (条件) {// 如…
阅读更多...
深入探索CSS伪类：解锁样式与交互的无限可能

深入探索CSS伪类：解锁样式与交互的无限可能

CSS伪类是CSS中一个强大的特性&#xff0c;它们允许开发者基于元素的状态或位置来应用特定的样式&#xff0c;而无需修改HTML结构。伪类扩展了CSS的选择器语法&#xff0c;使得网页设计更加动态和交互友好。本文将全面介绍几种常用的CSS伪类&#xff0c;配以实用代码示例&#…
阅读更多...
算法训练营第十八天 | LeetCode 102 二叉树的层序遍历、LeetCode 226 翻转二叉树、LeetCode 101 对称二叉树

算法训练营第十八天 | LeetCode 102 二叉树的层序遍历、LeetCode 226 翻转二叉树、LeetCode 101 对称二叉树

LeetCode 102 二叉树的层序遍历 这题用的队列和指针遍历法。难点在于记录每层末尾位置&#xff0c;这就要用到两个指针&#xff0c;一个end指针记录末尾节点&#xff0c;一个endchild跟着遍历该层内子节点位置&#xff0c;记录下一层末尾节点位置&#xff0c;方便在该层节点遍…
阅读更多...
【leetcode】二叉树的构造题目总结

【leetcode】二叉树的构造题目总结

108. 将有序数组转换为二叉搜索树 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), ri…
阅读更多...
Flask教程3：jinja2模板引擎

Flask教程3：jinja2模板引擎

文章目录 模板的导入与使用 模板的导入与使用 Flask通过render_template来实现模板的渲染&#xff0c;要使用这个方法&#xff0c;我们需要导入from flask import rander_template&#xff0c;模板中注释需放在{# #}中 模板的第一个参数为指定的模板文件名称&#xff0c;如自定…
阅读更多...
Rust Rocket创建第一个hello world的Web程序 Rust Rocket开发常用网址和Rust常用命令

Rust Rocket创建第一个hello world的Web程序 Rust Rocket开发常用网址和Rust常用命令

一、Rust Rocket简介 Rust Rocket 是一个用 Rust 语言编写的 Web 应用框架&#xff0c;它结合了 Rust 的安全性和性能优势&#xff0c;以及 Web 开发的便利性。以下是 Rust Rocket 框架的一些优点&#xff1a; 安全性&#xff1a;Rust 是一种注重安全性的编程语言&#xff0c;…
阅读更多...
一些不错的技术网站（持续更新）

一些不错的技术网站（持续更新）

嵌入式&#xff1a; GitHub - nhivp/Awesome-Embedded: A curated list of awesome embedded programming. ELF 文件、镜像&#xff08;Image&#xff09;文件、可执行文件、对象文件详解 uboot 启动流程详细分析 树莓派PICO-OLED图片和视频_树莓派控制oled显示视频-CSDN博…
阅读更多...
显卡矩阵计算能不能替代3dmark 的甜甜圈烤机

显卡矩阵计算能不能替代3dmark 的甜甜圈烤机

显卡矩阵计算通常是指利用显卡的并行处理能力来进行大规模的数学运算&#xff0c;这在科学计算、大数据处理、以及深度学习等领域非常常见。而3DMark的甜甜圈烤机&#xff08;Dynamoometer&#xff09;则是一种专门用于测试显卡在连续运行高负载3D图形渲染时的性能和稳定性的工…
阅读更多...
【C++】学习笔记——vector_2

【C++】学习笔记——vector_2

文章目录 七、vector2. vecotr的使用3. vector的模拟实现 未完待续 七、vector 2. vecotr的使用 上节我们以二维数组结束&#xff0c;这一节我们以二维数组开始。 // 二维数组 vector<vector<int>> vv;二维数组在底层是连续的一维数组。vv[i][j] 是怎样访问的&a…
阅读更多...
最新文章

Copyright @ 2022~2023