软件通网站建设怎样做网站二维码

软件通网站建设,怎样做网站二维码,网站有备案 为企业,旅游网络推广怎么做前面已经学习了TypeScript中的常用数据类型#xff0c;下面来看一下它们的简单应用。首先还是来看一下效果#xff1a;每条用户信息包含id、姓名、密码、邮箱、部门、角色、加入日期及是否活跃等信息。实现步骤#xff1a;1. 制作网页显示模板userinfo.html。这部分主要是显…前面已经学习了TypeScript中的常用数据类型下面来看一下它们的简单应用。首先还是来看一下效果每条用户信息包含id、姓名、密码、邮箱、部门、角色、加入日期及是否活跃等信息。实现步骤1. 制作网页显示模板userinfo.html。这部分主要是显示框架的制作和相应部分的样式设计。!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title style :root { --primary-color: #3498db; --secondary-color: #2ecc71; --background-color: #f9f9f9; --card-color: #ffffff; --text-color: #333333; --border-color: #e0e0e0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--background-color); color: var(--text-color); line-height: 1.6; padding: 20px; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; margin-bottom: 40px; padding: 20px; background: linear-gradient( 135deg, var(--primary-color), var(--secondary-color) ); color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } h1 { font-size: 2.5rem; margin-bottom: 10px; } .description { font-size: 1.1rem; opacity: 0.9; } .controls { display: flex; justify-content: space-between; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; } .search-box, .filter-options { flex: 1; min-width: 250px; } .data-section { margin-bottom: 40px; } .section-title { font-size: 1.8rem; margin-bottom: 20px; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; } .cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; } .card { background-color: var(--card-color); border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .card h3 { color: var(--primary-color); margin-bottom: 10px; } .card p { margin-bottom: 8px; } .status { display: inline-block; padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; } .active { background-color: #e8f6f3; color: var(--secondary-color); } .inactive { background-color: #fdeaea; color: #e74c3c; } media (max-width: 768px) { .controls { flex-direction: column; } .cards-container { grid-template-columns: 1fr; } } /style /head body div classcontainer div classdata-section h2 classsection-title用户信息卡片/h2 div classcards-container idusersContainer !-- 用户卡片将通过TypeScript动态生成 -- script srcuser.js/script /div /div /div /body /html2. 设计用户信息显示的TypeScript文件user.ts。这个文件主要由四部分组成。1用户信息接口User。interface User { id: number; name: string; password: string; email: string; department: string; role: string; isActive: boolean; joinDate: string; }2定义测试数据。const users:User[] [ { id: 1, name: 张三, password: 123456, email: zhangsanexample.com, department: 软件开发部, role: 管理员, isActive: true, joinDate: 2022-01-15, }, { id: 2, name: 李四, password: 123456, email: lisiexample.com, department: 软件开发部, role: 编辑, isActive: true, joinDate: 2022-03-22, }, { id: 3, name: 王五, password: 123456, email: wangwuexample.com, department: 测试部, role: 用户, isActive: false, joinDate: 2021-11-05, }, { id: 4, name: 赵六, password: 123456, email: zhaoliuexample.com, department: 技术部, role: 用户, isActive: true, joinDate: 2023-02-10, }, { id: 5, name: 钱七, password: 123456, email: qianqiexample.com, department: 技术部, role: 编辑, isActive: false, joinDate: 2022-07-30, }, { id: 6, name: 孙八, password: 123456, email: sunbaexample.com, department: 测试部, role: 管理员, isActive: true, joinDate: 2022-09-18, }, { id: 7, name: 周九, password: 123456, email: zhoujiuexample.com, department: 软件开发部, role: 用户, isActive: true, joinDate: 2022-05-12, } ];3渲染用户卡片的函数renderUsers。function renderUsers(usersData:User[]):void { const container document.getElementById(usersContainer)!; container.innerHTML ; usersData.forEach((user) { const card document.createElement(div); card.className card; const statusClass user.isActive ? status active : status inactive; const statusText user.isActive ? 活跃 : 非活跃; card.innerHTML h3${user.name}/h3 pstrong密码:/strong ${user.password}/p pstrong邮箱:/strong ${user.email}/p pstrong角色:/strong ${user.role}/p pstrong部门:/strong ${user.department}/p pstrong加入日期:/strong ${user.joinDate}/p pspan class${statusClass}${statusText}/span/p ; container.appendChild(card); }); }4渲染函数调用renderUsers(users);3. 生成user.js文件。在vscode终端中输入编译命令tsc user.ts在当前文件夹下会自动生成user.js文件。最后直接在浏览器中打开userInfo.html即可。注意事项user.ts、user.js和userInfo.html三个文件应当放在同一个文件夹中。附上user.ts完整代码。interface User { id: number; name: string; password: string; email: string; department: string; role: string; isActive: boolean; joinDate: string; } // 测试数据 const users:User[] [ { id: 1, name: 张三, password: 123456, email: zhangsanexample.com, department: 软件开发部, role: 管理员, isActive: true, joinDate: 2022-01-15, }, { id: 2, name: 李四, password: 123456, email: lisiexample.com, department: 软件开发部, role: 编辑, isActive: true, joinDate: 2022-03-22, }, { id: 3, name: 王五, password: 123456, email: wangwuexample.com, department: 测试部, role: 用户, isActive: false, joinDate: 2021-11-05, }, { id: 4, name: 赵六, password: 123456, email: zhaoliuexample.com, department: 技术部, role: 用户, isActive: true, joinDate: 2023-02-10, }, { id: 5, name: 钱七, password: 123456, email: qianqiexample.com, department: 技术部, role: 编辑, isActive: false, joinDate: 2022-07-30, }, { id: 6, name: 孙八, password: 123456, email: sunbaexample.com, department: 测试部, role: 管理员, isActive: true, joinDate: 2022-09-18, }, { id: 7, name: 周九, password: 123456, email: zhoujiuexample.com, department: 软件开发部, role: 用户, isActive: true, joinDate: 2022-05-12, } ]; // 渲染用户卡片 function renderUsers(usersData:User[]):void { const container document.getElementById(usersContainer)!; container.innerHTML ; usersData.forEach((user) { const card document.createElement(div); card.className card; const statusClass user.isActive ? status active : status inactive; const statusText user.isActive ? 活跃 : 非活跃; card.innerHTML h3${user.name}/h3 pstrong密码:/strong ${user.password}/p pstrong邮箱:/strong ${user.email}/p pstrong角色:/strong ${user.role}/p pstrong部门:/strong ${user.department}/p pstrong加入日期:/strong ${user.joinDate}/p pspan class${statusClass}${statusText}/span/p ; container.appendChild(card); }); } renderUsers(users);