临时

0 代码

APP.vue

<template>
  <div id="home">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div> -->
    <div>
        <div class="header">
            <h1>
              网页标题
            </h1>

            <img src="./assets/logo.png" alt="">

        </div>

        <hr>

        <div class="content">
            <div class="menu">
                  <div class="item" v-for="item in menus" :key="item.id">
                      <div v-if="item.id == choosed" style="background: #777;color:#fff">
                        <a style="color:#fff" >{{ item.text }}</a>
                        <!-- <a to="/" style="color:#fff">{{ item.text }}</a> -->
                      </div>

                      <div v-else style="color:#000" @click="chooseMenu(item.id)">
                        <a style="color:#000">{{ item.text }}</a>
                        <!-- <a to="/" style="color:#000">{{ item.text }}</a> -->
                      </div>

                  </div>
                    
            </div>
            
            <div class="userList">
                <p>{{ choosed_text }}</p>
                <hr/>
                <!-- <div class="user">
                    <img src="./assets/weekday-5.jpg" alt="">
                    <p>test3333</p>
                </div> -->
                <!-- <p v-else>暂无用户</p> -->
                <router-view/>
            </div>

        </div>
        
        <hr/>
       
        <div class="footer">
            Copyright © 2020 sundown
        </div>

    </div>

    
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    data() {
      return {
        // 装载menu
        menus: [],
        // 默认选中为Django后端学习
        choosed: 1,
        choosed_text: "Django后端",
        // menuId: 1
      }
    },
    mounted () {
      this.getData();
      this.initRouter();
      // this.chooseMenu(this.choosed);
    },
    methods: {
        initRouter(){
          this.$router.push({path : "/"});
        },
        getData(){
            axios({
                url: "http://127.0.0.1:9000/getMenuLists/",
                type: "json",
                method: "get"
            }).then(res => {
                // alert(111);
                // console.log(res);
                this.menus = res.data;
                // console.log(this.menus)
            });
        },
        chooseMenu(id){
          // console.log(id);
          this.choosed = id;

          // 获取该条索引的内容
          for (let index = 0; index < this.menus.length; index++) {
            if (id == this.menus[index].id) {
              this.choosed_text = this.menus[index].text;
              break;
            }
          }

          // 进行id传参 本页面
          this.$router.push({path : "/", query : {menuId : id}});

        }
    },
  }
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
} */
</style>

UserList.vue

<template>
    <div id="userlist">
        <div v-for="item in imglists" :key="item.id" class="user">
            <img :src="imgUrl+'upload/'+item.headImg" alt="">
            <p>{{ item.nickName }}</p>
        </div>

    </div>
    
</template>

<script>
    import axios from "axios";

    export default {
        data() {
            return {
              imglists: [],
              menuId: 1,
              imgUrl: "http://127.0.0.1:9000/"
            }
        },
        mounted () {
          this.getData(this.menuId);
        },
        watch: {
            $route(to){
                // console.log(to.query.menuId);
                // console.log(to);
                this.menuId = to.query.menuId;
                this.getData(this.menuId);
            }
        },
        methods: {
            getData(id){
                axios({
                    url: "http://127.0.0.1:9000/get-user-lists/",
                    type: "json",
                    params:{
                        id
                    },
                    method: "get"
                }).then(res => {
                    // alert(111);
                    // console.log(res);
                    this.imglists = res.data;
                });
            }
        },
    }
</script>

<style>
    
</style>