vue项目设置中英文local

哈喽，大家好，今天给大家分享一下怎么在生产环境啊，部署我们呃前端打包好的 voe 的项目呢啊，首先我们准备一个这样的 voe 项目，我这已经写好了 啊，这个 voe 的项目其实比较简单啊，就是请求后台的一个商品列表啊，然后把这个商品列表打印出来啊啊，请求的是 api 的估值历史的接口啊，我们可以看一下啊，这个估值历史的接口啊，这个估值历史的接口比较简单，我们直接返回了一个商品列表啊啊， 然后我们启动一下这个 vivo 的一个项目啊，我们看一下效果， 我们让 因为把它启动起来啊，这个是五幺七三，我们打开一下看一下， ok， 可以看到这个商品列表已经正常加载出来了，包括这个后台的一个接后请求啊，他也是正常返回 ok 的啊， 然后这样一个项目啊，我们写好之后啊，我们要部署到我们的一个生产环境啊，怎么部署呢？嗯，首先第一步呢，我们先把前单项目做一个打包啊，打包的时候执行 n p n round build， 用 pdr 装 build 的时候，他就会把整个 voe 的一个项目啊打包成一个静态的一个资源啊， 可以看到啊，他新版使用的这个 white 啊，打包工具以前的话都是默认使用这个在 v o r 的时候啊，使用的是 web park， web park 的打包速度啊，比较慢啊， 现在 vivo 三的时候默认已经升级到 white 啊， white 打包速度很快。然后这个打包完之后啊，他是在这个 diss 的目录底下 diss 的目录底下我们可以看一下啊，在我们当前项目底下已经生成了一个 diss 目录，我们打开之后啊， 我们把这个 diss 目录打开一下，要整个卡哦。 啊，在这里我们打完之后啊，然后我们这个打包好的文件怎么去部署呢？一般的话我们是通过 n g x 的返乡代理啊，去部署这个呃， ngs 这个代理服务器啊，全部是我们这个打包好的静态资源啊。首先我们看一下我们的 ngs 啊，我们我本地是有一个 ngs， 我现在它已经停电了，我们把 n g x 启动起来，本地的这个 n g x 它启动起来 我们执行 n g x star 的这个命令啊，然后我本地的这个 n g 也都启动起来了，大家可以看到啊，这个 n g 已经 打印出来这个幻音页了，然后的话我们刚才打包好的这个目录啊，我们把它这个目录地址记住一下，然后怎么 在 ntx 里面部署这个静态资源的？然后 ntx 去代理我们这个静态资源啊，我们打开我们的这个 ntx 的一个配置啊， 我是在第一盘这个 n g x 底下 n g s 配置，我们调整一下，首先这个是原封 不动的时候的一个场景啊，然后我们把刚才的这个呃打包好的静态资源的目录啊，把这个 atm 给他替换掉啊， 然后我们访问这个根目录的时候啊，他这个 root 啊就指向到我们这个 dist 了啊，然后首页默认是我们 index 的 atm。 二、我们打包好的文件， 打包好的文件里面也是有这个东西的啊，可以看到是有这个 india 的 tmr 的。然后我们弄完之后啊，这个 ng 是要重启的，你刷新是没有用的啊， 这里改完配置之后，我们 n c x 要重启一下， n c 重启的话，我们先把它关掉，关掉，关掉之后这个稍微等个一两秒钟啊，这个已经关掉，然后我们把它再启动一下，已经 启动成功了，我们看一下这个页面的输出啊，哎，商品列表已经 ok 了啊，但是这个商品列表的话，他是发现我们 没有打印出来我们这个想要的一个数据啊，我们刷新一下看一下啊，你看这个接口，他返回来一个四零四啊，你说我们没有找到我们想要的这个估字历史的接口啊，这个时候我们 n g x 还要配置一个接口的一个代理啊，怎么配置呢？我们 location location location。 杠什么呢？我们看一下我们的接口路径啊，是 a p i 杠估字 list 的，我们杠 a 篇， 我们把 a p n 的请求啊全部做一个代理转发， 我们转发到我们这个后台的一个这个接口地址上，八七六幺啊，我们可以看一下这个是呃八七六幺的一个端口啊， 转发完成之后，我们再重新试一下啊，重新这个，你这样再去刷新的话，它是不生效的啊，我们 n g 再重新启动试一下。先关掉， 先关掉，关掉之后啊，我们再启动一下， ok， 启动成功，我们再刷新一下界面。哎，可以看到啊，我们配置了这个呃， proc pass 啊，就是把我们 a p i 的一个接口的一个请求 哇，全部转发到我们后台的一个八七六幺的一个接口上啊，做这样一个反向代理的时候，然后我们看到我们的接口已经正常进球了呀，啊，不会再输出那个四零四的一个，呃， 啊，异常了啊，这个就是我们这个项目，其实这样的话已经打包成功了啊，这样已经打包成功了。 好，最后我们来总结一下，就看一下我们，嗯， ngs 要部署 voe 项目的话，我们要做几步啊？第一步就是首先进行 vivo 的一个打包啊，打包完之后啊，我们在 ngs 上将我们的路途目录啊配置成打包好的一个静态资源目录啊。 然后再一个就是我们要做这个 api 接口的一个代理转发，转发到我们真实的一个猴端接口地址上啊， 做完这些之后，我们 n g 是重启一下，或者 n g 是 reno 的一下， ok， 我们就可以看到效果了。嗯，是不是比较简单的？嗯， ok， 今天的分享就到这里啊，谢谢大家。

