2024年Web前端最全Day198(4)，2024年最新字节跳动的面试

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

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

name:‘UserAdd’,//暴露组件

data() {

return {

user:{},

}

},

methods: {

saveUserInfo(){

console.log(this);

//发送aixos请求

let _this= this;

this.$http.post(“url”,_this.user).then(function(resp){

})

}

},

}

• 注册组件router/index.js

添加到User组件下的，成为子组件

• 创建模拟接口

http://rap2api.taobao.org/app/mock/277648/user/add

• 测试saveUserInfo()函数，是否可以接收到接口返回的值

methods: {

saveUserInfo(){

console.log(this);

//发送aixos请求

let _this= this;

this.$http.post(“http://rap2api.taobao.org/app/mock/277648/user/add”,_this.user).then(function(resp){

console.log(resp);

})

}

},

• 加入切换路由功能

saveUserInfo(){

console.log(this);

//发送aixos请求

let _this= this;

this.$http.post(“http://rap2api.taobao.org/app/mock/277648/user/add”,_this.user).then(function(resp){

console.log(resp);

if(resp.data.success){

_this.$router.push(“/user”); //切换路由

}

})

}

发现路由确实切换了，但是没有发起findAll查询所有的axios请求

• 给user.vue组件加入监听路由

watch:{ //用来监听

$route:{

handler: function(val,oldval){ //参数1：变化之后的路径 参数2：变化之前的路径

console.log(val);

},

//深度观察监听

deep: true

}

}

• 在监听器里面调用findAll()函数，之前是没这个函数的，将User.vue的created()生命周期函数里面的方法封装成findAll()放入User.vue的methods中

• 输完数据后点添加会路由切换成/user，并再发送一个findAll查询所有数据

因为接口的是模拟的，所以数据不可能更新

---

三、用户删除

---

• 创建虚拟删除接口

访问：http://rap2api.taobao.org/app/mock/277648/user/delete?id=1

delRow(id){

console.log(id);

let _this = this;

this.$http.get(“http://rap2api.taobao.org/app/mock/277648/user/delete?id=”+id).then(function(resp){

console.log(resp);

if(resp.data.success){ //判断数据是否已经删除

_this.findAll() //刷新页面,查询所有

}

});

}

---

四、用户修改

---

• 创建组件 UserEdit.vue

.

修改用户信息

用户名：

年龄：

生日：

<input type=“button” value=“添加” @click=“UserEdit”/>

• 注册组件router/index.js

• User.vue

• 效果

• 获取另一个组件中的数据

获取到id后， 就可以根据id查询用户了，

• 创建虚拟findOne接口

访问：http://rap2api.taobao.org/app/mock/277648/user/findOne

• findOne()

findOne(){

let _this = this;

this.$http.get(“http://rap2api.taobao.org/app/mock/277648/user/findOne?id=”+this.user.id).then(function(resp){

console.log(resp.data);

_this.user=resp.data;

});

}

• 创建虚拟用户更新接口

地址：http://rap2api.taobao.org/app/mock/277648/user/edit

• UserEdit()

UserEdit(){

console.log(this);

//发送一个更新的请求

let _this = this;

this.$http.post(“http://rap2api.taobao.org/app/mock/277648/user/edit”,this.user).then(function(resp){

console.log(resp);

if(resp.data.success){

_this.$router.push(“/user”); //切换路由

}

});

}

user组件他有watch来监听路由的切换

• UserEdit.vue组件

.

修改用户信息

用户名：

年龄：

生日：

<input type=“button” value=“添加” @click=“UserEdit”/>

以上使用的模拟接口来实现的，

下面在将模拟的接口转换后端的接口

---

五、后台开发

---

• 新建数据库

使用之前的bootvue数据库

CREATE TABLE vue_user(

id INT(6) PRIMARY KEY AUTO_INCREMENT,

NAME VARCHAR(40),

age INT(3),

bir datetime

)

• 引入依赖

org.springframework.boot

spring-boot-starter-web

org.mybatis.spring.boot

mybatis-spring-boot-starter

2.1.4

com.alibaba

druid-spring-boot-starter

1.1.17

mysql

mysql-connector-java

5.1.49

org.projectlombok

lombok

true

org.springframework.boot

spring-boot-starter-test

test

• application.yaml配置文件

spring:

