本编主要记录通过vue-cli新建项目，实现前后端参数传递

1. 之前已经安装好了vue-cli，在终端输入vue ui，启动web后台界面。
2. 通过后台新建项目，在插件中安装好vue-router，在依赖中安装好axios
3. 启动项目
4. 将之前django项目中的代码移植到vue-cli项目中并进行重构

man.js相关配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/style.css'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

vue-cli中的css等静态文件放置于assets目录下，在main.js中进行导入

app.vue相关配置

<template>
  <div id="home">
    <header>
      <div id="title">
        <a href="/">Web全栈开发 Python&Vue</a>
      </div>
      <img class="logo" src="./assets/logo.png" alt="logo" />
    </header>
    <div id="container">
      <nav>
        <div v-for="item in menuList" :key="item.id" class="item">
          <div v-if="item.id == choosed" class="choosedClass">
            <a to="/" style="color: #fff">{{
              item.text
            }}</a>
          </div>
          <div v-else @click="chooseMenu(item.id,item.text)">
            <a to="/" style="color: #000">{{
              item.text
            }}</a>
          </div>
        </div>
      </nav>
    </div>
    <router-view></router-view>

    <footer>
      <span>copyright © shrimprex @ 2021</span>
    </footer>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      menuList: [],
      choosed: 1,
    };
  },
  mounted() {
    this.getMenuList();
  },
  methods: {
    getMenuList() {
      axios({
        url: "http://127.0.0.1:8000/get-menu-list",
        type: "json",
        method: "get",
      }).then((res) => {
        console.log(res.data);
        this.menuList = res.data;
      });
    },
    chooseMenu(id,text) {
      console.log(id,text);
      this.choosed=id;
      //路由传参跳转
      this.$router.push({path:'/',query:{menuId:id}})
    },
  },
};
</script>

<style>
</style>

通过this.$router.push({path:'/',query:{menuId:id}})使用GET方法将参数进行传递。通过<router-view>标签配置组件实现路由切换。

userinfo.vue相关配置

<template>
  <div class="users">
    <div v-for="item in userlist" :key="item.id" class="userlist">
      <img class="tx" alt="tx" :src="apiurl + 'uploads/' + item.headImg" />
      <br />
      <span class="username">{{item.nickName}}</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      apiurl: "http://127.0.0.1:8000/",
      menuId: 1,
      userlist: [],
    };
  },
  mounted() {
      this.getUserList(this.menuId)
  },
  methods: {
    //发起后端请求
    getUserList(id) {
      console.log("获取用户列表：" + id);
      axios({
        url: "http://127.0.0.1:8000/get-user-list",
        type: "json",
        params: {
          id: id,
        },
        method: "get",
      }).then((res) => {
        console.log(res);
        this.userlist = res.data;
      });
    },
  },
  watch: {
    $route(to) {
      // console.log(to.query.menuId)
      this.menuId = to.query.menuId;
      this.getUserList(to.query.menuId);
    },
  },
};
</script>

<style>
</style>

通过watch来监听url中携带的参数menuId并发起后端请求，获取相应的用户数据

vue-router的index.js相关配置

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'userinfo',
    component: () => import(/* webpackChunkName: "about" */ '../views/userinfo.vue')
  },
]

const router = new VueRouter({
  routes
})

export default router

django后端api相关配置

#urls.py中新增两个路由
urlpatterns = [
    path('',views.index),
    path('classes/',views.classes),
    path('vue/',views.vueTest),
    path('admin/', admin.site.urls),
    #api接口
    path('api/',api.apiTest),
    path('get-menu-list/',api.getMenuList),
    path('get-user-list/',api.getUserList),  
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) \
    + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)


#api.py中新增对应的配置

@api_view(['GET','POST'])
def getMenuList(request):
    allClasses = Classes.objects.all()
    data = []
    for i in allClasses:
        each_data = {
            'id':i.id,
            'text':i.text,
        }
        data.append(each_data)
    return Response(data)

@api_view(['GET','POST'])
def getUserList(request):
    menuId = request.GET['id']
    #print(menuId)
    menu = Classes.objects.get(id=menuId)
    #userList = UserInfo.objects.filter(belong=menu)
    userList = menu.userinfo_classes.all() 
    #两种方式都可以获取到用户列表
    #print(userList)
    data = []
    for user in userList:
        each_data = {
            'id':user.id,
            'nickName':user.nickName,
            'headImg':str(user.headImg),
        }
        data.append(each_data)
    return Response(data)

效果

通过以上配置，实现了和之前在django项目中一样的功能，但是完成了前后端的分离，并实现了参数的传递