09-尚硅谷-支付宝支付-启动前后端程序

这节课呢，我们来讲一下如何运行和配置我们的案例项目，那如果你是从前面的微信支付就开始了我们这门课程的学习的话呢，直接将我为大家准备的资料当中的前端项目替换原来的前端项目就可以了，因为最新资料当中的前端项目呢，添加了和支付宝支付相关的代码，那么如果你是从支付宝支付才开始进行学习，并且跳过了微信支付部分的话呢，那么就需要执行搜Q脚本，然后呢运行后端项目，并且呢要搭建一个前端环境，然后再运行前端项目。好，接下来呢，我就来说一下具体怎样去将这个案例项目运行起来。现在呢，我们打开运行案例项目这个资料目录，那么如果你之前已经学习过微信支付的开发了，你只需要把这个payment DEMO front.zip这是一个前端程序哈，和我们之前的前端程序的目录的名字是一样的，把它解压之后覆盖到原来的前端程序上，然后正常运行就可以了，那这个里面呢，就添加了支付宝支付相关的前端的代码，那么如果啊，你没有这个项目的整个的环境的话呢，我们就要从数据库搭建开始，所以呢，这个是搜Q脚本，那我们需要把这个搜脚本呢创建到我们的数据库当中，所以呢，我们可以打开一个命令行工具，当然了，你也可以用你喜欢的其他的任何的一个MYSQL的客户端哈，我在这里面直接执行命令行了，那我们使用my circlel-u root。

杠P好，然后接下来呢，我们找到这个脚本的物理路径。就是这个路径哈，复制一下。

然后呢，粘贴到我们的命令行当中，接下来回车输入密码，好，这样的话呢，我们的脚本呢，就还原到数据库当中去了。那接下来呢，我们来打开idea。那么我们需要呢，把刚才的啊，我们看到的下面的这个压缩包，也就是payment demo.z给它解压。然后呢，我们把这个解压缩后的目录呢，放到我们的应用程序的目录下，那我比如说放在D盘的DEMO下面，接下来呢，我用idea把它打开。选择我的。D盘的DEMO下的payment DEMO将这个项目打开，那如果你是第一次打开这个项目的话，肯定是要选择open了，我们选择payment DEMO。

那通常情况下，你的Mar问N的本地仓库的位置可能和我的不太一样哈，所以这块呢，还是建议大家在打开其他位置导进来的项目的时候呢，先要去看一看你的这个，比如说my home呀，还有我们的MYN的基础设置文件呀，另外最重要的就是你的MY问的本地仓库的位置，看看是不是你之前配置的那个哈，如果不是的话呢，一定要把这个MY的路径呢，改到你自己的本地仓库的位置当中去，好，这样的话呢，你下载。依赖的速度才会更快一些。因为我们的麦文当中一般都会配置阿里云的镜像嘛，对不对，但前提呢，是你在刚才的ma文配置当中选择的是你自己的配置文件，并且映射到的是你自己的Mar文的本地仓库的目录哈，所以这是导入其他啊人给你提供的项目的时候呢，第一件要做的事情，要确认的事情，然后接下来呢，就是我们打开resources目录下的这个application email文件，那这个文件当中呢，有一个my circle的连接字符串啊，还有username以及password，那么大家一定要确认和你自己的实际的情况是一致的，所以这是我们后端项目的打开，还有相关配置的一个确认，那么我们这个时候呢，就可以开始运行这个项目了，所以我们右键运行这个主程序。

好，我们的后端项目呢，是运行在8090端口上的，当然了，它只是我们的后端的接口而已，所以目前为止呢，我们还没有任何一个界面能够帮助我们展示这个项目，那接下来呢，我们就要运行前端的项目，好在。这个目录下呢，Payment front就是我们的前端项目了，我们把它解压。那因为这个项目呢，它是运行在node这样的一个环境下的，所以呢啊，我们需要把node这个安装包给它安装一下啊，你双击正常安装就可以了，因为我已经安装过了，所以呢我就不再去继续安装了，那么这面的安装没有什么特别的说明，还是像我们常规的其他的程序一样，大家不要安装在具有中文的这样的一个目录下哈，好，然后接下来呢，我们呃安装完这个node之后呢，你如果想用我们的相关的工具去查看甚至是编写这个前端代码的话，那么建议大家呢，安装这个Vs code的啊，那如果你不需要有这个前端代码的啊，一个查看和编写，就只想关注后端代码，前端就运行起来就就可以了，那么我们就不需要安装这个Vs code了，好，接下来呢，我们就把刚才我们解压的这个前端代码也复制到我们的项目目录下。

在这个DEMO下哈。我们把它复制过来。

然后接下来呢，我们。运行这个前端代码，首先呢，我们进入到payment front这个目录下，在这个位置呢，我们进入到我们的命令行，好CMD，然后呢，我们直接运行n PM run serve就可以了，那这样的话，我们的前端代码呢就可以运行起来了。好，它的默认端口呢，是8080，我们可以打开浏览器。那么在浏览器的地址栏当中输入。Local host8080就可以访问到我们的这个项目了，那么这个项目当中呢，微信支付的功能已经做好了哈，所以在这个地方我们可以正常的进行扫码支付啊，都是可以的，那么我们呢，又添加了和支付宝相关的这样的一些功能，所以呢，这个时候呢，我们可以点击这个支付宝，好，那这样的话呢，如果我们开发了后端接口的话，我们也可以看到支付宝相关的这样的一个二维码，那所以接下来呢，我们要做的事情呢，就是在这个应用程序当中做支付相关的开发了。

接下来呢，我们再来说一下使用Vs code来运行并打开这个前端项目的方式，那么你可以双击Vs code的安装包，然后呢进行安装就可以了。安装完成之后呢，我们。打开Vs code。然后在Vs code当中呢，你可以去添加一些扩展，那这个扩展呢，包含中文插件，就像我这样可以展示一些啊中文的菜单哈，那么我们选择Chinese这个就是中文插件。好，这就是中文插件啊，然后在这个地方点击安装就可以了，另外呢，除了这个中文插件之外，还建议大家安装这个啊v eqr，还有这个view helper这两个插件帮助咱们更好的去查看和编写view相关的程序，那么这些插件都安装完成之后呢，我们就可以去打开我们的应用程序了，那么打开的方式呢，是在这个地方我们可以选择文件，然后选择打开文件夹啊，选择我们的前端。

刚才文件复制的位置，DEMO payment DEMO front打开。那么现在我们要用Vs code把我们的这个应用程序打开，并且运行起来，所以呢，刚才我们在命令行当中打开的这个呃，程序呢，我们就要把它停掉，否则的话呢，这个端口就会冲突哈，所以我们在这边按CTRLC，然后Y啊，先把这边停掉。然后这面呢，我们直接啊，先进入到这个目录下，那默认情况下Vs code就会进入到我们刚才打开的这个文件夹所在的目录，那我们还是运行APMSO。

好，这样的话呢，我们就在Vs code当中打开并运行了我们的前端程序，那我们可以在这个地方按住CTRL，然后鼠标点击这个地址，好，它就会自动的在浏览器当中为我们打开这个前端页面了。