医院信息化与智能化系统(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,然后返回它们的和。
javascript
function add([x, y]) {
return x + y;
}
模版字符串
模板字符串
是增强版的字符串,用反引号`标识 (在ESC键下方)
1、字符串中可以出现换行符
javascript
let ulStr2 = `
<ul>
<li>JAVA</li>
<li>html</li>
<li>VUE</li>
</ul>`
2、可以使用${xxx}
形式输出变量和拼接变量
javascript
let name ='张小明'
let infoStr2 =`${name}被评为本年级优秀学员`
箭头函数
语法格式:参数 => 函数体
javascript
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 打包后生成的文件,包含了所有模块的代码,并按照依赖关系进行了整合。