医院信息化与智能化系统(6)

医院信息化与智能化系统(6)

这里只描述对应过程，和可能遇到的问题及解决办法以及对应的参考链接，并不会直接每一步详细配置
如果你想通过文字描述或代码画流程图，可以试试PlantUML，告诉GPT你的文件结构，让他给你对应的代码

预约挂号微服务模块搭建

前端知识点补充，此章节不会详细讲具体前端的每个知识点

1、npm run dev

在终端输入启动项目的命令npm run dev语句会直接进入模版网页中，但我们需要了解一下大致的流程。

它会首先找到package.json 文件：npm 会查看项目根目录下的 package.json 文件，寻找 scripts 部分的 dev 脚本定义。

随后它会执行该脚本：

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

这条命令的作用是启动一个 Webpack 开发服务器，支持内联热模块替换，显示打包进度，并使用指定的 Webpack 配置文件进行打包。

在webpack.dev.conf.js文件中有一个语句

const baseWebpackConfig = require('./webpack.base.conf')，作用是导入一个通用的 Webpack 配置文件，并允许在当前的配置文件中使用这些基础配置。

那来分析一下这个webpack.base.conf.js的部分

入口名称： app

入口文件：src文件夹下的main.js

filename：指定输出文件的名称，这里使用 [name].js，其中 [name] 将被入口名称替换（app.js）。

HtmlWebpackPlugin: 该插件生成一个 HTML(index.html) 文件，并自动将打包后的 main.js文件注入到 该HTML，作为用户在浏览器中看到的页面结构。

  entry: {app: './src/main.js'},output: {path: config.build.assetsRoot,filename: '[name].js',...}...plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true,favicon: resolve('favicon.ico'),title: 'vue-admin-template'})]

为了理清楚工程文件

index.html:项目的入口文件。它包含基本的 HTML 结构，其中<div id="app"></div>是用于挂载 Vue 实例的元素。所有的 Vue 组件最终都会渲染到这个 div 中。

main.js:Vue 项目的重要文件，负责初始化应用。它导入 Vue 库、应用的核心组件（如 App.vue）、路由配置（如 router/index.js）和状态管理（如 store/index.js）。在这里，创建 Vue 实例并将其挂载到 #app 元素上。

App.vue:应用的核心组件，负责结构和路由管理。它通常包含 <router-view/>组件，用于动态渲染当前路由对应的视图。App.vue 还可以包含全局样式和布局。通过 Vue Router，App.vue 控制页面的切换，实现单页面应用的功能。

还有一个理解(可能需要考虑是否正确)：

main.js：主要负责导入依赖（如 Vue、插件、样式库等），并在此处建立整个应用的模块之间的依赖关系。由于它是应用的入口文件，Webpack 会打包这个文件及其所有导入的依赖，确保这些依赖在浏览器中可用。

App.vue：主要是作为一个组件的定义，负责导入其他组件并构建应用的 UI 结构。它内部的组件和逻辑将被 main.js 导入并渲染，形成完整的应用视图。

因此，main.js 作为依赖导入的中心文件，负责初始化和设置，而 App.vue 则作为组件的容器，负责构建用户界面。

在这里插入图片描述

继续看代码

在webpack.dev.conf.js中'process.env': require('../config/dev.env')代码表示了一个全局常量值，该文件是一个js文件，指定了默认访问后端的接口路径BASE_API，后续可能要根据自己的路径进行修改。

在该文件的同一目录下，有一个名为index.js的文件，这里有几个需要关注的值。

  1. host: 'localhost' 当前项目主机名
  2. port: 9528 当前项目端口号
  3. useEslint: true 代码检查插件，可以改为false

2、登录代码改造

遇到的问题：默认情况下，前端项目已经实现了登录功能，后端连接到远程Mock平台的模拟数据接口进行登录，而Mock平台地址无效，导致前端的登录功能无法执行.

解决方法是：修改.\src\store\modules\user.js中的部分代码

