Django综合案例之英雄人物2

用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
  },
]

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

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

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

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

 Game.vue

Hero.vue