2024年Web前端最新Day198(1)，程序员技术面试题

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

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

• 输完数据后点添加会路由切换成/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(){

console.log(this);

//发送aixos请求

let _this= this;

this.$http.post(“http://localhost:6161/vue/user/add”,_this.user).then(function(resp){

console.log(resp);

if(resp.data.success){

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

}

})

}

• controller/UserController /delete（），删除用户

//用户删除

@GetMapping(“/delete”)

public Map<String,Object> delete(Integer id){

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

try {

userService.delete(id);

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，delRow()删除用户

delRow(id){

console.log(id);

let _this = this;

this.$http.get(“http://localhost:6161/vue/user/delete?id=”+id).then(function(resp){

console.log(resp);

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

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

}

});

}

• controller/UserController/findOne（），根据id获取用户

//根据id查询用户

@GetMapping(“findOne”)

public User finOne(Integer id){

return userService.findById(id);

}

• 前端components/UserEdit.vue，findOne()

findOne(){

let _this = this;

this.$http.get(“http://localhost:6161/vue/user/findOne?id=”+this.user.id).then(function(resp){

console.log(resp.data);

_this.user=resp.data;

});

}

• controller/UserController/edit（），修改用户

//修改用户

@PostMapping(“/edit”)

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

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

try {

userService.update(user);

map.put(“success”,true);

map.put(“msg”,“更新成功”);

} catch (Exception e) {

e.printStackTrace();

map.put(“success”,true);

map.put(“msg”,“感谢成功”);

}

return map;

}

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

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

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

d查询用户

@GetMapping(“findOne”)

public User finOne(Integer id){

return userService.findById(id);

}

• 前端components/UserEdit.vue，findOne()

findOne(){

let _this = this;

this.$http.get(“http://localhost:6161/vue/user/findOne?id=”+this.user.id).then(function(resp){

console.log(resp.data);

_this.user=resp.data;

});

}

• controller/UserController/edit（），修改用户

//修改用户

@PostMapping(“/edit”)

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

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

try {

userService.update(user);

map.put(“success”,true);

map.put(“msg”,“更新成功”);

} catch (Exception e) {

e.printStackTrace();

map.put(“success”,true);

map.put(“msg”,“感谢成功”);

}

return map;

}

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

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

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

[外链图片转存中…(img-ehWQ64eh-1715420218489)]

[外链图片转存中…(img-6SwDhvKA-1715420218490)]

[外链图片转存中…(img-Iubxv9Xa-1715420218490)]