首页做一个先做一个常用地址导航页。
01
—
后端开发
先建一个地址模型类，有地址名，地址连接以及创建者。
代码语言：javascript复制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)02
—
首页基础页面
代码语言：javascript复制<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"> <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>
手动添加一条看看
展示正常，也可以跳转。
前面的棒棒糖后和后面的垃圾桶是el-ui从官网复制的。
代码语言：javascript复制https://element.eleme.cn/2.13/#/zh-CN/component/icon #官网地址
之后就是完善删除按钮和添加按钮，原理都是通过axios请求调用接口，我就不展示了大家可以自行完善，页面也可以修改样式。
03
—
预告
我们调用接口目前请求都是直接获取的，并没有判断是不是登录过有没有权限，下一节用之前的token工具类对获取信息的视图类加一个简单的校验。
