2024年最全Day197(4)，2024年最新头条后端面试题

2401_84617533

于 2024-05-14 07:22:56 发布

阅读量1k

点赞数 15

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84617533/article/details/138834325

版权

程序员专栏收录该内容

105 篇文章 0 订阅

订阅专栏

web浏览器中的javascript

客户端javascript
在html里嵌入javascript
javascript程序的执行
兼容性和互用性
可访问性
安全性
客户端框架
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

计时器
浏览器定位和导航
浏览历史
浏览器和屏幕信息
对话框
错误处理
作为window对象属性的文档元素

后端简单搭建：

UserController

@RestController

@RequestMapping(“/user”)

@CrossOrigin //解决跨域问题

public class UserController {

@GetMapping(“/findAll”)

public List findAll(){

System.out.println(“查询所有。。。。。。”);

List list = Arrays.asList(

new User(“21”,“阿昌昌昌”,23,new Date()),

new User(“22”,“PePe”,21,new Date()),

new User(“23”,“Oni”,34,new Date())

);

return list;

}

User

@Data

@AllArgsConstructor

@NoArgsConstructor

@ToString

@Accessors(chain = true) //链式调用

public class User {

private String id;

private String name;

private Integer age;

@JsonFormat(pattern = “yyyy-MM-dd”) //设置日期格式

private Date bir;

}

测试

访问： http://localhost:8080/user/findAll

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4vV6Snvv-1613744404131)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219140938663.png)]$

前端页面：

01-使用路由开发页面

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

id 姓名年龄生日操作 {{user.id}} {{user.name}} {{user.age}} {{user.bir}}

修改

删除

id 学生姓名学历邮箱操作 1 阿昌博士 995931576@qq.com

修改

删除

效果：

默认访问"/index"

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nX4RaKHS-1613744404140)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219152428077.png)]$

点击主页按钮

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OriX0XXH-1613744404142)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219152440307.png)]$

点击用户管理按钮

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QiNXgzsv-1613744404146)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219152508461.png)]$

学生管理

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EyscL28D-1613744404149)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219152548862.png)]$

存在的问题：

1、代码冗余

2、维护开发不灵活

14. Vue CLI 脚手架

14.1 什么是CLI

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）

14.2 什么是Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。

14.3 Vue CLI优势

通过 vue-cli 搭建交互式的项目脚手架。bootstrap css js jquery js 通过执行命令方式下载相关依赖
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发 vue页面 vuejs vuerouter axios(一条命令)
一个运行时依赖 (@vue/cli-service)，该依赖：
可升级；一条命令
基于 webpack 构建，并带有合理的默认配置； webpack 项目打包方式编译好的项目源码===>部署到服务器上直接使用
可以通过项目内的配置文件进行配置；默认配置文件,通过修改默认配置文件达到自己想要的项目环境
可以通过插件进行扩展。 vue v-charts elementui
一个丰富的官方插件集合，集成了前端生态中最好的工具。Nodejs(tomcat) Vue VueRouter webpack yarn
一套完全图形化的创建和管理 Vue.js 项目的用户界面

14.4 Vue CLI安装

1. 环境准备

1.下载nodejs

http://nodejs.cn/download/

windows系统: .msi 安装包(exe)指定安装位置 .zip(压缩包)直接解压缩指定目录

mac os 系统: .pkg 安装包格式自动配置环境变量 .tar.gz(压缩包)解压缩安装到指定名

2.配置nodejs环境变量

【windows系统】

计算上右键属性----> 高级属性 ---->环境变量添加如下配置:

NODE_HOME= nodejs安装目录

PATH = xxxx;%NODE_HOME%

【macos系统】

推荐使用.pkg安装直接配置node环境

3.验证nodejs环境是否成功

node -v

4.npm介绍

（node package mangager） ==>【nodejs包管理工具】前端主流技术 npm 进行统一管理

maven 管理java后端依赖远程仓库(中心仓库) 阿里云镜像
npm 管理前端系统依赖远程仓库(中心仓库) 配置淘宝镜像

5.配置淘宝镜像

npm config set registry https://registry.npm.taobao.org

