Django+Vue+LayUI的CRUD

最新推荐文章于 2024-06-07 16:04:43 发布
最新推荐文章于 2024-06-07 16:04:43 发布
阅读量1.3k 收藏 5
点赞数 2
分类专栏： Python Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lhc0512/article/details/85175981
版权

学习python,顺便搞一下web开发,python的最完整的框架有Django,Django的模版引擎开发和Java的JSP,Thymeleaf很像,不想使用,就使用RESTful的开发方式.前端基于Vue,后台基于Django
学习一项技术,不如做点小东西,还是常用的CRUD
主页如下
在这里插入图片描述

项目的目录结构如下
在这里插入图片描述
model


class Person(models.Model):
    id=models.AutoField(primary_key=True)
    name =models.CharField(max_length=20)
    password=models.CharField(max_length=20)
    email=models.CharField(max_length=20)

urls

urlpatterns = [
    path('getAll',views.getAll),
    path('getById/<int:id>',views.getById),
    path('update/<int:id>/<str:name>/<str:password>/<str:email>', views.update),
    path('deleteById/<int:id>', views.delete),
    path('addStudent/<str:name>/<str:password>/<str:email>', views.addStudent),
]

views

def getAll(request):
    students = Person.objects.all()
    response_data = {}
    try:
        response_data['result'] = 'Success'
        response_data['message'] = serializers.serialize('json', students)
    except:
        response_data['result'] = 'Ouch!'
        response_data['message'] = 'Script has not ran correctly'
    return HttpResponse(JsonResponse(response_data), content_type="application/json")

def getById(request,id):
    rt=Person.objects.get(id=id)
    rt.__dict__.pop("_state")
    return JsonResponse(rt.__dict__, safe=False)

def update(request,id,name,password,email):
    print(name)
    print(password)
    p=Person(id=id,name=name,password=password,email=email)
    p.save()
    return HttpResponse("success")

def delete(request,id):
    Person.objects.filter(id=id).delete()
    return HttpResponse("success")
    
def addStudent(request,name,password,email):
    p=Person(name=name,password=password,email=email)
    p.save()
    return HttpResponse("add success")

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/layui.all.js"></script>
</head>
<body>

<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-xs4"  style="padding: 5px">
    </div>
    <div class="layui-col-xs4">
        <div id="app">
            <table class="table table-hover">
                <tr>
                   <td>id</td>
                    <td>username</td>
                    <td>password</td>
                    <td>email</td>
                      <td>修改</td>
                      <td>删除</td>
                </tr>
                  <tr v-for="s in students">
                   <td>{{ s.pk }}</td>
                    <td>{{ s.fields.name }}</td>
                    <td>{{ s.fields.password }}</td>
                    <td>{{ s.fields.email }}</td>
                       <td><button data-method="setTop" @click="update(s.pk)" class="layui-btn">修改</button></td>
                      <td><button class="layui-btn layui-btn-danger" @click="deleteStudent(s.pk)">删除</button></td>
                </tr>
            </table>
           <button class="layui-btn" @click="addStudent">添加</button>
        </div>
    </div>
  </div>
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
          msg:'',
          students:[]
      },
      methods:{
          update(pk){
              　window.location.href = 'update.html?id='+pk;
          },
          deleteStudent(pk){
              axios.get('/student/deleteById/'+pk).then((response)=> {
             alert(response.data);
                  app.initStudent()
          });
          },
          initStudent(){
              axios.get('/student/getAll').then((response)=> {
              // 得到的是字符串,而不是对象数组 需要转换为对象数组
              s=JSON.parse(response.data.message);
              app.students=s
          });
          },
          addStudent(){
              　window.location.href = "add.html";
          }
      },
      created(){
          this.initStudent()
        }
})
</script>
</body>
</html>

update.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update</title>
    <link rel="stylesheet" href="../css/layui.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
</head>
<body>

<div  id="app" class="layui-container">
  <div class="layui-row">
    <div class="layui-col-xs4"  style="padding: 5px">
    </div>
    <div class="layui-col-xs4">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>Update</legend>
</fieldset>

     <div class="layui-form-item">
    <label class="layui-form-label" >id</label>
    <div class="layui-input-block">
      <input type="text" name="id" autocomplete="off"  v-model="student.id" :placeholder=student.id class="layui-input">
    </div>
  </div>

     <div class="layui-form-item">
    <label class="layui-form-label">name</label>
    <div class="layui-input-block">
      <input type="text" name="name" autocomplete="off"  v-model="student.name" :placeholder=student.name class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">password</label>
    <div class="layui-input-block">
      <input type="text" name="password" autocomplete="off"  v-model="student.password"  :placeholder=student.password class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">email</label>
    <div class="layui-input-block">
      <input type="text" name="email"  v-model="student.email" :placeholder=student.email autocomplete="off" class="layui-input">
    </div>
  </div>

    <button class="layui-btn" @click="update" >Update</button>




    </div>
  </div>
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
          msg:'test',
          student:{}
      },
      methods:{
        update(){
            alert(JSON.stringify(app.student))
            // update  dao
            axios.get("/student/update/"+app.student.id+"/"+app.student.name+"/"+app.student.password+"/"+app.student.email).then((response)=> {
                alert(response.data)
          });
              window.location.href = 'index.html';
        }
      },
      created(){
         search= window.location.search;
         id=search.substr(4,2)
          axios.get('/student/getById/'+id).then((response)=> {
              this.student=response.data
          });
        }
})
</script>
</body>
</html>

