项目问题

绿色水果
140 阅读18分钟

一、移动CRM

1-1问以下问题：

  1. 项目技术方面：

    • 你在项目中如何使用 Vue3、Vue-Router、Vuex 和 Axios？能否举例说明其在项目中的具体应用？
    • 为什么选择了 Vue3 作为项目的主要框架？在使用过程中有遇到哪些挑战？
    • 你是如何使用 mock 来模拟后端数据和接口的？这个过程中遇到了什么问题，又是如何解决的？

  2. 项目职责方面：

    • 你如何实现登录、注册、首页、线索、公海、我的模块的信息管理功能？能否谈谈你的思路和具体实现？
    • 在实现线索详情页面以及编辑资料、模糊搜索功能时，你遇到了哪些难点？又是如何解决的？
    • 用户介绍功能模块的设置与展示是如何设计和实现的？在设计时考虑了哪些因素？
    • 请详细描述你是如何通过多个数组方法来实现角色权限功能的？这个过程中有没有遇到性能问题？
    • 开发数据的排序和筛选功能时，你是如何确保数据呈现的准确性和可操作性的？

  3. 项目设计与优化方面：

    • 你如何组织项目的代码结构？是否有遵循一定的设计模式或者规范？
    • 在开发过程中是否考虑了性能优化？如果是，你采取了哪些措施？
    • 项目中有哪些地方可以进一步改进或优化？

  4. 团队协作与沟通方面：

    • 你在团队中扮演的角色是什么？是否有负责其他开发人员的指导或者协助工作？
    • 你在开发过程中如何与团队成员协作？是否有使用过版本控制系统（如 Git）？如何处理冲突与合并代码？

以上问题旨在了解面试者在项目中的具体经验和技能，以及其在面对问题时的解决能力和思考方式。

1-2回答以下问题：

当面试官问到关于项目技术方面的问题时，我可能会这样回答：

  1. 关于使用 Vue3、Vue-Router、Vuex 和 Axios：

    • 在项目中，我们选择了 Vue3 作为主要的前端框架，因为它具有更好的性能和更好的开发体验。Vue-Router 用于管理应用的路由，实现了页面之间的切换和导航。Vuex 用于管理应用的状态，尤其是用户登录状态和一些全局的状态。Axios 用于处理与后端的数据交互，发送 HTTP 请求并处理响应数据。

    • 例如，在项目中，我们使用 Vue3 来构建各个模块的视图和组件，使用 Vue-Router 来管理路由，Vuex 来管理全局状态，比如用户的登录状态、权限等。同时，我们通过 Axios 发送 HTTP 请求来获取后端的数据，并将其展示在前端页面上。

  2. 关于 mock 的使用：

    • 在项目中，我们使用了 mock 来模拟后端数据和接口，这样我们就可以在开发阶段独立于后端进行前端开发，并且能够更快地迭代和测试前端功能。

    • 通过编写模拟数据和接口，我们可以模拟各种情况下的响应数据，以便于测试不同的业务逻辑和用户交互。

    • 我们通常会使用 Mock.js 或者 json-server 等工具来快速搭建一个模拟的后端环境，然后根据项目需求编写对应的模拟数据和接口。

当面试官问到关于项目职责方面的问题时，我可能会这样回答：

  1. 关于项目职责的实现：

    • 在项目中，我负责实现了登录、注册、首页、线索、公海、我的模块的信息管理功能，以及数据的展示。我主要使用了 Vue3 结合 Vue-Router、Vuex 和 Axios 来完成这些功能的开发。

    • 例如，在登录功能中，我使用了 Axios 发送登录请求到后端接口，并根据后端返回的数据判断用户登录是否成功。如果登录成功，我会将用户的登录状态保存到 Vuex 中，并跳转到首页；如果登录失败，我会给出相应的错误提示。

    • 另外，在线索模块中，我实现了线索列表的展示、线索详情的查看和编辑、以及模糊搜索功能。我使用了 Vue3 的组件化开发方式，将线索列表、线索详情等功能拆分成多个组件，提高了代码的复用性和可维护性。

