pyCharm社区版+django创建Web项目

古城微笑少年丶 2021-09-28 01:26 480阅读 0赞

**1.安装django**

pip install django

**2.使用找到django的安装路径，将其添加到环境变量path中。(注意加上分号)**  
![在这里插入图片描述][20181226204021109.png]

**3.在想创建项目的目录下，右键进入Powershell（也可以通过cmd进入目录），创建项目**

django-admin startproject 【项目名】

**4.在pycharm中创建项目，跟刚才项目名字一样，路径也一样，就会提示项目已存在，是否从已有源代码创建项目，选择是。**  
![在这里插入图片描述][20181226204533597.png]

**5.得到的文件夹为：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0ODU0ODA_size_16_color_FFFFFF_t_70]

6.\*\*创建templates文件夹，\*\*用于存放HTML文件。  
\*\*创建static文件夹，\*\*用于存放css、img、js等资源文件  
\*\*创建Process文件夹，\*\*用于存放后台处理过程，[例如在该文件加下面创建views.py][views.py]

**7.修改setting.py文件的配置。**  
a)设置HTML的路径：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0ODU0ODA_size_16_color_FFFFFF_t_70 1]  
将在DIRS中加上：os.path.join(BASE\_DIR, ‘templates’)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0ODU0ODA_size_16_color_FFFFFF_t_70 2]  
b)配置静态文件的位置：即css、js、img等文件的根目录  
在setting.py最后面加上

STATICFILES_DIRS=[
        (os.path.join(BASE_DIR,'static'))
    ]

![在这里插入图片描述][20181226205525618.png]

然后在html中如果要使用css等文件，src的属性值设为‘src=“static/\*”’（ \*号表示文件的在static下面的路径）

例子：  
**1.MainHTML**

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    	<meta http-equiv="Expires" content="0">
    	<meta http-equiv="Pragma" content="no-cache">
    	<meta http-equiv="Cache-control" content="no-cache">
    	<meta http-equiv="Cache" content="no-cache">
        <title>DEMO</title>
        <script type="text/javascript" src="static/commonjs/jquery-2.1.3.min.js"></script>
    	<script type="text/javascript">
    		function query()
    		{
    			var question = $("#question").val();
    			if(question != "" )
    			{
    				$.ajax({
    					type: "POST",
    					url: '/query',
    					data: "question="+question,
    					dataType: "json",
    					success : function(r) {
    						console.log(r);
    						if (r.isSuccess) {
    							 alert(r.msg);
    						} else {
    							alert(r.msg);
    						}
    					},
    					error : function(xhr, type, exception) {
    						
    						$("#answer").html('系统异常！');
    					}
    				});
    			}
    		}
    	</script>
    </head>
    
    <body>
       <div class="title">
    		<H2>WebDemo</H2>
       </div>
    	<div class="main">
    		<input class="question" id="question" name="question"/>
    		<button id="submit" name="submit" onclick="query()">搜索</button>
    	</div>
    </body>
    </html>

**2.在views.py中添加处理该请求的函数**

from django.http import JsonResponse
    from django.shortcuts import render
    
    # Create your views here.
    def index(request):
        return render(request,'Main.html')#实际上是起始页
    
    from django.shortcuts import  render
    def query(request):
        if request.is_ajax():
            print(request.body)
            print(request.POST)
            question = request.POST.get('question', '')
            return JsonResponse({"isSuccess":True,'msg':'测试成功，您提交的问题为'+question,'status': 200, 'message': 'add event success'})

**3.在urls.py中添加路径**  
注意要导入 [views.py][views.py 1]

from django.contrib import admin
    from django.urls import path
    from Process import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path(r'', views.index, name='Main'),#起始页
        path("query", views.query, name='query'),#url为‘query’对应的处理方法为views.py中的query
    ]

4.开启服务  
python [manage.py][] runserver localhost:8008

5.在浏览器中输入http://localhost:8008/  
界面如下：  
![在这里插入图片描述][20181226211908361.png]  
但是点击搜索的时候发生了异常，这时，需要将setting.py文件中注释下图内容。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0ODU0ODA_size_16_color_FFFFFF_t_70 3]  
刷新页面，在文本框中输入查询内容，点击【搜索】按钮，后弹出对话框  
![在这里插入图片描述][20181226212039891.png]  
证明数据提交成功，并成功接收到返回的json数据。注意，返回的数据一定要用 django的JsonResponse对JSON数据进行封装

JsonResponse({"isSuccess":True,'msg':'测试成功','status': 200, 'message': 'add event success'})

以上。

[20181226204021109.png]: /images/20210923/0206c179b7034cc7a9918a81b042bb43.png
[20181226204533597.png]: /images/20210923/bb370e3b8d1a46a6bccbf16691df194a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0ODU0ODA_size_16_color_FFFFFF_t_70]: /images/20210923/af9ebec7663f4ae5bcf85bd0ae5fcd4c.png
[views.py]: http://xn--views-bi1hy8cb8a0ym7mbs22an0gf0txtvor5kuoqb.py
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0ODU0ODA_size_16_color_FFFFFF_t_70 1]: /images/20210923/c088e918c0c6443ab4b615c6443da2b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0ODU0ODA_size_16_color_FFFFFF_t_70 2]: /images/20210923/e3316c8b6d1e42babd485a0cc26bc66e.png
[20181226205525618.png]: /images/20210923/a9cf411b121a4bbe9527436c798c037d.png
[views.py 1]: http://views.py
[manage.py]: http://manage.py
[20181226211908361.png]: /images/20210923/4b497a9e305f430b8056cbbf29ce3806.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0ODU0ODA_size_16_color_FFFFFF_t_70 3]: /images/20210923/9d5d4aaaa81d4cbd984e8e955e749288.png
[20181226212039891.png]: /images/20210923/e767012006624b81b92b1a273869ace6.png