基于Django图像识别系统毕业设计（付源码）

@_猿来如此2024-05-09 13:09

前言：Django是一个由Python编写的具有完整架站能力的开源Web框架，Django本身基于MVC模型，即Model（模型）+View（视图）+ Controller（控制器）设计模式，因此天然具有MVC的出色基因：开发快捷、部署方便、可重用性高、维护成本低等。Python加Django是快速开发、设计、部署网站的最佳组合。

目录

一.Django安装与使用

1.1环境准备

1.2创建虚拟环境

二.配置Pycharm解析器

2.1Pycharm配置

2.2settings.py配置

2.3manage.py配置

三.核心代码

四.源码获取

一.Django安装与使用

1.1环境准备

Pycharm下载地址：Pycharm 点此链接下载，选好安装路径，直接下一步，finish

Miniconda下载地址：Miniconda 安装下图的版本即可

1.2创建虚拟环境

①打开刚下好的Aanconda，输入命令Conda create -n AI python=3.8（以AI为例）

②使用conda env list 命令可以查看下载的虚拟环境

③使用conda activate AI 命令，进入虚拟环境，补充使用D：命令可以切换硬盘

④虚拟环境下输入命令django-admin startproject myDjango （myDjango项目名）创建Django项目

⑤使用命令cd myDjango 进入项目

⑥使用命令python manage.py runserver 启动项目，访问127.0.0.1:8000 如下图即成功

二.配置Pycharm解析器

2.1Pycharm配置

①点击File->settings->项目->Python Interpreter->选择创建的虚拟环境

2.2settings.py配置

①用Pycharn打开前面创建的项目目录，找到ALLOWED_HOSTS =['127.0.0.1','ip地址']

以管理员身份运行cmd，输入命令ipconfig 就可以查看ip地址，输入ipv4的地址

②settings.py里面配置路径，templates 是我创建的文件夹用来存放html资源，构建页面的

③static用来存放静态资源，如css,js,img。session是存储于服务器端的特殊对象，服务器会为每一个游览器创建一个唯一的session。这个session是服务器端共享，每个游览器(客户端)独享的。session存储数据，实现数据共享。

2.3manage.py配置

①在Parameters中输入 runserver 0.0.0.0:8000

到这里，Django配置已经完成，接下来就可以编写代码了，实现相应的功能

三.核心代码

①登录页面完整代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Login</title>

    <link href="../static/css/style.css" rel="stylesheet">
    <link href="../static/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="../static/js/html5shiv.js"></script>
    <script src="../static/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="login-body">

<div class="container">

    <form class="form-signin" id="login_form" >
        {% csrf_token %}
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">基于django的草药识别系统</h1>
            <img src="../static/images/login-logo.png" alt=""/>
        </div>
        <div class="login-wrap">
            <input type="text" class="form-control" placeholder="用户名" autofocus name="username" id="username">
            <input type="password" class="form-control" placeholder="密码" name="pwd" id="pwd">

            <button class="btn btn-lg btn-login btn-block" type="button" id="submit_btn" disabled>
                <i class="fa fa-check"></i>
            </button>

            <div class="registration">
                还未是会员?
                <a class="" href="registration.html">
                    注册
                </a>
            </div>
            <label class="checkbox">
                <input type="checkbox" value="remember-me"> 记住我
                <span class="pull-right">
                    <a data-toggle="modal" href="#myModal"> 忘记密码？</a>

                </span>
            </label>

        </div>

        <!-- Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Forgot Password ?</h4>
                    </div>
                    <div class="modal-body">
                        <p>Enter your e-mail address below to reset your password.</p>
                        <input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">

                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                        <button class="btn btn-primary" type="button">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- modal -->

    </form>

</div>
<script src="../static/js/jquery-1.10.2.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/modernizr.min.js"></script>
<script>

   function showErrCss(id,msg){
      $(id).css("border","2px solid red");
      $("#submit_btn").attr("disabled",true);
      $(id).val("");
      $(id).attr("placeholder",msg);
   }

   $().ready(function(){
        var username_state = false;
        var passwd_state = false;

        $("#username").blur(function(){
            if($(this).val() == ''){
                showErrCss(this,"用户名不能为空，请输入");
            }else{
                $(this).css("border","1px solid #eaeaec");
                username_state = true;
                if(passwd_state){
                    $("#submit_btn").attr("disabled",false);
                }
            }
        });
        $("#pwd").blur(function(){
            if($(this).val() == '' ){
               showErrCss(this,"密码不能为空，请输入");
            }else if(! /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,8}$/.test($(this).val())){
                showErrCss(this,"密码格式有误，要求6-8位字母+数字");
            }else{
                $(this).css("border","1px solid #eaeaec");
                passwd_state = true;
                if(username_state){
                    $("#submit_btn").attr("disabled",false);
                }
            }
        });

        $("#submit_btn").click(function(){
            $.post("/login/",
                    $("#login_form").serialize(),
                    function(data,statu){
                        if(data.code == 101){
                            window.location.href = "/index/"
                        }else if(data.code == 102){
                            showErrCss("#username",data.msg)
                        }else if(data.code == 103){
                            showErrCss("#pwd",data.msg)
                        }
                    });
        });
   });