npm config get registry 【验证配置是否成功】

6.配置npm下载依赖位置

windows:

npm config set cache “D:\Program Files\npm-cache”

npm config set prefix “D:\Program Files\npm_global”

mac os:

npm config set cache “/Users/chenyannan/dev/nodereps”

npm config set prefix “/Users/chenyannan/dev/nodereps”

7.验证nodejs环境配置

npm config ls

; userconfig C:\Users\PePe.npmrc

cache = “D:\Program Files\npm-cache”

prefix = “D:\Program Files\npm_global”

registry = “https://registry.npm.taobao.org/”

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEYG1w4b-1613744404151)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219164300855.png)]$

2.安装脚手架

0.卸载脚手架

npm uninstall -g @vue/cli //卸载3.x版本脚手架

npm uninstall -g vue-cli //卸载2.x版本脚手架

1.Vue Cli官方网站

https://cli.vuejs.org/zh/guide/

2.安装vue Cli

npm install -g vue-cli

3.配置vue环境变量

D:\Program Files\npm_global\

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNbyclis-1613744404152)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219175018573.png)]$

3.第一个vue脚手架项目

0.安装模板

npm install -g 【模板名】

npm install -g webpack

1.创建vue脚手架第一个项目

vue init webpack 【项目名】

vue init webpack hello

2.创建第一个项目

hello ------------->项目名

-build ------------->用来使用webpack打包使用build依赖

-config ------------->用来做整个项目配置目录

-node_modules ------>用来管理项目中使用依赖

-src ------>用来书写vue的源代码【重点】

assets ------>用来存放静态资源【重点】

components ------>用来书写Vue组件【重点】

router ------>用来配置项目中路由【重点】

App.vue ------>项目中根组件【重点】

main.js ------>项目中主入口【重点】

-static ------>其它静态

-.babelrc ------> 将es6语法转为es5运行

-.editorconfig ------> 项目编辑配置

-.gitignore ------> git版本控制忽略文件

-.postcssrc.js ------> 源码相关js

-index.html ------> 项目主页

-package.json ------> 类似与pom.xml 依赖管理 jquery 不建议手动修改

-package-lock.json ----> 对package.json加锁

-README.md ----> 项目说明文件

3.如何运行在项目的根目录中执行

npm start 运行前端系统

4.如何访问项目

http://localhost:8080

5.Vue Cli中项目开发方式

注意: 一切皆组件

一个组件中：

【

js代码

html代码

css样式

】

VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSJxNTDN-1613744404153)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219175943582.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-caIErUZH-1613744404154)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219180029163.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NV9W117K-1613744404156)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219180430836.png)]$

访问http://localhost:8080/

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rn9YcfKr-1613744404157)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219180527393.png)]$

4.如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2JwJkPTp-1613744404158)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219201452436.png)]$

components文件夹下存放组件

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DBcS1fcB-1613744404159)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20210219201612209.png)]$

Footer.vue:↓↓↓

我是页脚 @阿昌学Vue 我是阿昌

Home.vue：↓↓↓

主页组件

内容

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

冒泡排序
选择排序
快速排序
二叉树查找: 最大值、最小值、固定值
二叉树遍历
二叉树的最大深度
给予链表中的任一节点，把它删除掉
链表倒叙
如何判断一个单链表有环
给定一个有序数组，找出两个数相加为一个目标数
…

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

v style=“width: 100%;height: 300px;background:red;”>

内容

Vue 面试题

算法

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

冒泡排序
选择排序
快速排序
二叉树查找: 最大值、最小值、固定值
二叉树遍历
二叉树的最大深度
给予链表中的任一节点，把它删除掉
链表倒叙
如何判断一个单链表有环
给定一个有序数组，找出两个数相加为一个目标数
…
[外链图片转存中…(img-MujrFRLp-1715642552509)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

2401_84617533

关注

15
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
2024年最全Day197(4)，2024年最新头条后端面试题

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。也有人称之为字符用户界面（CUI）Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。（node package mangager） ==>【nodejs包管理工具】前端主流技术 npm 进行统一管理。
复制链接

扫一扫