4.7蓝桥杯做题-心愿便利贴-消失的 Token-封装 Promisefy 函数-趣购-乾坤大挪移心法

4.7蓝桥杯做题

1.心愿便利贴

在初始化的时候输入框并没有做验证，输入内容发布后，许愿贴并不能出现。

目标

请在 index.html 文件中补全代码，具体需求如下：

1. 将填写完的表单正确渲染到许愿墙上。
2. 完成表单验证，姓名（必填项） 2-4 个字符，许愿内容（必填项）长度在 1 到 30 个字符。

本项目使用到的 element-ui 表单验证 API 如下：

表单属性

参数	说明	类型
rules	表单验证规则	object

表单项属性

参数	说明	类型	可选值	默认值
prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 model 中的字段	-
required	是否必填	boolean	-	false
trigger	验证时触发的事件	string	click/focus/change/blur/input	-
min	最小长度	number	-	-
max	最大长度	number	-	-
message	验证不通过时的错误信息	string	-	-

使用示例

   <el-form-item label="姓名" prop="activeName">
      <el-input v-model="form.activeName" placeholder="请输入姓名"></el-input>
    </el-form-item>
// ....
 rules: {
          activeName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
    }

完成后效果如下：

<!-- TODO 待修改的代码 -->
<div class="card" :class="item.css" v-for="(item,index) in wishList" :key="index">
copy

rules: {
    // TODO 待补充验证的代码
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
    ],
    content: [
        { required: true, message: '请输入许愿内容', trigger: 'blur' },
        { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
    ]
}

这道题主要是要看懂题目给的例子，看懂就能进行模仿做出题目。看懂题目案例，就能使用题目给的数据进行验证，分两种情况，一种是框里什么都没有写，就验证不能请输入，另一种情况就是输入的长度不对，进行两次验证。

2.消失的 Token

在浏览器中预览 index.html 页面效果如下：

此时输入用户名后回车/点击确定，数据发生改变，但还是停留在登录页，无法正确显示登录成功界面。

目标

找到 index.html 中的 TODO 部分，仔细阅读 store 文件夹下的相关代码并结合 Vuex 相关知识，排查代码中存在的问题，修改后使得登录界面输入 admin 时，点击确认按钮/回车可以正确显示如下界面：

这道题通过查看Vuex仓库 store 文件夹下的 index.js 可知有两个Vuex模块，模块名 base 所对应的是 BaseModule ，模块名 user 所对应的是 UserModule ，再通过查看 UserModule.js 与 UserModule.js 可知，只有 user 模块通过 namespaced: true 开启了命名空间功能。因此，在调用 user 模块中的 getters 与 mutations 时，需要使用以下特定语法：

'模块名/模块中的getters或mutations'

修改前

var app = new Vue({
            el: '#app',
            data() { },
            computed: {
                welcome() {
                    return store.getters.welcome
                },
                username() {
                    return store.getters.username
                },
                token() {
                    return store.getters.token
                }
            },
            methods: {
                // 回车/点击确认的回调事件
                login(username) {
                    username && store.commit('login', { username, token: 'sxgWKnLADfS8hUxbiMWyb' })
                    username && store.commit('say', '登录成功，欢迎你回来！')
                }
            }
        })

所以，修改后的代码如下：

// TODO 修改下面错误代码

var app = new Vue({
    el: '#app',
    data() { },
    computed: {
        welcome() {
            return store.getters.welcome
        },
        username() {
            return store.getters['user/username']
        },
        token() {
            return store.getters['user/token']
        }
    },
    methods: {
        // 回车/点击确认的回调事件
        login(username) {
            username && store.commit('user/login', { username, token: 'sxgWKnLADfS8hUxbiMWyb' })
            username && store.commit('say', '登录成功，欢迎你回来！')
        }
    }
})

3.封装 Promisefy 函数

目标

请在 index.js 文件中的补全代码，完成 promisefy 函数的封装。将 fs 中的 readFile 方法 promise 化。也就是说 readFileSync 方法执行后，会返回一个 promise，可以调用 then 方法执行成功的回调或失败的回调。

在实际应用中，一个函数满足这几个条件，就可以被 promisify 化:

• 该方法必须包含回调函数
• 回调函数必须执行
• 回到函数第一个参数代表 err 信息，第二个参数代表成功返回的结果

在控制台运行：

node index

此时应打印出 true，即：回调形式的 fs.readFile 方法读取同个文件的结果与 Promise 形式读取结果一致。

**思路：**在promise函数中设置两个函数，分别为处理正确和错误的两个函数，promisify 是个函数，参数里面传个函数，promisify 的返回值也是个函数，调用这个函数，这个函数的返回是 promise 对象。在promise函数中，设置变量判断处于那个状态，设置值接收，两个函数在内部判断并将值赋值给外层接收。

const promisefy = (fn) => {
   
  // TODO 此处完成该函数的封装
    //读取文件
  return (textPath,utf8)=>{
   
      //返回一个新的Promise对象，有正确值和错误值输出
    return new Promise((resolve,reject)=>{
   
        //读取文件，返回错误信息或者读取到的值
      fs.readFile(textPath,utf8,(err,data)=>{
   
          if(err){
   
          return reject(err)
        }
        return resolve(data)
      })
    }) 
  }
}

4.趣购

目标

<div class="good-list">
  <div v-for="good in goods" 
  :key="good.name" 
  class="good" 
  draggable="true" 
  @dragstart="dragstart($event,good)">
    <img :src="good.cover" />
    <span>{
   {
    good.name }}</span>
    <span>￥{
   {
    good.price }