一个实用的链接导航页的站点设计支持自定义链接

MarvelHonor

已于 2022-11-17 08:58:16 修改

阅读量364

点赞数

分类专栏： IT运维 python Web 文章标签： javascript 前端 python django

于 2022-11-16 10:03:57 首次发布

本文链接：https://blog.csdn.net/chscomfaner/article/details/127879182

版权

IT运维同时被 3 个专栏收录

64 篇文章 2 订阅

订阅专栏

python

28 篇文章 1 订阅

订阅专栏

Web

6 篇文章 0 订阅

订阅专栏

前台

<!DOCTYPE html>
<html lang="en">
<head>
    {%include "public_header.html"%}
    <link  href="/static/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="/static/bootstrap/jquery.min.js"  type="text/javascript"></script>
<script src="/static/bootstrap/bootstrap.min.js"  type="text/javascript"></script>

    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>运维自动化导航页</title>
    <style>
        body {
            background: #f7f7f7;
            margin: 10px;
            background-image:url('/static/images/bg.png');
            background-repeat:no-repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
        }

    </style>
</head>
<script>
    $(document).ready(function(){
        $("li").mouseover(function(){
            $(this).css("background-color","#FCF590");
            //$(this).animate({top:"-=10px"},"fast");
        });
        $("li").mouseout(function(){
            $(this).css("background-color","#DBEDFC");
            //$(this).animate({top:"+=10px"},"fast");
        });
    });
    add_link=function(){
        $('#dlg_title').text('添加链接');
        $('#dialog').modal('show');
    };
    do_add_link=function(){
        $.post('/url?action=add',{"class":$("#class").val(),"title":$("#title").val(),"url":$("#url").val()},function(d,s){
            if(s=="success"){
                $('#dialog').modal('hide');
                location.reload();
            }
        });
    };
    link_del=function(cls,title){
        $.post('/url?action=del',{"class":cls,"title":title},function(d,s){
            if(s=="success"){
                $('#dialog').modal('hide');
                location.reload();
            }
        });
    };
</script>
<body>
<div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width:calc(50vw);">
        <div class="modal-content"  >
            <div class="modal-header">
                <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><span id="dlg_title"></span></h4>
            </div>
            <div class="modal-body">
                <input type="text" id="class" class="form-control" placeholder="分类名称">
                <input type="text" id="title" class="form-control"  placeholder="标题">
                <input type="text" id="url" class="form-control"  placeholder="链接URL">
                <button onclick="do_add_link()" class="btn btn-primary">添加</button>
            </div>
        </div>
    </div>
</div>
<h1 class="text-center" style="font-weight:bolder">运维导航页</h1>
<div style="width:1200px;position:relative;left:calc(100vw/2);transform:translateX(-50%);">
    <div class="row">
        {% for class in nav %}
            <div style="background-color:rgba(199,212,247,0.2);padding:8px;margin:10px;box-shadow: 1px 1px 10px #888888;">
                <h4 style="margin:2px;font-weight:bolder;" ><span style="color:blue" class="glyphicon glyphicon-link"></span>{{class.class}}</h4>
                <ul style="margin:1px;padding:1px;display:flex;flex-wrap:wrap">
                {% for item in class.items %}
                    <li style="border-radius:6px;position:relative;margin:4px;padding:4px;border:1px solid #E5E5E5;list-style:none;background-color:#DBEDFC;display:inline-block;">
                        <h4 style="margin:0px;padding:2px;">{{item.title}}</h4>
                        <h4 style="margin:0px;padding:2px;"><a href="{{item.url}}" target="_blank" class="btn btn-default">{{item.url}}</a></h4>
                    </li>
                {% endfor %}
                </ul>
            </div>
        {% endfor %}
        {% for class in nav2 %}
            <div style="background-color:rgba(199,212,247,0.2);padding:8px;margin:10px;box-shadow: 1px 1px 10px #888888;">
                <h4 style="margin:2px;font-weight:bolder;" ><span style="color:blue" class="glyphicon glyphicon-link"></span>{{class.class}}</h4>
                <ul style="margin:1px;padding:1px;display:flex;flex-wrap:wrap">
                {% for item in class.items %}
                    <li style="border-radius:6px;position:relative;margin:4px;padding:4px;border:1px solid #E5E5E5;list-style:none;background-color:#DBEDFC;display:inline-block;">
                       <button type="button" class="close" data-dismiss="li" aria-hidden="true" onclick="link_del('{{class.class}}','{{item.title}}')">&times;</button>
                        <h4 style="margin:0px;padding:2px;">{{item.title}}</h4>
                        <h4 style="margin:0px;padding:2px;"><a href="{{item.url}}" target="_blank" class="btn btn-default">{{item.url}}</a></h4>
                    </li>
                {% endfor %}
                </ul>
            </div>
        {% endfor %}
        <div style="background-color:rgba(199,212,247,0.2);padding:8px;margin:10px;box-shadow: 1px 1px 10px #888888;">
            <input type="button" class="btn btn-md btn-info" value="添加链接" onclick="add_link()">
        </div>

    </div>
