从零搭建一个django项目-9-首页

class DB_href(models.Model):
    name = models.CharField(max_length=30 , null=True ,blank=True,default='空')
    url = models.CharField(max_length=1000 , null=True ,blank=True,default='空')
    author =  models.CharField('作者',max_length=50,blank=True,null=True,default='')

    def __str__(self):
        return str(self.name)

class geturl(APIView):
    # authentication_classes = [JwtAuthorizationAuthentication, ]
    def get(self, request, *args, **kwargs):
        all_href = DB_href.objects.all().values()
        return Response({"all_href":all_href})

class add_href(APIView):
    # authentication_classes = [JwtAuthorizationAuthentication, ]
    def post(self, request, *args, **kwargs):
        try:
            new_link_name = request.data['new_link_name']
            new_link_url = request.data['new_link_url']
            username = request.user.username
            href = DB_href.objects.create(name=new_link_name, url=new_link_url, author=username)
            href.save()
            return Response({'status': "200"})
        except Exception as e:
            print(e.__str__())
            payload = {'status': "299", 'error':e.__str__()}
            return Response(payload)

class delete_href(APIView):
    # authentication_classes = [JwtAuthorizationAuthentication, ]
    def post(self, request, *args, **kwargs):
        try:
            id = request.data['id']
            href = DB_href.objects.filter(id=id)
            href.delete()
            return Response({'status': "200"})
        except Exception as e:
            print(e.__str__())
            payload = {'status': "299", 'error': e.__str__()}
            return Response(payload)

<template>
  <div style="width: 50%;margin-left: 25%;">
    <el-input class="ss-input" placeholder="模糊搜索，请输入关键字" v-model='ss_input' />
    <el-button type="button" style="border-radius: 0 50px 0 0;border-bottom: none; outline: none;height: 36px;">搜索
    </el-button>
  </div>
  <div style="" class="mydiv">
    <h3 style="margin-top: -7px">欢迎{{username}}使用首页传送门：
      <span style="font-size: small;color: gray">新增超链接请<a href="#/home" @click="show_new_link_div">点击这里</a></span>
    </h3>
    <ul style="list-style: none" id="myul">
      <li v-for="i in v_hrefs" :key="i">
        <span class="el-icon-lollipop" style="color: #e84393"></span>
        <a :href="i.url" target="_blank" :title="i.author+'创建'">{{i.name}}</a>
        <a @click="delete_link(i.id)" class="el-icon-delete">&nbsp;&nbsp;<span style="color: #e84393;cursor:pointer "
            v-bind:title="'刪除'+i.name"></span></a>
      </li>
      <div id="new_link_div" class=""
        style="display: none;height: 100px;position: fixed;top: 35%;left:25%;width: 50%;box-shadow: 4px 4px 6px darkgray;border: pink solid 2px">
        <el-input class="" id="new_link_name" type="text" placeholder="请输入超链接的名字" v-model="link_name"
          style="height: 50%;width: 80%;" />
        <el-input class="" id="new_link_url" type="text" placeholder="请输入超链接的URL" v-model="link_url"
          style="height: 50%;width: 80%;" />
        <span class="" style="width: 20%;height: 98px">
          <button @click="add_link" class="btn btn-default" type="button"
            style="height: 100%; outline: none;width: 50%;border-left: pink solid 2px;border-bottom:pink solid 2px ">保存</button>
          <button @click="uadd_link" class="btn btn-default" type="button"
            style="height: 100% ;outline: none;width: 50%;border-right: pink solid 2px;border-bottom:pink solid 2px">取消</button>
        </span>
      </div>

    </ul>
  </div>
</template>

<script>

import axios from 'axios'
  export default {
    name: 'HomeView',
    data() {
      return {
        v_hrefs: [],
        link_name: '',
        link_url: '',
        ss_input: '',
        username: this.$cookies.get("username")

      }
    },
    components: {},
    methods: {
      show_new_link_div() {
        document.getElementById('new_link_div').style.display = 'block'
      },
      uadd_link() {
        document.getElementById("new_link_div").style.display = 'none';
      },
      geturl() {
        axios.get('http://localhost:8000/api/geturl').then((response) => {
          this.v_hrefs = response.data.all_href;
        })
      }
    },
    mounted() { //这个属性就可以，在里面声明初始化时要调用的方法即可
      // we can implement any method here like
      this.geturl()
    }
  }
</script>

<style>
  .mydiv {
    border-radius: 5px;
    box-shadow: 4px 4px 8px gray;
    background-color: #eaeaea;
    height: 800px;
    margin-left: 5%;
    padding: 10px;
  }

  .mydiv li {
    float: left;
    width: 25%;
  }

  .mydiv li a {
    text-decoration: none;
    color: transparent;
    background: linear-gradient(to top, black, #fd59f1);
    -webkit-background-clip: text;
    font-size: large;
  }

  .ss-input {
    width: 50%;
  }

  .el-input__inner {
    border-top-left-radius: 50px;
  }

  #new_link_name {
    margin-top: 5px;
    border-top-left-radius: 0px;
  }

  #new_link_url {
    border-top-left-radius: 0px;
  }
</style>

https://element.eleme.cn/2.13/#/zh-CN/component/icon #官网地址