react和vue的比较
相同
1)vitual dom
2)组件化
3)props,单一数据流
不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)
type:String,
require:true
},
location:{
type:String
},
from:{
type:String,
require:true
},
to:{
type:String
},
description:{
type:String,
require:true
},
}],
social:{
wechat:{
type:String
},
QQ:{
type:String
},
CSDN:{
type:String
}
},
date:{
type:Date,
default:Date.now()
}
})
module.exports = Profile = mongoose.model(“profile”,profileSchema);
2.在router/api文件夹下新建Profile的路由文件profile.js,先写一个简单的test 案例,测试路由是否正常
const express = require(“express”);
const router = express.Router();
router.get(‘/test’, (req, res) => {
res.json({ msg: “profile works” })
})
3.在index.js文件中引入该路由
const profile = require(“./routes/api/profile”);
app.use(“/api/profile”,profile);
4.路由测试(记得带上没有过期的token)
1.用户输入个人信息。用postman模拟(记得带上未过期的token):
2.在profile.js文件中,把用户输入的信息全部收集存储到profileFields中
//$route POST api/profile/
//@desc add or modify profile msg
//@access private
router.post(“/”, passport.authenticate(“jwt”, { session: false }), (req, res) => {
const errors = {}
const profileFields = {}
profileFields.user = req.user.id;
// 字符串
if (req.body.handle) {
profileFields.handle = req.body.handle;
}
if (req.body.status) {
profileFields.status = req.body.status;
}
// 字符串数组
if (typeof req.body.skills !== “undefined”) {
profileFields.skills = req.body.skills.split(“,”);
}
// 对象-experience
// profileFields.experience = {}
// 此处不用手动创建空对象experience,否则,没有输入experience也会填充current,id,得到无意义数据experience:[{current:true, _id:12345678}]
if (req.body.current) {
profileFields.experience.current = req.body.current;
}
if (req.body.title) {
profileFields.experience.title = req.body.title;
}
if (req.body.company) {
profileFields.experience.company = req.body.company;
}
if (req.body.location) {
profileFields.experience.location = req.body.location;
}
if (req.body.from) {
profileFields.experience.from = req.body.from;
}
if (req.body.to) {
profileFields.experience.to = req.body.to;
}
if (req.body.description) {
profileFields.experience.description = req.body.description;
}
// 对象 social
if (req.body.wechat) {
profileFields.social.wechat = req.body.wechat;
}
if (req.body.QQ) {
profileFields.social.QQ = req.body.QQ;
}
if (req.body.CSDN) {
profileFields.social.CSDN = req.body.CSDN;
}
})
3.如果存在个人信息,则更新信息;如果没有,就新增信息
Profile.findOne({ user: req.user.id })
.then(profile => {
console.log(“profile”,profile);
if (profile) {
//用户信息存在,执行更新方法
Profile.findOneAndUpdate({ user: req.user.id }, { $set: profileFields }, { new: true })
.then(profile => res.json(profile))
} else {
//用户信息不存在,执行创建方法
Profile.findOne({ handle: profileFields.handle }).then(profile => {
new Profile(profileFields).save()
.then(profile => res.json(profile));
});
}
})
.catch(err => { res.status(404).json(err) })
4.postman测试结果
第一次send,由于没有添加过个人信息,因此此次是执行新增操作:
数据库查看:
将handle的值改成"test",再次send,此次是更新个人信息:
数据库查看:
1.get获取当前用户的个人信息,如果有,则显示,没有则提示用户没有个人信息
//$route GET api/profile/
//@desc return user profile msg
//@access private
router.get(“/”, passport.authenticate(“jwt”, { session: false }), (req, res) => {
// 能够操作此接口,代表用户是存在的,就会有用户id
// req.user.id是从认证获得的
profileFields.user = req.user.id;
// req.user.id是关联桥梁
Profile.findOne({ user: req.user.id })
.then(profile => {
if (!profile) {
errs.noprofile = “用户信息不存在”
return res.status(404).json(errs)
}
res.json({ profile })
})
.catch(err => { res.status(404).json(err) })
})
2.postman测试结果,同样要记得在Header里带上token:
ES6
-
列举常用的ES6特性:
-
箭头函数需要注意哪些地方?
-
let、const、var
-
拓展:var方式定义的变量有什么样的bug?
-
Set数据结构
-
拓展:数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求?
-
有哪些参数传值的方法?
-
你使用过哪些方法,来提高微信小程序的应用速度?
-
小程序和原生App哪个好?
-
简述微信小程序原理?
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题?
](https://img-blog.csdnimg.cn/img_convert/aac1740e50faadb9a6a7a5b97f9ccba8.png)
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求?
-
有哪些参数传值的方法?
-
你使用过哪些方法,来提高微信小程序的应用速度?
-
小程序和原生App哪个好?
-
简述微信小程序原理?
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题?