基于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 package文件apps，将文件market文件移到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)：
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样式，如：
<!-- 引入Element UI样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" /> <!-- 引入Element组件库 ，必须在引用Vue后再引用该模块--> <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; }
这样，模板就创建完毕了。
