基于Python的前后端分离学习笔记
一、创建后端步骤
1)创建Django工程
2)在终端运行命令python manage.py startapp market(market是package包,可以任意命名)
3)在setting.py文件中,在INSTALLED_APPS中添加新建的文件名market,如:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'market',//添加新建的文件名
]
4)右键工程,新建python软件包apps,将文件market文件移到apps中,并右击apps将目录标记为原根
5)在setting.py文件中,添加代码:sys.path.insert(0, os.path.join(BASE_DIR, ‘apps’)) (别忘记import sys),如:
import os,sys
#Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR=Path(__file__).resolve(strict=True).parent.parent
sys.path.insert(0, os.path.join(BASE_DIR, 'apps'))
6)创建ORM数据库:
1、在models.py中创建类,如下(注意:类要继承models.Model):
这一步是在django中创建数据库表单的过程
from django.db import models
#Create your models here.
#物品
class Goods(models.Model):
num = models.IntegerField(db_column="Num", primary_key=True, null=False) # 编号,不允许为空,主键
name = models.CharField(db_column="Name", max_length=100, null=False) # 物品名称,最长100个字符,不允许为空
image = models.CharField(db_column="Image", max_length=200, null=False) # 物品图片
userNum = models.ForeignKey("user", to_field="num", on_delete=models.CASCADE) # 物品拥有者用户编号
price = models.FloatField(db_column='Price', null=False) # 物品价格
count = models.IntegerField(db_column="Count", null=False) # 数量
addDate = models.DateField(db_column="AddDate", null=False) # 物品添加日期
kind = models.CharField(db_column="Kind", max_length=50, null=False) # 物品种类
introduction = models.CharField(db_column="Introduction", max_length=300, null=False) # 物品介绍
# 在默认情况下,生成的表名:App_class, 如果要自定义 ,需要使用Class Meta来自定义
class Meta:
managed = True
db_table = "goods"
# 用户
class User(models.Model):
num = models.IntegerField(db_column="UNum", primary_key=True, null=False) # 用户编号,不允许为空,主键
name = models.CharField(db_column="UName", max_length=100, null=False) # 用户昵称,最长100个字符,不允许为空
telNum = models.CharField(db_column="Mobile", max_length=100, null=False) # 手机号码
gender_choices = (('男', '男'), ('女', '女'))
gender = models.CharField(db_column="Gender", max_length=100, choices=gender_choices) # 性别
address = models.CharField(db_column="Address", max_length=200, null=False) # 地址
class Meta:
managed = True
db_table = "user"
# 用户收藏的物品
class Collection(models.Model):
unum = models.ForeignKey("user", to_field="num", on_delete=models.CASCADE) # 用户编号
snum = models.ForeignKey("goods", to_field="num", on_delete=models.CASCADE) # 物品编号
class Meta:
managed = True
unique_together = (("unum", "snum"),)
db_table = "collection"
2、在数据库中新建一个数据库,如Market
3、在setting.py中配置数据库,如下:
DATABASES = {
# 'default': {
# 'ENGINE': 'django.db.backends.sqlite3',
# 'NAME': BASE_DIR / 'db.sqlite3',
# }
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'market',
'USER': 'root',
'PASSWORD': '',
'HOST': '127.0.0.1',
'PORT': '3306',
}
}
4、在market的__init__.py中,添加如下代码:
import pymysql
pymysql.version_info = (1, 4, 6, 'final', 0) # change mysqlclient version
pymysql.install_as_MySQLdb()
5、在终端依次运行如下代码:
python manage.py makemigrations
python manage.py migrate
二、创建前端(使用VS code)
1)首先在vs code中下载两个插件:
①Vue snippets(Vue智能提示)
②liver server(相当于本地web服务器)
2)使用CDN引入Vue模块,如:
<!-- 使用CDN引入Vue模块-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
3)引入Element UI样式,如:
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
4)创建html,css,js文件:
html代码:
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<!-- 引入Element UI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<!-- 使用CDN引入Vue模块-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<!-- 引入Element组件库 ,必须在引用Vue后再引用该模块-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="300px">
<el-col :span="12" style="width: 100%;">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-aside>
<el-main>Main</el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</div>
</body>
<script src="./js/index.js"></script>
</html>
复制代码
JS代码:
const app=new Vue({
el:'#app',
})
css代码:
复制代码
html,body,#app,.el-container{
margin: 0px;
padding: 0px;
height: 100%;
}
.el-header {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
复制代码
这样,模板就创建完毕了。