当面试官问到关于项目设计与优化方面的问题时，我可能会这样回答：

  1. 关于项目设计与优化：

    • 在项目中，我采用了组件化的开发方式，将项目拆分成多个小组件，每个组件专注于完成特定的功能，提高了代码的复用性和可维护性。

    • 同时，我也尽可能地优化了项目的性能，例如通过懒加载路由来减少首次加载时的时间，使用异步组件来优化页面的加载速度，以及使用了 Vue3 的响应式数据和虚拟 DOM 来提高页面的渲染性能。

    • 另外，我也考虑了项目的可扩展性和可维护性，在设计时尽量遵循了一些设计模式和最佳实践，使得项目更易于扩展和维护。

以上是我对于这些问题的回答，希望能够展示出我的技术能力和项目经验。 当实现线索详情页面以及编辑资料、模糊搜索功能时，可能会遇到以下难点：

1. 线索详情页面与编辑资料：

  • 难点：线索详情页面需要展示大量信息，并且编辑资料功能需要与后端进行数据交互，涉及到数据的读取和更新操作。同时，编辑资料可能涉及到复杂的表单验证和数据校验。
  • 解决方法：我会先确保与后端的接口协调良好，确保能够正确地获取和更新数据。然后，我会将线索详情页面拆分成多个小组件，每个组件负责展示不同的信息，提高页面的可维护性。对于编辑资料功能，我会使用 Vue3 提供的表单组件和验证机制来实现表单的输入和校验。

2. 模糊搜索功能：

  • 难点：模糊搜索功能需要实时地根据用户的输入进行搜索，并将搜索结果展示给用户。这涉及到了大量的数据处理和页面更新操作，可能会影响页面的性能和用户体验。使用数组的 filter 和 includes 方法进行模糊搜索功能是一种简单有效的方法，但在处理大量数据时可能会影响性能，特别是当数据量很大时，这种搜索方式会变得相对低效。以下是一些优化建议：
  • 解决方法：
    • 缩小搜索范围：
      • 分页显示结果：如果可能的话，可以考虑在前端实现分页显示搜索结果，这样可以减少一次性加载大量数据的压力，提高页面的加载速度和性能。
    • 模糊搜索通常发生在用户连续输入搜索关键词时，用户往往会在一段时间内连续输入多个字符，而在这段连续输入期间，我们不希望频繁地触发搜索操作，以免造成不必要的性能开销和资源浪费。
      • 使用防抖能够很好地解决这个问题，它会在用户停止输入一段时间后才执行实际的搜索操作，这样可以保证只在用户输入停止后进行一次搜索，避免了连续输入时的重复搜索，同时能够确保在用户输入结束后及时地获取到最新的搜索结果，提升用户体验。
            box.oninput = (() => {
    let timerID = 0
    return function (e) {
        clearInterval(timerID)
        timerID = setTimeout(() => {
            console.log('搜索了: ', e.target.value)
        }, 300)
    }
})()

import { ref } from 'vue';
import { getClue } from './api'; // 假设这是你的获取数据的函数

const value = ref(''); // 输入框的值
const clueList = ref([]); // 搜索到的线索列表
const flag = ref(true); // 控制搜索状态的标志

// 模糊搜索函数
function fuzzySearch(text, keyword) {
    return text.toLowerCase().includes(keyword.toLowerCase());
}

