- 在本次项目中，最重要的一点是学会了团队合作。学会了如何通过gitee实现代码的提交与拉取、实验代码冲突问题的解决。知道了什么样的问题应该与后端沟通，也懂得了如何与后端沟通。
- 其次是学会了使用antd中的常用组件：input、Form、Button、Card、upload。Antd组件在项目中频繁被使用，于我而言，本次项目中最大的组件难点是文件与图片的上传。通过学长的代码我学会了我如何将图片、文件上传，如何将上传成功的文件展示出来、如何控制文件展示的数量、如何使用formdata将文件传给后端。同时也通过查官方文档学会了input组件如何使用validator、dependencies自定义规则解决输入框中密码两次输入不一致的警告提示问题。同时也知晓了网上的大众方法无法在自己的代码中实现时，不要慌张，先去官方文档看一下是否由于版本更新而导致的方法改变。
<Form.Item
required
name="password"
validateTrigger='onBlur'
rules={[{ required: true, message: '请输入新密码' },{
// validator:(rules,value,callback)=>
// {this.handleCheckPwd(rules,value,callback)}
}]}
>
<Input size="large" type="password" ref='password' placeholder="请输入新密码" prefix={<LockOutlined />} style={{marginTop:'20px'}}/>
</Form.Item>
<Form.Item
required
name="cfmloginpass"
validateTrigger='onBlur'
dependencies={['password']}
rules={[
{
required: true, message: '请再次输入新密码'
},
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject('两次输入的密码不一致，请检查后重新输入');
},
}),
]}
>
- 第三点，学会了分页的实现。分页分为后台组件分页与前台手写带样式分页，后台分页借助组件实现较为简单、前台分页虽然手写但由于实现功能简单，倒也不难。难点在于如何在点击详情信息跳转到新页面之后，返回页面时仍回到点击详情时的分页页面。我的方法是借助路由，传递当时点击页面的分页页数，将路由作为两个页面之间传参的工具。其他人的想法是借助本地存储。
getdata(id){
this.setState({
currentpage:id
},()=>{
console.log('获取接口时候的currentpage',this.state.currentpage)
})
post('/manager/newsList',{
"page":id
}).then(res => {
console.log("新闻",res)
this.setState({
dynamiclist:res.List,
total:res.Total
})
})
}
componentDidMount(){
this.getdata(this.props.match.params.page*1);
this.setState({
currentpage:this.props.match.params.page*1
},()=>{
console.log('页面渲染时的currentpage',this.state.currentpage)
})
}
componentWillReceiveProps(nextProps){
if(this.props.match.params.page*1!=nextProps.match.params.page*1){
this.getdata(nextProps.match.params.page*1)
}
}
// 页码
addpage() {
this.setState({
currentpage: this.state.currentpage*1 != this.state.total*1 ? this.state.currentpage*1 + 1 :1
},()=>{
this.getdata(this.state.currentpage*1);
this.props.history.push(`/dynamic/${this.state.currentpage*1}`)
})
}
reducepage() {
this.setState({
currentpage: this.state.currentpage*1 == 1 ? this.state.total : this.state.currentpage*1 - 1
},()=>{
this.getdata(this.state.currentpage*1);
this.props.history.push(`/dynamic/${this.state.currentpage*1}`)
})
}
changepage(page){
console.log(page)
this.setState({
currentpage:page
},()=>{
this.getdata(this.state.currentpage);
this.props.history.push(`/dynamic/${this.state.currentpage}`)
})
}
getdata(){
let page
if(window.localStorage.PreviousView_page){
page=window.localStorage.PreviousView_page*1
}else{
page=this.state.currentpage
}
post('/review/listTittle',{
"page":page
}).then(res => {
this.setState({
previousList: res.List,
total:res.Total
},()=>{
window.localStorage.PreviousView_page=this.state.currentpage
})
})
}
- 第四点学会了使用富文本编辑器,通过this.addformRef.current.setFieldsValue为当前的input框设置初始文字，this.state.editor.txt.html(decodeURI(this.state.info.describe))为当前的富文本编辑器设置初始文字。（wangEditor官方文档：www.wangeditor.com/）
import E from 'wangeditor';
this.state={
editor: new E('#editor')
info:{}
}
componentDidMount(){
let editor = this.state.editor;
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
// 'list', // 列表
'justify', // 对齐方式
// 'quote', // 引用
// 'emoticon', // 表情
'image', // 插入图片
// 'table', // 表格
// 'video', // 插入视频
// 'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
editor.customConfig.uploadImgServer = "http://goldenaward.duocaishenghuo.cn/v1/manager/uploadPic";
editor.customConfig.uploadFileName = 'context_picture';
editor.customConfig.uploadImgMaxSize = 50 * 1024 * 1024;
editor.customConfig.uploadImgMaxLength = 1;
let token = window.localStorage.getItem("token")
editor.customConfig.uploadImgHeaders = {
'Authorization': 'Bearer '+token
}
editor.create();
this.getData()
}
getData(){
post(' ')
.then(res => {
this.setState({
info:res
},()=>{
this.addformRef.current.setFieldsValue({
title:this.state.info.tittle
})
this.state.editor.txt.html(decodeURI(this.state.info.describe))
this.state.editor.$textElem.attr('contenteditable',false)
}
)
}).catch(res=> {
console.log(res)
})
}
关于富文本编辑器->后端->前端的传值问题，富文本编辑器->后端传值时，若采用
let html = this.state.editor.txt.html().toString()
encodeURI(html)
则后端->前端时，在前端收到的值需要decodeURI解码，同时由于富文本编辑器传的值为带标签的代码，所以需要使用dangerouslySetInnerHTML方法，若想将标签去掉则需要使用正则.replace(/<[^>]+>/g, "")
dangerouslySetInnerHTML={{__html: decodeURI(obj.details).replace(/<[^>]+>/g, "")}}
- 如何利用定时器做到发送验证码后的倒计时（以给邮箱发送验证码为例）
if(!(/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/.test(this.state.mail))){
message.error('邮箱格式不正确',3)
}else{
post('/player/verification', {
mail: this.state.mail,
}).then(res => {
console.log(res)
this.setState({
showSixty: true
})
var timer2=setInterval(()=>{
this.setState({
sixty: this.state.sixty - 1
})
if(this.state.sixty <= 0){
this.setState({
showSixty: false,
sixty: 60
})
clearInterval(timer2);
}
}, 1000)
})