</div>
</body>
</html>

python-路由器urls.py

#url
from django.contrib import admin
from django.urls import path, re_path
from . import views
from django.contrib.staticfiles.views import serve

urlpatterns = [
    path('admin', admin.site.urls),
    path("",views.index),
    path('index',views.index),
    path('url',views.url),
    path('favicon.ico', serve, {'path': 'images/favicon.ico'}),
]

python-控制器views.py

#views
import datetime

from django.contrib import auth
from django.contrib.auth.decorators import login_required
from django.shortcuts import render,HttpResponse,HttpResponseRedirect,redirect,reverse
from django.http import HttpRequest,JsonResponse,HttpResponseForbidden
from django.views.decorators.csrf import csrf_exempt
import log.log as log
import json
import re
import base.lib as lib

def index(request:HttpRequest):
    context = {"nav":[
        {"class":"测试1","items":[
            {"title":"测试1","url":"http://192.168.1.1/"},
            {"title": "测试1", "url": "http://192.168.1.1/"},
            {"title": "测试1", "url": "http://192.168.1.1/"}]},
        {"class":"测试1","items":[
            {"title":"测试1","url":"http://192.168.1.1/"},
            {"title": "测试1", "url": "http://192.168.1.1/"},
            {"title": "测试1", "url": "http://192.168.1.1/"}]},
        {"class":"测试1","items":[
            {"title":"测试1","url":"http://192.168.1.1/"},
            {"title": "测试1", "url": "http://192.168.1.1/"},
            {"title": "测试1", "url": "http://192.168.1.1/"}]},
        {"class":"测试1","items":[
            {"title":"测试1","url":"http://192.168.1.1/"},
            {"title": "测试1", "url": "http://192.168.1.1/"},
            {"title": "测试1", "url": "http://192.168.1.1/"}]},
    ]}
    js=lib.read()
    if js:
        context["nav2"]=js
    response = render(request, "index.html", context)
    return response
def url(request:HttpRequest):
    if "action" in request.GET.keys() and request.GET["action"]=="add":
        cls,title,url=request.POST["class"],request.POST["title"],request.POST["url"]
        js=lib.read()
        if js and "class" in js[0].keys():
            clss=[item["class"] for item in js]
            i=clss.index(cls)
            if i>=0:
                js[i]["items"].append({"title":title,"url":url})
                lib.write(js)
                return JsonResponse({"code":1})
        else:
            js=[
                {"class":cls,"items":[
                    {"title":title,"url":url}]
                 }
            ]
            lib.write(js)
            return JsonResponse({"code": 1})
    if "action" in request.GET.keys() and request.GET["action"]=="del":
        cls,title=request.POST["class"],request.POST["title"]
        js=lib.read()
        if js and "class" in js[0].keys():
            clss=[item["class"] for item in js]
            i=clss.index(cls)
            if i>=0:
                items=js[i]["items"]
                for item in items[:]:
                    if item["title"]==title:
                        items.remove(item)
                lib.write(js)
                return JsonResponse({"code":1})
    return JsonResponse({"code": 0})
def forbid(request:HttpRequest):
    return HttpResponseForbidden()

python-数据处理函数库lib.py

#lib
from navigate.settings import BASE_DIR
import os
import pickle
import json

def read():
    js=os.path.join(BASE_DIR,'js')
    if os.path.exists(js):
        with open(js,'r') as f:
            return json.loads(f.read())
            # return pickle.load(f)
    else:
        return []
def write(obj):
    js = os.path.join(BASE_DIR, 'js')
    with open(js,'w') as f:
        f.write(json.dumps(obj))
        # pickle.dump(obj,f)