// 防抖函数，500ms 内多次触发只执行最后一次
function debounce(func, delay) {
    let timerId;
    
    return function(...args) {
        clearTimeout(timerId);
        timerId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// 点击按钮触发搜索事件（带防抖）
async function onClickButton() {
    const { list } = await getClue();
    const searchText = value.value.trim();

    // 搜索为空
    if (searchText === '') {
        return showFailToast('请输入线索名称');
    }

    // 进行模糊搜索
    const filteredList = list.filter(item => fuzzySearch(item.name, searchText));
    
    // 搜索不存在
    flag.value = filteredList.length === 0;
    if (flag.value) {
        return showFailToast('不存在');
    }

    // 更新搜索结果列表
    clueList.value = filteredList;
}

// 将搜索函数包装在防抖函数内部
const debouncedSearch = debounce(onClickButton, 500);

export {
    value,
    clueList,
    flag,
    debouncedSearch
};

3、确保数据排序和筛选功能的准确性和可操作性

1. 前端数据排序和筛选：
  • 数据校验：对用户输入的排序字段和筛选条件进行校验，确保输入的数据格式正确，并且符合预期的范围和要求。通过 JavaScript 函数来对用户输入的数据进行验证。可以使用正则表达式、条件语句等来实现各种校验规则，如邮箱格式、手机号码格式、密码强度等。
2. 数据展示：
  • 分页显示：如果数据量较大，可以考虑对数据进行分页显示，减少一次性加载大量数据的压力，提高页面的加载速度和性能。
  • 实时更新：确保数据在排序和筛选后能够及时地更新到页面上，提供实时的数据展示，让用户能够及时地看到最新的排序和筛选结果。
  • 数据清晰度：确保数据的展示清晰明了，包括列名、数据格式、单位等，让用户能够清楚地了解每列数据的含义和取值范围，提高数据的可操作性。

4、角色权限功能

  • 1）Tree树形控件中的方法getCheckedNodes-如果节点可以被选中，将返回当前选中节点的数组。
  • 2）const list = this.$refs.treeRef.getCheckedNodes(true)返回一个数组，false全有，true只有子节点。不符合我们的需求，我们想要的是【人员管理，children【管理员管理，用户管理】】
  • 3） 新建一个数组parentlabel用于存储选中节点的父级label属性，后续用这个判断之前有没有遇到过这个父级
  • 4）遍历
    list，forEach(item => {
	//item就是每一个子节点
	//1.找子节点的父节点-find
	const parent = this.routesList.find(parent => {
		return parent.children.some(child => {
			return child.label === item.label
		})
	})
	//2.判断之前有没有遇到过这个父节点
	if(parentLabel.includes(parent.label)) {
		parentLabel.push(parent.label)
		result.push({
			label:parent.label,
			name:parent.name,
			children: [item]
		})
	} else {
		const parentInfo = result.find(t => t.label === parent.label)
		parentInfo.children.push(item)
	}
})
  • 5)将处理好的数据赋值给this.form
  • 6)node-key
// 1.5 获取角色权限
getCheckedKeys () {
    // 1.5.1 存储我们获取到的节点, 但是不符合我们的需求, 所以我们需要 进行一个改造
    const list = this.$refs.treeRef.getCheckedNodes(true)

    // 1.5.2 新建一个数组, 用于存储最终的结果
    const result = []

    // 1.5.3 新建一个数组, 用于存储选中节点的父级 label 属性, 后续可以利用 这个属性判断我们之前是否选中过这个节点或者之前有没有遇到过这个父级
    const parentLabel = []

    // 1.5.4 遍历 list 数组, 获取到每一个子节点, 然后寻找这个子节点对应的父级
    list.forEach(item => { // item 就是我们选中的每一个子节点

        // 1.5.4.1 帮助我们的子节点寻找到对应的父节点
        const parent = this.routesList.find(parent => { // 形参中的 parent 是我们的 二级路由 (人员管理和轮播图管理)

            // 只要 人员管理或者轮播图管理 中 children 属性的某一个对象的 label 属性和我们选中节点的 label 属性 相同
            // 就一定能够证明, 当前的 形参 parent 是我们选中的节点的父级
            return parent.children.some(child => {
                return child.label === item.label
            })
        })

        // 利用 includes 方法帮我们去查找 parentLabel 数组中有没有 parent.label 这个数据, 如果没有证明此时是第一次遇到这个父节点
        // 第一次遇到的时候将我们的数据筛选一下添加到 result 中, 并且将 parent.label 添加到 parentLabel 中, 这样能够在下一次遇到时证明之前已经遇到过这个对象, 处理过这个父节点
        // 如果之前遇到过这个父节点, 那么会执行 else 分支, 我们只需要找到这个父节点, 然后给他的 children 中 push 一个新的子节点即可
        if (!parentLabel.includes(parent.label)) {
            // 第一次遇到这个数据
            parentLabel.push(parent.label)

            result.push({
                label: parent.label,
                name: parent.name,
                children: [item]
            })

        } else {
            // 之前遇到过这个数据
            const parentInfo = result.find(t => t.label === parent.label)
            parentInfo.children.push(item)
        }
    })


    // 1.5.5 将我们处理好的数据, 赋值给 我们 form 对象
    this.form.checkedKeys = result

},