</script>

</body>
</html>

②首页页面完整代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>智能服务</title>
    <!--ios7-->
    <link rel="stylesheet" type="text/css" href="../static/js/ios-switch/switchery.css" />
</head>

<body class="sticky-header">

<section>
    <div class="left-side sticky-left-side">
        <div class="left-side-inner">

            <!--sidebar nav start-->
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li class="active"><a href="index.html"><i class="fa fa-home"></i> <span>智能服务</span></a></li>
                <li class="menu-list"><a href=""><i class="fa fa-laptop"></i> <span>视觉智能服务</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="blank_page.html">图像识别</a></li>
                        <li><a href="boxed_view.html">图像搜索</a></li>
                        <li><a href="leftmenu_collapsed_view.html"> 图像鉴定</a></li>
                        <li><a href="horizontal_menu.html">视频追踪</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href=""><i class="fa fa-book"></i> <span>语音智能服务</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="general.html"> 语音识别</a></li>
                        <li><a href="buttons.html"> 语音生成</a></li>
                    </ul>
                </li>
                <li class="menu-list"><a href=""><i class="fa fa-book"></i> <span>自然语言智能服务</span></a>
                    <ul class="sub-menu-list">
                        <li><a href="general.html"> OCR</a></li>
                        <li><a href="buttons.html"> 文字生成</a></li>
                        <li><a href="tabs-accordions.html"> 机器翻译</a></li>
                        <li><a href="typography.html">智能聊天</a></li>
                    </ul>
                </li>
            </ul>
            <!--sidebar nav end-->

        </div>
    </div>
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

            <!--toggle button start-->
            <a class="toggle-btn"><i class="fa fa-bars"></i></a>
            <!--toggle button end-->

            <!--search start-->
            <form class="searchform" action="index.html" method="post">
                <input type="text" class="form-control" name="keyword" placeholder="Search here..." />
            </form>
        </div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
            <h3>
                智能服务
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">智能服务</a>
                </li>
                <li class="active"> 视觉智能服务 </li>
            </ul>
            <div class="state-info">
                <section class="panel">
                    <div class="panel-body">
                        <div class="summary">
                            <span>今日访问量</span>
                            <h3 class="red-txt">45,600</h3>
                        </div>
                        <div id="income" class="chart-bar"></div>
                    </div>
                </section>
                <section class="panel">
                    <div class="panel-body">
                        <div class="summary">
                            <span>总访问量</span>
                            <h3 class="green-txt">45,600</h3>
                        </div>
                        <div id="expense" class="chart-bar"></div>
                    </div>
                </section>
            </div>
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row">
                <div class="col-lg-7">
                <section class="panel">
                    <header class="panel-heading">
                        图像识别
                        <span class="tools pull-right">
                            <a class="fa fa-chevron-down" href="javascript:;"></a>
                            <a class="fa fa-times" href="javascript:;"></a>
                         </span>
                    </header>
                    <div class="panel-body">
                        <div class="row">

                            <div class="col-md-8">
                                <form class="form-horizontal bucket-form">
                                    {% csrf_token %}
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">识别类型</label>

                                        <div class="col-sm-9 icheck ">

                                            <div class="flat-grey ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="1">
                                                    <label>动物识别 </label>
                                                </div>
                                            </div>
                                            <div class="flat-red ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="2">
                                                    <label>植物识别 </label>
                                                </div>
                                            </div>

                                            <div class="flat-green ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="3">
                                                    <label>果蔬识别</label>
                                                </div>
                                            </div>
                                            <div class="single-row"></div>
                                            <div class="flat-blue">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="4">
                                                    <label>logo识别</label>
                                                </div>
                                            </div>

                                            <div class="flat-yellow ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="5">
                                                    <label>红酒识别 </label>
                                                </div>
                                            </div>

                                            <div class="flat-purple ">
                                                <div class="radio ">
                                                    <input tabindex="3" type="radio"  name="demo-radio" value="6">
                                                    <label>货币识别 </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group last">
                                    <label class="control-label col-sm-3">图像上传</label>
                                    <div class="col-sm-9">
                                        <div class="fileupload fileupload-new" data-provides="fileupload" style=" margin-left: 20px">
                                            <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                                <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="">
                                            </div>
                                            <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                            <div>
                                                   <span class="btn btn-default btn-file">
                                                   <span class="fileupload-new"><i class="fa fa-paper-clip"></i> 选择图像</span>
                                                   <span class="fileupload-exists"><i class="fa fa-undo"></i> 修改</span>
                                                   <input type="file" class="default" id="file">
                                                   </span>
                                                <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</a>
                                            </div>
                                        </div>
                                        <br>
                                        <div class=" col-lg-10" style="margin-left:5px">
                                            <button class="btn btn-primary" type="button" id="btn">提交</button>
                                        </div>
                                    </div>
                                </div>
                                    <div class="form-group" style="margin-left:70px">
                                        <span class="label label-danger ">注意!</span>
                                             <span>
                                             支持的浏览器包括 Firefox, Chrome, Opera,Safari and IE10
                                             </span>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

                <div class="col-md-5">
                    <div class="panel">
                        <header class="panel-heading">
                            预测结果
                            <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down"></a>
                                <a href="javascript:;" class="fa fa-times"></a>
                             </span>
                        </header>
                        <div class="panel-body">
                            <ul class="goal-progress">
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href='' id="text1" >结果一</a>
                                            <div>
                                                <a href="" id="link">百度百科</a>
                                                <p id="title"> 详情：</p>
                                            </div>
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" id='pros' style="width:0%">
                                                <span class="" id="val1"></span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href="#" id="text2">结果二</a>
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" id='pros1' style="width:0%">
                                                <span class="" id="val2"></span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href="#" id="text3">结果三</a>
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" id='pros2' style="width:0%">
                                                <span class="" id="val3"></span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href="#" id="text4">结果四</a>
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" id='pros3' style="width:0%">
                                                <span class="" id="val4"></span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>

                                    <div class="details">
                                        <div class="title">
                                            <a href="#" id="text5">结果五</a>
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" id='pros4' style="width:0%">
                                                <span class="" id="val5"></span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2023 &copy; 猿来如此 </a>
        </footer>
        <!--footer section end-->

    </div>
    <!-- main content end-->
