21-尚硅谷-微信支付-创建案例项目-搭建前端环境

接下来呢，我们来搭建项目的前端环境，那么搭建项目前端环境的第一个步骤呢，首先我们要安装node JS这个工具，那么node JS呢，是一个基于javascript引擎的一个服务器端环境，我们的前端项目在开发环境下运行的时候呢，要基于这个node JS，所以我们双击安装它。点击next。同意这个，然后点击我们可以选择一个安装目录，那我一般情况下，我会把我的这些和开发相关的程序呢，安装在我的。Development这个目录下，然后写一个node JS。接下来呢，我们点击。啊，直接选择next next就可以了。

最后呢，我们点击finish。这样呢，就完成了node JS的安装。那安装完成之后呢，我们打开一个命令行工具，在这个里面呢，输入node-V检查一下呢，有没有版本号啊显示出来，如果有的话呢，就说明我们的node环境呢，已经安装成功了，那这是第一个步骤，第二个步骤呢，我们就可以运行我们的前端项目了。在资源当中，大家找到payment DEMO front这个项目文件夹，那这就是我们的前项目，那上面这个payment DEMO呢，我们后项，那我们把前项呢后项起就可以了。后前项目这。在这个位置呢，我们输入CMD，打开一个命令行工具，然后我们来运行这个前端项目，那么具体的方式呢，是使用NPMNPM，这个命令呢，是刚才我们在安装node JS这个工具的时候呢，一并安装的，所以呢，现在呢，我们就可以直接使用它了，所以我们的命令呢，是n p run serve啊这个命令回车。

那通过这种方式呢，我们就可以运行我们的前端项目了。那我们的项目呢，已经在默认的8080端口启动了，因此呢，我们可以去访问一下这个8080端口。我们打开浏览器。在浏览器的地址栏当中输入LOCALHOST8080。我们就访问到我们的前端项目了，那因为我们的前端项目和我们的后端程序还没有做一个连接，所以呢，到目前为止呢，这个页面呢，它是有这样的一个报错信息的啊好，那我们来看一下啊，我们除了要做一个购买课程的页面之外呢，还要做一个我的订单页，另外呢，还有下载账单页，所以这个三个页面就是我们需要完成的页面，那么我们先来将我们刚才的这个后端接口和我们的前端项目呢做一个关联，那么具体的方式呢，就是因为我们前端的项目呢，它在8080端口上，而我们的后端项目呢，它在8090端口上，所以呢，这两个项目相当于是一个跨域，就是这两个字啊。

它是跨域的，因为我们的这个项目的前端和后端的通信的主要的方式呢，就是阿贾克斯请求的方式，那么在跨域的情况下呢，前端和后端是没有办法直接访问的，所以呢，我们必须得在我们的后端接口这个位置呢，开放跨域，那如何去做呢？我们打开我们的后端代码。找到我们的controller。在我们的controller上面呢，添加一个注解叫做cross orange，这个注解的意思呢，就是开放前端的跨域访问，好，那我们重新启动后端项目。

好，启动成功之后呢，我们再来刷新一下我们的前端页面。那么你会发现课程列表里面就展示了我们的数据库当中的四条记录。好，到这为止呢，我们的前端项目呢，就搭建出来了，并且呢，已经成功的和我们的后端接口进行了连接。那接下来的工作呢，就是我们要开发我们的后端接口了，但是如果你想要去查看一下前端代码的话，用什么样的编辑器比较好呢？这里面给大家推荐我这边使用的Vs code这个前端开发工具，那么大家呢，可以双击对它进行安装，因为我已经安装过了，所以呢，大家点击我同意此协议，然后下一步下一步安装就可以了啊好，那安装完成之后呢，我们就可以打开这个开发工具了，我在这个位置呢，打开这个工具。

好，这样的话呢，我们就打开了这个VS的这个工具，然后呢，我们就可以选择文件打开文件夹，那在这个位置选择我们啊项目的路径，我们就可以把这个DEMO目录打开了，打开之后呢，在这个里面payment DEMO front就是我们的前端项目了，那当然了，你第一次安装这个Vs code之后呢，有一些插件是需要安装的，那么我们点击这个扩展。然后呢，你可以安装这样三个插件，一个呢是中文的语言包，另外两个呢是帮助我们查看view代码和快速的编写view的代码片段的两个插件，那这样的话呢，可以帮助我们方便的使用这个VS扣的这个开发工具。

具体的插件的安装方式呢，就是在上面的这个搜索框当中搜索，比如说我要搜索这个中文语言包插件啊，那么这个地方呢，就会展示出啊，所有的和我们搜索的这个关键字匹配的这样的一些插件，那我们选择我们需要安装的这个中文简体语言包，然后在这个位置，如果你没安装的话，就点击安装就可以了，用同样的方式呢，大家需要安这三个插件。当然这个是如果你需要去编写前端代码，需要修改前端代码的情况下啊，建议大家按这几个。