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

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

预约挂号微服务模块搭建

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

1、新建项目

前端开发使用VScode作为开发软件平台

提前下载好插件，在扩展里面找

vscode本身没有新建项目的选项，所以要先创建一个空的文件夹yygh

在vscode打开该文件夹，并点文件选项–>将工作区另存为...，给工作区起个名字保存即可。

2、ES6语法

因为之前java-web内已经讲过该语法，这里挑重点讲

创建html文件没有默认模版代码，在内容处打上！符号，会自动提示创建模版代码

想测试JavaScript语法，可以在.html的body标签内写script标签，然后Open with live server()之前的插件

定义变量

let 和var的差别

1、let 不能重复声明

2、let有块级作用域，非函数的花括号遇见let会有块级作用域，也就是只能在花括号里面访问。

3、let不会预解析进行变量提升：let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错

4、let 定义的全局变量不会作为window的属性(window.xxx是不行的)

解构表达式

数组解构赋值：
let [a, b, c] = [1, 2, 3];

对象解构赋值:
let {a, b} = {a: 1, b: 2};

新增变量名必须和属性名相同，本质是初始化变量的值为对象中同名属性的值

等价于 let a = 对象.a let b = 对象.b

函数参数解构赋值

该函数接受一个数组作为参数，将其中的第一个值赋给 x，第二个值赋给 y，然后返回它们的和。

function add([x, y]) {return x + y;
}

模版字符串

模板字符串是增强版的字符串，用反引号`标识 (在ESC键下方)

1、字符串中可以出现换行符

let ulStr2 = `<ul><li>JAVA</li><li>html</li><li>VUE</li></ul>`

2、可以使用${xxx}形式输出变量和拼接变量

let name ='张小明'let infoStr2 =`${name}被评为本年级优秀学员`

箭头函数

语法格式：参数 => 函数体

  let fn1 = function(){}let fn2 = ()=>{} //箭头函数,此处不需要书写function关键字let fn3 = x =>{} //单参数可以省略(),多参数无参数不可以!let fn4 = x => console.log(x) //只有一行方法体可以省略{};let fun5 = x => x + 1 //当函数体只有一句返回值时，可以省略花括号和 return 语句

3、管理平台前端搭建

下载vue-admin-template-master.zip并解压到vscode工作区

该文件可以在Github网站获取https://github.com/PanJiaChen/electron-vue-admin

package.json中，有需要下载的依赖及版本配置，右键项目名称–>在集成终端打开输入：

1. npm i node-sass/ 第一步（我这里换完源之后好像可以直接下载了）
2. npm -install 第二步

为了能安装上需要做出的努力

1. vscode.exe快捷方式右键，点击属性，找到兼容性，勾选以管理员身份运行此程序，最后点应用。
2. 下载npm

本步骤参考该博客:

这一步很重要，因为高版本的node不一定适用该项目，如果你之前已经存在node版本，可以在控制台输入命令where node，找到你下载的node，然后全删除，更详细的删除可以看这里。

先在https://github.com/coreybutler/nvm-windows/releases网址下下载nvm，我这下的是1.1.6版本，下载时分别要设置两个安装位置，一个放nvm，另一个放你node的位置(不要中文路径)

nvm install 10.14.2,下载该node版本，随后一定要输入nvm use 10.14.2使用该版本node

node -v 测试是否使用成功，我这是可以用的

但好像通过nvm下载的node并没有下载对应的npm，得自己指定下载，这里使用6.4.1版本npm

[具体安装流程点击此处]

下载地址https://registry.npmmirror.com/binary.html?path=npm/v6.4.1/

在nvm文件夹查看，会发现对应nvm版本D:\nvm\v10.14.2路径下有这两个文件，其中node_modules里面是空的

把下载好的npm文件放到node_modules里面并解压到当前文件夹，把解压后的文件重命名为npm，并把
D:\nvm\v10.14.2\node_modules\npm\bin下的两个文件复制一份到D:\nvm\v10.14.2文件夹下，就完成了。

3. npm config set registry https://registry.npmmirror.com更换默认仓库为国内镜像

webpack打包工具

模块： 在 Webpack 中，任何文件（JavaScript、CSS、图片等）都被视为模块。模块可以是任何导出代码的文件。

打包： Webpack 会分析应用程序的依赖关系，将所有模块合并为一个或多个打包文件，通常是 JavaScript 文件。

webpack.config.js：Webpack 的核心配置文件，定义了打包过程中的各种规则和设置。主要配置项包括：

• entry：指定应用的入口文件，Webpack 从这里开始构建依赖图。
• output：定义打包后文件的输出路径和名称。
• loaders：用于处理不同类型的文件。例如，使用 babel-loader 将 ES6+ 代码转换为 ES5。
• plugins：用于执行更复杂的任务，如压缩代码、提取 CSS 等。

假设：

model1.js和model2.js是应用的其他模块，包含具体的功能实现。

index.js作为入口文件,使用 import 语句导入 module1.js 和 module2.js，这建立了模块之间的依赖关系。

bundle.js则是 Webpack 打包后生成的文件，包含了所有模块的代码，并按照依赖关系进行了整合。