0
点赞
收藏
分享

微信扫一扫

Django综合案例之英雄人物2

妖妖妈 2022-04-30 阅读 39
前端vue

用django + Vue实现 游戏 英雄人物的管理系统，进行增删改查等操作，系统分为djangoAPI 和 Vue页面，上文已对django实现流程做了详细介绍，以下是vue页面的详细流程：

Vue 页面实现流程：

Vue项目创建

        创建vue项目命令：在指定目录下cmd —— vue create 项目名

         运行vue命令：      npm run serve

axios全局配置、配置跨域、封装函数、配置路由及导航栏

      安装axios 命令： npm install --save axios

       创建文件vue.config.js  配置跨域

module.exports={
    devServer:{
        proxy:'http://127.0.0.1:8000/',        
    }
}

 src目录下创建utlis文件夹--request.js文件用来封装函数

import Axios from 'axios'

//get put post delete
export function get(url,params){
    return Axios.get(url,params)
}
export function post(url,params){
    return Axios.post(url,params)
}
export function put(url,params){
    return Axios.put(url,params)
}
export function del(url,params){
    return Axios.delete(url,params)
}

配置路由及导航栏

import { createRouter, createWebHistory } from 'vue-router'
// import HomeView from '../views/HomeView.vue'


import Game from '../views/hero/Game.vue'
import Hero from '../views/hero/Hero.vue'

const routes = [
  
  {
    path: '/',
    name: 'Game',
    component: Game
  },
  {
    path: '/hero',
    name: 'Hero',
    component: Hero
  },
]
<template>
  <nav>
    <!-- <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>| -->

    <router-link to="/">游戏页面</router-link>|
    <router-link to="/hero">英雄页面</router-link> 
  </nav>
  <router-view/>
</template>

vue页面实现展示信息及信息的增删改查等操作，要注意的是实现修改时，所属外键使用下拉框实现，以防止外键随便输入

分别创建Game.vue和Hero.vue用来展示相关信息，具体功能如下：

        游戏页面(实现功能1) 和 英雄页面(实现功能2-5)

  1. 实现输入游戏名搜索游戏信息的功能
  2. 展示所有的英雄信息，要求外键展示内容为游戏名
  3. 添加英雄信息，要求所属游戏使用下拉框实现
  4. 点击删除按钮，删除英雄信息
  5. 修改英雄信息

 Game.vue

<template>
    <div>
        <h3>游戏页面</h3>
        <p>请输入要搜索的游戏名: <input type="text" v-model="game_name"><button @click="find">搜索</button></p>
        <table width=400 border="1" style="margin:0 auto;">
            <tr>
                <th>编号</th>
                <th>游戏名</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,i) in gamelist" :key="i">
                <td>{{item.id}}</td>
                <td>
                    {{item.game_name}}
                </td>
                <td>
                    <button @click="gethero(i)">查询</button>
                </td>
            </tr>
        </table>
        <!-- <p>请输入要搜索英雄的游戏名: <input type="text" v-model="game_id"><button @click="findhero">搜索</button></p>
        <p>英雄信息为：{{gamehero}}</p> -->
        <table width=400 border="1" style="margin:0 auto;">
            <caption>游戏英雄</caption>
            <tr>
                <th>英雄编号</th>
                <th>游戏名</th>
                <th>攻击力</th>
                <th>等级</th>
                <th>所属游戏</th>
                
            </tr>
            <tr v-for="(item,i) in gamehero" :key="i">
                <td>{{item.id}}</td>
                <td>{{item.hero_name}}</td>
                <td>{{item.atk}}</td>
                <td>{{item.level}}</td>
                <td>{{item.game}}</td>
            
            </tr>
        </table>
      
        
    </div>
</template>

<script>
import { get } from '@/utils/request'
export default {
    name:'Game',
    data(){
        return{
            gamelist:[],
            game_name:'',
            game:[],
            game_id:0,
            gamehero:[],
            imglist:[],
        }
    },
   
    methods:{
      
      
        find(){     //根据游戏名获取游戏信息  game/?search=游戏名
            let url = 'game/' + '?search=' + this.game_name
            get(url).then(resp=>{
                console.log(resp);
                this.gamelist=resp.data;
            }).catch(err=>{
                console.log(err);
            })
        },
     
        gethero(i){
             let url = 'hero2/?search=' + this.gamelist[i].id;
              get(url).then(resp=>{
                console.log(resp);
                this.gamehero=resp.data;
            }).catch(err=>{
                console.log(err);
            })
        }
    }
}
</script>

<style>

</style>

Hero.vue