// 1. 抽屉组件 添加管理员的确定按钮
async addUser() {
    // 当前函数调用完毕, 已经会将选中项设置给我们的 this.form.checkedKeys 属性
    this.getCheckedKeys()

    const res = await addAdmin(this.form);
    if (res.code !== "200") {
        return ElMessage({
            type: "warning",
            message: res.message,
        });
    }
    ElMessage({
        type: "success",
        message: res.message,
    });
    // 请求新数据
    this.adminList = (await getAdminList()).data;
    // 弹框关闭
    this.close();
},

5、登录使用路由守卫

在 Vue Router 中，可以使用路由导航守卫或全局前置守卫来检查用户是否已经登录。下面分别介绍如何使用这两种方式：

1. 路由导航守卫

路由导航守卫是针对每个路由实例的，可以在路由配置中为特定的路由添加守卫，来控制用户是否可以访问该路由。常用的守卫包括 beforeEnter、beforeLeave。

javascriptCopy code
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        const isAuthenticated = checkAuthentication(); // 检查用户是否已登录
        if (isAuthenticated) {
          next(); // 已登录，继续访问
        } else {
          next('/login'); // 未登录，跳转到登录页
        }
      }
    },
    // 其他路由配置...
  ]
});
2. 全局前置守卫

全局前置守卫会在每个路由跳转之前被触发，可以在全局前置守卫中检查用户是否已经登录，并根据情况决定是否允许跳转。

javascriptCopy code
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 路由配置...
  ]
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuthentication(); // 检查用户是否已登录
  if (to.path !== '/login' && !isAuthenticated) {
    next('/login'); // 未登录，跳转到登录页
  } else {
    next(); // 已登录或访问登录页，继续
  }
});

6、上拉加载，下拉刷新

Vant是一套基于Vue的移动端UI组件库，它提供了丰富的移动端UI组件，包括上拉加载和下拉刷新功能。下面是使用Vant实现上拉加载和下拉刷新的示例：

首先，确保你已经安装了Vant：

npm install vant --save

然后，在你的Vue组件中使用它：

<template>
  <van-pull-refresh v-model:refreshing="refreshing" @refresh="onRefresh">
    <!-- 下拉刷新内容区域 -->
    <div class="content" v-if="refreshing">
      <!-- 下拉刷新时显示的内容，可以是自定义的加载动画等 -->
      正在刷新...
    </div>
    <div class="content" v-else>
      <!-- 列表内容区域 -->
      <van-list :finished="finished" @load="onLoad">
        <template #header>
          <!-- 自定义下拉刷新指示器 -->
          <div class="pull-indicator">下拉刷新</div>
        </template>
        <van-cell v-for="(item, index) in dataList" :key="index">
          {{ item }}
        </van-cell>
      </van-list>
    </div>
  </van-pull-refresh>
</template>