application:

name: vue #项目名

datasource:

password: ‘00000’

username: ‘root’

type: com.alibaba.druid.pool.DruidDataSource #使用Druid数据连接池

driver-class-name: com.mysql.jdbc.Driver #数据库驱动

url: jdbc:mysql://localhost:3306/bootvue?characterEncoding=UTF-8&serverTimezone=GMT%2B8&useSSL=false

server:

port: 6161

servlet:

context-path: /vue #项目路径

mybatis:

mapper-locations: classpath:com.achang.mapper/*.xml #指定sql映射文件位置

type-aliases-package: com.achang.entity #指定bean对象位置

• 项目整体布局

• 根据数据库新建entity实例

@Data

@AllArgsConstructor

@NoArgsConstructor

@ToString

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

public class User {

private Integer id;

private String name;

private Integer age;

@JsonFormat(pattern = “yyyy-MM-dd”,timezone = “GTM+8”)

//设置日期格式，pattern格式化格式，timezone时区：我们在东八区

private Date bir;

}

• dao/UserDao

@Mapper

public interface UserDao {

//保存

void save(User user);

//更新

void update(User user);

//删除

void delete(Integer id);

//查询所有

List findAll();

//根据id，查询一个用户

User findById(Integer id);

}

• mapper/UserDaoMapper.xml

insert into vue_user

values(#{id},#{name},#{age},#{bir})

update vue_user

set name=#{name},age=#{age},bir=#{bir}

where id = #{id}

select id,name,age,bir from vue_user

delete from vue_user

where id = #{id}

select id,name,age,bir from vue_user

where id = #{id}

• service/UserService接口

public interface UserService {

//保存

void save(User user);

//更新

void update(User user);

//删除

void delete(Integer id);

//查询所有

List findAll();

//根据id，查询一个用户

User findById(Integer id)

}

• impl/UserServiceImpl

@Service

@Transactional

public class UserServiceImpl implements UserService{

@Autowired

private UserDao userDao;

@Override

public void save(User user) {

userDao.save(user);

}

@Override

public void update(User user) {

userDao.update(user);

}

@Override

public void delete(Integer id) {

userDao.delete(id);

}

@Override

public List findAll() {

return userDao.findAll();

}

@Override

public User findById(Integer id) {

return userDao.findById(id);

}

}

• controller/UserController/findAll()查询所有方法

@RestController

@CrossOrigin //解决跨域问题

@RequestMapping(“/user”)

public class UserController {

@Autowired

private UserService userService;

//查询所有

@GetMapping(“/findAll”)

public Map<String,Object> findAll(Integer page, Integer rows){

List result = userService.findAll();

HashMap<String, Object> map = new HashMap<>();

map.put(“total”,1);

map.put(“totalPage”,1);

map.put(“page”,1);

map.put(“result”,result);

return map;

}

}

• 前端components/User.vue，findAll（）查询所有用户

将之前的模拟接口修改为后端接口

findAll(){ //查询所有

let _this = this;

// 使用axios，发起异步请求，下面url地址通过RAP2来模拟后端接口

this.$http.get(“http://localhost:6161/vue/user/findAll”).then(function(resp){

_this.users=resp.data.result

})

}

• controller/UserController/add() 添加用户

//添加用户

@PostMapping(“/add”)

public Map<String,Object> add(@RequestBody User user){

HashMap<String, Object> map = new HashMap<>();

try {

userService.save(user);

map.put(“success”,true);

map.put(“msg”,“添加成功”);

} catch (Exception e) {

e.printStackTrace();

map.put(“success”,false);

map.put(“msg”,"添加失败： "+e.getMessage());

}

return map;

}

• 前端components/UserAdd.vue，saveUserInfo()添加用户

saveUserInfo(){

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

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

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

d() 添加用户

//添加用户

@PostMapping(“/add”)

public Map<String,Object> add(@RequestBody User user){

HashMap<String, Object> map = new HashMap<>();

try {

userService.save(user);

map.put(“success”,true);

map.put(“msg”,“添加成功”);

} catch (Exception e) {

e.printStackTrace();

map.put(“success”,false);

map.put(“msg”,"添加失败： "+e.getMessage());

}

return map;

}

• 前端components/UserAdd.vue，saveUserInfo()添加用户

saveUserInfo(){

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

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

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。