web前端小项目，用html,css,javaScript，vue语言实现，可以实现新增笔记，查询笔记，修改笔记，删除单条笔记，批量删除笔记，清空笔记本，统计页面笔记数目的功能具有登录注册功能资源-CSDN下载

共9个文件

css：4个

html：2个

js：2个

vue

javaScript

需积分: 5 5 浏览量 2025-05-03 14:18:34 上传评论收藏 2.14MB ZIP 举报

在当前的Web开发领域中，实现一个功能全面的前端小项目是许多开发者进行实战练习的常见途径。本项目通过使用HTML、CSS、JavaScript和Vue.js框架，成功构建了一个支持完整笔记管理系统的前端应用。该系统不仅能够处理基本的笔记操作，如新增、查询、修改和删除笔记，还具备了批量删除和清空笔记本的功能，以及实时统计笔记数量的能力。具体来讲，该系统的前端部分是由多个组件和功能模块构成的。通过HTML实现了页面的结构，为用户提供一个可视化的界面进行操作。而CSS则负责页面的样式美化，保证用户体验的友好性。JavaScript作为浏览器端的脚本语言，承担了页面动态交互的核心任务，例如处理用户的输入、验证信息的合法性、与后端API进行通信等。Vue.js框架则为整个应用提供了数据驱动和组件化的开发模式，使得代码结构更加清晰，也便于后续的维护和扩展。此外，该系统还包含了一个用户登录和注册的功能。这意味着，除了基本的笔记管理，它还涉及到了用户身份验证的相关技术点。用户可以创建一个账户，并通过该账户登录系统，对自己创建的笔记进行管理。这一功能的实现通常需要后端的支持来处理用户认证和权限管理，但在前端部分，我们可以使用Vue.js框架配合本地存储或会话存储来简单模拟这一过程。在文件名称列表中，"记事本"这一项暗示了项目的核心功能和应用场景。记事本应用程序是用户进行个人笔记记录、信息整理的常见工具，而在Web前端中实现一个类似的项目，不仅可以提高用户在不同设备间的笔记同步能力，还可以通过互联网共享给其他用户使用。这个项目不仅覆盖了基础的Web前端开发技术，如HTML、CSS和JavaScript的使用，还通过Vue.js框架实现了更加现代化的前端应用开发。更重要的是，该项目通过包含用户认证功能和笔记管理功能，提供了一个完整的交互式Web应用案例，对于想要深入学习前端开发或者准备进行全栈开发的初学者来说，是一个非常有价值的学习资源。

资源推荐

资源详情

资源评论

收起资源包目录

记事本.zip （9个子文件）

记事本

src

img

image.png 2.13MB

index.js 6KB

css

normalize.css 6KB

reset.css 1KB

index.css 3KB

html

index.html 4KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>记事本登录注册</title> <link rel="stylesheet" href="../css/login.css"> </head> <body> <div id="app">  <div v-show="isLoginPage"> <h2>登录</h2> <form> <input v-model="loginUsername" placeholder="用户名" /> <input v-model="loginPassword" placeholder="密码" /> <button type="button" @click="login">登录</button> <button type="button" @click="showRegisterPage">注册</button> </form> </div>  <div v-show="isRegisterPage"> <h2>注册</h2> <form> <input v-model="registerUsername" placeholder="用户名" /> <input v-model="registerPassword" placeholder="密码" type="password" /> <button type="button" @click="register">注册</button> <button type="button" @click="showLoginPage">返回登录</button> </form> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script> new Vue({ el: '#app', data: { isLoginPage: true, isRegisterPage: false, isLoggedIn: false, loginUsername: '', loginPassword: '', registerUsername: '', registerPassword: '', registeredUsers: [], // 存储已注册用户信息的数组 usernamesSet: new Set(), // 用于确保用户名唯一性的Set notes: [], }, mounted() { const storedUsers = localStorage.getItem('registeredUsers'); if (storedUsers) { this.registeredUsers = JSON.parse(storedUsers); this.registeredUsers.forEach(user => { this.usernamesSet.add(user.username); }); } }, methods: { login() { const inputUsername = this.loginUsername; const inputPassword = this.loginPassword; const user = this.registeredUsers.find(u => u.username === inputUsername && u.password === inputPassword); if (user) { console.log('登录成功，跳转到指定页面'); window.location.href = '../html/index.html'; } else { alert('用户名或密码错误，请重试！'); } }, register() { const usernamePattern = /^[a-zA-Z0-9]+$/; const passwordPattern = /.{6,}/; if (!this.registerUsername.match(usernamePattern)) { alert('用户名只能包含字母和数字'); return; } if (!this.registerPassword.match(passwordPattern)) { alert('密码长度至少为6位'); return; } if (this.usernamesSet.has(this.registerUsername)) { alert('该用户名已注册，请更换用户名'); return; } const userId = Date.now(); // 使用时间戳作为唯一ID const newUser = { id: userId, username: this.registerUsername, password: this.registerPassword }; this.registeredUsers.push(newUser); this.usernamesSet.add(this.registerUsername); localStorage.setItem('registeredUsers', JSON.stringify(this.registeredUsers)); console.log('注册成功'); console.log('已注册用户数组:', this.registeredUsers); this.isRegisterPage = false; this.isLoginPage = true; }, showRegisterPage() { this.isLoginPage = false; this.isRegisterPage = true; }, showLoginPage() { this.isRegisterPage = false; this.isLoginPage = true; } } }); </script> </body> </html>

评论收藏

内容反馈