原生JS模拟

mttp02

已于 2023-02-06 09:58:50 修改

阅读量58

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-02-04 19:13:10 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/128881647

版权

JS原生管理系统介绍模板

一、需求分析

客户方向

需要满足，现代人对于新闻阅读的需求，并且能查询到相关的信息

需求功能

能够查找到相关内容
可以正常的登录

二、核心功能

首页

在这里插入图片描述

2.1登录页面

在这里插入图片描述
json-server get 获取 post添加， put修改 delete删除
登陆验证不适用post请求，用get请求
向后端查询?username=${username.value}

 let res = await fetch(`http://localhost:5000/users?username=${username.value}&password=${password.value}`).then(res=>res.json())

    console.log(res[0])
    if(res.length>0){
        localStorage.setItem("token",JSON.stringify({
            ...res[0],
            password:"****"
        }))
        location.href="/admin/views/home/index.html"
        
    }else{
        //失败
        console.log("失败")
        loginwarning.style.display = "block"

    }
}

2.2退出登录以后就回不来了

在这里插入图片描述
点击退出按钮清除localstorage

exit.onclick = function(){
localstorage.removeItem( "token")//清除localstorage
location.href = " /admin/views/login/0204原生index.html"

2.3依据角色显示页面

在这里插入图片描述

一进来首页会变蓝
点击其他会传递ID进行高亮展示
并且加载页面

document.queryselector(".sidemenu").innerHTML = sidemenuText
document.querySelector("#"+id).style.color="#0a58ca"

根据选择传递id

import {load} from " /admin/util/LoadView.js"
load("sidemenu-home")·//加载topbar·// sidemenu

并且在其他的JS中通过module引入

在这里插入图片描述

在无个人简介时显示

document.queryselector( ".userprofile").innerHTML =`
<img src="${user.photo}" style="width: 100px; " />
<div>
<div>${user.username}</div>
<div><pre>${user.introduction || "这个人很懒"}</pre></div>
</div>
`

<pre显示换行符，空格

在这里插入图片描述

function rendersidemenu(user,id){
document.queryselector("#"+id).style.color="#0a58ca"

if(user.role!=="admin"){

document.queryselector( ".user-manage-item" ).remove()

}
}

通过if结构判断角色是否为管理员，依据角色显示页面

2.4富文本编辑器

在这里插入图片描述

富文本编辑器，在wangEdiitor选择现成代码,引入JS创建编辑器
在这里插入图片描述

2.5轮播图

一开始只有第一张有active

<button type="button"
data-bs-target="#carouselExamplecaptions"
data-bs-slide-to="0" class="active"//
aria-current="true"  aria-label="slide 1"></button>
<button type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1" aria-label="slide 2"></button>
<button type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2" aria-label="slide 3"></button>

//一开始只有第一张有active

2.6模糊查询

在这里插入图片描述

 <div class="box">
            <div class="newsbg">
                <div class="form-floating mb-3 searchcontainer">
                    <input type="text" class="form-control" 
                    id="search" placeholder="name@example.com">  
                    <label for="floatingInput">搜索关键字</label>
                    <ul class="list-group">
                    
                      </ul>
                      
                  </div>

search.oninput =async function(){
    // console.log(search.value)
    if(!search.value ) {
    //如果是空字符串则不显示
        document.querySelector(".list-group").style.display = "none"
        //控制显示隐藏
        return
    } 
    document.querySelector(".list-group").style.display = "block"
    //如果不是空字符就显示
     let res =await fetch("http://localhost:5000/news?title_like="+search.value).then(res=>res.json())//？代表查询 =是精准查找 _是模糊查找
     //利用fetch查询输入框所输入的信息
    // console.log(res)
    document.querySelector(".list-group").innerHTML = res.map(item=>`
    <li class="list-group-item"><a href="/web/views/detail/index.html?id=${item.id}">${item.title}</a></li>
  
    `).join("")  //创建数据，利用了ES6
}