</section>

<script>
    $().ready(function(){
        $("#btn").click(function(){
            var formdata = new FormData()
            formdata.append("typeRadio",$('input:radio:checked').val());
            formdata.append("csrfmiddlewaretoken",$('[name="csrfmiddlewaretoken"]').val());
            formdata.append("image",$("#file")[0].files[0]);

            $.ajax({
                type:"post",
                url:"/recongnize/",
                data:formdata,
                processData:false,
                contentType:false,
                success:function(data,status){
                    alert(data.data.result[0].baike_info.baike_url)
                    alert(data.data.result[0].baike_info.description)

                    var loaded = parseInt(data.data.result[0].score*100)+"%";
                    $('#pros').width(loaded);
                    $("#text1").html(data.data.result[0].name);
                    $("#val1").html(data.data.result[0].score);
                    $("#title").html(data.data.result[0].baike_info.description)
                    $("#link").html(data.data.result[0].baike_info.baike_url)



                    var loaded = parseInt(data.data.result[1].score*100)+"%";
                    $('#pros1').width(loaded);
                    $("#text2").html(data.data.result[1].name);
                    $("#val2").html(data.data.result[1].score);


                    var loaded = parseInt(data.data.result[2].score*100)+"%";
                    $('#pros2').width(loaded);
                    $("#text3").html(data.data.result[2].name);
                    $("#val3").html(data.data.result[2].score);

                    var loaded = parseInt(data.data.result[3].score*100)+"%";
                    $('#pros3').width(loaded);
                    $("#text4").html(data.data.result[3].name);
                    $("#val4").html(data.data.result[3].score);

                    var loaded = parseInt(data.data.result[4].score*100)+"%";
                    $('#pros4').width(loaded);
                    $("#text5").html(data.data.result[4].name);
                    $("#val5").html(data.data.result[4].score);

                }
            })
        })
    })


</script>

</body>
</html>

css，html，js，py等文件太多，无法全部展示，篇幅过长会使读者疲惫，只能展示核心代码

四.源码获取

私信获取源码，有问题可以关注留言或私信，计算机毕业设计(小程序，网页设计，数据库，php开发等)

相关推荐
游客5204 分钟前
opencv中的各种滤波器简介
图像处理·人工智能·python·opencv·计算机视觉
Eric.Lee20217 分钟前
moviepy将图片序列制作成视频并加载字幕 - python 实现
开发语言·python·音视频·moviepy·字幕视频合成·图像制作为视频
goTsHgo9 分钟前
在 Spring Boot 的 MVC 框架中 路径匹配的实现 详解
spring boot·后端·mvc
Dontla11 分钟前
vscode怎么设置anaconda python解释器（anaconda解释器、vscode解释器）
ide·vscode·python
waicsdn_haha21 分钟前
Java/JDK下载、安装及环境配置超详细教程【Windows10、macOS和Linux图文详解】
java·运维·服务器·开发语言·windows·后端·jdk
Q_192849990631 分钟前
基于Spring Boot的摄影器材租赁回收系统
java·spring boot·后端
良许Linux35 分钟前
0.96寸OLED显示屏详解
linux·服务器·后端·互联网
求知若饥1 小时前
NestJS 项目实战-权限管理系统开发（六）
后端·node.js·nestjs
qq_529025291 小时前
Torch.gather
python·深度学习·机器学习
数据小爬虫@1 小时前
如何高效利用Python爬虫按关键字搜索苏宁商品
开发语言·爬虫·python
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play