TUT社团报名系统踩坑之路

start at ： 2023/4/10

一、封装request和配置请求拦截器

1.为什么要封装request：

答（个人理解）：一个项目中要发很多请求，如果每个请求都单独写，比如下述代码：

    axios({
        method:'post',
        url:"http://82.157.249.75:6789/post/form",
        data:{
            name:'阿为',
        },
    })
    .then(res => {
        console.log(res.data.data);
    })
    .catch(err => {
        console.log(err);
    })

假如某一天后端给你的接口改了，不是这个api了，那么每个请求的url都要手动去改，效率非常低，所以要进行封装。

2.请求拦截器是什么

当你成功登录后，后端会给你一个token令牌（储存在sessionStorage），用来辨识身份。当我们每次发请求时，会携带这个token，请求拦截器就是会将每一次请求拦截，判断 sessionStorage 中是否含有 token ， 做出相应的对相应的处理

3.如何配置

在src中创建文件夹api，创建文件index.js，加入以下代码：

import axios from "axios";		//导入axios

const request = axios.create({
    baseURL: 'http://82.157.249.75:6789',	//配置根url
    timeout: 20000 
});

request.interceptors.request.use(config => {        
        if(localStorage.getItem('token')){		//判断是否有token，有则携带
            config.headers['Authorization']=localStorage.getItem('token');
        }
        return config;    
})

export default request;	//暴露request

二、在vuex中跳转路由

首先引入router

import router from '../router'

其次在用到的地方这样写

router.push({path:'/index'})

三、关于mapstate的一些问题

1.为什么要使用mapstate

假设有这样一个情景，现在你有一个表单form，现在你要给他绑定formData（表单数据），而你将formData放在了vuex的state中，那么如果在组件中要访问这个数据，那么要用到computed，如下：

    computed:{
        ...mapState(['ruleForm'])	//映射state中的ruleForm，使组件可以访问到ruleForm里的属性和方法
    }

上述代码等效于：

computed:{
	ruleForm(){
		return this.$store.state.ruleForm
	}
}

然后在表单中绑定ruleForm

 <el-form :model="ruleForm" label-width="110px" ref="form" >
     //:model是v-bind:model 的缩写，可以实现将父组件的值传递给子组件，但是子组件不能传给父组件，无法双向绑定

2.一些问题

但是！我在使用mapstate映射表格数据再绑定时，就出现了问题。

如图，给表格的:data绑定tableData

<el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="studentId" label="学号" width="100">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120">
    </el-table-column>
</el-table>

然后用mapstate映射state中的tableData：

    computed:{
        ...mapState(['ruleForm'])
    }

然后就完美的报错了

控制台报错tableData已被分配但是没有对应的setter。这就让我可以合理怀疑表格绑定的:data是双向绑定（ 大概） ，无可奈何我只能更改到如下代码

computed：{    
	tableData:{
            get(){
                return this.$store.state.tableData;
            },
            set(nv){
                this.$store.state.tableData = nv;
            }
     },
}

然后就可以正常运行了，（问号）。

四、万恶的表格分页

众所周知，elementUI的Pagination（分页）有很多属性和方法，但是文档中讲的我是着实看不懂。接下来说的是后端分页（后端给你分页接口）的实现。首先看接口文档

可知，数据在后台已经分好页了，前端只需要用请求去获取数据即可，后端分页的好处是只会把当前页的数据给拿下来，网页加载的速度会很快，但是不足就是每跳转一次，前端都要向后台发送一次请求。

然后就可以开始编写了：

<el-pagination
               @size-change="handleSizeChange" 	//当改变一页的显示条目时触发该函数
               @current-change="handleCurrentChange"	//当当前页改变时触发该函数
               :current-page="currentPage" 		//绑定当前页数
               :page-sizes="pageSizes" 		//页数选择器，选择一页显示多少跳，写成数组（[5,10,15,20]）
               :page-size="pageSize" 		//绑定当前页显示条目数
               layout="sizes, prev, pager, next, total, jumper" 
               :total="total">		//绑定数据总量