<script>
import { ref } from 'vue';
import { List, PullRefresh } from 'vant';

export default {
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh
  },
  setup() {
    const refreshing = ref(false); // 是否正在下拉刷新
    const finished = ref(false); // 是否加载完成
    const dataList = ref([]); // 数据列表

    // 下拉刷新事件处理函数
    const onRefresh = () => {
      // 模拟异步加载数据
      setTimeout(() => {
        // 加载完成后，重置数据列表和状态
        dataList.value = []; // 清空数据列表
        finished.value = false; // 重置加载完成状态
        refreshing.value = false; // 关闭下拉刷新状态
      }, 1000);
    };

    // 上拉加载事件处理函数
    const onLoad = () => {
      // 模拟异步加载数据
      setTimeout(() => {
        // 加载完成后，将新数据添加到数据列表
        dataList.value.push('新数据'); // 假设这里是新数据
        // 如果数据加载到一定数量，设置finished为true，表示加载完成
        if (dataList.value.length >= 50) {
          finished.value = true;
        }
      }, 1000);
    };

    return {
      refreshing,
      finished,
      dataList,
      onRefresh,
      onLoad
    };
  }
};
</script>

<style>
/* 自定义样式 */
.pull-indicator {
  text-align: center;
  padding: 10px 0;
}
</style>

在这个示例中，使用了Vant的van-pull-refresh组件来实现下拉刷新功能，van-list组件用于展示列表内容，并提供了上拉加载功能。通过监听@refresh事件和@load事件来处理下拉刷新和上拉加载的逻辑。

在上述代码中，checkAuthentication 是一个自定义的函数，用于检查用户是否已经登录。根据检查结果，决定是否允许继续访问路由，或者跳转到登录页。

7、封装弹窗组件

