医院信息化与智能化系统(5)
医院信息化与智能化系统(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中，有需要下载的依赖及版本配置，右键项目名称–>在集成终端打开输入：
npm i node-sass/第一步（我这里换完源之后好像可以直接下载了）npm -install第二步
为了能安装上需要做出的努力
vscode.exe快捷方式右键，点击属性，找到兼容性，勾选以管理员身份运行此程序，最后点应用。- 下载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 打包后生成的文件，包含了所有模块的代码，并按照依赖关系进行了整合。