add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add</title>
    <link rel="stylesheet" href="../css/layui.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
</head>
<body>

<div  id="app" class="layui-container">
  <div class="layui-row">
    <div class="layui-col-xs4"  style="padding: 5px">
    </div>
    <div class="layui-col-xs4">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>Update</legend>
</fieldset>

     <div class="layui-form-item">
    <label class="layui-form-label">name</label>
    <div class="layui-input-block">
      <input type="text" name="name" autocomplete="off"  v-model="student.name" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">password</label>
    <div class="layui-input-block">
      <input type="text" name="password" autocomplete="off"  v-model="student.password"  class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">email</label>
    <div class="layui-input-block">
      <input type="text" name="email"  v-model="student.email"  autocomplete="off" class="layui-input">
    </div>
  </div>

    <button class="layui-btn" @click="addStudent" >Add</button>
    </div>
  </div>
</div>
<script>
    var app = new Vue({
      el: '#app',
      data: {
          msg:'test',
          student:{}
      },
      methods:{
        addStudent(){
            alert(JSON.stringify(app.student))
            // update  dao
            axios.get("/student/addStudent/"+app.student.name+"/"+app.student.password+"/"+app.student.email).then((response)=> {
                alert(response.data)
          });
            window.location.href = 'index.html';
        }
      },
})
</script>
</body>
</html>
lhc0512
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
集成Layui前端+Django
awu_ya的博客
05-16 1362
这是前端页面的样式展示，下面我们开始配置并做一下增删查改的功能。url之前介绍了，也就是我们常说的路由层。路由是根据不同的url地址展示不同的内容或页面，一般在【urls.py】中配置访问的URL。这是项目的结构图，把layui的前端放到templates和static静态资源下，同时templates和static放到子应用下，就可以了。这个博客下的path的函数介绍特别详细：https://www.cnblogs.com/renshaoqi/p/10537279.html。
Python+Django+VUE后台管理系统
04-03
**Python+Django+Vue 后台管理系统** 这个项目是一个基于 Python 的 Django 框架与前端 Vue.js 框架构建的后台管理系统。Django 是一个强大的 Web 开发框架，它提供了完整的功能来快速开发高效、可维护的网站。Vue....
Django+Layui通用后台权限管理系统
一米阳光的博客
03-09 195
一款 Python 语言基于Django、Layui、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架。
Python Django + Layui前后端管理系统 完整代码
最新发布
Play_Sai的博客
06-07 618
建好表之后使用python manage.py makemigrations,python manage.py migrate进行数据库迁移。主路由是在跟setting同级的urls中，子路由在注册的app中的urls中，没有则自己创建。配置数据库，可以使用mysql,也可以使用自带的sqlite3。4.实现某一页面（案例页面）的增删改查的前后端完整代码。3.登录及注册的实现，效果图及完整代码如下。案例页面的首页（前端代码）案例页面的增加及编辑代码。5.配置主路由及子路由。6.配置setting。
python留守儿童信息管理系统django+vue
QQ242219979的博客
02-10 759
文章介绍了留守儿童信息管理系统的系统分析部分，包括可行性分析等，系统设计部分主要介绍了系统功能设计和数据库设计。管理员功能有个人中心，用户管理，留守儿童管理，医院信息管理，医疗服务管理，爱心捐赠管理，留言板管理，系统管理。用户可以注册登录，查看留守儿童信息，对留守儿童信息进行联系医生和爱心捐赠。因而具有一定的实用性。本站是一个B/S模式系统，后台采用django框架，前台采用VUE和layui框架，数据库采用MYSQL数据库设计开发，充分保证系统的稳定性。使用PyCharm 导入项目，修改配置，运行项目；
django+layui表格数据管理
qq_43606857的博客
03-28 4629
之前做项目对表格数据管理一直都很头疼，表格通常会包含分页、筛选、单行表格数据操作、多行表格数据操作、排序这些功能。同时对vue这个前端框架不熟悉，前后端不分离导致在表格这一项上需要捋大量逻辑、写大量的代码。后来试了一下layui这个前端框架中的表格，意外发现十分好用 layui layui框架和其他前端框架并没有什么区别，拥有比较齐全的组件，使用文档看的是有点难受，因为代码部分和组件部分各自堆积在一起，找起来让人头疼。 虽然但是，用起来的时候还是很香的layui官网 layui表格 查看layui表格文档，
Django+Vue+ElementUI框架Web开发搭建
一米阳光的博客
03-21 69
一款 Python 语言基于Django、Vue2.x、ElementUI、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮等等一系列个性化、轻量级的组件，是一款真正意义上实现低代码开发的敏捷开发框架。
Django+Vue实现移动端二手交易应用后端部分.zip
03-03
3. **CRUD操作**: 创建(Create)、读取(Retrieve)、更新(Update)和删除(Delete)是Web应用的基础操作，Django后端和Vue前端通过API完成这些操作。 4. **错误处理和状态码**: 前后端之间通过HTTP状态码来识别请求的...
基于Django+DRF实现的企业管理系统源码，前后端分离，前端Vue，后端Django
06-24
这是一个使用Python的Django框架和REST Framework（DRF）构建的企业管理系统源代码项目，结合了前端的Vue.js技术实现前后端分离。以下是对这个项目的关键知识点的详细解释： 1. **Django**: Django是Python中的一款...
基于Django(DRF)的前后端分离电商项目;django+vue.zip
10-22
【标题】: "基于Django(Django Rest Framework, 简称DRF)的前后端分离电商项目" 是一个利用Python的Django框架与前端Vue.js技术构建的现代电子商务平台。这种架构允许前端和后端独立开发，提高开发效率，同时提供更...
基于python的宠物商店。 python+django+vue搭建的宠物商店 - 毕业设计 - 课程设计.zip
01-05
3. 数据库操作：使用Django ORM进行数据库操作，如CRUD（创建、读取、更新、删除）操作，以及数据库查询。 4. Vue.js基础：理解组件化开发、指令、计算属性、生命周期钩子、异步数据处理等核心概念。 5. 前后端交互...
Python-djangoadmin美化采用layui作为基本框架改写大部分页面
08-12
django admin 美化，采用layui 作为基本框架，改写大部分页面
详解如何在vue项目中使用layui框架及采坑
11-29
根据官网的文档，要在一个html文件下使用layui里面的组件库其实很简单，但是在vue项目中使用该ui库却存在着很多坑，下面我们就详细讲解一下如何在vue-cli搭建的项目下使用layui 1.第一个坑：vue项目中使用npm安装引入时报错（目前并没有找到引入的合适的方式，知道的可以留言探讨） 在官网中我们可以看到他提到支持npm安装，但是当我们安装成功后，在main.js中引入时却报并不能找到该模块的错。 所以，我们先下载文件包，然后在html文件中用link和script标签的方式引入 2.第二个坑：下载的文件包必须放在static文件中 我尝试了把下载的文件夹放在与html文件的同级目
vue+django+restful framework ForYou2.0
weixin_30294709的博客
08-24 200
1.技术储备 1.1项目get到的技能 vue+django rest framework 前后端分离技术 玩转restful api开发流程 django rest framework 的功能实现和核心源码分析 sentry完成线上系统 的错误日志的监控和告警 第三方登录和支付宝的集成 1.2django rest framework技能 通过view实现res...
Django+Vue+ElementUI管理后台源码
一米阳光的博客
03-15 920
一款 Python 语言基于Django、Vue2.x、ElementUI、MySQL等框架精心打造的一款模块化、高性能、企业级的敏捷开发框架，本着简化开发、提升开发效率的初衷触发，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮等等一系列个性化、轻量级的组件，是一款真正意义上实现低代码开发的敏捷开发框架。
django-vue-admin脚手架快速开发CRUD教程
学亮编程手记
11-19 4708
本页面示例中的 project 均为demo名，可替代成自己的项目名 #需求 创建一个项目管理app； 字段包含：项目名称、项目编码、项目负责人； 功能：包含项目管理的增删改查、导出。 #后端 #1. 创建App 通过命令创建App python3 manage.py createapp project #2. 创建 models 模型 在dvadmin-backend/apps/project/models/ 目录下，创建 project.py 文件(models目录下可创建多个模型文件，
[增删改查] Python 之使用 Django + LayUI 做后台管理
IT小村
07-03 2万+
一、前言 Python 使用 Django 框架，进行 web 开发，一点都不比目前 JavaEE 最简便的框架 SpringBoot 差，甚至是更加便捷。 ① 使用 python manage.py makemigrations、python manage.py migrate，即可实现 JavaEE 方面的 JPA框架 的代码操作数据库的功能 ② 使用例如 python manage.p...
vue跟layui样式整合！大坑
热门推荐
qq_37048894的博客
04-30 2万+
在你观看这篇文章前，我真的一点都不建议你layui的界面更vue.js混合使用。 如果你已经开始了，那当我没说过。 添加第三方js,css 常见的layui.all.js。vue.min.js、这些都是可以百度到的。没必要添链接了 在页面中同时引入这两个文件 修改页面样式，写代码 这是我已经整合过的。 编辑： 接下来，贴代码 //使用Vue渲染模板，初始化时是没有数据的，...
drf+vue3+element-plus搭建CRUD的案例
05-10
以下是drf+vue3+element-plus搭建CRUD的案例： 1. 创建Django项目，命名为backend，创建Django APP，命名为api。 2. 在api中创建models.py文件，定义模型： ``` from django.db import models class Book...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值