ok， 这个教程我教大家怎么导入 spring boot 或者是 view 的 项目，不管你是从我这边定做的系统，还是从网上下载的，或者是 csdn git 那 边下载的项目，都可以看。我这个导入教程啊， 分为两个版本，一个是单纯 spring boot 的 项目，另一个是 spring boot 加 view 的 项目，然后数据库呢是 my circle。 那现在几乎上几乎的开源系统都是这几种技术上啊，那这个教程我就教你们怎么导入，如果你没有，如果你的，你从别的地方下载的软件有问题的话，也可以下载我这个资料，我这个资料是免费分享的， 你可以在我的 b 站，然后私信我资料二字啊，就可以 啊，自动回复这个飞书文档地址，我们去访问这个飞书文档地址，然后在这个资料里面有个源码，文档里面找到这个源码分享啊，我们可以点进去下载一下这个资料是二零二五年十二月份的这个资料。 ok， 那 下载下来以后就跟我这个是一样的了啊。当然在导入之前你还要先进行环境配置，如果你没有环境的话，你也可以看我这两个视频，一个 是啊，一个是 mac 口的，一个是 java 环境， jdk 和 maywen， 如果你是 vivo 的 话，还需要有 note 这几个环境啊。 ok， 那 这个 项目介绍就到这边。 ok， 接下来我们来导入 spring 布置项目，如果你是 spring 布置加 view 的 话，也先跟着我导入 spring 布置，因为这个跟单纯 spring 布置都是一样的啊， 首先我们的环境一定要保证已经配置好了。那啊，首先呢，打开我们解压完项目以后啊，基本的一个基本的 supreme 项目啊，里面有一个 s r c 和 pos 文件，那其他无关的文件呢？ 呃，你也可以保留，也可以删除，那你如果保险起见的话就可以留着。如果是我的项目的话，正常就只有这两个。挺简单的啊， 然后 springboard 加 view 的 项目的话，一般还有一个 view 文件夹嘛，对吧？那这个等一下我们再来导入，我们现在先来启动这个 springboard 项目， ok， 我 这边是右键可以直接用 ide 打开，那你们如果不可以的话，那你们可以打开 ide 以后呢？然后这边有一个 open， 或者你第一次打开 ide 也有一个 open 入口啊，然后找到这个项目的地址， 你看这个 idea 已经帮我们标记好了这个，这个是一个啊，美文项目或者是 idea 项目，我们现在选择一定要选择这个根目录啊，我们选择这个路径文件夹打开， ok， 然后把那个关掉， 打开以后，我现在打开以后，它是首先第一步就是配置 jdk， 我 可以看一下这个碰文件里面有没有对 jdk 有 要求，可以拉到最下面。我这边的我这个项目的要求是 jdk 二十一， 或者你也可以看一下你的视频布置的版本，比如我这个视频布置是三，那至少要 jdk 十七以上，如果你的是视频布置二的版本的话，那 jdk 一 点八就可以了。 我这边呢是 jdk 十一，所以我要在这边 file settings 啊，这个 project structure， 也就项目结构 这边我要指要指定一下 jdk 二十一，如果你这边没有 jdk 的 话啊你你要这边去添加啊，艾特 jdk， 然后去找到你的 jdk 地址，当然如果你是按照我的教程去做的话，你这边是应该会有的。 好，那添加完 jdk 以后，第二步我们就是要去呃，配置 maven， 我 这边的 maven 啊，也是已经配好了， 你看我打开来，我打开来以后默认他就给我配了，配好了这些路径，如果你的没有配好的话，你按照我的，如果你是按照我的 mate 去安装的话，那你就跟我配置一模一样的路径， 如果你不是的话，那就按配置自己的眉粉路径。 ok， 那 配完以后呢，记得保存，然后这边点一个 reload reload， 如果这边没有加载出来的话，如果这个是红爆红的话，说明眉粉还没有加载完毕，我可以等待它加载完毕 啊，然后，然后这个项加载完以后，这个实名簿子就算依赖都已经导入进来了。第二步我们就是要启动启动项目啊，先导入啊，先先检查下这个配置项， 来看一下这个 local host 麦穗口的路径啊，这个是 local host 本地的，然后数据库名是 app student info， 我 们先创建一个这个数据库，来看一下这个这两个数据库脚本 啊，这两个数据库脚本可以右键编辑看一下，然后打开 netcat 来创建一下这个数据库，把数据库先导入进来啊， 你可以右键 database， 然后创建一下这个数据库 app student info。 ok， 这个表是空的啊，然后呢，把这个 hash 语句 复制进来，这个测试数据里面是数据啊，就是默认的啊，默认的一些学生或者班级数据。 那我们把这个社口语句拷贝过来，然后去创建一个新的查询，然后粘贴，把社口语句粘贴进来。 那我这个社考语句其实也已经有创建数据库的语句了。那没关系，全选，然后执行，执行完以后右键这个 table 刷新，是吧？这边数据库表就出来了，然后现在是没有数据的，我们再来 啊，我再把另一个脚本的数据给他导进来。那大多脚本的，其实大多创建表和创建数据都在一个脚本里面啊，就不需要去执行两次，那我这个是分开来的，所以执行两次。 ok， 那 导入进去以后呢，这边就有数据了，现在好的，有数据以后，然后我们再回到这个配置里面，这个视频布置的配置都在这个 properties 或者 y a y a m l 里面啊。 那首先看一下数据库名，一定要和这个数据库名对得上，然后呢，这个 local host 就是 本地的意思，然后用户名默认都是 root 密码，我的密码是 root， 你 们自己设置的，自己填上去啊，然后设置完填上去以后呢，这个项目 就可以启动起来了，只要它加载完毕，只要它加载了没有爆错，这里没有爆红，然后这边的代码没有爆红，就可以启动了，现在我来启动它。 如果你的这个 mate 啊，一直加载不出来的话，也还有一个可能啊，就是你，你，呃，你的 mate， mate 的 那个文件夹权限不足，你可以找到你的那个 mate 所在文件夹所在目录，比如你是跟我一样的那个步骤安装的 mate， 然后呢，你可以右右键，右键 mate， 然后属性把这个只读去掉，然后应用， 然后在安全这个地方，我这边就不演示了，你们自己去应用一下，然后在这个安全的地方编辑，把这个完全控制修改什么，全部全部勾选上，勾选完以后我这边是已经已经是有权限了， 把这个全部勾选上以后，然后再进行再刷新一次就可以了。有可能你当前 windows 用户不能访问那个，就是不能修改，没有那个目录。 ok， 现在我的这个已经启动起来了，启动起来以后打开浏览器访问 local house， 我 这个项目是八零八零，而且它的路径是一个斜杠，那就是那就是八零八零，斜杠可以忽视啊， 这样呢，就启动起来了，我现在来登录一下，看能不能连上数据库，如果能登录，那就说明能连上数据库。 ok， 这个是我给给你们分享的这个学生信息管理系统这个源码，它的功能就啊管理员管理学生班级课程成绩，然后呢也可以修改， 那这个系统你们可以自己拿去用参考啊。我这个系统我就不讲太多了。 ok， 这个是 spring boot 的 项目的导入方式， 这个就算启动起来了，挺简单的啊，只要最麻烦的就是环境配置，其实你可以根据我的这个教程去配置环境啊。 好，现在我来继续导入这个 view 的 项目。那 view 的 呢？ view 的 项目它由 spring boot 和 view 两部分组成。那 spring boot 部分我们还是参考刚刚导入这个 spring boot， 单纯 spring boot 的 项目可以参考这个导入啊，但我现在再做一遍啊，这边是 这个是 spring boot， 本来我正常是喜欢把它放在一起的，那等因为它是分离的话，你们比较好理解的话，你们也可以拿出来，拿出来用这个拿来 v， 用 vs 扣的拿来打开也可以。那我呢，我现在就分开来给给你们演示吧。 啊，算了，我放一起吧，其实这个没什么，没什么难度的，跟运行 spring boot 一 样，首先打开它， 打开这个目录啊，然后配置 jdk 跟 web。 这个配置我刚刚已经说过了啊，就首先设置 jdk， 然后呢？ web 每本地址，这个每本配置。你这如果你跟我一样的话啊，那就跟我一模一样，不是的话，你就改成自己的啊，然后点击重新加载，加载完以后这个项目是没问题的啊。我现在这个还没还没加载完吧， 等它加载啊，刷新一下， ok， 加载完毕以后，然后也是改一下，改一下这个数据库配置，在 resources 下面，把这个密码改成自己的 micro 密码。 这个数据库名也一定要和数据库里面的一样啊。 app student info 没错。然后改完以后也是跟刚刚视频布置的项目一样。启动，首先启动， 先把后端启动起来，然后前端呢？前端你如果用 vs code 的 打开也可以。我这边是直接用啊，你甚至用在文件夹里面打开都可以啊。 哎，我比如你在这个 view 文件夹里面，这个是前端，你可以用 cmd 打开这个项目是吧？然后去操作 npm 什么的。 note 杠 v 是 吧，我能查这边，你去这边 npm 操作 note 也可以，在这边里面也可以。那我是喜欢都放在一起打开这个 idea 的。 呃，终端也就是 terminal， 首先可以检查一下 note 环境，然后 n p m install。 啊，不对，首先我们要进入 view 的 文件夹对吧？ 因为我们现在的文件夹是学生信息管理系统，这这个是外层，首先要进入 view， 然后 n p m install， 等它安装完毕， 这个安装可能要个一分钟吧，看网络环境。 ok， 它下载完了，那我现在启动起来就是 n p m run dv， 下载完毕以后这边 v 五目录下会多一个 note models， 然后我们要启动的话就是 n p m run d e v 就 可以了，启动完以后它自动会弹出一个啊，窗口 也可以在这边对吧？也可以在这边 cmd， 然后 n p m run d e v， 它这个不知道什么情况， n p m run d e v 这样就可以了，这样也可以启动，但是没必要启动两次啊。 ok， 启动完毕，启动完毕以后下面就是日历了，我们来看一下。 ok， 这个是呃，我的默认管理员的账号密码都是一啊，管理员账号密码可以在这边看啊，这个用户名密码，然后学生的呢？在这边 a a a 一 二三，我先用学生的来看一下， 那学生登录以后是只能看到课程跟自己的成绩， 然后用管理员登录的话也是跟刚刚一样的，刚那个一是不是版本一样的三四啊？学生来班级课程，然后学生这边还有还有个头像啊， 头像呢，可以去编辑上传我这边，我这边是没上传了啊。 ok， 这个学生信用管理系统，这个 view 和前后端分离跟非前后端分离的项目导入就到这边， 如果你有客社需要定做的话也可以找我，如果你是在我这边定做的，你就按照我这个导入就可以了。

