用VScode来编写前后端——构建基础框架

前言

        我写这一个板块的原因是我参加了我们学校的新生项目课,需要创立一个系统,我们小组选的标题的基于计算机视觉的商品识别系统,那么我们需要一个网站来展示我们的功能,故写这些来记录一下自己,大家如果有什么问题的话可以在下面评论,我看到之后会积极回复,谢谢大家的点赞与收藏,我之后也可能会写一些关于我们算法的一些内容,大家敬请期待。

再次废话

        我们这里前端用我们的HTML  CSS  JavaScript来编写;后端则是用我们的python的Flask框架,开发在我们的VScode里面,这里就不会补充一些基础知识了,以后如果有时间的话我会单独来讲一讲基础知识

        其次我们想要做的一个界面要求:两个选项,一个是用户,一个是商家,用户点击之后打开我们的摄像头,识别商品,并且报出价格,(进行付款);商家后台需要记录商品数量,商品的一个交易记录


一、用vscode创建我们的基础框架

1、创建文件夹

我们的VScode界面长这个样子:

点击我们左上角的file,接着点击我们的open folder即打开我们的文件夹,但是在此之前我们需要自己创建一个文件夹,我就在我的D盘创建了一个“Vscode前后端开发_4”该文件夹:

那么我们随即在我们的Vscode中打开你所创建的文件夹:

打开之后我们的界面是这个样子的:

可以看见我们有四个操作方式,第一个是新增一个文件,第二个是在该文件夹下再创建一个小文件夹,第三个与第四个我也没试过

之后如果研究了会补上来的!

随即我们创建一个小文件夹:Templates(前端):

那么我们的基础框架就算搞好了,这个小文件夹是来放我们的前端文件,该文件夹之外则是放我们的后端文件(这里我们选择的是pythonflask框架)


2、创建前端文件(html)

我们在该小文件夹下创建一个文件:

编译器会自动根据你设置的文本名后缀来判断是什么类型的文件,这里我们后缀是html那么它就会识别为html文件。那么我们就可以写我们的前端了(可以借助我们的AI来编写)

写完之后我们需要保存(可以用快捷键ctrl + s)保存完之后我们在我们的文件夹中打开即可(一定要保存!):

点击即可,这里就不放出我的杰作了 


3、创建后端文件(.py)

写完了前端我们就需要写我们的后端:

在我们的大文件夹下创建我们的python文件:

当然你也可以拖拽该文件来实现放在不同的位置

但是 ! 我们这里的Vscode是没有配置python环境的,需要我们自己去配置:

首先我们打开这个界面:

在输入框里面输入python,随后下载python即可,随后我们需要配置我们的python环境,即我们的python解释器:

按下我们的ctrl+shift+p即可调出我们的命令框,当然也可以用普通方法,大家搜一下就可以了:

找到我们的select interpreter来配置我们的python解释器

当一切都搞定之后我们就可以在python文件中来写我们的后端了(同样我们可以借助我们的AI)


4、创建本地服务器:

我们知道前端和后端需要一个服务器来进行连接,前端发送请求给服务器,服务器处理之后发送给后端,之后后端将返回结果给服务器,随后服务器把结果给到前端。

这里我们创建的是本地服务器,需要用到我们VScode

下载之后我们打开前端就可以直接右键html文件:

 点击 open with live server便可以用我们的本地服务器打开前端,同时与我们的后端也可以构建联系



二、一些问题:

首先我们的flask框架是需要我们下载包/库的,这里需要我们注意