3.1 第一部分（取消发表按钮）
3.1.1 取消按钮————回到上一页面
3.1.2 发布按钮
-
验证文字是否为空
-
文字的数量是否合法
-
请求接口进行发布
-
成功后会跳转到主页（见主题2）
3.2 第二部分（文本区域）
3.2.1 用户输入的文字数量
- 将展示用户输入文字数量使用动态数据，通过input事件实时得到文字数量不断改变变量的值
3.2.2 限定用户输入的文字数量为100
-
采用weui中的form文本域
-
通过双向绑定的元素得知用户输入的文字数量，当用户输入的文字数量超过100时，获取文字的内容通过substr属性取前一百个文字复制给双向绑定的文字内容的变量造成超出100字不能输入的现象。
3.3 第三部分（上传图片）
3.3.1 采用weui中的uploader技术进行图片的上传
在weui中的this指向并不是Vue实例所以在第一行中加入const self=this 让self常量指向我们的Vue实例
const self = this
weui.uploader(‘#uploader’, {
url: service.baseURL + ‘/post/uploadimg’,
auto: true,
type: ‘file’,
fileVal: ‘image’,
compress: {
width: 1600,
height: 1600,
quality: 0.8
},
onBeforeQueued: function (files) {
// this 是轮询到的文件, files 是所有文件
if ([‘image/jpg’, ‘image/jpeg’, ‘image/png’, ‘image/gif’].indexOf(this.type) < 0) {
weui.alert(‘请上传符合条件的图片’)
return false // 阻止文件添加
}
if (this.size > 10 * 1024 * 1024) {
weui.alert(‘请上传不超过10M的图片’)
return false
}
// 控制多元每次不能超过五张
if (files.length > self.totalUploadCount) {
weui.alert(‘最多只能上传’ + self.totalUploadCount + ‘张图片，请重新选择’)
return false
}
// 如果已经上传五张图片 作为不能继续上传
if (self.uploadCount + 1 > self.totalUploadCount) {
weui.alert(‘最多只能上传’ + self.totalUploadCount + ‘张图片’)
return false
}
self.uploadCount++
// return true; // 阻止默认行为，不插入预览图的框架
},
onBeforeSend: function (data, headers) {
const token = document.cookie.split(‘=’)[1]
headers[‘wec-access-token’] = token
},
onProgress: function (procent) {
// console.log(this, procent)
// return true; // 阻止默认行为，不使用默认的进度显示
},
onSuccess: function (ret) {
ret.data.id = this.id
self.picList.push(ret.data)
},
onError: function (err) {
console.log(‘error:’ + err)
// return true; // 阻止默认行为，不使用默认的失败态
}
})
- onBeforeQueued
选择要上传的图片时触发（验证图片是否符合要求）
-
验证图片的格式
-
验证图片的大小不能超过10M
-
控制每次选择图片不能超过五张
-
控制如果已经选择五中图片不能继续上传
-
onBeforeSend
图片上传前触发
-
我们将用户登录成功后存入Local Storage中的cuser（token）放到请求头headers中
-
onSuccess
图片上传成功后触发
-
将图片的id存到 ret.data中
-
将图片的所有信息添加到picList数组中
3.3.2 查看图片
-
点击小图片时可以展现大图 点击图片时会通过e.target拿到事件源
-
通过getAttribute（‘style’）方法获取style中属性background-image: url(“blob:http://192.168.0.107:8080/c1e0e8bf-4ac6-4184-a839-0cdcce473aa4”);
-
通过“ " ”进行分割得到第二个元素 也就是路径
-
将得到的路径复制给weui.gallery 他具有两个参数，一个是图片的路径，一个是删除图片我们在第二个参数中调用删除图片的函数并且将图片的信息以及查看大图的 div作为参数传递过去（见主题3.3.3）（self指向的是this Vue的实例）
preImg (e) {
const self = this
const url = e.target.getAttribute(‘style’).split(‘"’)[1]
var gallery = weui.gallery(url, {
onDelete: function () {
self.deleteImg(e.target, gallery)
}
})
}
3.3.3 删除图片
deleteImg (target, gallery) {
const self = this
weui.confirm(‘确认删除图片吗’, () => {
const id = target.getAttribute(‘data-id’)
const index = self.picList.findIndex(item => {
return item.id === id
})
self.picList.splice(index, 1)
// 删除对应的DOM元素
target.remove()
self.uploadCount–
})
gallery.hide(function () {
console.log(‘galleryhas been hidden’)
})
}
-
运用weui中的confirm确定是否对删除图片
-
确定删除：通过id找出picList数组中与之相同的图片信息进行删除，同时将对应的DOM元素进行删除
-
上面执行的同时会执行hide事件，将我们现实大图的div进行隐藏
-
导航部分为公用组件 通过父子组件prop进行传值（头部导航的文字内容）
-
点击<按钮跳转上一页面
4.1 更换头像
-
点击用户的头像时 依靠ref属性使用代码触发隐藏的上传图片插件的单击事件，进而激活uploader进行图片的上传
-
上传成功后分为以下两步
onSuccess: async function (ret) {
// console.log(ret)
const res = await service.post(‘users/update’, {
userId: self.$store.state.currentUser._id,
avatar: ret.data.url
})
if (res.data.code === 0) {
self.$store.dispatch(‘setUser’, {
…self.$store.state.currentUser,
avatar: ret.data.url
})
weui.toast(‘上传成功’, 2000)
}
}
-
上传下成功后在此函数中ret中就是上传成功图片的所有信息
-
访问接口并且将用户id从store中取出以及图片的地址一并放到请求体中 更新数据库中的头像
-
数据库中的数据更新成功后 会通过调用store中的方法来改变本地的头像地址 同样请求体中还是使用对象的深拷贝
4.2 修改用户昵称
-
点击用户昵称时会跳转页面
-
点击提交按钮 验证文本框内容不能为空
-
请求后端接口修改数据库中的昵称
-
成功后通过store中的方法修改本地昵称
-
最后将文本框内容清空，提示修改成功，2秒后跳转至个人中心
4.3 更换/发表用户个性签名
-
点击个性签名时会跳转页面
-
展示已有的个性签名 可更改 可添加
-
点击提交按钮 验证文本框内容不能为空
-
请求后端接口修改数据库中的个性签名
-
成功后通过store中的方法修改本地数据
-
最后提示修改成功，2秒后跳转至个人中心
4.4 切换性别
- 点击性别时会弹出选项框运用weui中的actionSheet进行性别选择
weui.actionSheet([
{
label: ‘男’,
onClick: async function () {
const res = await service.post(‘users/update’, {
userId: self.$store.state.currentUser._id,
gender: ‘1’
})
if (res.data.code === 0) {
self.$store.dispatch(‘setUser’, {
…self.$store.state.currentUser,
gender: ‘1’
})
weui.toast(‘修改成功’, 1000)
}
}
},
{
label: ‘女’,
onClick: async function () {
const res = await service.post(‘users/update’, {
userId: self.$store.state.currentUser._id,
gender: ‘0’
})
if (res.data.code === 0) {
self.$store.dispatch(‘setUser’, {
…self.$store.state.currentUser,
gender: ‘0’
})
weui.toast(‘修改成功’, 1000)
}
}
}
], [
{
label: ‘取消’,
onClick: function () {
console.log(‘取消’)
}
}
])
-
点击取消则会隐藏选项框
-
点击男，会请求后端接口将gender属性值设置为‘1’进行更改，成功后更改本地数据
-
点击女，会请求后端接口将gender属性值设置为‘0’进行更改，成功后更改本地数据
-
通过用户传递过来的用户昵称显示在最上方
-
点击返回按钮跳转上一页面
-
运用vue-socket.io和socket.io-client实现前后端的聊天数据的交互
-
页面加载时，首先当前用户登录socket，获取当前登录用户与当前指定用户的聊天记录
我们采用animate实现页面之间的切换 animate样式官网点击查看 我们应该将样式应用到所有组件切换需要必经之路–App.vue
- 首先我要安装animate
$ npm install animate.css --save
- 在main.js中引用
import ‘animate.css’
- 需要将运用动画的元素使用标签包裹起来
<transition
:enter-active-class=“transitionIN”
:leave-active-class=“transitionOut”
-
里面的enter-active-class是为要切换来的（进场）设置动画
-
leave-active-class是为要切出（出场）设置动画，两属性值均为动态
-
考虑到不同的页面切换的动画应该不同 so我们采用侦听器来检测路由的变化进而对个别的页面做出个性动画
// 侦听器：侦听路由的变化进而应用不同的转场动画
watch: {
$route (to, from) {
if (to.name === ‘Publish’) {
this.transitionIN = ‘animate__animated animate__slideInUp’
this.transitionOut = ‘’
} else if (from.name === ‘Publish’) {
this.transitionIN = ‘’
this.transitionOut = ‘animate__animated animate__slideOutDown’
} else {
下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：
进阶阶段
进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。
JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。
我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。
然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。
1、JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
2、前端框架
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
以 Vue 为例，我整理了如下的面试题。
1241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
