Java Web前端开发
一、VS code 的下载与安装
1.下载VS code
在群文件中下载VS code文件
2.安装VS code
- 双击安装包，按提示点击“下一步”。
- 重要选项：勾选以下选项（便于开发）
- 创建桌面快捷方式
- 将“通过Code打开”添加到右键菜单
- 添加到PATH（支持命令行使用code .打开项目）
- 安装完成后，打开VS Code
3.安装必要插件
- Chinese (Simplified) Language Pack
- HTML CSS Support
- HTML Preview
- Vetur
- vscode-icons
- Veu(offical)
二、VS cOde核心功能
1. 界面布局
活动栏：资源管理器、搜索、源代码管理、运行、扩展
侧边栏：显示项目文件和文件夹
编辑区：打开文件的主要编辑区域（支持分屏）
状态栏：显示行号、编码格式、Git分支等
命令面板（Ctrl+Shift+P / F1）：执行所有操作
2. 文件与项目管理
Ctrl+O：打开文件
Ctrl+K Ctrl+O：打开文件夹（项目）
Ctrl+N：新建文件
Ctrl+S：保存
Ctrl+Shift+S：另存为
Ctrl+W：关闭文件
三、HTML基础
1.HTML文档结构
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
<h1>Hello Java Web</h1>
<p>这是一个段落。</p>
</body>
</html>
<!DOCTYPE html>：声明为HTML5文档
<html>：根元素
<head>：元数据（标题、编码、样式、脚本链接）
<body>：可见内容
2.常用标签
| 类别 | 标签 | 说明 |
|---|---|---|
| 块级元素 | <h1>~<h6> |
标题 |
<p> |
段落 | |
<div> |
容器/区块 | |
<ul> / <ol> + <li> |
无序/有序列表 | |
| 行内元素 | <a href="..."> |
超链接 |
<img src="..." alt=""> |
图片 | |
<span> |
行内容器 | |
<strong> / <em> |
加粗 / 斜体 | |
| 表格 | <table> + <tr> + <td> |
表格 |
| 表单 | <form> + <input> + <button> |
用户输入 |
四、CSS样式
<style>
body { background-color: #f0f0f0; }
</style>
<!-- 外部链接 -->
<link rel="stylesheet" href="style.css">
五、微头条界面
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>微头条 - 登录 | 焕彩橙意</title>
<style>
/* 全局重置：移除所有默认边距，采用更直观的盒模型 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面主体 —— 充满视口，采用弹性布局居中，背景为暖阳橙渐变（更鲜明活力的橙色系） */
body {
height: 100vh;
/* 自定义橙红/日落渐变：从亮橙红到暖棕橙，视觉更有冲击力且温馨 */
background: linear-gradient(135deg, #FF9A44 0%, #FC6076 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', 'Roboto', 'PingFang SC', 'Microsoft YaHei', sans-serif;
padding: 1rem; /* 防止手机等小屏幕上卡片贴边 */
}
/* 登录卡片 ———— 宽度调整为400px，其余细节微调保持现代美学 */
.login-card {
width: 400px; /* 根据要求：卡片宽度改为 400px */
max-width: 94vw; /* 在小屏幕下不会溢出，保持响应式 */
background: #ffffff;
padding: 32px 28px;
border-radius: 28px; /* 圆润大圆角，更符合当下流行设计 */
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
transition: transform 0.2s ease, box-shadow 0.2s;
}
/* 悬浮时轻微抬升，交互精致 */
.login-card:hover {
transform: translateY(-3px);
box-shadow: 0 28px 40px -16px rgba(0, 0, 0, 0.3);
}
/* 标题：微头条登录 */
.login-card h2 {
text-align: center;
font-weight: 600;
font-size: 28px;
letter-spacing: -0.3px;
margin-bottom: 28px;
color: #1F2A48;
background: linear-gradient(135deg, #FF7A2F, #FF4B2E);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
display: inline-block;
width: 100%;
}
/* 全局输入框样式 — 干净简约，聚焦边框改为橙色系 */
.login-card input {
width: 100%;
padding: 14px 16px;
margin-bottom: 20px;
border: 1.5px solid #E9ECF2;
border-radius: 60px; /* 胶囊形状，更柔和现代 */
font-size: 15px;
background-color: #FEFDF9;
transition: all 0.25s;
outline: none;
font-weight: 500;
}
/* 输入框聚焦 -> 暖橙色边框 + 浅色阴影 */
.login-card input:focus {
border-color: #FF8C42;
box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.2);
background-color: #FFFFFF;
}
/* 占位符颜色稍柔和 */
.login-card input::placeholder {
color: #B1B9C9;
font-weight: 400;
font-size: 14px;
}
/* 登录按钮 — 按照要求改为橙色，并增加优雅悬停效果 */
.login-card button {
width: 100%;
padding: 14px 12px;
background: #FF8C42; /* 主橙色，明亮温暖 */
color: white;
border: none;
border-radius: 60px; /* 胶囊按钮，和输入框协调 */
font-size: 17px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.25s ease;
margin-top: 6px;
box-shadow: 0 8px 18px rgba(255, 140, 66, 0.3);
}
/* 按钮悬停加深橙色 + 微缩放 */
.login-card button:hover {
background: #E5711C;
transform: scale(0.98);
box-shadow: 0 5px 12px rgba(229, 113, 28, 0.4);
}
/* 按钮点击状态 */
.login-card button:active {
transform: scale(0.96);
background: #CC5E10;
}
/* 底部链接区域 — 放置“立即注册”和“忘记密码？”并排显示，符合要求：忘记密码链接放在注册链接旁边 */
.link-group {
display: flex;
justify-content: center;
align-items: center;
gap: 24px; /* 两个链接之间间隔24px，美观且易点 */
margin-top: 22px;
flex-wrap: wrap; /* 极端小屏可换行，依然友好 */
}
/* 通用链接样式 */
.link-group a {
font-size: 14px;
color: #6C7A91;
text-decoration: none;
font-weight: 500;
transition: color 0.2s, border-bottom 0.2s;
position: relative;
padding-bottom: 2px;
}
/* 链接悬浮效果 — 橙色主题延续 */
.link-group a:hover {
color: #FF7A2F;
text-decoration: underline;
text-underline-offset: 4px;
}
/* 可选增加一个小装饰间隔符，让两个链接更自然 (非必须，纯属提升精致感) */
.link-group a:first-child::after {
content: "";
position: absolute;
right: -14px;
top: 50%;
transform: translateY(-50%);
height: 12px;
width: 1px;
background-color: #E2E6F0;
}
/* 当屏幕宽度过窄（<400px）时隐藏伪元素分隔线，避免错位 */
@media (max-width: 400px) {
.link-group a:first-child::after {
display: none;
}
.link-group {
gap: 20px;
}
}
/* 增加辅助提示和信息反馈区（轻量demo友好，模拟交互反馈） */
.message-tip {
text-align: center;
margin-top: 18px;
font-size: 13px;
color: #E96C2A;
min-height: 36px;
font-weight: 500;
transition: all 0.2s;
}
/* 简单的响应式微调 */
@media (max-width: 480px) {
.login-card {
padding: 26px 20px;
border-radius: 24px;
}
.login-card h2 {
font-size: 26px;
margin-bottom: 22px;
}
.link-group a {
font-size: 13px;
}
}
</style>
</head>
<body>
<div class="login-card">
<h2>微头条登录</h2>
<!-- 用户名输入框 -->
<input type="text" id="username" placeholder="手机号 / 邮箱 / 用户名" autocomplete="username">
<!-- 密码输入框 -->
<input type="password" id="password" placeholder="密码" autocomplete="current-password">
<!-- 登录按钮 橙色主题 -->
<button id="loginBtn">登录 · 即刻探索</button>
<!-- 底部链接组：根据需求“增加‘忘记密码？’链接放在注册链接旁边” —— 两个链接并排 -->
<div class="link-group">
<a href="#" id="registerLink">立即注册</a>
<a href="#" id="forgotPwdLink">忘记密码？</a>
</div>
<!-- 轻提示区域，用于模拟登录反馈与演示交互（提升体验） -->
<div class="message-tip" id="formFeedback"></div>
</div>
<script>
// 纯前端演示demo，无后端接口，但保留真实交互提示，符合常规登录页体验
// 增加一些友好反馈，增强交互完整度
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const loginButton = document.getElementById('loginBtn');
const feedbackDiv = document.getElementById('formFeedback');
const registerLink = document.getElementById('registerLink');
const forgotPwdLink = document.getElementById('forgotPwdLink');
// 清除提示的辅助函数
function setMessage(msg, isError = true) {
if(feedbackDiv) {
feedbackDiv.textContent = msg;
if(isError) {
feedbackDiv.style.color = '#D1451E';
} else {
feedbackDiv.style.color = '#2E8B57';
}
// 3秒后自动清除非错误类重要信息，保证清爽
if(!isError) {
setTimeout(() => {
if(feedbackDiv.textContent === msg) feedbackDiv.textContent = '';
}, 2800);
}
}
}
// 模拟简单前端校验（演示交互）
function handleLogin() {
const username = usernameInput ? usernameInput.value.trim() : '';
const password = passwordInput ? passwordInput.value : '';
// 非空校验
if(username === '') {
setMessage('❓ 请填写用户名 / 邮箱 / 手机号', true);
usernameInput.focus();
return false;
}
if(password === '') {
setMessage('🔐 请输入密码', true);
passwordInput.focus();
return false;
}
// 为了演示美观，模拟验证过程（任意非空即可提示“登录体验” 无后端）
// 但为了更接近真实感，并展示欢迎效果: 若用户名长度>=2且密码长度>=3视为通过
if(username.length >= 2 && password.length >= 3) {
setMessage(`✨ 欢迎回来，${username}！即将跳转微头条首页 (演示模式)`, false);
// 这里可以模拟重定向或控制台日志，为了不破坏页面，仅展示提示并清空表单效果? (保留用户体验)
// 两秒后模拟重置提示并演示登录动作
setTimeout(() => {
alert(`🎉 登录演示成功！\n用户：${username}\n（实际项目中会调用后端接口进行身份验证）`);
feedbackDiv.textContent = '';
// 可清空密码框演示性质 (也可以不清，依场景)
// 但为避免重复提交感，不做强制清空，仅演示
}, 300);
return true;
} else {
setMessage('⚠️ 用户名至少2个字符，密码至少3个字符（演示校验）', true);
return false;
}
}
// 绑定登录按钮事件
if(loginButton) {
loginButton.addEventListener('click', (e) => {
e.preventDefault();
handleLogin();
});
}
// 支持按回车键快捷登录
const inputs = [usernameInput, passwordInput];
inputs.forEach(input => {
if(input) {
input.addEventListener('keypress', (e) => {
if(e.key === 'Enter') {
e.preventDefault();
handleLogin();
}
});
}
});
// 注册链接互动提示（示意无实际跳转，但完全保留链接样式）
if(registerLink) {
registerLink.addEventListener('click', (e) => {
e.preventDefault();
setMessage('📝 前往注册页面 (模拟路由，实际可对接注册页)', false);
// 制造一个友好的延迟提醒
setTimeout(() => {
alert('✨ 注册功能即将开放，马上加入微头条社区吧！\n(演示交互，未配置真实后端)');
}, 80);
});
}
// 忘记密码链接提示：放在注册链接旁边，满足需求
if(forgotPwdLink) {
forgotPwdLink.addEventListener('click', (e) => {
e.preventDefault();
setMessage('🔑 找回密码指引：请通过绑定手机或邮箱重置 (演示弹窗)', false);
setTimeout(() => {
alert('📧 忘记密码流程演示\n您可以通过注册邮箱或手机号重置密码，敬请期待正式功能。');
}, 80);
});
}
// 附加: 因为需求明确要求“增加‘忘记密码？’链接放在注册链接旁边”，已完成上方并排展示
// 同时满足卡片宽度400px，背景改为橙色渐变，按钮橙色，所有修改均已实现
// 控制台输出最终样式确认 (方便测试)
console.log('✅ 微头条登录页修改完成：卡片宽400px，橙色渐变背景，橙色按钮，忘记密码链接置于注册链接旁');
</script>
</body>
</html>
浙公网安备 33010602011771号