</el-pagination>

state中储存数据样例：

然后就可以开始编写逻辑了：

当点击数目选择器时：你选择的数目会作为value传入 handleSizeChange函数中

        handleSizeChange(val) {
           this.pageSize = val;		//将显示的条目改为value
           this.getData(val,1);		//将数据传给发请求函数，获取分页内容
           this.currentPage = 1;	//改变size后默认跳转到第一页
        },

当点击页数时，点击的页数会作为value传入handleCurrentChange函数中：

        handleCurrentChange(val) {
           this.getData(this.pageSize,val);		//将当前是第几页传给发请求函数，获取分页内容
           this.currentPage = val;		//value赋值给绑定的当前页
        },

五、表单验证

比如一个报名表中让你填写姓名、学号、电话、家庭住址.....，总有些人会给姓名输入一长串数字或者给学号输入字符等等等这些不合法的字符，这时候就需要用到表单验证了

首先编写表单验证规则：

  rules: {
        name: [
            { type:'string', required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度应在 2 到 5 个字符', trigger: 'blur' }
        ],
        studentId: [
            { type:'string', required: true, message: '请输入学号', trigger: 'change' },
            { len:8 , message:'学号不合法' ,trigger:'blur'}
        ],
        qq: [
            { type:'string', required: true, message: '请输入qq', trigger: 'change' }
        ],
        phoneNum: [
            {  type:'string', required: true, message: '请输入手机号', trigger: 'change' },
            { len:11 , message:'手机号不合法' ,trigger:'blur'}
        ],
    },

每一给你想验证的变量都是一个数组，数组中可以写很多条规则（对象形式），type属性可以定制输入字符类型规则

required属性可以设置该条内容是否必填（true/false），当值为true时，input框前会出现红色小星号，和他一起的属性是message，当提交表单时如果发现必填项没有填写，那么在该input框底下会出现红色message提示。

然后就是len属性，规定输入字符长度，min/max属性规定字符长度最大最小值，同样，当长度不合法时会在输入框底下提示message。

trigger属性规定什么时候触发表单验证，值为change时是当检测到回车或者数据修改完毕时触发验证；值为blur是当input框失去焦点时触发验证。

六、如何实现点击导航栏元素跳转界面

在el-menu标签中加入以下代码：

<el-menu 
:default-active="this.$route.path"	<!--设置当前path为激活状态-->
:default-openeds="['1']">		<!--默认展开index=1的子菜单-->

再在el-menu-item标签中配置index=‘path’即可实现跳转

<el-menu-item index="/home">
	返回首页
</el-menu-item>

完整代码：

<el-menu
         class="menu" 
         :default-active="this.$route.path"
         background-color="#596180"
         text-color="#fff"
         active-text-color="#ffd04b"
         router>
    <el-submenu index="1">
        <div slot="title">
            <i class="el-icon-location"></i>
            <span>目录</span>
        </div>
        <el-menu-item index="/home">
            返回首页
        </el-menu-item>
        <el-menu-item index="/Administrate">
            学生报名管理
        </el-menu-item>
    </el-submenu>
</el-menu>

七、elementUI弹出对话框的实现

首先就不手搓弹出框了，elementUI有封装好的弹出对话框组件dialog

先编写弹出框内容

    <el-dialog
    width="40%">
        <ChangeInfo></ChangeInfo>	//我是内容
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel" class="close">关 闭</el-button>
        </span>
    </el-dialog>

然后加入下面代码

    <el-dialog
    title="编辑信息"
    :visible.sync="show"		//绑定一个变量show（布尔值）绝定
    width="40%"
    :before-close="handleClose">  //点击关闭时触发这个函数

        <ChangeInfo></ChangeInfo>	//我是要展示的内容

        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel" class="close">关 闭</el-button>
        </span>
    </el-dialog>

当点击按钮时，将设置的变量show = true，对话框弹出。点击关闭时将show = false，对话框关闭。