后端
1.创建项目和子应用
命令:
创建项目:django-admin startproject 项目名
创建子应用:python manage.py startapp 子应用名
2.配置项目
---------------------------------------------------------------------
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp', # 子应用
'rest_framework', # drf 框架
'corsheaders', # 跨域
# 'django_filters', # 过滤
]
----------------------------------------------------------------------
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'corsheaders.middleware.CorsMiddleware' # 配置中间件
]
CORS_ORIGIN_ALLOW_ALL=True # 允许所有访问
ROOT_URLCONF = 'day14zxy1.urls'
----------------------------------------------------------------------
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'HOST':'localhost',
'PORT':3306,
'USER':"root",
'PASSWORD':'123',
'NAME':'day14'
}
}
--------------------------------------------------------------------
# https://docs.djangoproject.com/en/2.2/topics/i18n/
LANGUAGE_CODE = 'zh-Hans'
TIME_ZONE = 'Asia/ShangHai'
USE_I18N = True
USE_L10N = True
USE_TZ = True
3.安装数据库
# 安装数据库
import pymysql
pymysql.install_as_MySQLdb()
4.编写模型类
from django.db import models
# Create your models here.
class Game(models.Model):
game_name=models.CharField(max_length=20,verbose_name='游戏名称')
class Meta:
verbose_name='游戏表' # admin页面上的表
verbose_name_plural=verbose_name # admin页面上去重
db_table='game' # 数据库中的名字不区分大小写
def __str__(self):
return self.game_name
class Hero(models.Model):
hero_name=models.CharField(max_length=20,verbose_name='英雄名')
atk=models.IntegerField(verbose_name='攻击力')
level=models.IntegerField(verbose_name='等级')
game=models.ForeignKey(Game,on_delete=models.CASCADE,verbose_name='所属游戏')
class Meta:
verbose_name='英雄表' # admin页面上的表
verbose_name_plural=verbose_name # admin页面上去重
db_table='hero' # 数据库中的名字不区分大小写
def __str__(self):
return self.hero_name
5.迁移
生成迁移 python manage.py makemigrations
执行迁移 python manage.py migrate
6.创建超级用户、注册表、添加测试数据
创建超级用户 python manage.py createsuperuser
7.配置
8.路由分发
子路由:
配置序列化文件
两个序列化集
# 游戏的增删改查
from rest_framework import serializers
from myapp.models import Game,Hero,HeroImg
class GameSerializers(serializers.ModelSerializer):
class Meta:
model = Game
fields = '__all__'
# 英雄的增删改查和查询
class HeroSerializers(serializers.ModelSerializer):
game = serializers.StringRelatedField(read_only=True)
class Meta:
model = Hero
fields = '__all__'
配置视图集
导入
from myapp.models import Game,Hero # 导入模型类
from myapp.serializers import GameSerializers,HeroSerializers# 导入序列化器
from rest_framework.viewsets import ModelViewSet # 导入视图集
from re
# 视图集实现游戏表的增删查改
class GameView(ModelViewSet):
queryset = Game.objects.all()
serializer_class = GameSerializers
# 查询英雄信息,展示的外键为游戏名
class HeroView(ModelViewSet):
queryset = Hero.objects.all()
serializer_class = HeroSerializers
# 指定使用的过滤工具
filter_backends = [SearchFilter,OrderingFilter]
# 指定过滤的字段
search_fields=['game__id','hero_name']
# 排序的字段
ordering_fields=['atk','level']
路由匹配
from myapp import views
from rest_framework import routers
urlpatterns = [
]
# 1.生成路由对象
router=routers.DefaultRouter()
# 2.使用路由对象生成路由信息
router.register('game',views.GameView,'game')
router.register('hero',views.HeroView,'hero')
# 3.路由的追加
urlpatterns+=router.urls
前端
配置跨域
module.exports={
devServer:{
proxy:'http://127.0.0.1:8000/',
}
}
注:要重启项目否则会执行不出来
安装封装
配置封装
在src=>创建utils文件在里面创建request.js文件进行封装:
import Axios from 'axios'
//封装的方式
export function get(url,params){
return Axios.get(url,params)
}
export function post(url,params){
return Axios.post(url,params)
}
export function del(url,params){
return Axios.delete(url,params)
}![请添加图片描述](https://img-blog.csdnimg.cn/8517cd9c6f3a46b08b86cf3e0360b1fb.png)
export function put(url,params){
return Axios.put(url,params)
}
创建文件2
注:在view文件下的game(自己创建的)文件创建vue文件
配置路由
import { createRouter, createWebHistory } from 'vue-router'
import GameView from '../views/game/GameView.vue'
import HeroView from '../views/game/HeroView.vue'
const routes = [
{
path:'/gameview',
name:'GameView',
component:GameView,
},
{
path:'/heroview',
name:'HeroView',
component:HeroView,
},
]
编写文件
主:
主表功能:搜索子页面的数据,渲染主页面的数据,点击跳转
<template>
<div>
<h3>游戏页面</h3>
<table border="1px" width="300" align="center">
<tr>
<th>编号</th>
<th>游戏</th>
</tr>
<tr v-for="(item,i) in goodlist " :key='i' >
<th>{{item.id}}</th>
<th>
<router-link :to="{name:'HeroView',params:{id:item.id}}"><br>
{{item.game_name}}
</router-link>
</th>
</tr>
</table>
<p>搜索页面</p>
搜索:<input type="text" v-model="hero_name">
<button @click="search">搜索</button><br>
{{wwlist}}
</div>
</template>
<script>
import {get} from '../../utils/request'
export default {
data(){
return{
goodlist:[], //保存种类信息
hero_name:'',
wwlist:[],
}
},
methods:{
//搜索功能
search(){
// url='hero/?search=' +查询动物的名
let url='hero/?search=' + this.hero_name
get(url).then((resp) => {
console.log(resp);
this.wwlist=resp.data //保存搜索到的数据
}).catch((err) => {
console.log(err)
});
},
getdata(){
//获取游戏的功能
get('game/').then((resp) => {
console.log(resp)
this.goodlist=resp.data
}).catch((err) => {
console.log(err)
});
}
},
mounted(){
this.getdata(); //调用
}
}
</script>
<style>
</style>
子
子表功能:1.展示与主页面外键的数据,进行增删查改并且美化下拉框
<template>
<div>
<h3>英雄页面</h3>
<table border="1" width="500px" align="center">
<tr>
<th>编号</th>
<th>英雄</th>
<th>攻击力</th>
<th>等级</th>
<th>所属</th>
<th>操作</th>
</tr>
<tr v-for="(item, i) in goodlist" :key="i">
<th>{{ item.id }}</th>
<th>{{ item.hero_name }}</th>
<th>{{ item.atk }}</th>
<th>{{ item.level }}</th>
<th>{{ item.game }}</th>
<th>
<button @click="remove(item.id)">删除</button>
<button @click="addd(i)">更新</button>
</th>
</tr>
</table>
英雄:<input type="text" v-model="hero_name"><br>
攻击:<input type="text" v-model="atk"><br>
等级:<input type="text" v-model="level"><br>
所属:<select name="games" v-model="game">
<option v-for="(item,i) in gamelist" :key="i" :value="item.id">
{{item.game_name}}
</option>
</select><br>
<button @click="updatas">修改</button><br>
英雄:<input type="text" v-model="hero_name1"><br>
攻击:<input type="text" v-model="atk1"><br>
等级:<input type="text" v-model="level1"><br>
所属:<select name="games" v-model="game1">
<option v-for="(item,i) in gamelist" :key="i" :value="item.id">
{{item.game_name}}
</option>
</select>
<button @click="adddd">添加</button>
</div>
</template>
<script>
import { get, del, put, post } from "../../utils/request";
export default {
data() {
return {
game_id: this.$route.params.id,
goodlist: [],
hero_name: "",
atk: "",
level: "",
game: "",
hero_name1: "", //需要添加的数据
atk1: "",
level1: "",
game1: "",
gamelist: [],
};
},
mounted() {
this.getdata();
this.getdat();
},
methods: {
getdat() {
//获取游戏的功能
get("game/")
.then((resp) => {
console.log(resp);
this.gamelist= resp.data;
})
.catch((err) => {
console.log(err);
});
},
getdata() {
let url = "hero/?search=" + this.game_id;
get(url)
.then((resp) => {
console.log(resp);
this.goodlist = resp.data;
})
.catch((err) => {
console.log(err);
});
},
adddd() {
let obj = {hero_name: this.hero_name1,atk: this.atk1,level: this.level1,game: this.game1};
post('hero/', obj)
.then((resp) => {
console.log(resp);
this.getdata();
})
.catch((err) => {
console.log(err);
});
},
updatas() {
let url = "hero/" + this.id + "/";
let obj = {
hero_name: this.hero_name,
atk: this.atk,
level: this.level,
game: this.game,
};
put(url, obj)
.then((resp) => {
console.log(resp);
this.getdata();
})
.catch((err) => {
console.log(err);
});
},
addd(i) {
this.id = this.goodlist[i].id;
this.hero_name = this.goodlist[i].hero_name;
this.atk = this.goodlist[i].atk;
this.level = this.goodlist[i].level;
this.game = this.game_id;
},
remove(id) {
let url = "hero/" + id + "/";
del(url)
.then((resp) => {
console.log(resp);
this.getdata(); //获取最新数据宝子你获取的上一个数据内
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
<style>
</style>