好，这节课我们来学习一下安装 vivo clea 与创建项目。 vivo clea 呢是 vivo 官方的脚手架工具，极大简化了项目的初步化开发、构建等过程。那么接下来呢，我们首先来安装一下， 那么如何安装呢？我们通过这样一些命令在 dos 窗口进行安装，那就是这个小黑窗口啊，俗称小黑窗口。嗯，这个窗口的话，我们使用这个命令 npm install 杠 p 复制粘贴到这里就可以进行安装了， 因为我这里已经安装过了，所以就不再安装了。那安装过的同学可以直接输入 view， 然后刚刚 versus 一 样 s l n 好， 回车来查看你的脚手架的一个版本。 好，安装好之后呢，我们就可以来创建自己的 view 三项目了。那如何创建呢？比如说我们要在自己的目录里面 去进行创建，维有三项，好，来进入到 demo 里边，那在这个地址栏这里，我们直接输入 cmd， 打开我们自己的这个项目的窗口， 我们在这里面呢输入 will， 然后空格 create c r e a t e my 杠 will 三杠 app 好， 回车我们就可以看到它，让我们去选择 will 的 版本，对吧？第一个是 will 三，往下是 will 二，那我们回车 等待它去下载 这个时间，嗯，下载的过程呢，就是看你个人的一个网速。好吧，那么下载完成之后呢，我们需要去执行这么两个命令，这里已经标注出来了，第一个呢是 c d， 然后空格慢 杠 vivo 三杠 app 好， 进来之后呢，我们在 n p m run serve 回车， 此时呢就已经启动了我们的项目了。启动项目的话，那我们就可以直接使用这个地址来， 哎，复制一下，打开我们的浏览器，把我们刚才复制的地址粘贴到浏览器里面， 那咱们这个项目呢就打开了，当然这是第一种方法创建，呃， vivo 三项目的方法，同时来咱们把这里退一下，还有另外一种方法可以创建，你比如说像 vivo 空格 ui 回车， 它是给我们打开了一个图形界面，那我们可以点击创建，然后来到 demo 这里去再次创建项目，比如说 my 杠 app， 是 吧？然后把这个关一下，下一步，那我们选择 will 三，好，下一步， 当然我们也可以去创建 vivo 二的项目啊，在这个图形界面，好，稍微耐心等待一下，他在创建项目的时候呢，是根据你本地的呃，网络情况来定的。好吧， 那么进入项目之后，这里咱们关一下，可以看到，哎，咱们这里呢是有插件，对吧？然后运行的依赖，哎，这个 它现在还在安装好，这个是配置，这里呢有一个 server， 我 们可以点击，点击这个 server， 点击 server 之后来咱们放大一下，再点击这一个运行，让它运行一下， 运行成功之后点击启动 app。 那 么同样这个 vivo 三的项目呢就创建好了，和咱们刚才创建的 vivo 三项目呢是一样的。 好吧，这呢是两种创建项目的方法，希望大家都能够灵活的使用。 ok， 那 么咱们这节课呢就说到这里。

