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

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

这里只描述对应过程,和可能遇到的问题及解决办法以及对应的参考链接,并不会直接每一步详细配置

如果你想通过文字描述或代码画流程图,可以试试PlantUML,告诉GPT你的文件结构,让他给你对应的代码

预约挂号微服务模块搭建

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

1、新建项目

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

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

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

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

2、ES6语法

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

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

想测试JavaScript语法,可以在.htmlbody标签内写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中,有需要下载的依赖及版本配置,右键项目名称-->在集成终端打开输入:

  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.jsmodel2.js是应用的其他模块,包含具体的功能实现。

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

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

相关推荐
九圣残炎15 分钟前
【从零开始的LeetCode-算法】3354. 使数组元素等于零
java·算法·leetcode
王ASC34 分钟前
ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值。ojdbc8版本23.2.0.0驱动BUG【已解决】
数据库·sql·oracle
Dlwyz44 分钟前
问题: redis-高并发场景下如何保证缓存数据与数据库的最终一致性
数据库·redis·缓存
天天扭码1 小时前
五天SpringCloud计划——DAY1之mybatis-plus的使用
java·spring cloud·mybatis
程序猿小柒1 小时前
leetcode hot100【LeetCode 4.寻找两个正序数组的中位数】java实现
java·算法·leetcode
如意机反光镜裸2 小时前
如何快速将Excel数据导入到SQL Server数据库
数据库
不爱学习的YY酱2 小时前
【操作系统不挂科】<CPU调度(13)>选择题(带答案与解析)
java·linux·前端·算法·操作系统
丁总学Java2 小时前
Maven项目打包,com.sun.tools.javac.processing
java·maven
不爱学习的啊Biao2 小时前
初识mysql数据库
数据库·mysql·oracle
kikyo哎哟喂2 小时前
Java 代理模式详解
java·开发语言·代理模式