<template>
  <div class="dialog-overlay" v-if="visible">
    <div class="dialog">
      <div class="dialog-header">
        <span>{{ title }}</span>
        <button @click="close">X</button>
      </div>
      <div class="dialog-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'Dialog'
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog {
  background-color: white;
  border-radius: 5px;
  padding: 20px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.dialog-body {
  padding: 10px 0;
}
</style>
使用
    <template>
  <div>
    <button @click="showDialog">Show Dialog</button>
    <Dialog :visible="dialogVisible" @update:visible="dialogVisible = $event">
      <p>This is the content of the dialog.</p>
    </Dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

8、长列表优化

二、nodejs后台管理系统

1.1提问

  1. 项目整体架构和设计思路：

    • 你能介绍一下整个项目的架构和设计思路吗？为什么选择了Express框架和EJS模板引擎？有没有考虑其他技术选型？

  2. 技术细节：

    • 你是如何使用Express框架和EJS模板引擎来构建后台管理系统的？
    • 在项目中如何实现了路由跳转和身份验证？可以谈谈你的实现思路和具体的代码结构吗？

  3. 用户管理功能：

    • 你是如何实现管理员对用户的管理功能的？具体涉及到哪些操作？是否考虑了安全性和权限控制？

  4. 登录和注册功能：

    • 项目中的登录和注册功能是如何实现的？有没有考虑到安全性和用户体验方面的问题？
    • 你是否采取了一些措施来防止常见的安全漏洞，比如SQL注入、XSS等？

  5. 用户头像轮播图展示：

    • 用户头像轮播图展示是如何实现的？是否考虑了性能和用户体验方面的问题？

  6. 测试和优化：

    • 项目中是否进行了测试？采用了什么测试方法？是否进行了性能优化？

  7. 未来扩展和改进：

    • 在当前项目的基础上，你认为可以进行哪些扩展或改进？有没有考虑过加入其他功能或技术？
    • 你对项目的哪些部分感到最自豪？有没有遇到过哪些挑战，是如何解决的？

  8. 团队协作和沟通：

    • 如果是在团队中开发这个项目，你是如何分工合作的？是否遇到过沟通问题，是如何解决的？

  9. 自我评价：

    • 对于这个项目，你觉得自己的表现如何？有没有什么可以改进的地方？

1.2回答

好的，我将为您逐个回答这些问题：

  1. 项目整体架构和设计思路：

    • 这个项目的整体架构是基于MVC（Model-View-Controller）设计模式的。Express框架提供了路由和中间件管理，而EJS模板引擎用于生成HTML视图。我们选择Express框架是因为它是一个轻量级、灵活的Node.js框架，适用于构建Web应用程序和API。而EJS模板引擎则允许我们在服务器端生成动态HTML页面，方便与后端数据交互。

  2. 技术细节：

    • 我们使用Express框架提供的Router来定义路由，并结合中间件来实现身份验证。身份验证通常基于用户的session或token实现。在项目中，我们可以通过在路由中添加中间件来验证用户的登录状态，以确保只有登录用户才能访问特定页面或执行特定操作。

  3. 后端数据和接口模拟：

    • 我们使用mockjs等工具来模拟后端数据和接口。Mock数据可以帮助我们在开发初期就能够进行前端功能的开发和测试，而无需依赖后端接口的完全实现。这样可以提高开发效率，同时降低前后端并行开发带来的沟通成本。

  4. 用户管理功能：

    • 用户管理功能包括添加新用户、编辑用户信息和重置密码等。在实现这些功能时，我们可以通过Express框架来定义相应的路由，并结合数据库操作来实现具体功能。为了保证安全性，我们可以在后端对用户输入进行验证和过滤，防止恶意输入或注入攻击。

  5. 登录和注册功能：

    • 登录和注册功能是通过表单提交来实现的。用户在填写完相应信息后，后端会对用户输入进行验证，并通过session或token来标识用户的登录状态。在注册时，通常需要对用户输入进行合法性验证，并对密码进行加密存储，以保证用户信息的安全性。

  6. 用户头像轮播图展示：

    • 用户头像轮播图展示可以通过前端技术实现，比如使用HTML和CSS来布局和样式化，使用JavaScript来实现轮播功能。我们可以将用户头像的URL存储在数据库中，并通过后端接口提供给前端，然后前端通过Ajax请求获取用户头像数据并展示在页面上。

  7. 未来扩展和改进：

    • 未来可以考虑添加更多的功能，比如权限管理、日志记录、数据分析等功能。同时也可以考虑优化用户体验，比如引入前端框架、增加动画效果等。

用户上传头像后立即展示的功能可以通过以下步骤来实现：

  1. 前端实现上传功能：

    • 在前端页面上添加一个文件上传的input元素，用户可以通过点击该元素选择本地的头像文件进行上传。例如：
    htmlCopy code
<input type="file" id="avatarInput" accept="image/*">
<img id="avatarPreview" src="#" alt="Preview">
实现头像功能：

  1. 监听文件上传事件：

    • 使用JavaScript监听文件上传input元素的change事件，当用户选择了文件后触发相应的事件处理函数。

  2. 预览图片：

    • 在事件处理函数中，获取用户选择的图片文件，并将其转换成URL对象，然后将该URL赋值给img标签的src属性，以实现预览效果。
    javascriptCopy code
const avatarInput = document.getElementById('avatarInput');
const avatarPreview = document.getElementById('avatarPreview');

avatarInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        avatarPreview.src = e.target.result;
    };
    reader.readAsDataURL(file);
});

  3. 后端处理上传文件：

    • 用户选择头像文件后，通过Ajax请求将文件发送到后端服务器。后端服务器接收到文件后，可以将文件保存在指定的目录下，并返回文件的URL地址给前端页面。

  4. 保存用户头像信息：

    • 后端在接收到文件并保存成功后，可以将文件的URL地址保存在用户的信息中，以便在其他页面或者下一次登录时展示用户头像。
avatar
文章
阅读
粉丝