目录
步骤展示
第一步:创建项目与基础配置
- 在项目根目录运行命令:django-admin startproject stu_system
- 创建app,在终端运行命令:python manage.py startapp web_app
(注意路径一定要给对,最开始一直报错,原因是停留在上一级文件夹,二者重名了。)- 注册app:seetings.py INSTALLED_APPS里添加 'web_app.app.WebAppConfig' 路径
- 设计表结构:
- MySQL终端创建一个数据库
create database studnet_system DEFAULT CHARSET utf8 COLLATE utf8_general_ci;
-
修改数据库配置:settings.py里
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME':'student_system', 'USER': 'root', 'PASSWORD': '123456', 'HOST': '127.0.0.1', 'PORT': '3306', } }
- MySQL终端创建一个数据库
第二步:设计表结构
- 设计表结构:models.py
class Department(models.Model): """部门表""" title = models.CharField(verbose_name='标题', max_length=32) class UserInfo(models.Model): """员工表""" name = models.CharField(verbose_name='姓名', max_length=16) password = models.CharField(verbose_name='密码', max_length=64) age = models.IntegerField(verbose_name='年龄') account = models.DecimalField(verbose_name='账户余额',max_digits=10, decimal_places=2, default=0) create_time = models.DateTimeField(verbose_name='入职时间') #约束关联(数据库做的) to关联到表,to_field关联到列 实际字段名叫depart_id depart = models.ForeignKey(to="Department", to_field="id",on_delete=models.CASCADE()) #on_delete设置删除关联表字段时本表的处理方式(这里是级联删除,SET_NULL表示置空) #在django中做的约束,一般不会改动,不用单独创建一张表 gender_choice = ( (1, "男"), (2, "女"), ) gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choice)
- django 执行命令生成表结构
python manage.py makemigrations python manage.py migrate
报错:no moudle named 'web_app.app' 注册写错了应该是apps对应web_app/apps.py文件
报错:TypeError: CASCADE() missing 4 required positional arguments: 'collector', 'field', 'sub_objs', and 'using'
把CASCADE后面的括号删掉就可以了
报错:django.db.utils.OperationalError: (1049, "Unknown database 'student_system'")
数据库创建时名字写错了studnet_system,重新创建数据库
第三步:静态文件的管理
- web_app下创建
- static--包含css js image plugins
- templates
第四步:部门列表
页面设计
首先建立基本页面
#urls.py文件
from web_app import views
urlpatterns = [
# path("admin/", admin.site.urls),
path('depart/list/', views.depart_list),
]
#views.py
def depart_list(request):
"""部门列表"""
return render(request, 'depart_list.html')
#创建对应html文件
报错:
不用管,不影响运行
element初步引入实现
问题:静态文件引入有问题,引入的文件甚至是另一个项目里的静态文件里的东西,解决
HTML里这样引入
{% load static %}
<img src="{% static 'image/02.jpg' %}">
重大问题:想要直接引入element组件,但没有效果,最终了解到element必须建立在vue的基础上。而且必须有这一段
<script>
new Vue({
el: '#app',
data() {
return {
}
},
})
</script>
最终html代码如下:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1. 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 2. 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 3. 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- <link rel="stylesheet" href="{% static 'css/index.css' %}">-->
</head>
<body>
<img src="{% static 'image/02.jpg' %}">
<div id="app">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</body>
<script>
new Vue({
el: '#app',
data() {
return {
}
},
})
</script>
</html>