<template>
    <div>
        <h3>英雄页面</h3>
        <table width=600 border="1" style="margin:0 auto;">
            <tr>
                <th>编号</th>
                <th>英雄名</th>
                <th>攻击力</th>
                <th>等级</th>
                <th>游戏名</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,i) in herolist" :key="i">
                <td>{{item.id}}</td>
                <td>{{item.hero_name}}</td>
                <td>{{item.atk}}</td>
                <td>{{item.level}}</td>
                <td>{{item.game}}</td>
                <td>
                    <button @click="remove(i)">删除</button>
                    <button @click="getthe(i)">修改</button>
                </td>
            </tr>
            <tr>
                <td colspan="6"><button @click="getascdata">等级</button></td>
            </tr>
        </table>
        <p>添加英雄信息</p>
        <p>英雄名： <input type="text" v-model="hero_name"></p>
        <p>攻击力： <input type="text" v-model="atk"></p>
        <p>等级：   <input type="text" v-model="level"></p>
        <p>游戏名： 
            <select name="games" v-model="game">
                <option v-for="(item,i) in gamelist" :key="i" :value="item.id">{{item.game_name}}</option>
            </select>
            <!-- {{gamelist}} -->
        </p>
        <p><button @click="add">添加</button></p>

        <p>修改英雄信息</p>
        <p>英雄名： <input type="text" v-model="hero_name2"></p>
        <p>攻击力： <input type="text" v-model="atk2"></p>
        <p>等级：   <input type="text" v-model="level2"></p>
        <p>游戏名： 
            <select name="games" v-model="game2">
                <option v-for="(item,i) in gamelist" :key="i" :value="item.id">
                    {{item.game_name}}
                </option>
            </select>
        </p>
        <p><button @click="update">修改</button></p>
        <!-- {{game2}} -->
    </div>
</template>

<script>
import { del, get, post, put } from '@/utils/request'
export default {
    name:'Hero',
    data(){
        return{
            herolist:[],
            hero_name:'',
            atk:0,
            level:0,
            game:'',
            id2:0,
            hero_name2:'',
            atk2:0,
            level2:0,
            game2:0,
            gamelist:[],
        }
    },
    mounted(){
        this.getdata();
        this.getgamedata();
    },
    methods:{
        getdata(){       //获取所有英雄信息
            get('hero2/').then(resp=>{
                console.log(resp);
                this.herolist=resp.data;
            }).catch(err=>{
                console.log(err);
            })
        },
        getascdata(){       //获取所有英雄信息,按照等级升序排序
            get('hero2/?ordering=level').then(resp=>{
                console.log(resp);
                this.herolist=resp.data;
            }).catch(err=>{
                console.log(err);
            })
        },
        getgamedata(){
            get('game/').then(resp=>{
                console.log(resp);
                this.gamelist=resp.data;
            }).catch(err=>{
                console.log(err);
            })
        },
        add(){                #添加新英雄人物
            let obj={hero_name:this.hero_name,atk:this.atk,level:this.level,game:this.game};
            post('hero/',obj).then(resp=>{
                console.log(resp);
                alert('添加成功');
                this.getdata();
            }).catch(err=>{
                console.log(err);
            })
        },
        remove(i){            #删除英雄人物
            del('hero/'+this.herolist[i].id+'/').then(resp=>{
                console.log(resp);
                alert('删除成功');
                this.getdata();
            }).catch(err=>{
                console.log(err);
            })
        },
        getthe(i){
            this.id2=this.herolist[i].id;
            this.hero_name2=this.herolist[i].hero_name;
            this.atk2=this.herolist[i].atk;
            this.level2=this.herolist[i].level;
            this.game2=this.gamelist.filter(x=>x.game_name == this.herolist[i].game)[0].id;
        },
        update(){                #进行修改
            let obj={hero_name:this.hero_name2,atk:this.atk2,level:this.level2,game:this.game2};
            put('hero/'+this.id2+'/',obj).then(resp=>{
                console.log(resp);
                alert('修改成功');
                this.getdata();
            }).catch(err=>{
                console.log(err);
            })
        }
    }


}
</script>

<style>

</style>
举报

相关推荐

英雄人物陆小凤

任务搜索编程语言

梁山泊三十六天罡珐琅彩陶瓷英雄人物珍藏酒

matlab开发语言

大二学生《web课程设计》中华英雄人物介绍袁隆平HTML+CSS+JavaScript(期末考核大作业)

dreamweaverweb前端大作业网页设计与制作webhtmlLinux系统/运维

Django 综合篇

django自定义消息框Linux系统/运维

历史名人鲁迅介绍HTML个人网页作业作品下载 历史人物介绍网页设计制作 大学生英雄人物网站作业模板 dreamweaver简单个人网页制作

htmlcssd3HTML5移动开发

SSM综合案例之角色管理实战

idejava添加用户Java编程语言

C#面对对象（英雄联盟人物管理系统）

pythonpytorch

Day17-Java基础之综合案例

vue.jsvuejavascript前端

SSM综合案例之动态权限实战教程

springidejavaJava编程语言

【MapReduce】综合案例

mapreducehadoopapachejava编程语言
0 条评论