1.0定义
前后端不分离模式
 
前后端分离是指前端页面看到的效果都是由后端控制,即后端渲染HTML页面,前端与后端的耦合度比较高
 前后端分离模式
 
后端仅返回前端所需要的数据,不在渲染HTML页面,不在控制前端的效果,至于前端展示什么效果,都有前端自己决定。
2.0 认识RestFulAPI
1.0 REST 是一种web服务的软件架构风格,描述网络中客户端与服务端的一种交互方式(REST风格网络接口)
2.0 Restfulapi风格就是把所有的数据当作资源,对表的操作就是对资源的操作
3.0 资源就是指URL,基于url对资源操作,web服务在url上支持一系列请求方法,如下
| http方法 | 数据处理 | 说明 | 
|---|---|---|
| POST | 新增 | 新增一个资源 | 
| GET | 获取 | 获取一个资源 | 
| PUT | 更新 | 更新一个资源 | 
| DELETE | 删除 | 删除一个资源 | 
3.0 通过项目回顾Djiango开发模式
1.熟悉Djiango项目流程创建
2.熟悉Djiango与HTML模版交互
3.熟悉Ajax前后端数据交互
4.熟悉ORM数据交互操作
3.1 创建一个djiango项目

 #创建一个myapp应用
python3  manage.py startapp  myapp
3.2 配置使用mysql数据库
3.2.1 启动一个本地可以连接的mysql数据库
docker run -d --name db  \
--network=host   \
-p 3306:3306 -v  \
mysqldata:/var/lib/mysql  \
-e MYSQL_ROOT_PASSWORD=123456 \
mysql:5.7 --character-set-server=utf8
3.2.2 安装pymysql工具
pip install pymysql
3.2.3 修改settins.py配置文件,注释原来的配置
 
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'mydb',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': '172.16.226.7',
        'PORT': '3306',
    }
}
3.2.4 修改myapp模块下__init__.py配置文件
import pymysql
pymysql.install_as_MySQLdb()

 
 3.2.5 创建数据表,并初始化数据
 
 
 python3  manage.py makemigrations  #生成初始化表sql
 python3  manage.py migrate         #执行初始化表sql

 说明初始化数据库成功
3.3 写入数据测试验证
3.3.1 编写主路由文件
 
 3.3.2 编写myapp 视图和路由文件
from  django.http import HttpResponse
def user(request):
    if request.method == "GET":
        return HttpResponse("获取用户")
    elif request.method == "POST":
        return HttpResponse("创建用户")
    elif request.method == "PUT":
        return HttpResponse("更新用户")
    elif request.method == "DELETE":
        return HttpResponse("删除用户")

 
from django.contrib import admin
from django.urls import path,include
from .  import views
urlpatterns = [
    path('user/', views.user),
]
验证
 
3.4 展示用户
3.4.1 编写视图
from django.shortcuts import render
# Create your views here.
from  django.http import HttpResponse
from .models import User
def user(request):
    if request.method == "GET":
        user_list = User.objects.all()
        return render(request, 'user_list.html',{'user_list': user_list})
    elif request.method == "POST":
        return HttpResponse("创建用户")
    elif request.method == "PUT":
        return HttpResponse("更新用户")
    elif request.method == "DELETE":
        return HttpResponse("删除用户")

 3.4.2 编写html模版文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列出所有用户</title>
</head>
<body>
<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>城市</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for i in user_list %}
        <tr>
            <td>{{ i.id }}</td>
            <td>{{ i.name }}</td>
            <td>{{ i.city }}</td>
            <td>{{ i.sex }}</td>
            <td>{{ i.age }}</td>
            <td>
                <button>编辑</button>
                <button>删除</button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</body>
</html>

 最终实现效果如图
3.5 实现新增用户功能
3.5.1 新增路由
 urlpatterns = [
    path('user/', views.user),
    path('user_add/', views.user_add)
]
3.5.2 新增视图
 
def  user_add(request):
    return render(request, 'user_add.html')
def user(request):
    if request.method == "GET":
        user_list = User.objects.all()
        return render(request, 'user_list.html',{'user_list': user_list})
    elif request.method == "POST":
        name = request.POST.get('name')
        city = request.POST.get('city')
        sex = request.POST.get('sex')
        age = request.POST.get('age')
        User.objects.create(
            name=name,
            city=city,
            sex=sex,
            age=age
        )
        return HttpResponse("创建用户成功!")
    elif request.method == "PUT":
        return HttpResponse("更新用户")
    elif request.method == "DELETE":
        return HttpResponse("删除用户")
3.5.3 新增html模版
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建用户</title>
</head>
<body>
<form action="/myapp/user/" method="post">
    姓名: <input type="text" name="name"><br>
    城市: <input type="text" name="city"><br>
    性别: <input type="text" name="sex"><br>
    年龄: <input type="text" name="age"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

 3.5.4 验证
 

 
3.6删除用户功能
3.6.1 编写视图
from django.shortcuts import render
from  django.http import HttpResponse,QueryDict,JsonResponse
from .models import User
def  user_add(request):
    return render(request, 'user_add.html')
def user(request):
    if request.method == "GET":
        user_list = User.objects.all()
        return render(request, 'user_list.html',{'user_list': user_list})
    elif request.method == "POST":
        name = request.POST.get('name')
        city = request.POST.get('city')
        sex = request.POST.get('sex')
        age = request.POST.get('age')
        User.objects.create(
            name=name,
            city=city,
            sex=sex,
            age=age
        )
        return HttpResponse("创建用户成功!")
    elif request.method == "PUT":
        return HttpResponse("更新用户")
    elif request.method == "DELETE":
        data = QueryDict(request.body) #封装删除函数
        id = data.get('id')
        try:
            User.objects.get(id=id).delete()
            res = {'code': 200, 'msg': '删除用户成功!'}
        except Exception:
            res = {'code': 500, 'msg': '删除用户失败!'}
        return JsonResponse(res)

 3.6.2 编写 html模版
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列出所有用户</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button><a href="/myapp/user_add" target="_blank">创建用户</a> </button>
<table border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>城市</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        {% for i in user_list %}
        <tr>
            <td>{{ i.id }}</td>
            <td>{{ i.name }}</td>
            <td>{{ i.city }}</td>
            <td>{{ i.sex }}</td>
            <td>{{ i.age }}</td>
            <td>
                <button>编辑</button>
                <button id="del" onclick="delUser(this)">删除</button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<script>
    function  delUser(obj) {
        confirm = confirm('是否删除用户?');
        if (confirm) {
            id = $(obj).parent().parent().find("td:eq(0)").text();
            //获取button父元素td,再获取td父元素tr,最后获取tr第一个值
            console.log(id)
            data ={'id':id};
            $.ajax({
                type: 'DELETE',
                url: '/myapp/user/',
                data: data,
                success: function (result) {
                    if(result.code === 200){
                        alert(result.msg);
                        location.reload();
                    } else {
                        alert(result.msg)
                    }
                }
            })
        }
    }
</script>
</body>
</html> 

 新增如图所示部分
 3.6.3 展示效果
 
 
 
 
 删除完会自动刷新,删除功能实现完成



















