网站统计 中文域名,触摸屏网站如何做,济南专业网站优化,查域名这段时间跟着线上课程完成了一个项目#xff1a;商医通#xff08;基于Vue3TypeScript的医院挂号平台#xff09;。具体我就不过多地介绍其具体功能以及详细的实现步骤了#xff0c;感兴趣的小伙伴直接#xff1a;传送门 。该文章我就分享一下在该项目中学习到的一些知识点… 这段时间跟着线上课程完成了一个项目商医通基于Vue3TypeScript的医院挂号平台。具体我就不过多地介绍其具体功能以及详细的实现步骤了感兴趣的小伙伴直接传送门 。该文章我就分享一下在该项目中学习到的一些知识点以及一些前端小伙伴比较常接触到的功能。 目录 项目介绍项目实现效果如下项目的技术选型如下 项目总结一、Vue3中的一些基础语法二、Vite构建工具如何使用三、TypeScript的基础语法有哪些四、如何使用Vue-router进行路由的配置五、如何使用Pinia来进行数据状态的管理六、element-plus组件库该如何使用七、如何对axios进行二次封装来实现向服务器请求数据 项目介绍
项目实现效果如下 项目的技术选型如下 项目总结
一、Vue3中的一些基础语法
官方文档 由于该项目是使用Vue3实现的因此需要具备Vue3的一些基础知识但是Vue3中的知识点不会介绍太多主要介绍在这个项目中接触到的比较多的部分知识。
1.Vue3与Vue2创建实例方法的不同
//Vue3中的写法
import {createAPP} from vue
import App from ./App.vue
createApp(App).mount(#app)//Vue2中的写法
import Vue from vue
import App from ./App.vue
new Vue({el:#app,render:hh(APP)
})2.Vue3中setup的作用
理解Vue3.0中一个新的配置项值为一个函数setup是所有Composition API组合API“ 表演的舞台 ”。组件中所用到的数据、方法等等均要配置在setup中。
setup函数的两种返回值若返回一个对象则对象中的属性、方法, 在模板中均可以直接使用。重点关注若返回一个渲染函数则可以自定义渲染内容。了解
注意点尽量不要与Vue2.x配置混用。Vue2.x配置data、methos、computed…中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2.x配置data、methos、computed…。如果有重名, setup优先。setup不能是一个async函数因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。后期也可以返回一个Promise实例但需要Suspense和异步组件的配合
3.Vu3中ref函数的作用
作用: 定义一个响应式的数据。语法: const xxx ref(initValue)。创建一个包含响应式数据的引用对象reference对象简称ref对象。JS中操作数据 xxx.value。模板中读取数据: 不需要.value直接div{{xxx}}/div
备注接收的数据可以是基本类型、也可以是对象类型。基本类型的数据响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
4.Vue3中的reactive函数
作用: 定义一个对象类型的响应式数据基本类型不要用它要用ref函数语法const 代理对象 reactive(源对象)接收一个对象或数组返回一个代理对象Proxy的实例对象简称proxy对象
reactive定义的响应式数据是“深层次的”。内部基于 ES6 的 Proxy 实现通过代理对象操作源对象内部数据进行操作。
5.reactive与ref的比较
从定义数据角度对比ref用来定义基本类型数据。reactive用来定义对象或数组类型数据。
备注ref也可以用来定义对象或数组类型数据, 它内部会自动通过reactive转为代理对象。
从原理角度对比ref通过Object.defineProperty()的get与set来实现响应式数据劫持。reactive通过使用Proxy来实现响应式数据劫持, 并通过Reflect操作源对象内部的数据。
从使用角度对比ref定义的数据操作数据需要.value读取数据时模板中直接读取不需要.value。reactive定义的数据操作数据与读取数据均不需要.value。
6.setup的两个注意点
setup执行的时机在beforeCreate之前执行一次this是undefined。
setup的参数props值为对象包含组件外部传递过来且组件内部声明接收了的属性。context上下文对象。attrs: 值为对象包含组件外部传递过来但没有在props配置中声明的属性, 相当于 this.$attrs。slots: 收到的插槽内容, 相当于 this.$slots。emit: 分发自定义事件的函数, 相当于 this.$emit。
二、Vite构建工具如何使用
1.Vite官网
2.为什么使用Vite:
一句话总结使用vite构建项目启动的速度要比使用webpack构建更快。
之前浏览器是不支持ES Modules的为了在让浏览器能够运行我们写的代码es6语法、.jsx/.vue文件我们需要使用打包工具例如webpack来实现代码的转换和优化的过程
在浏览器支持ES Modules后import、export、script typemodules等成为vite出现的条件
vite 主要对应的场景是开发模式它只启动一台静态页面的服务器对文件代码不打包服务器会根据客户端的请求加载不同的模块处理
底层实现上Vite 是基于 esbuild 预构建依赖的。当声明一个script标签类型为module时浏览器将对其内部的import引用发起HTTP请求获取模块内容
Vite 劫持了这些请求并在后端进行相应的处理如处理.ts文件为.js文件然后再返回给浏览器
由于浏览器只会对用到的模块发起 HTTP 请求所以 Vite 没必要对项目里所有的文件先打包后返回而是只编译浏览器发起 HTTP 请求的模块即可。也就实现了所谓的按需加载。
三、TypeScript的基础语法有哪些
一般在做项目都会使用到TypeScript因为其有更加严格的类型限制易于后期维护同时也很适合于Vue3一同开发。具体基础知识可以看我之前发布的文章就是这里
四、如何使用Vue-router进行路由的配置
在项目中比较常见的场景为通过点击左侧的导航栏来实现切换不同的页面。主要是在一级路由中配置多个二级的路由来进行实现。以本次项目中的医院页面为例其具体的文件存放位置如下图一级路由一般存放在src文件夹下建立的pages文件夹下一级路由命名为hospital其下的二级路由为closedetailnotice等。 首先在各自的二级路由中编写各自页面的内容以search页面为例子
templatedivdiv classinfoh1 {{ hospitalStore.hospitalInfo.hospital?.hosname }}停诊信息/h1el-empty description暂无信息//div/div
/templatescript setup langts
import useDetailStore from /store/modules/hospitalDetail;
let hospitalStore useDetailStore();
/scriptstyle scoped langscss
.info{h1{text-align: center;font-size: 30px;}
}
/style在一级路由组件的文件中需要使用来存放其二级路由相应的内容而左侧的导航栏为每一个导航绑定一个点击事件该事件能够实现路由的跳转通过传入相应的路径参数来实现通过点击不同的内容而显示相应的内容。
templatediv classhospital!-- 左侧导航区域 --div classmenudiv classtopel-iconHomeFilled//el-iconspan/ 医院信息/span/divel-menu :default-active$route.path classel-menu-vertical-demoel-menu-item index/hospital/register clickchangeActive(/hospital/register)el-iconicon-menu //el-iconspan预约挂号/span/el-menu-itemel-menu-item index/hospital/detail clickchangeActive(/hospital/detail)el-icondocument //el-iconspan医院详情/span/el-menu-itemel-menu-item index/hospital/notice clickchangeActive(/hospital/notice)el-iconsetting //el-iconspan预约通知/span/el-menu-itemel-menu-item index/hospital/close clickchangeActive(/hospital/close)el-iconInfoFilled //el-iconspan停诊信息/span/el-menu-itemel-menu-item index/hospital/search clickchangeActive(/hospital/search)el-iconSearch //el-iconspan查询/取消/span/el-menu-item/el-menu/div!-- 右侧内容展示区域:路由组件展示位置 --div classcontentrouter-view/router-view/div/div
/templatescript setup langts
import {onMounted} from vue;
import useDetailStore from /store/modules/hospitalDetail;
// 获取仓库对象
let detailStore useDetailStore();
import {Document,Menu as IconMenu,InfoFilled,Setting,Search,
HomeFilled,
} from element-plus/icons-vue;
import { useRouter,useRoute } from vue-router;
let $routeruseRouter();
let $routeuseRoute();
const changeActive(path:string){$router.push({path,query:{hoscode:$route.query.hoscode}})
};
onMounted((){detailStore.getHospital($route.query.hoscode as string);// 获取某一个医院科室的数据detailStore.getDeparment($route.query.hoscode as string);})
/script最后还需要创建一个router文件来专门对路由进行配置以上展现的部分相应的路由配置如下
import { createRouter, createWebHistory } from vue-router;
export default createRouter({// 路由模式history: createWebHistory(),routes: [{path: /hospital,component: () import(/pages/hospital/index.vue),children: [{path: register,component: () import(/pages/hospital/register/index.vue)},{path: detail,component: () import(/pages/hospital/detail/index.vue)},{path: notice,component: () import(/pages/hospital/notice/index.vue)},{path: close,component: () import(/pages/hospital/close/index.vue)},{path: search,component: () import(/pages/hospital/search/index.vue)},{path: register_step1,component: () import(/pages/hospital/register/register_step1.vue)},{path: register_step2,component: () import(/pages/hospital/register/register_step2.vue)}]]
})五、如何使用Pinia来进行数据状态的管理
Pinia与Vuex的作用一样它们都充当存储数据的作用存储在Pinia中数据允许我们在各个组件中使用。
npm install pinia下载之后在main.js中进行引入
import { createPinia } from pinia;
const pinia createPinia();
app.use(pinia);然后再src下创建一个store文件夹用于存放各种store。以用户为例在store文件夹下创建一个user.ts文件。
import {defineStore} from pinia;
import {reqCode,reqUserLogin} from /api/hospital;
import type {LoginData,UserLoginResponseData,UserInfo} from /api/hospital/type
import type { UserState } from ./interface;
import {GET_TOKEN} from ../../utils/user
const useUserStore defineStore(User,{state:():UserState{return{visiable:false,code:,userInfo:JSON.parse(localStorage.getItem(USERINFO) as string)||{}}},actions:{// 获取验证码的方法async getCode(phone:string){let result:any await reqCode(phone);if(result.code200){this.coderesult.data;return ok;}else{return Promise.reject(new Error(result.message))}},//用户手机号码登录方法async userLogin(loginData:LoginData){let result:UserLoginResponseData await reqUserLogin(loginData);if(result.code200){this.userInforesult.data;//本地存储持久化存储用户信息localStorage.setItem(USERINFO,JSON.stringify(this.userInfo));return ok;}else{return Promise.reject(new Error(result.message))}},//退出登录方法logout(){//清空仓库的数据this.userInfo{name:,token:};//清空本地存储的数据localStorage.removeItem(USERINFO);},queryState(){let timersetInterval((){if(GET_TOKEN()){this.visiablefalse;this.userInfoJSON.parse(GET_TOKEN() as string);clearInterval(timer);}},1000);}},getters:{}
});
export default useUserStore;由于Pinia不是持久化的存储因此为了让数据在页面刷新之后不会出现数据丢失的问题使用了localStorage来对仓库中的数据进行持久化的存储。
在其他的组件中使用时只需要使用以下的方式进行读取即可。
templatep classlogin clicklogin v-if!userStore.userInfo.name登录/注册/p
/templatescript setup langts
import useUserStore from /store/modules/user;
let userStore useUserStore();
/script
state和getters属性都主要是数据层面的并没有具体的业务逻辑代码它们两个就和我们组件代码中的data数据和computed计算属性一样。那么如果我们有业务代码的话最好就是写在actions属性里面该属性就和我们组件代码中的methods相似用来放置一些处理业务逻辑的方法。actions属性值同样是一个对象该对象里面也是存储的各种各样的方法包括同步方法和异步方法。
六、element-plus组件库该如何使用
相应官网一个 Vue 3 UI 框架 | Element Plus (element-plus.org)
首先需要先导入其对应的包在main.js中导入如下内容(Element Plus 组件 默认 使用英语如果你希望使用中文可以导入国际化文件。)
import ElementPlus from element-plus
import element-plus/dist/index.css
// 国际化文件
import zhCn from element-plus/dist/locale/zh-cn.mjs
app.use(ElementPlus,{locale: zhCn,
});然后只需要搜素你所需要的内容然后根据文档的提示将其引入到你自己的组件中即可。例如想要实现如下的搜素效果 首先在官网中搜索search输入框之后会出现各种各样的输入框选择具有远程搜索功能的输入框点击相应的代码查看,将相应的代码如下到自己的组件中通过查看官方提供的代码以及API功能介绍进行补充以及修改 el-autocompletev-modelstate:fetch-suggestionsquerySearchAsyncplaceholderPlease inputselecthandleSelect/v-model属性为选中项绑定值fetch-suggestions获取输入建议的方法 仅当你的输入建议数据 resolve 时通过调用 callback(data:[]) 来返回它。也就是在这个方法中当输入框输入完数据之后就回调用它此时就需要在这个方法中获取到输入框中需要的数据在通过传给回调函数让其展现在相应的搜索框下方。该方法具有两个参数(queryString: string, cb: (arg: any) void)第一个为数据的内容第二个为回调函数。
const loadAll () {return [{ value: vue, link: https://github.com/vuejs/vue },{ value: element, link: https://github.com/ElemeFE/element },]
}通过官网例子提供的代码我们知道在若需要在搜索框出现则需要参数名为value,而我们通过发送请求返回来的数据参数名并不是value因此后续我们还需要对数据进行处理之后才能够给回调函数。 selecthandleSelect为选择其中的某一项时会触发的事件。
因此我们结合自己的项目编写的代码如下
templatediv classsearchel-autocomplete selectgoDetail :trigger-on-focusfalse clearable placeholder请输入医院名称 v-modelhosname:fetch-suggestionsfetchData /el-button typeprimary sizedefault :iconSearch搜索/el-button/div
/templatescript setup langts
import { Search } from element-plus/icons-vue;
import { useRouter } from vue-router;
import { ref } from vue;
import { reqHospitalInfo } from /api/home;
import type { HospitalInfo } from /api/home/type;
// 创建路由对象
let $router useRouter();
// 收集搜素的关键字
let hosname refstring();
// 顶部组件的回调
const fetchData async (keyword: string, cb: any) {let result: HospitalInfo await reqHospitalInfo(keyword);let showData result.data.map(item {return {value: item.hosname,hoscode: item.hoscode}})cb(showData);
}
// 点击某一个推荐项
const goDetail (item: any) {$router.push({ path: /hospital/register ,query:{hoscode:item.hoscode}})
}
/script因此其他的样式以及布局也可以通过在其中寻找相应的组件来完成这样可以减少很多的开发时间。
七、如何对axios进行二次封装来实现向服务器请求数据
对原生的axios进行二次封装
//对于axios函数库进行二次封装?
//你工作的时候是否axios进行二次封装?二次封装的目的是什么那?
//目的:1,利用axios请求、响应拦截器功能
//目的2:请求拦截器,一般可以在请求头中携带公共的参数:token
//目的3:响应拦截器,可以简化服务器返回的数据,处理http网络错误
import axios from axios;
//引入用户相关的仓库
import useUserStore from /store/modules/user;
//ts-ignore
import { ElMessage } from element-plus;
//利用axios.create方法创建一个axios实例:可以设置基础路径、超时的时间的设置
const request axios.create({baseURL: /api,//请求的基础路径的设置timeout: 5000//超时的时间的设置,超出五秒请求就是失败的
});//请求拦截器
request.interceptors.request.use((config) {//获取用户仓库let userStore useUserStore();//token:公共参数,如果用户登录了需要携带if (userStore.userInfo.token) {config.headers.token userStore.userInfo.token;}//config:请求拦截器回调注入的对象(配置对象),配置对象的身上最终要的一件事情headers属性//可以通过请求头携带公共参数-tokenreturn config;
});
//响应拦截器
request.interceptors.response.use((response) {//响应拦截器成功的回调,一般会进行简化数据return response.data;
}, (error) {//处理http网络错误let status error.response.status;switch (status) {case 404://错误提示信息ElMessage({type: error,message: 请求失败路径出现问题})break;case 500 | 501 | 502 | 503 | 504 | 505:ElMessage({type: error,message: 服务器挂了})break;case 401:ElMessage({type: error,message: 参数有误})break;}return Promise.reject(new Error(error.message))
});
//务必对外暴露axios
export default request;对请求封装成相应的函数
import request from /utils/request;
import { get } from http;
import type{HospitalResponseData,HospitalLevelAndRegionResponseData,HospitalInfo} from ./typeenum API{// 获取已有医院数据接口HOSPITAL_URL/hosp/hospital/,// 获取医院等级与地区接口HOSPITALLEVELANDREGION_URL/cmn/dict/findByDictCode/,// 根据关键词搜素医院HOSPITALINFO_URL/hosp/hospital/findByHosname/}
export const reqHospital (page:number,limit:number,hostype,districtCode)request.getany,HospitalResponseData(API.HOSPITAL_URL${page}/${limit}?hostype${hostype}districtCode${districtCode})
export const reqHospitalLevelAndRegion(dictCode:string)request.getany,HospitalLevelAndRegionResponseData(API.HOSPITALLEVELANDREGION_URLdictCode);
export const reqHospitalInfo(hosname:string)request.getany,HospitalInfo(API.HOSPITALINFO_URLhosname)
在对应的地方进行调用可以在onMounted函数中编写方法若需要多次的调用建议先封装成一个函数在onMounted中进行调用
为何使用async以及await与axios进行结合因为axios异步请求会出现请求的数据来不及渲染到页面的情况因此使用async以及await来处理异步请求。
onMounted(() {getLevel();});
const getLevel async () {let result: HospitalLevelAndRegionResponseData await reqHospitalLevelAndRegion(HosType)if (result.code 200) {levelArr.value result.data;}
};好啦本次文章就分享到这里了希望对你有一定的帮助