vs 前端开发框架的使用介绍二、好代码生成工具的整合呢？我们在做系统开发的时候就非常方便，有时候否则很多代码因为特别是 跟数据库的字段信息有相关的，包括界面呢，后端的配，呃，根据实体的属性啊，这些如果是一一去写很容易出现问题，那我们通过代码的同一规则的 这种啊，快速的生成，第一个效率提高了，第二个减少了出错的问题，否则一个属性的大小写，或者说是呃编码上的写错，那可能就会出现一些啊，问题需要排除，那就很麻烦。 呃，跟他讲了整合开发包括几个部分，一个是发自 api 后端的一个整合的一部分，呃，前端的一个界面生成跟常规跟主从界面的一个生成， 主存界面就是我们刚才也也大概讲了展示了一下它的功能，特别是在那个，呃是报报价单是吧？在那里面有一个录入啊，那个主存表的录入就会更方便一点 啊。发起 a p i 的 增量开发之前也讲了，我们大概这里看一看就可以了啊，有基于这里面，在代码生成工具里面会选择一个发起 a p i 的 原代码生成， 然后生成之后它会选择表，会生成一些映设的文件啊，就是，呃，包括 model 啊， dto 啊，还有一个呃酷路的表，酷路的类啊，以及 api 的 一个控制器的类啊，是吧？就是这几这几个部分啊， 就生成，我们到时候整合到后端里面就可以了。 好呃，锃亮的开发也是很简单的，它生成之后把它对放到对应的目录里面去，那呃，这张可能具体的话呢，我们到时候参考一下 f s a p i 这个 部分的一个介绍吧，我们大概了解一下 f s a p i 就是 整合 switch 提供一个标准的 v p i 接口给其他终端使用啊，大概了解它的界面 啊，代码生成工具的整合。还有就是做 b s 端界面生成的时候，它有两个部分，一个部分是常规界面，还有个组成表的界面，我们专门做了一个定制，就是为了方便那个界面生成的时候可能会有一些变化 啊，特别是你，你看我们常规界面可能会会选择一些叫做呃走车，这这这种有没有塑形结构啊，以及一些路径的一些变化，那生成之后他也是独立的，有几个试图这样子啊， 这里面会选择在查询条件列表展示啊，他的编辑界面就是为了啊，控制一下界面输出的一个这段信息，这样子就不用 啊，再手动就是删除，这样子减少一些工作量啊。其他的还有个右边的这个我看看这位哈，这里面会提供一些自然自然选择，他就一旦碰到这个自然可能就作为下拉列表来展示，就是这样的一个效果啊， 好，还有组成表的生成呢，就是它有个主表重表，然后生成之后就是列表，可能就是展示这种方式，然后编辑界面的时候呢，它就会，呃，之前已经展示了哈，就会有一个编辑的组成表的一个界面。 好，我们呃安装环境呢，其实，呃，这个 b s 端跟 h 五端它其实都差不多的，那开发工具我们讲了前后端跟 h 五端，它都是用 vs code 来进行开发，那我们也需要安装一些插件。 呃，开发环境的准备也大同小异。呃， b s 端的一个项目依赖跟 h 五端的项目依赖也是开发商。呃，准备上也差不多啊，开其他的一些使用的一个工具介绍，大概就是我们这个开发环境的一个概要 好。呃，安装 esco 环境呢？我们首先呃在这里面呃会打有这应该不用怎么详细解吧，介绍吧介绍吧，因为这个安装很容易，这个 fitco 的 也就是为了一个方便的一个 ai 辅助助手，可装可不装啊。 啊努多跟跟这呃 m v m 的 概念要了解，努多就是我们 vs code 里面做 b s 开发或者 h 五开发必须要安装的一个环境，它 它也是我们嗯，这种呃前端的一个核心的一个内库里面了，然后我们这里面要下载它进行安装。第一步先安装那个 windows 版本，你可以找一个比较新的稳定的版本来安装。安装之后呢，我如果你需要，因为我们项目之间 的录的版本可能要求就 m p m 版本可能要求不同，那我们就需要安装一个 m v m 来做一个版本管理的工具。呃，我们这里会讲，就我们前面讲了，就是有 bs 端里面那个环境呢了。要了解这个 mvm， mvm 就是 个对 node 版本的一个管理，如果我们需要安装，安装了 mvm 之后我们就可以进行不同版本的 node 的 一个安装了。我们假如我们这个是二十二点幺六是吧？ 我这个 b s 端或者 h 五端，呃，最低的应该二十二点幺二也可以的。呃，我倾向于目前我装的是二十二点幺六这个版本，那装上去也没问题啊，装上去之后就用这个版本来装，然后呢？ 使用这个版本就就你就这样子使用，然后他你查看当前的版本，就是用这个查，你可以列出当前所有的版本，假如我们来看一看，假如我们这个是 b s 端切 control 键换换到我们这个控制台里面去，我们就列出我这个几个所有的 mpm 的 一个版本，那是吧， mvm 卡了，我们是用哪个？其实这里已经说明用新号，这就是我们当前用的这个二十二点幺六，就通过这个方式来进行了解。 如果我们 mpm 没有安装，怎么查看有没有安装呢？我们在控制台里面啊，就是 第一次，我不知道你们一般你们装通过 word， 如果这个版本已经显示出来，那说明我们这个 node npm 已经安装了，如果没有的话，可能就下载对应的 node js 来进行安装就可以了。然后安装之后呢？可能 是吧，你可以再安装这个 npm， 我 们也可以查跟，我们这个 pmpm 跟跟那个版本是是哪一个？ 十点一点三是吧？这个 n p m， 呃，比这个 p p n p m 都可以，但大多数我们现在的 vivo 都是用 p n p m， 它这个管理的包会更方便更快一点，据说反正差别不大，使用命令也是基本上是一致的啊，我们大概就这个是它它在对比啊，了解一下。 呃， pmpm 可以 用 app 或者用 install 来进行安装，包铃木或者说是按 install 的 方式来安安装。运行那个呃， script 的 时候可以用用 pmpm run 或者直接运 运行它这个 script， 这就是我们经常开发用到的一个命令，这是查看版本，你看我们这里安装依赖是怎么安装呢？首先呃 切换到这个我们的目录上去，是吧？我们打开这个目录，其实就是已经我们当前的这个目录，只要我们不是在这目录下，我们就要切换啊。然后安装这个就是按照所有的依赖，因为我们导出项目的时候，我们可能第一步是没有这个 这个这个目录的，这个目录就是依赖包，它是对应着这个项目来的，所以如果说没有的话，我们第一步首先要要安装它，让它把整个 package j s 的 那里面， j s 里面的一个安装包啊，就是这里面啊，我们可以看到 有个叫做 package package 这包的依赖，这个内容也要讲一讲，这个里面就是我们运行的一个命令啊，就是大多数运行这个是进行运行，然后打包可能是用这个或者是用这个，看你具体选择哪一个 是吧？这个依赖我们就一般就是主要是用这个跟这个，那我们这里面会有很多些包的， 呃，区分有两个，一个是开发环境上的，一个是呃需要部署的时候用到的一个相应的依赖包啊，你可以看到有两个他们之间的命令就差一个参数，你要理解就行了。这个就是其他的一个描述啊，我们大概了解一下。 好，这里面我们呃打包运行的话，呃运行项目就是 pmpm d d e v 是 吧？因为我这里面已经启动了那个发射 api， 这里面已经启动了一个后端，所以 我们我们把前端打开啊，前端这里面打开，切换到 control j， 切换到这个控制台里面去，我我清空一下，然后 pmpm 的 v e v 或者 one deal 这两个都可以，我们习惯用这个，那直接就这样子就跑这个项目起来啊， 它这里会提示我们跑这个项目的一个过程啊，它会有一些提示，是否已经成功啊？成功是访问什么端口啊？它会这个 端口的配置，就是在这里面我们这个启动配置，这个是以这个环境八八四八为一例，那我们它这里面马上就启动起来，那我们这样子打开，打开之后呢，我们就可以看到这里面，是吧？ 他就出现了我们一个前端的一个界面，我们这里默认密码为空。呃，我们是幺九八，就是为了做一个验证。那个 好，可以看到这个后端同时会打印一些登录啊请求的一个接口，那这个成功之后呢，他就就会切换到 切合到这这里面去啊，这里面有包括，呃相关的一个图标的一个功能，是吧？我们跟你讲图标包括各种现状图，还有这里面就是我们基础的业务功能，包括用户管理， 我们这里再把它功能大概展示一下吧，也是一个呃了解的一个机会，包括我们的机构管理，是吧？ 因为我们整个系统可以配置为动态菜单，也可以配置为静态车，我们呃调整之后，如果是动态菜单，它就是以我们这个菜单配置为主啊，这个 以这个为主啊。还有其他的我们就不再一一介绍了，反正这里面基基本上我们前面介绍的那些功能包括什么字典管理啊，是吧？ 以及以及什么业务规则的管理啊？是为了生成编码报价单呢，销售单呢？的编码做用途的，然后只能做一些新闻的资讯的一个维护， 是吧？还有其他的包主报价单啊，特别我们刚才讲的那个。哇，这里这个接口有个错误，回头我调整一下。呃，这里面有有个报价单的组成表的这个概念啊，这就是我们用到的一个主要的功能，包括我们这里面还有些日字，是吧？ 啊，这是暂时正常哈。啊，这里面我们就讲一下，就是这个环境怎么启动起来的，然后以及如果是打包，我们这里还没有讲，最后可能会讲打包，打包直接通过这个命令会生成一个 diss 的 一个目录，把它啊复制到那个 engine x 里面去，那这样子它就启动起来之后它就可以通过啊。 u i l 就 访问啊。 好，前端的环境准备，我们需要安装相应的插件，这个插件有相应的说明，主要就是为了这个，这个好像我看一下我们这个前端项目应该是不是这个的， 我这里可能有稍微调其实，呃，我们这里可能讲一下，可能我需要，如果是说可能我前端这这这种这个原子化 css 的 一个样式更 对，一个插件跟它跟上面那个是类有点类似的。呃，两个选车机，因为我们 h 五端好像选的是这个 b s 端选用的是这个，它两个百分之八九十都差不多的，只是不同的出。呃， 不同的一个公司出的一个东西啊，有两者了解的接相互借鉴啊，我们大概知道就行了。 v o e 的 可能粤语法的一个 一个教验，还有这个 type script 里面的 v o e 的 语法的一个教验啊，这个这些插件我们都都把它装上，有一般我们在呃 p 呃， 就在哪里啊？就是在前端那里面我们会有一些相关的。呃，扩展，这里安装的时候他会自动提示你装不装这个东西，相当我们把这个相应的把它确认，他就会自动安装啊。如果我们确实他没有装的话，我们就按照这个搜索，然后让他装上去就可以了。 大家了解他的插件，插件也就是在我们这里面进行。呃，这这个标签扩展，这里面你可以看到很多，像我这里面因为我做了很多不同的项目开发，所以他这里面的插件可能会有很多啊。哎，刚才讲的这个是吧？然后可能有 有拍摄，我拍摄环境，可能做后端的，他也是在这里展示，还有其他的呃，例如可能 yes 另做一个，他就会自动装哈。这个 还有可能这个对于这个我们做那个多语言的时候会用到，反正插件的时候会他那个推荐那里面会自动装一些，然后我们如果根据需要，我们也会可以手动的添加一些 啊。这里面前端开发刚才讲的这个 pick package， jason 这里面有相应的一个内容，我们就讲了，是吧？如果 pmpm 的 安装的，呃命令要了解一下啊，反正这里就无非就 at 或者 install， 通过这个包这个可以带一个版本， 那个 d 呢？就是代表这个，呃，这个 package 这个里面，呃，我们回头刚才讲的那个， 如果是带一个 d 就是 一个命令，呃这一个选项的话，它就附它就安装到这个 develop 呃 dependence 里面去，如果是我们，呃这个项目需要用到的，我们就，呃就是我们部署环境也需要用到，我们就安装在这里啊，要关注就不用带参数。 好，这个了解一下这个 pmpm 的 一个安装包呃的过程就可以了啊。 然后安装开发环境，我们工具呢？其他工具我们要准备一下，大概两，如果是说我们要维护数据库，肯定做前后端开发的话，肯定涉及到数据库的维护跟导入导出，或者是啊一些相关的一个查看处理。 那如果是基于 micro 啊，或者说其他的，我们就是 networked 肯定是比较好的，我也很喜欢这个，它支持啊 micro 啊， postgraduate 啊这些常规的数据库。 这个我们我这里用的是十七这个版本。设计化啊，如果你说做业务系统的开发的时候，你肯定要做数据库的一个设计， 作为表的设计呢，我们建议用 power designer 来进行设计啊。 api 测试呢，跟大家讲了， api 有 一个 api pose 的 进行一个接口测试，就我们做相应的接口来进行一个测试，就 api pose 的 对大概说一下吧，因为我是我们常见到的一种 接口调试。 好，我们测试一下登录接口吧。呃，首先我们要全机参数，看里面里面有没有传参数，我们第一，因为我这里面有一个这个参数名，一定要注意这个就是我们那个令牌的一个头部的一个标记， 呃，开，开始我们要把这个取消，如果你有的话，没有的话你就无所谓了。首先我们找到这个用户登录是这个地址，是吧？那它带有个 body 的 信息。呃呃，我看看是在哪里先？ api log body， 哎，我的 body 呢？ pose 是 这个吗？呃，我看一下它这个参数 啊，这它这里要，要要插入那个应，应该是，我看一下这个它要插入两个参数，这里 这个 body body 应该是 wall， wall 里面传，传哪里去了？呃，我看一下这里面没有，它要传传递呢那个，哎，我看一下，稍等一下啊， 我测试一下。呃，运行接口调试？ 对啊，在这里调试。这个设计就不管了，我们一般都是在这个调试，你看到这个里面这个登录接口是 pos 的， 然后 url 就是 我们的端口，然后再加 api 的 一个前缀，然后我们这个就是它的路由的名称，那我们带有这个信息， 就是一个 login name 跟 password， 我 们测试一下发送它这个就是一个令牌的信息，那这个令牌信息我把这这段考过来，在全机删除，这里加上这个 head。 然后呢？把这部分改了， 因为我之前用了这部分，然后保存，它就会每次会请求其他接口的时候，它就会自带一个 一个令牌上去。那我们一个头部信息的令牌，那我们这里看那个测试这个接口，这个是，哎，哦，这是给力，我们直接把这个删除，是吧？这个删除接口，那如果是 get 接口，那我们用户信息的一个 get 接口。 好，我们 get get 信息，它就会返回一个相应的一个信息，这就是我为我们进行接口测试的时候方便，因为我们就知道它返回的信息是什么，是吧？那我们这样子就可以很容易整合到我们界面上去。 好，这我们大概讲一下，就这个哈啊配套的生成工具呢？我们也前面也应该也有说明， 就是我们后面再讲吧，大概讲讲就行了啊。运行项目，我们刚才讲的已经通过 pmpdev 的 方式来运行这个项目， 就可以看到它监听的端口以及呃通过 url 我 们推荐用 webcom 这个方式来进行一个测试，然后开发啊，然后我们做呃开发的时候我们会有一些开发工具进行跟踪嘛，可以查看我们具体的一个错误跟信息，然后我们 这里面可以让它停靠到底下去吧，然后如果是说我们可以跟踪一下，呃，哎，等我一下它这里有一个停靠，然后选择这个界面， 它就是展示的这个效果啊，那你你可以进行呃查看啊，这里，呃进行测试的时候它有网络请求哪些哪些内容，那我们也可以看得到，对不对？ 这就是我们通过呃浏览器的一个调试，或者它的一个开发模式进行一个跟踪了解，这是我们常规做前端开发也需要了解的一个技术。呃参数修改啊，前面还没讲这参数修改是它这个里面有，一定要注意这个，呃 有一两个路由 vip 哪个接口呢？我们就通过这个呃一个叫 返现代理的方式吧，就是他就是指定这个出现这个 api， 他 就跳转到这里去，是吧？就是我们通过这个返现代理就实现了呃一个 api 的 一个对接， 然后它这里如果是我们实际部署的时候， n g n i s 部署的时候这个是不起效果的，所以我们要配置一下它的相关的那个 n n g x 的 那个 config 的 文件，就是这个配置文件，利用我们这个可能增听这个端口，那就配置这个是吧？ 那如果是说其他端的，那可能你就配根据你的需要的配置了，我们这里有有些案例啊，可以参考一下，这后面我会讲，我就大概了解一下。有，有跟你说一下，有一下这个文件。 嗯，好，前面我们讲了，了解了这个这个 vs q 插件 以及 n p n 安装切换运行，是吧？配置 wide config 里面的那个反向代理，还有这个我们侦听的前端的端口，这几个环境变量啊，都了解了 啊。目录的话我们大概了解一下整个目录它的这就是我们截图的一个目录，这里有相关的说明啊，其实主要就是在这个 s r c 这个目录下，然后这个是 locate 一个多语言的一个配置文件， 然后 type c 就是 我们 type c 的 一些定义，它这个通过配置它就指向这个目录，它首先很多相应的接口，它就是从这里面找 啊。 api 就是 我们对应的后端的 api 封装类了，组建自定义组装的啊，自定义组建的有个目录，其他的都逐步的去上课，还有个是 utos， 还有个 views， 这个是常见的，是吧？我们主要就涉及这几个，然后 常用的这几个就要了解，这个就是我们从项目这个截图里面去看啊，过一遍大概知道，然后具体的去参考那个 啊项目目录来了解就可以了。然后项目里面还有一些啊主要的一个文件，他不是目录，是文件，他绿的密就是描述文件，我们会讲一些项目启动运行跟大概的介绍的一些内容啊，他是 markdown 的 格式。 呃，你我们表它就是个文本文件，它是 markdown 格式，一个呢方方便预览，一个呢是方便书写啊，这个呢？ package 就是 我们依赖文件跟 script 命令， 这个是入口的两个文件了，是吧？常规 vose 开发最关键的这两个文件，这就是配置文件，这个是 type crib 的 一个配置项啊，这个是我们项目的一个配置信息啊，大概就是这些，呃，我们项目要怎么整合的话需要了解到。呃， 需要了解这些相关的信息，刚才讲了 bc api 的 一个处理，是吧？还有我们 http 请求的时候，我们要了解它这个不同的方法请求有什么差异，参数怎么传？ 我们在项目里面也提供了一些，生成的时候也提供了一些参考代码，是吧？ bc api 我 们每一个生成的项目里面都会有一些参考。呃，我看一下现在是在哪里？ 刚才讲了这个是吧？这里面会有这几个常规的参考，你就按照这个方式来传递就行了。这个传递的话这个就是我们这个路由的一个构建，是吧？那我们获得这个 api 就 有相关的一个接口，那我们 找一下那个 c r m custom 那 个 edit 里面是吧？ 呃，不是，呃，不是，在这里是在 secure custom 啊，是这个吧？ 这个是个单独的一个文件，为了方便了解它的整合的过程啊，这里面呢，它有有像我们引用的时候为为了这个 custom 的 接口呢，我们只需要直接这样子引用就可以了，那么 我们开始的门它它它导入之后呢？它就可以进行一个，你看这个方法是不是就有它相关的一个参数的提示了？ 这个就是 type c 里边比较好的一种智能的一个提示，这样可能我们还没有写标准的一个注字啊什么的，那你可以根据你的需要进行一个书写 啊。大家了解一下刚才这个 api pos 工具也大概做了一个啊介绍啊，代码生成工具，我们啊也做了一个了解。 打包的时候就乱 build 就 可以了，或者直接 build 啊，这个都是。呃，这里有 n g n n g x 里面的一个。呃， 那个命令啊，大概我们在部署的时候要做一个了解。呃，我们这个安装的话很容易就你就找到这个 n g n s 直接下载包，有一些直接下载之后他或者安装也行，直接下载包之后直接找到他的目录，也通过这个命令 来进行一个运行跟停止。那像我们如果运行了之后，我们就可以通过这个命令进行查看是否哪些端口在增听啊，或者说是案例在使用啊。 那如如果是发现有重复的或者什么的，你可以停止它。这里不是要停止吗？或者说配置文件进行一个修改，你直接用 log， 它就会把配置文件进行一个更新，就加载最新的配置。那特别对我们那些设置， 呃，就是设置好之后改动的变化就会及时反映出来。 嗯，这里我们再讲一个，就是它的那个呃，打包部署的时候的一个很重要的一个信息了，这个就是要，对啊，把那个返乡代理配置到 n n 井 x 里面去是吧？ 这个里面就实现了我们这个一个端口的一个转发，那这样子才能够完整的实现跟前端的后端的一个对接，这就是我们啊整个开发的一个过程了 啊，可能我们在具体的开发过程中可能有些代码啊怎么使使用，我们就可以参考一下这些书选，因为大多数我们都是根据代码生成工具来进行生成，因为里面有啊，已经预备了很多生成的一些代码在里面，我们只需要进行一些修改啊调整就可以了。 很多时候啊不需要从头来写，包括我们这些这些属性的定义都已经加上去了，我们无非就是可能在界面上要 增减一些字段啊，或者把一些字段配置成一些相关的一些空间，做一些调整 啊，就是做最主要是做这种工作量的多，就有可能我们查询条件里面和啊这个是编辑，编辑界面可能有些字段我们不需要显示啊，那就删掉它是吧？在相应的代码里面可能做进行一个调整，有些可能是下拉列表的进行一个处理， 这就是我们常规用到的一些啊，对代码进行一个开发的一个技技巧， 好整合过程就是这样子。那我们前面讲了我们这个部分回顾一下啊，这几个部分的里面我们已经讲了，就前端后端大概有多个做了一个介绍，以及代码生成工具的一个整合，包括我们 vs code 里面运行前端项目 以及一些相关的一些工具的了解，打包部署，这个也大概做了一下，但不是这里面因为时间的原因打包部署这块， 就到时候直接参考那个命令来做就可以。呃，还是比较简单的， b s 的 简单或者 h 五简单的开发都相对来说都比较容易啊。可能 啊，比较难的可能就是对于一些自自定义组间的开发啊，或者一些界面的。呃，个性化的一个处理那种可能就需要花点功夫来进行一个 更高阶的一个学习啊，非常感谢。