医院信息化与智能化系统(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，作为用户在浏览器中看到的页面结构。

javascript 复制代码

  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的文件，这里有几个需要关注的值。

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

2、登录代码改造

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

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

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

javascript 复制代码

  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表示头像

javascript 复制代码

// 获取用户信息
    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'): 使用懒加载的方式加载组件，只有访问到该路由时，才会异步加载该组件，节省资源。

javascript 复制代码

{
    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 文件，用来封装和后端交互的请求逻辑。

javascript 复制代码

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中的方法获取数据，并将数据展示在页面上。