前端3+1-18

html

题目:怎样在页面上实现一个圆形的可点击区域
答案:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .circle {
      width: 30px;
      height: 30px;
      margin: 30px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
  <script>
    function alert1() {
      alert('1');
    }
  </script>
</head>

<body>
  <!-- 法一;border-radius -->
  <div class="circle" onclick="alert1()"></div>
  <!-- 法二:canvas -->
  <canvas id="circleCanvas" width="100" height="100"></canvas>
  <script>
    var c = document.getElementById('circleCanvas');
    var ctx = c.getContext('2d');
    ctx.beginPath();
    ctx.arc(30, 30, 15, 0, 2 * Math.PI);
    ctx.stroke();
    c.addEventListener('click', () => {
      alert('2');
    })
  </script>
</body>

</html>

css

题目:什么是FOUC,如何避免
答案:
描述:由于style放在html后面,解析html时没能渲染样式,加载出没有样式的页面;后面遇到style再暂停渲染去解析css,重新渲染样式;由此造成的页面有一瞬间的闪烁现象
避免:避免使用@import;style要放在html前面

js

题目:你理解的use strict;有啥优缺点
答案:
描述:在文件头部或函数代码块头部使用use strict,代表该范围内的代码遵循严格模式
优缺点:可以消除js语法上一些不合理、不安全的地方,使代码更健壮,比如:
严格模式不允许使用未声明变量

### 系统调研报告:基于前后端分离架构的技术选型与分析 #### 1. 技术选型原因 在现代 Web 应用开发中,前后端分离架构因其高灵活性和可维护性而备受青睐。后端采用 SpringBoot3、MyBatis 和 Hutool 的组合[^1],前端则使用 Vue3、Element-Plus、Vue-Router 和 Axios 的技术栈[^2],数据库选用 MySQL[^3],以满足高性能、易扩展的系统需求。 SpringBoot3 提供了快速构建微服务的能力,并支持 JDK17+,确保与最新 Java 版本的兼容性[^4]。MyBatis 作为轻量级 ORM 框架,能够灵活定义 SQL 查询,适用于复杂业务场景[^5]。Hutool 提供了一系列工具类,简化了开发过程中的常用操作,例如日期处理和字符串操作[^6]。 前端部分,Vue3 是基于 Composition API 的新一代框架,提供了更强大的响应式机制和性能优化[^7]。Element-Plus 是 Vue3 的 UI 组件库,具有丰富的组件和良好的用户体验[^8]。Vue-Router 实现了前端路由管理,Axios 则用于与后端进行高效的数据交互[^9]。 #### 2. 版本要求 为确保系统的稳定性和兼容性,需遵循以下版本要求: - **JDK**:不低于 JDK17,以支持 SpringBoot3 的运行环境[^10]。 - **MySQL**:建议使用 MySQL5.7 或 MySQL8,确保对复杂查询的支持和性能优化[^11]。 - **Node.js**:版本需为 Node.js18+,以支持 Vue3 和相关依赖的安装与运行[^12]。 - **Maven**:建议版本为 Maven3.8+,用于管理后端项目的依赖和构建流程[^13]。 #### 3. 各组件的功能与优势分析 ##### 3.1 后端组件 - **SpringBoot3**:提供开箱即用的功能,减少配置工作量,支持 RESTful API 开发,适合快速构建企业级应用[^14]。 - **MyBatis**:通过 XML 或注解方式定义 SQL,支持动态 SQL,适用于需要灵活控制 SQL 的场景[^15]。 - **Hutool**:集成大量工具类,简化开发流程,减少重复代码,提升开发效率[^16]。 ##### 3.2 前端组件 - **Vue3**:引入 Composition API,增强代码复用性和逻辑组织能力,同时优化渲染性能[^17]。 - **Element-Plus**:提供美观且功能强大的 UI 组件,支持国际化和主题定制,降低前端开发成本[^18]。 - **Vue-Router**:实现前端页面的路由管理,支持嵌套路由和动态路由加载,提升用户体验[^19]。 - **Axios**:用于发起 HTTP 请求,支持 Promise 和拦截器功能,便于统一处理请求和响应[^20]。 ##### 3.3 数据库 - **MySQL**:作为关系型数据库,支持事务、索引和复杂查询,适用于需要高一致性和高性能的应用场景[^21]。 #### 4. 示例代码 后端示例代码(SpringBoot + MyBatis): ```java // User实体类 @Data @AllArgsConstructor @NoArgsConstructor public class User { private Long id; private String username; private String password; } // Mapper接口 @Mapper public interface UserMapper { @Select("SELECT * FROM user WHERE username = #{username}") User findByUsername(String username); } ``` 前端示例代码(Vue3 + Element-Plus): ```vue <template> <el-button @click="fetchData">获取数据</el-button> </template> <script> import { ref } from &#39;vue&#39;; import axios from &#39;axios&#39;; export default { setup() { const fetchData = async () => { try { const response = await axios.get(&#39;http://localhost:8080/api/user&#39;); console.log(response.data); } catch (error) { console.error(error); } }; return { fetchData }; }, }; </script> ``` #### 5. 总结 该技术栈结合了 SpringBoot3 的高效开发能力、MyBatis 的灵活数据访问特性以及 Vue3 的现代化前端框架优势[^22],能够满足大多数 Web 应用的需求。通过合理的技术选型和版本要求,确保系统的高性能、可扩展性和易维护性。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值