前言
我写这一个板块的原因是我参加了我们学校的新生项目课,需要创立一个系统,我们小组选的标题的基于计算机视觉的商品识别系统,那么我们需要一个网站来展示我们的功能,故写这些来记录一下自己,大家如果有什么问题的话可以在下面评论,我看到之后会积极回复,谢谢大家的点赞与收藏,我之后也可能会写一些关于我们算法的一些内容,大家敬请期待。
再次废话
我们这里前端用我们的HTML CSS JavaScript来编写;后端则是用我们的python的Flask框架,开发在我们的VScode里面,这里就不会补充一些基础知识了,以后如果有时间的话我会单独来讲一讲基础知识
其次我们想要做的一个界面要求:两个选项,一个是用户,一个是商家,用户点击之后打开我们的摄像头,识别商品,并且报出价格,(进行付款);商家后台需要记录商品数量,商品的一个交易记录
一、用vscode创建我们的基础框架
1、创建文件夹
我们的VScode界面长这个样子:
点击我们左上角的file,接着点击我们的open folder即打开我们的文件夹,但是在此之前我们需要自己创建一个文件夹,我就在我的D盘创建了一个“Vscode前后端开发_4”该文件夹:
那么我们随即在我们的Vscode中打开你所创建的文件夹:
打开之后我们的界面是这个样子的:
可以看见我们有四个操作方式,第一个是新增一个文件,第二个是在该文件夹下再创建一个小文件夹,第三个与第四个我也没试过
之后如果研究了会补上来的!
随即我们创建一个小文件夹:Templates(前端):
那么我们的基础框架就算搞好了,这个小文件夹是来放我们的前端文件,该文件夹之外则是放我们的后端文件(这里我们选择的是python的flask框架)
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框架是需要我们下载包/库的,这里需要我们注意