此处主要的问题是调用一个名为login的函数。当 login 函数成功返回时，执行这个回调，response 是从服务器返回的响应。应对方法是设置一个默认的data对象，里面包含token默认值。

  actions: {// 登录Login({ commit }, userInfo) {const data = {'token':'admin'}setToken(data.token)commit('SET_TOKEN', data.token)// const username = userInfo.username.trim()// return new Promise((resolve, reject) => {//   login(username, userInfo.password).then(response => {//     const data = response.data//     setToken(data.token)//     commit('SET_TOKEN', data.token)//     resolve()//   }).catch(error => {//     reject(error)//   })// })}

获取用户信息部分同理，其中roles表示用户角色，avatar表示头像

// 获取用户信息GetInfo({ commit, state }) {const data  = {'roles':'admin','name':'admin','avatar':'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'}if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组commit('SET_ROLES', data.roles)} else {reject('getInfo: roles must be a non-null array !')}commit('SET_NAME', data.name)commit('SET_AVATAR', data.avatar)// return new Promise((resolve, reject) => {//   getInfo(state.token).then(response => {//     const data = response.data//     if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组//       commit('SET_ROLES', data.roles)//     } else {//       reject('getInfo: roles must be a non-null array !')//     }//     commit('SET_NAME', data.name)//     commit('SET_AVATAR', data.avatar)//     resolve(response)//   }).catch(error => {//     reject(error)//   })// })},

登出与前端登出代码操作同理

在./src/utils/request.js找到

config.headers['X-Token'] = getToken()语句，并将X-Token对应改为我们之前代码中配置的token

3、框架开发流程

第一步是添加路由

在router/index.js是在 Vue.js 项目中用于配置路由的文件，负责定义页面访问路径与组件之间的映射关系。

以其中部分代码作为讲解：

path: '/example' 是定义的一级路由路径，当用户访问 /example 路径时，系统会匹配到这个路由配置。

redirect: '/example/table' 定义了路由的重定向行为，当访问/example时，会自动重定向到 /example/table，即用户访问 /example 时直接跳转到表格页面。

name: 'Example'为这个路由配置指定一个名字。通常 name 属性在需要通过编程导航到该路由时使用，比如 router.push({ name: 'Example' })

meta: { title: 'Example', icon: 'example' } 其中meta 是路由的元信息，可以包含任意自定义属性。这段元数据中的 title 会作为页面标题显示，icon 表示这个页面在菜单中对应的图标，值为 example 的图标

children: [...]是这个路由的子路由配置，表示 ·/example下包含两个子路由：table 和 tree，用于展示不同的内容。

第二步是设置跳转页面路径

component: () => import('@/views/table/index'): 使用懒加载的方式加载组件，只有访问到该路由时，才会异步加载该组件，节省资源。

{path: '/example',component: Layout,redirect: '/example/table',name: 'Example',meta: { title: 'Example', icon: 'example' },children: [{path: 'table',name: 'Table',component: () => import('@/views/table/index'),meta: { title: 'Table', icon: 'table' }},{path: 'tree',name: 'Tree',component: () => import('@/views/tree/index'),meta: { title: 'Tree', icon: 'tree' }}]}

第三步 在api文件夹创建js文件，用来封装和后端交互的请求逻辑

以 component: () => import('@/views/table/index')为例，它跳转的其实是index.vue文件

创建API：在 api 文件夹中创建一个 table.js 文件，用来封装和后端交互的请求逻辑。

import request from '@/utils/request'; // 通常会有一个封装好的请求工具// 获取表格数据
export function fetchTableData(query) {return request({url: '/api/table/list', // 后端 API 地址method: 'get',params: query});
}

@/utils/request 文件的核心功能就是基于 axios 或其他 HTTP 库，统一封装 HTTP 请求的逻辑，包括：

  • 配置基础 URL，简化 API 请求路径。
  • 请求拦截器，添加 Token 或其他公共请求头。
  • 响应拦截器，统一处理响应数据和错误。
  • 错误处理，简化每个 API 请求的异常处理。
  • 请求超时、取消重复请求等功能，提高用户体验。

第四步 在页面引入js文件，使用axios进行调用

调用 API 并展示数据： 在 views/table/index.vue 中，通过引入api/table.js中的方法获取数据，并将数据展示在页面上。

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

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

相关文章

Java项目-基于springboot框架的疫苗接种管理系统项目实战(附源码+文档)

Java项目-基于springboot框架的疫苗接种管理系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…
阅读更多...
PYQT5 简单项目实践

PYQT5 简单项目实践

在VSCode编辑器我们通过引入pyqt5&#xff0c;用QTdesigner 实现拖拽实现图形化界面 下面我们实现一个简单项目实践一下吧 效果图&#xff1a; 用法&#xff1a;Python编写逻辑&#xff0c;用pyqt实现界面显示。 功能&#xff1a; 第一行把处理的数据文件拖拽到文本框中第二…
阅读更多...
powerdesign字体太小，powerdesign Sql preview字体太小

powerdesign字体太小，powerdesign Sql preview字体太小

一。powerdesign字体太小修改兼容性 右键点击PowerDesign软件图标-->点击属性-->兼容性-->点击下图中的红框 打勾“使用此设置修复此程序的缩放问题&#xff0c;而不是设置中的缩放问题” 打勾“替代高DPI缩放行为” 缩放执行改为“系统增强”&#xff0c;确定 重启…
阅读更多...
页面中包含多个el-popover，点击其中一个显示，其他的关闭（多个el-popover，click触发，点击都不消失的问题）

页面中包含多个el-popover，点击其中一个显示，其他的关闭（多个el-popover，click触发，点击都不消失的问题）

问题背景&#xff1a;需求是el-tree中的每个树节点后都有一个按钮&#xff0c;点击触发el-popover的显示&#xff0c;但是由click触发的el-popover&#xff0c;在点击下一个节点时&#xff0c;之前的都不消失。 解决办法&#xff1a;注&#xff1a;最主要的就是:ref"data…
阅读更多...
Git_IDEA集成Git

Git_IDEA集成Git

Git_IDEA集成Git 配置 Git 忽略文件 创建忽略规则文件 引用忽略配置文件 定位 Git 程序 初始化本地库 添加到暂存区 提交到本地库 切换版本 创建分支 切换分支 合并分支 解决冲突 配置 Git 忽略文件 创建忽略规则文件 引用忽略配置文件 在 .gitconfig 文件中进行&…
阅读更多...
房屋租赁网站毕业设计基于SpringBootSSM框架的计算机毕业设计

房屋租赁网站毕业设计基于SpringBootSSM框架的计算机毕业设计

计算机毕业设计/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序 目录 一、项目背景与目的‌ ‌二、系统需求分析‌ 2.1功能需求 2.2 技术需求 2.3 可执行性 ‌三、系统设计与实现‌ ‌3.1系统架构设计‌&#xff1a; ‌3.2功能模块开发‌&#xff1a; ‌3.3…
阅读更多...
AWD的复现

AWD的复现

学习awd的相关资料&#xff1a;速成AWD并获奖的学习方法和思考记录- Track 知识社区 - 掌控安全在线教育 - Powered by 掌控者&#xff08;包含使用脚本去批量修改密码&#xff09; 在复现之前去了解了以下AWD的相关脚本 资料&#xff1a;AWD批量攻击脚本使用教程-CSDN博客 …
阅读更多...
全新子比主题7.9.2开心版 子比主题最新版源码

全新子比主题7.9.2开心版 子比主题最新版源码

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 wordpress zibll子比主题7.9.2开心版 修复评论弹授权 可做付费下载站 含wordpress搭建视频教程zibll子比主题安装视频教程支付配置视频教程&#xff0c;视频都是语音讲解&#xff0c;…
阅读更多...
Go：error处理机制和函数

Go：error处理机制和函数

文章目录 error处理机制函数函数作为参数匿名函数匿名函数和闭包闭包运用闭包与工厂模式使用闭包调试 error处理机制 本篇总结的是Go中对于错误的处理机制 Go 语言的函数经常使用两个返回值来表示执行是否成功&#xff1a;返回某个值以及 true 表示成功&#xff1b;返回零值&…
阅读更多...
2024软件测试面试秘籍（含答案+文档）

2024软件测试面试秘籍（含答案+文档）

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Part1 1、你的测试职业发展是什么&#xff1f; 测试经验越多&#xff0c;测试能力越高。所以我的职业发展是需要时间积累的&#xff0c;一步步向着高级测试工程师…
阅读更多...
超简洁的B端系统，还是看国外的设计.

超简洁的B端系统，还是看国外的设计.

国外的一些 B 端系统设计往往注重简洁性和实用性的完美结合。 从界面布局来看&#xff0c;它们通常采用简洁明快的线条和清晰的模块划分&#xff0c;避免了过多的装饰和繁杂的元素&#xff0c;使得用户能够快速聚焦于核心功能。 色彩方面&#xff0c;多选用中性色调或淡雅的色…
阅读更多...
自由学习记录（13）

自由学习记录（13）

服务端常见的“资源” 在服务端&#xff0c;常见的“资源”指的是服务端提供给客户端访问、使用、处理或操作的各种数据和功能。根据不同类型的服务和应用场景&#xff0c;服务端的资源种类可以非常广泛。以下是一些常见的服务端资源类型&#xff1a; 1. 文件和静态资源 网页…
阅读更多...
设计模式04-创建型模式1(简单工厂/工厂模式/抽象工厂/Java)

设计模式04-创建型模式1(简单工厂/工厂模式/抽象工厂/Java)

3.1 简单工厂模式 3.1.1 创建型模式 创建型设计模式将对象的创建过程和对象的使用过程分离&#xff0c;用户使用对象时无需关注对象的创建细节&#xff0c;外界对于这些对象只需要知道它们共同的接口&#xff0c;而不用清楚其实现细节&#xff0c;使得整个系统的设计更加符合…
阅读更多...
console.log(“res.data = “ + JSON.stringify(res.data))；

console.log(“res.data = “ + JSON.stringify(res.data))；

res.data[object Object] 说明你在控制台打印 res.data 时&#xff0c;它是一个 JavaScript 对象&#xff0c;而不是字符串。这种情况下&#xff0c;console.log 输出的 [object Object] 表示它无法直接显示对象的内容。 要查看 res.data 的实际内容&#xff0c;你需要将其转换…
阅读更多...
​​Spring6梳理17——基于XML的自动装配

​​Spring6梳理17——基于XML的自动装配

以上笔记来源&#xff1a; 尚硅谷Spring零基础入门到进阶&#xff0c;一套搞定spring6全套视频教程&#xff08;源码级讲解&#xff09;https://www.bilibili.com/video/BV1kR4y1b7Qc 目录 ①引入 ②场景模拟 2.1 创建UserController类文件 2.2 创建UserService接口文件 2…
阅读更多...
关于jmeter中没有jp@gc - response times over time

关于jmeter中没有jp@gc - response times over time

1、问题如下&#xff1a; jmeter没有我们要使用的插件 2、解决方法&#xff1a; 选择下面文件&#xff0c;点击应用&#xff1b; 3、问题解决 ps&#xff1a;谢谢观看&#xff01;&#xff01;&#xff01;
阅读更多...
Java面向对象（三）（抽象和封装）（自己学习整理的资料）

Java面向对象（三）（抽象和封装）（自己学习整理的资料）

一.类的提炼过程 从现实生活中归纳总结出&#xff0c;多种相同物种&#xff0c;具有的相同的特性&#xff08;属性&#xff0b;行为&#xff09;提炼到一个容器里&#xff0c;给这个容器起一个名字&#xff0c;名字就是类。 步骤&#xff1a; 发现类&#xff08;Dog&#xff…
阅读更多...
亿佰特STM32MP13工业核心板【学习】

亿佰特STM32MP13工业核心板【学习】

资料链接&#xff1a;ebyte.com/serchlist.aspx?keyECK10 加屏蔽罩的方法确实可以防EMC干扰防水防潮&#xff1a; 宽度: 16 位宽表示数据总线的宽度&#xff0c;意味着每次可以传输 16 位的数据。这在某些应用中可以提高内存带宽。电压: DDR3L SDRAM 的工作电压通常为 1.35V&…
阅读更多...
32 类和对象 · 中

32 类和对象 · 中

目录 一、类的默认成员函数 二、构造函数 &#xff08;一&#xff09;构造函数的特点 &#xff08;二&#xff09;使用例 1、Date类 2、Stack类 &#xff08;三&#xff09;总结 三、析构函数 &#xff08;一&#xff09;析构函数的特点 &#xff08;二&#xff09;使…
阅读更多...
scrapy的xpath在控制台可以匹配,但是到了代码无法匹配(无法匹配tbody标签)

scrapy的xpath在控制台可以匹配,但是到了代码无法匹配(无法匹配tbody标签)

问题 使用xpath-helper可以匹配到,然后scrapy却无法 然后写入html来看看 发现根本就没有tbody,太可恶了 解决 方法1 不使用tbody就可以 方法2 使用或运算符 | big_list response.xpath("//div[classChannelClasssNavContent]/table/tbody/tr[1]/td/table/tbody/t…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023