前后端联合开发项目总结前后端联合开发项目总结

193 阅读 0 评论 128 点赞

我是靠谱客的博主耍酷香水，这篇文章主要介绍前后端联合开发项目总结前后端联合开发项目总结，现在分享给大家，希望可以做个参考。

前后端联合开发项目总结

我们做的是深蓝潜水俱乐部器材管理系统，

首先的第一个问题业务逻辑不明确，与后端沟通时间较长，
然后因为见识与自身逻辑的原因，考虑问题不充分，没有规划好页面布局，导致后期需要进行页面修改的时间比较长，业务功能不完善，业务逻辑不匹配等等问题

首先我们根据器材管理系统开始分析，器材管理，应该要有器材的新增，器材的查询，器材的销毁，器材的修改，已经租借器材给用户，用户归还器械等等，但是我们是后台管理系统，所以用户应该是不能注册与登陆的，从常识上来讲，用户租借设备与归还设备应该由前台来进行功能的实现，由用户来进行器材的归还与租借，但是我的想法是，用户在租借时应由管理员进行对用户的进行租借记录的添加，这样归还时，管理员（俱乐部的工作人员）可以对器材的损耗程度，损坏程度，或者器材的丢失进行不同状态的添加，以方便对器材现阶段的使用说明有更好的了解，并向用户收取比较合适的租金与押金。
页面的设计，我感觉我页面的设计不够清晰明了，简洁大方，需要管理员找，一次能完成的事要点两次才能完成，项目中少用下拉菜单，多用搜索以及单选选项，或多选选项，这样不用管理员（俱乐部工作人员），进行一个一个的查找，更加简介明了，方便快捷。信息查询时查出来的信息不要有没用的信息，只展示最主要的部分。
技术部分，我使用的是vue全家桶，包括vue.js、vue-cli、vue-router、vuex，组件使用了element ui，插件使用了：axios，animate.css动画，

技术，运用了配置基准地址

// 配置请求根路径
axios.defaults.baseURL = 'http://wwwhk.vaiwan.com/DivingServer_war'

请求拦截器

axios.interceptors.request.use(function (config) {
  config.headers.Authorization = localStorage.getItem('token')
  return config
})

注册响应拦截器

axios.interceptors.response.use(async function (response) {
  if (response.status === 400 && response.data.msg === '无效token') {
    try {
      await ElementUI.MessageBox.alert('登录过期，请重新登录', {
        confirmButtonText: '跳转'
      })
      // 跳转
      return router.push('/')
    } catch (err) {}
  }
  return response // 放行
})

配置路由前置守卫

router.beforeEach((to, from, next) => {
  // console.log(to.name);
  if (to.name === 'login') {
    return next() // 放行
  }
  // if (to.name === 'register') {
  //   return next() // 放行
  // }
  // 获取token
  const token = localStorage.getItem('token')
  if (!token) {
    return next('/')
  }
  // 如果登录，就跳转到想要的路由
  next()
})

等等，以及单组件的应用和复用，vuex的使用，注意项目中的图片最好都用网络地址的图片，否则打包上线后本机图片会无法展示（亲身体验哟）注意，一定要做好屏幕的适配，否则在你这里还看得过去的页面，到别人那里就变得不一样了，
难点，后端的图片上传，因为我们用的是七牛云用来存储图片，所以前端上传的图片，后端需先要上传到七牛云上，然后再用七牛云上的网络地址保存到数据库中。
难点，数据的实时搜索，数据的模糊与定性搜索，功能要实现的太多，时间不够，后期有加功能，需要重新建表等等，建表后需要重新查询等等