D23-26 项目跟写

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css #es6

项目针对16-30岁的明日方舟爱好者，采用HTML+CSS+JavaScript基础搭建，结合BootStrap和jQuery框架，利用wangEditor进行内容编辑，并通过Echarts实现数据可视化。在开发过程中遇到环境配置、知识运用和错误调试等问题，计划巩固现有知识并学习更多技能。

1.需求分析：

1.1项目受众：面向16-30岁的明日方舟爱好者
1.2创作背景：在明日方舟庞大背景下的模块化故事集分块
1.3创作理念：为爱发电，高效、快捷地展示泰拉大陆发生的点点滴滴

2.主要功能

2.1后台发布增删改查
2.1.1图片展示
在这里插入图片描述
2.1.2非管理员图片展示

"users": [
    {
      "id": 1,
      "username": "admin",
      "password": "***",
      "role": "admin",
      "default": true
    }
    ]
//通过绑定role实现不同的管理员权限

2.2借助wangEditor实现编辑框
2.2.1图片展示
在这里插入图片描述

2.2.2代码展示

<div class="maincontent">
                        <!-- 面包屑 -->
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                              <li class="breadcrumb-item" aria-current="page">见闻</li>
                              <li class="breadcrumb-item active" aria-current="page">修缮条约</li>
                            </ol>
                          </nav>

                          <form id="editNewsForm">
                            <div class="mb-3">
                                <label for="title" class="form-label">标题</label>
                                <input type="text" class="form-control" id="title" aria-describedby="emailHelp" required>
                              </div>
                              <div class="mb-3">
                                <label for="content" class="form-label">合约详情</label>
                                <div id="content" style="border:1px solid #ced4da;">
                                    <div id="toolbar-container"><!-- 工具栏 --></div>
                                    <div id="editor-container"><!-- 编辑器 --></div>
                                </div>
                              </div>
                              <div class="mb-3">
                                <label for="category" class="form-label">类别</label>
                                <select class="form-select" aria-label="Default select example" id="category">
                                    <option selected>记实</option>
                                    <option value="0">特别行动记述</option>
                                    <option value="1">公共事物实录</option>
                                    <option value="2">罗德岛公告</option>
                                  </select>             
                              </div>
                              <div class="mb-3">
                                <label for="coverfile" class="form-label">影像</label>
                                <input type="file" class="form-control" id="coverfile">
                              </div>
                              <button type="submit" class="btn btn-primary">缔造</button>
                            </form>

                        </div>
                        <script>
                        //引入模块

import {load,isLogin} from "/code/admin/util/LoadView.js"
load("sidemenu-newsList")  //加载topbar 以及未来的sidemenu

//获取id
//console.log(new URL(location.href).searchParams.get("id"))
let updateId = new URL(location.href).searchParams.get("id")

//绑定内容
let content = ""
let cover = ""

const { createEditor, createToolbar } = window.wangEditor

const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml()
    //  console.log('editor content', html)
      // 也可以同步到 <textarea>
      content = html
    }
}

const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'
})

const toolbarConfig = {}

const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
})


coverfile.onchange = function(evt){
    //console.log(evt.target.files[0])
    //===>base64

    let reader = new FileReader()

    reader.readAsDataURL(evt.target.files[0])

    reader.onload = function(e){
        //console.log(e.target.result)
        cover = e.target.result 
    }
}

editNewsForm.onsubmit = async function(evt){
    evt.preventDefault()
    await fetch(`http://localhost:5000/news/${updateId}`,{
        headers:{
            "content-type":"application/json"
        },
        method:"PATCH",   //补丁式
        body:JSON.stringify({
            title:title.value,
            content,
            category:category.value,
            cover,
            //作者
            author:JSON.parse(isLogin()).username
        })
    }).then(res=>res.json())
    location.href = "/code/admin/views/news-manage/NewsList/index.html"
}

async function render(){
    let {title,category,content:mycontent,cover:mycover} =await fetch(`http://localhost:5000/news/${updateId}`).then
    (res=>res.json())
    //console.log()
    document.querySelector("#title").value = title
    document.querySelector("#category").value = category

    //设置content mycontent:防止串名
    editor.setHtml(mycontent)
    
    content = mycontent

    cover = mycover
}

render()
                        </script>

主要借助引入wangEditor模块，实现相关文本的编辑

2.3Echarts数据显示
2.3.1图片展示
在这里插入图片描述
2.3.2实现原理：

通过对Echarts模块的调用，设置对象和for in 结构，将用户编辑的内容填充到饼状图中，实现数据的可视化

3.实现技术

3.1基础搭建：HTML+CSS+JavaScript
3.2框架：BootStrap + jQuery
3.3外部支持：BootStrap + Echarts + wangEditor

4.项目总结

4.1面对困难
4.1.1缺乏对node.js的环境建设经验，由此衍生出后续其他开发工具环境建设的不熟悉
4.1.2对于整体知识的运用和理解欠佳，知识点出现遗忘
4.1.3操作不断失误，大小bug都有，复查周期长
4.2后续规划
4.2.1巩固现有知识，抽出时间将前面学习的编码内容复学
4.2.2多写多练，代码编写唯手熟尔
4.2.3根据空暇时间学习一点专业外技术，如PPT和剪辑
4.3整体总结
4.3.1对于本次项目跟写，所揭露出JS编码部分能力薄弱，模块化运用能力有待提高
4.3.2初次尝试小网页的撰写，统筹总体，细致分化，合理节流，对三者的理解才刚刚开始
4.3.3能力不足，胆气尚欠