软件工程第二次结对作业
| 这个作业属于哪个课程 | https://edu.cnblogs.com/campus/fzu/SE2024 |
|---|---|
| 这个作业要求在哪里 | https://edu.cnblogs.com/campus/fzu/SE2024/homework/13281 |
| 这个作业的目标 | 开发一个可以实现发布项目，招募伙伴，实时交流的网页 |
| 学号 | 162302127,102201228 |
2024秋软件工程结对作业(第二次之程序实现)
具体分工
PSP表格
| PSP2.1 | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 60 | 60 |
| Estimate | 估计这个任务需要多少时间 | 5 | 5 |
| Development | 开发 | 300 | 400 |
| Analysis | 需求分析 (包括学习新技术) | 20 | 30 |
| Design Spec | 生成设计文档 | 10 | 20 |
| Design Review | 设计复审 | 10 | 15 |
| Coding Standard | 代码规范 (为目前的开发制定合适的规范) | 5 | 10 |
| Design | 具体设计 | 15 | 25 |
| Coding | 具体编码 | 80 | 150 |
| Code Review | 代码复审 | 10 | 20 |
| Test | 测试（自我测试，修改代码，提交修改） | 10 | 30 |
| Reporting | 报告 | 15 | 10 |
| Test Report | 测试报告 | 5 | 15 |
| Size Measurement | 计算工作量 | 5 | 10 |
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | 10 | 20 |
| 合计 | 480 | 480 |
解题思路描述与设计实现说明
-
由于没有掌握Java或者Kotlin导致不会Android开发，便选择制作相对擅长的网页
虽然原型是APP，但是流程上可以继承第一次作业的原型设计
本来用AI写，但是AI容易“遗忘”，总是写不好CSS，决定自己通过Bootstrap Kit写网页
后端实在为难我了，从网上copy，做到网页里 -
流程图
-
重要的/有价值的代码片段
关于重要的/有价值的代码片段，我觉得还是实现聊天功能的部分，因为我自己暂时写不出来
<!-- 自己的脚本 -->
<script>
// 09.用户输入昵称
var name = prompt("请输入你的昵称：");
// 10.初始化socket
let socket = io();
console.log(socket);
//11.发送昵称给后端
socket.emit("join", name)
// 13.接受到新用户加入事件的处理
//收到服务器发来的join事件时 往ul中添加一个li 展示某用户加入聊天
socket.on("join", function (user) {
$('#messages').append($('<li class="notice">').text("系统："+ user + " 加入了聊天"));
})
// 14. 为了区分当前的用户 给网页标题改成当前用户昵称
document.title = name;
// 12.往ul中添加消息 每一个消息就是一个li标签
function addMsgFun(msg,name) {
$('#messages').append($('<li>').text(`${name}：${msg}`));
}
// 15.用户输入消息，然后点击发送按钮 将用户的消息发送给服务器，然后服务器将消息广播给所有的用户
function sendBtn() {
// 先获取输入框的内容
let msg = $(".iptbox input").val();
// 判断昵称是否为空
if(!msg){
return alert("请输入内容");
}
// 然后将内容发送给服务器 发送事件为sendMsgFun
// 发送内容为 消息和昵称 昵称则用于展示在消息前面
socket.emit("sendMsgFun", msg,name);
// 然后将输入框的内容清空
$(".iptbox input").val("");
}
// 17. 接收到服务器发来的sendMsgFunServe事件，拿到服务器广播的消息内容
// 然会调用addMsgFun方法 将新消息呈现在面板中
socket.on("sendMsgFunServe", function (msg,name) {
addMsgFun(msg,name)
})
</script>
目录说明和使用说明
- 目录是如何组织的
为啥有asset和assets？因为一个是Bootstrap模板的，一个是我自己原来的，asset文件夹是没用到的资源
162302127-102201228
├─ asset
│ ├─ css
│ │ ├─ login.css
│ │ └─ sidebars.css
│ ├─ img
│ │ ├─ bigicon.png
│ │ └─ icon.png
│ ├─ js
│ └─ others
│ ├─ bootstrap.css
│ ├─ index.html
│ ├─ login.html
│ └─ sidebars.js
├─ assets
│ ├─ css
│ │ └─ style.css
│ ├─ img
│ │ ├─ apple-touch-icon.png
│ │ ├─ biglogo.png
│ │ ├─ card.jpg
│ │ ├─ favicon.png
│ │ ├─ logo.png
│ │ ├─ messages-1.jpg
│ │ ├─ messages-2.jpg
│ │ ├─ messages-3.jpg
│ │ ├─ news-1.jpg
│ │ ├─ news-2.jpg
│ │ ├─ news-3.jpg
│ │ ├─ news-4.jpg
│ │ ├─ news-5.jpg
│ │ ├─ not-found.svg
│ │ ├─ product-1.jpg
│ │ ├─ product-2.jpg
│ │ ├─ product-3.jpg
│ │ ├─ product-4.jpg
│ │ ├─ product-5.jpg
│ │ ├─ profile-img.jpg
│ │ ├─ slides-1.jpg
│ │ ├─ slides-2.jpg
│ │ └─ slides-3.jpg
│ ├─ js
│ │ └─ main.js
│ ├─ scss
│ │ └─ Readme.txt
│ └─ vendor
│ ├─ apexcharts
│ │ ├─ apexcharts.amd.js
│ │ ├─ apexcharts.common.js
│ │ ├─ apexcharts.css
│ │ ├─ apexcharts.esm.js
│ │ ├─ apexcharts.js
│ │ ├─ apexcharts.min.js
│ │ └─ locales
│ │ ├─ ar.json
│ │ ├─ be-cyrl.json
│ │ ├─ be-latn.json
│ │ ├─ ca.json
│ │ ├─ cs.json
│ │ ├─ da.json
│ │ ├─ de.json
│ │ ├─ el.json
│ │ ├─ en.json
│ │ ├─ es.json
│ │ ├─ et.json
│ │ ├─ fa.json
│ │ ├─ fi.json
│ │ ├─ fr.json
│ │ ├─ he.json
│ │ ├─ hi.json
│ │ ├─ hr.json
│ │ ├─ hu.json
│ │ ├─ hy.json
│ │ ├─ id.json
│ │ ├─ it.json
│ │ ├─ ja.json
│ │ ├─ ka.json
│ │ ├─ ko.json
│ │ ├─ lt.json
│ │ ├─ lv.json
│ │ ├─ ms.json
│ │ ├─ nb.json
│ │ ├─ nl.json
│ │ ├─ pl.json
│ │ ├─ pt-br.json
│ │ ├─ pt.json
│ │ ├─ rs.json
│ │ ├─ ru.json
│ │ ├─ se.json
│ │ ├─ sk.json
│ │ ├─ sl.json
│ │ ├─ sq.json
│ │ ├─ th.json
│ │ ├─ tr.json
│ │ ├─ ua.json
│ │ ├─ vi.json
│ │ ├─ zh-cn.json
│ │ └─ zh-tw.json
│ ├─ bootstrap
│ │ ├─ css
│ │ │ ├─ bootstrap-grid.css
│ │ │ ├─ bootstrap-grid.css.map
│ │ │ ├─ bootstrap-grid.min.css
│ │ │ ├─ bootstrap-grid.min.css.map
│ │ │ ├─ bootstrap-grid.rtl.css
│ │ │ ├─ bootstrap-grid.rtl.css.map
│ │ │ ├─ bootstrap-grid.rtl.min.css
│ │ │ ├─ bootstrap-grid.rtl.min.css.map
│ │ │ ├─ bootstrap-reboot.css
│ │ │ ├─ bootstrap-reboot.css.map
│ │ │ ├─ bootstrap-reboot.min.css
│ │ │ ├─ bootstrap-reboot.min.css.map
│ │ │ ├─ bootstrap-reboot.rtl.css
│ │ │ ├─ bootstrap-reboot.rtl.css.map
│ │ │ ├─ bootstrap-reboot.rtl.min.css
│ │ │ ├─ bootstrap-reboot.rtl.min.css.map
│ │ │ ├─ bootstrap-utilities.css
│ │ │ ├─ bootstrap-utilities.css.map
│ │ │ ├─ bootstrap-utilities.min.css
│ │ │ ├─ bootstrap-utilities.min.css.map
│ │ │ ├─ bootstrap-utilities.rtl.css
│ │ │ ├─ bootstrap-utilities.rtl.css.map
│ │ │ ├─ bootstrap-utilities.rtl.min.css
│ │ │ ├─ bootstrap-utilities.rtl.min.css.map
│ │ │ ├─ bootstrap.css
│ │ │ ├─ bootstrap.css.map
│ │ │ ├─ bootstrap.min.css
│ │ │ ├─ bootstrap.min.css.map
│ │ │ ├─ bootstrap.rtl.css
│ │ │ ├─ bootstrap.rtl.css.map
│ │ │ ├─ bootstrap.rtl.min.css
│ │ │ ├─ bootstrap.rtl.min.css.map
│ │ │ └─ prb.txt
│ │ └─ js
│ │ ├─ bootstrap.bundle.js
│ │ ├─ bootstrap.bundle.js.map
│ │ ├─ bootstrap.bundle.min.js
│ │ ├─ bootstrap.bundle.min.js.map
│ │ ├─ bootstrap.esm.js
│ │ ├─ bootstrap.esm.js.map
│ │ ├─ bootstrap.esm.min.js
│ │ ├─ bootstrap.esm.min.js.map
│ │ ├─ bootstrap.js
│ │ ├─ bootstrap.js.map
│ │ ├─ bootstrap.min.js
│ │ └─ bootstrap.min.js.map
│ ├─ bootstrap-icons
│ │ ├─ bootstrap-icons.css
│ │ ├─ bootstrap-icons.json
│ │ ├─ bootstrap-icons.min.css
│ │ ├─ bootstrap-icons.scss
│ │ └─ fonts
│ │ ├─ bootstrap-icons.woff
│ │ └─ bootstrap-icons.woff2
│ ├─ boxicons
│ │ ├─ css
│ │ │ ├─ animations.css
│ │ │ ├─ boxicons.css
│ │ │ ├─ boxicons.min.css
│ │ │ └─ transformations.css
│ │ └─ fonts
│ │ ├─ boxicons.eot
│ │ ├─ boxicons.svg
│ │ ├─ boxicons.ttf
│ │ ├─ boxicons.woff
│ │ └─ boxicons.woff2
│ ├─ chart.js
│ │ ├─ chart.cjs
│ │ ├─ chart.cjs.map
│ │ ├─ chart.js
│ │ ├─ chart.js.map
│ │ ├─ chart.umd.js
│ │ ├─ chart.umd.js.map
│ │ ├─ chunks
│ │ │ ├─ helpers.segment.cjs
│ │ │ ├─ helpers.segment.cjs.map
│ │ │ ├─ helpers.segment.js
│ │ │ └─ helpers.segment.js.map
│ │ ├─ controllers
│ │ │ ├─ controller.bar.d.ts
│ │ │ ├─ controller.bubble.d.ts
│ │ │ ├─ controller.doughnut.d.ts
│ │ │ ├─ controller.line.d.ts
│ │ │ ├─ controller.pie.d.ts
│ │ │ ├─ controller.polarArea.d.ts
│ │ │ ├─ controller.radar.d.ts
│ │ │ ├─ controller.scatter.d.ts
│ │ │ └─ index.d.ts
│ │ ├─ core
│ │ │ ├─ core.adapters.d.ts
│ │ │ ├─ core.animation.d.ts
│ │ │ ├─ core.animations.d.ts
│ │ │ ├─ core.animations.defaults.d.ts
│ │ │ ├─ core.animator.d.ts
│ │ │ ├─ core.config.d.ts
│ │ │ ├─ core.controller.d.ts
│ │ │ ├─ core.datasetController.d.ts
│ │ │ ├─ core.defaults.d.ts
│ │ │ ├─ core.element.d.ts
│ │ │ ├─ core.interaction.d.ts
│ │ │ ├─ core.layouts.d.ts
│ │ │ ├─ core.layouts.defaults.d.ts
│ │ │ ├─ core.plugins.d.ts
│ │ │ ├─ core.registry.d.ts
│ │ │ ├─ core.scale.autoskip.d.ts
│ │ │ ├─ core.scale.d.ts
│ │ │ ├─ core.scale.defaults.d.ts
│ │ │ ├─ core.ticks.d.ts
│ │ │ ├─ core.typedRegistry.d.ts
│ │ │ └─ index.d.ts
│ │ ├─ elements
│ │ │ ├─ element.arc.d.ts
│ │ │ ├─ element.bar.d.ts
│ │ │ ├─ element.line.d.ts
│ │ │ ├─ element.point.d.ts
│ │ │ └─ index.d.ts
│ │ ├─ helpers
│ │ │ ├─ helpers.canvas.d.ts
│ │ │ ├─ helpers.collection.d.ts
│ │ │ ├─ helpers.color.d.ts
│ │ │ ├─ helpers.config.d.ts
│ │ │ ├─ helpers.config.types.d.ts
│ │ │ ├─ helpers.core.d.ts
│ │ │ ├─ helpers.curve.d.ts
│ │ │ ├─ helpers.dom.d.ts
│ │ │ ├─ helpers.easing.d.ts
│ │ │ ├─ helpers.extras.d.ts
│ │ │ ├─ helpers.interpolation.d.ts
│ │ │ ├─ helpers.intl.d.ts
│ │ │ ├─ helpers.math.d.ts
│ │ │ ├─ helpers.options.d.ts
│ │ │ ├─ helpers.rtl.d.ts
│ │ │ ├─ helpers.segment.d.ts
│ │ │ └─ index.d.ts
│ │ ├─ helpers.cjs
│ │ ├─ helpers.cjs.map
│ │ ├─ helpers.js
│ │ ├─ helpers.js.map
│ │ ├─ index.d.ts
│ │ ├─ index.umd.d.ts
│ │ ├─ platform
│ │ │ ├─ index.d.ts
│ │ │ ├─ platform.base.d.ts
│ │ │ ├─ platform.basic.d.ts
│ │ │ └─ platform.dom.d.ts
│ │ ├─ plugins
│ │ │ ├─ index.d.ts
│ │ │ ├─ plugin.colors.d.ts
│ │ │ ├─ plugin.decimation.d.ts
│ │ │ ├─ plugin.filler
│ │ │ │ ├─ filler.drawing.d.ts
│ │ │ │ ├─ filler.helper.d.ts
│ │ │ │ ├─ filler.options.d.ts
│ │ │ │ ├─ filler.segment.d.ts
│ │ │ │ ├─ filler.target.d.ts
│ │ │ │ ├─ filler.target.stack.d.ts
│ │ │ │ ├─ index.d.ts
│ │ │ │ └─ simpleArc.d.ts
│ │ │ ├─ plugin.legend.d.ts
│ │ │ ├─ plugin.subtitle.d.ts
│ │ │ ├─ plugin.title.d.ts
│ │ │ └─ plugin.tooltip.d.ts
│ │ ├─ scales
│ │ │ ├─ index.d.ts
│ │ │ ├─ scale.category.d.ts
│ │ │ ├─ scale.linear.d.ts
│ │ │ ├─ scale.linearbase.d.ts
│ │ │ ├─ scale.logarithmic.d.ts
│ │ │ ├─ scale.radialLinear.d.ts
│ │ │ ├─ scale.time.d.ts
│ │ │ └─ scale.timeseries.d.ts
│ │ ├─ types
│ │ │ ├─ animation.d.ts
│ │ │ ├─ basic.d.ts
│ │ │ ├─ color.d.ts
│ │ │ ├─ geometric.d.ts
│ │ │ ├─ index.d.ts
│ │ │ ├─ layout.d.ts
│ │ │ └─ utils.d.ts
│ │ └─ types.d.ts
│ ├─ echarts
│ │ ├─ echarts.common.js
│ │ ├─ echarts.common.js.map
│ │ ├─ echarts.common.min.js
│ │ ├─ echarts.esm.js
│ │ ├─ echarts.esm.js.map
│ │ ├─ echarts.esm.min.js
│ │ ├─ echarts.esm.min.mjs
│ │ ├─ echarts.esm.mjs
│ │ ├─ echarts.esm.mjs.map
│ │ ├─ echarts.js
│ │ ├─ echarts.js.map
│ │ ├─ echarts.min.js
│ │ ├─ echarts.simple.js
│ │ ├─ echarts.simple.js.map
│ │ ├─ echarts.simple.min.js
│ │ ├─ extension
│ │ │ ├─ bmap.js
│ │ │ ├─ bmap.js.map
│ │ │ ├─ bmap.min.js
│ │ │ ├─ dataTool.js
│ │ │ ├─ dataTool.js.map
│ │ │ └─ dataTool.min.js
│ │ └─ package.json
│ ├─ php-email-form
│ │ └─ validate.js
│ ├─ quill
│ │ ├─ quill.bubble.css
│ │ ├─ quill.bubble.css.map
│ │ ├─ quill.core.css
│ │ ├─ quill.core.css.map
│ │ ├─ quill.core.js
│ │ ├─ quill.core.js.LICENSE.txt
│ │ ├─ quill.core.js.map
│ │ ├─ quill.js
│ │ ├─ quill.js.LICENSE.txt
│ │ ├─ quill.js.map
│ │ ├─ quill.snow.css
│ │ └─ quill.snow.css.map
│ ├─ remixicon
│ │ ├─ remixicon.css
│ │ ├─ remixicon.eot
│ │ ├─ remixicon.glyph.json
│ │ ├─ remixicon.less
│ │ ├─ remixicon.svg
│ │ ├─ remixicon.symbol.svg
│ │ ├─ remixicon.ttf
│ │ ├─ remixicon.woff
│ │ └─ remixicon.woff2
│ ├─ simple-datatables
│ │ ├─ simple-datatables.js
│ │ └─ style.css
│ └─ tinymce
│ ├─ bower.json
│ ├─ CHANGELOG.md
│ ├─ composer.json
│ ├─ icons
│ │ └─ default
│ │ ├─ icons.js
│ │ ├─ icons.min.js
│ │ └─ index.js
│ ├─ license.md
│ ├─ models
│ │ └─ dom
│ │ ├─ index.js
│ │ ├─ model.js
│ │ └─ model.min.js
│ ├─ package.json
│ ├─ plugins
│ │ ├─ accordion
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ advlist
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ anchor
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ autolink
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ autoresize
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ autosave
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ charmap
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ code
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ codesample
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ directionality
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ emoticons
│ │ │ ├─ index.js
│ │ │ ├─ js
│ │ │ │ ├─ emojiimages.js
│ │ │ │ ├─ emojiimages.min.js
│ │ │ │ ├─ emojis.js
│ │ │ │ └─ emojis.min.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ fullscreen
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ help
│ │ │ ├─ index.js
│ │ │ ├─ js
│ │ │ │ └─ i18n
│ │ │ │ └─ keynav
│ │ │ │ ├─ ar.js
│ │ │ │ ├─ bg_BG.js
│ │ │ │ ├─ ca.js
│ │ │ │ ├─ cs.js
│ │ │ │ ├─ da.js
│ │ │ │ ├─ de.js
│ │ │ │ ├─ el.js
│ │ │ │ ├─ en.js
│ │ │ │ ├─ es.js
│ │ │ │ ├─ eu.js
│ │ │ │ ├─ fa.js
│ │ │ │ ├─ fi.js
│ │ │ │ ├─ fr_FR.js
│ │ │ │ ├─ he_IL.js
│ │ │ │ ├─ hi.js
│ │ │ │ ├─ hr.js
│ │ │ │ ├─ hu_HU.js
│ │ │ │ ├─ id.js
│ │ │ │ ├─ it.js
│ │ │ │ ├─ ja.js
│ │ │ │ ├─ kk.js
│ │ │ │ ├─ ko_KR.js
│ │ │ │ ├─ ms.js
│ │ │ │ ├─ nb_NO.js
│ │ │ │ ├─ nl.js
│ │ │ │ ├─ pl.js
│ │ │ │ ├─ pt_BR.js
│ │ │ │ ├─ pt_PT.js
│ │ │ │ ├─ ro.js
│ │ │ │ ├─ ru.js
│ │ │ │ ├─ sk.js
│ │ │ │ ├─ sl_SI.js
│ │ │ │ ├─ sv_SE.js
│ │ │ │ ├─ th_TH.js
│ │ │ │ ├─ tr.js
│ │ │ │ ├─ uk.js
│ │ │ │ ├─ vi.js
│ │ │ │ ├─ zh_CN.js
│ │ │ │ └─ zh_TW.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ image
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ importcss
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ insertdatetime
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ link
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ lists
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ media
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ nonbreaking
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ pagebreak
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ preview
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ quickbars
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ save
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ searchreplace
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ table
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ visualblocks
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ ├─ visualchars
│ │ │ ├─ index.js
│ │ │ ├─ plugin.js
│ │ │ └─ plugin.min.js
│ │ └─ wordcount
│ │ ├─ index.js
│ │ ├─ plugin.js
│ │ └─ plugin.min.js
│ ├─ README.md
│ ├─ skins
│ │ ├─ content
│ │ │ ├─ dark
│ │ │ │ ├─ content.css
│ │ │ │ ├─ content.js
│ │ │ │ └─ content.min.css
│ │ │ ├─ default
│ │ │ │ ├─ content.css
│ │ │ │ ├─ content.js
│ │ │ │ └─ content.min.css
│ │ │ ├─ document
│ │ │ │ ├─ content.css
│ │ │ │ ├─ content.js
│ │ │ │ └─ content.min.css
│ │ │ ├─ tinymce-5
│ │ │ │ ├─ content.css
│ │ │ │ ├─ content.js
│ │ │ │ └─ content.min.css
│ │ │ ├─ tinymce-5-dark
│ │ │ │ ├─ content.css
│ │ │ │ ├─ content.js
│ │ │ │ └─ content.min.css
│ │ │ └─ writer
│ │ │ ├─ content.css
│ │ │ ├─ content.js
│ │ │ └─ content.min.css
│ │ └─ ui
│ │ ├─ oxide
│ │ │ ├─ content.css
│ │ │ ├─ content.inline.css
│ │ │ ├─ content.inline.js
│ │ │ ├─ content.inline.min.css
│ │ │ ├─ content.js
│ │ │ ├─ content.min.css
│ │ │ ├─ skin.css
│ │ │ ├─ skin.js
│ │ │ ├─ skin.min.css
│ │ │ ├─ skin.shadowdom.css
│ │ │ ├─ skin.shadowdom.js
│ │ │ └─ skin.shadowdom.min.css
│ │ ├─ oxide-dark
│ │ │ ├─ content.css
│ │ │ ├─ content.inline.css
│ │ │ ├─ content.inline.js
│ │ │ ├─ content.inline.min.css
│ │ │ ├─ content.js
│ │ │ ├─ content.min.css
│ │ │ ├─ skin.css
│ │ │ ├─ skin.js
│ │ │ ├─ skin.min.css
│ │ │ ├─ skin.shadowdom.css
│ │ │ ├─ skin.shadowdom.js
│ │ │ └─ skin.shadowdom.min.css
│ │ ├─ tinymce-5
│ │ │ ├─ content.css
│ │ │ ├─ content.inline.css
│ │ │ ├─ content.inline.js
│ │ │ ├─ content.inline.min.css
│ │ │ ├─ content.js
│ │ │ ├─ content.min.css
│ │ │ ├─ skin.css
│ │ │ ├─ skin.js
│ │ │ ├─ skin.min.css
│ │ │ ├─ skin.shadowdom.css
│ │ │ ├─ skin.shadowdom.js
│ │ │ └─ skin.shadowdom.min.css
│ │ └─ tinymce-5-dark
│ │ ├─ content.css
│ │ ├─ content.inline.css
│ │ ├─ content.inline.js
│ │ ├─ content.inline.min.css
│ │ ├─ content.js
│ │ ├─ content.min.css
│ │ ├─ skin.css
│ │ ├─ skin.js
│ │ ├─ skin.min.css
│ │ ├─ skin.shadowdom.css
│ │ ├─ skin.shadowdom.js
│ │ └─ skin.shadowdom.min.css
│ ├─ themes
│ │ └─ silver
│ │ ├─ index.js
│ │ ├─ theme.js
│ │ └─ theme.min.js
│ ├─ tinymce.d.ts
│ ├─ tinymce.js
│ └─ tinymce.min.js
├─ charts-apexcharts.html
├─ charts-chartjs.html
├─ charts-echarts.html
├─ components-accordion.html
├─ components-alerts.html
├─ components-badges.html
├─ components-breadcrumbs.html
├─ components-buttons.html
├─ components-cards.html
├─ components-carousel.html
├─ components-list-group.html
├─ components-modal.html
├─ components-pagination.html
├─ components-progress.html
├─ components-spinners.html
├─ components-tabs.html
├─ components-tooltips.html
├─ forms
│ ├─ contact.php
│ └─ Readme.txt
├─ forms-editors.html
├─ forms-elements.html
├─ forms-layouts.html
├─ forms-validation.html
├─ icons-bootstrap.html
├─ icons-boxicons.html
├─ icons-remix.html
├─ index.html
├─ pages-blank.html
├─ pages-contact.html
├─ pages-error-404.html
├─ pages-faq.html
├─ pages-login.html
├─ pages-register.html
├─ Readme.txt
├─ tables-data.html
├─ tables-general.html
└─ users-profile.html
测试人员如何运行你的网页
F12-->Devtools-->LightHouse
结果不太妙？因为直接从仓库打开网页导致许多没用的资产被加载
给出Github的代码签入记录截图
遇到的代码模块异常或结对困难及解决方法
最早用AI生成侧边栏，难以实现动画，从网上找模板
有何收获
原型设计并不但，但是到了具体开发工作量就暴增，一方面是由于前期的原型设计与代码构建脱轨，另一方面是自身能力不足。个人认为应当今后应完整的掌握一个方向所需的技能，无论是移动端还是web端，这样才不会出现这次作业的困难情况。此外，并不是所有AI工具都能够对我们构建代码有很好的帮助，有时甚至会降低开发的效率，选择合适的AIGC工具尤为重要。在这个项目的开发过程中我尝试了vscode的Fitten Code插件，这是专门针对HTML的AI工具，对我此次完成作业有很大帮助。
评价你的队友
📖我的队友能力突出，对网页制作较为擅长，在这次原型的实现中出了很大的力，在我迷惑时，他能与我探讨并给出合理的建议，我们相互帮助，细致分工合作，较好的完成了任务，期待下一次和他合作
需要改进的地方
❤️ 在时间安排上，可以更加充裕一些，打磨项目的时间不足。一些细节方面还要改进。:hand
