Vue项目-商品信息管理系统

目录

一. 商品信息管理系统简介：

1. 以Vue2为主实现的前后端分离的单页面项目：

2. 使用Vue2进行开发的原因：

3. 项目需求：

4. 项目设计功能模块：

5. 功能化完成页面效果图

二. 开发环境

前端：后端：数据库：

三. 项目实行

1. 前后台目录列表

后台：前台：

2.所遇问题报错或bug记录

问题1： 问题2：问题3：问题4：问题5：问题6：问题7(?)：问题8： 

3.重难点

---

一. 商品信息管理系统简介：

1. 以Vue2为主实现的前后端分离的单页面项目：

前后端分离项目只需在确定好API接口、数据和参数时便可同时进行开发，前端工程师需编写HTML页面，后端进行开发接口，无强依赖，可以实现真正的前后端解耦，当需求变更时，接口及参数不发生变化，前后端同时修改，效率更高。

我认为以此方法进行开发项目，对技术还不完全成熟的我来说更为友好。hhh

2. 使用Vue2进行开发的原因：

相比于Vue3来说，Vue2更加稳定，虽然Vue3开发起来更便捷，内存消耗和用户体验感更好，但容易出现的bug也更多，相比较之下查询bug原因也更为困难，此外，我对Vue2学习效果更深刻，以Vue2进行开发可以节约开发成本。

3. 项目需求：

商品信息管理系统采用数据化管理管理员、商品，分配管理员及商品对应情况。可变形为超市管理系统、会员管理系统、图书馆管理系统等管理者与被管理者关系的项目系统。

在疫情期间,没事闲的在创业园摆摊,设计此项目也是为了统计零碎八碎的东西,对于分成一块一块的小摊统计一下子就,虽然不成熟,但还能凑活用

4. 项目设计功能模块：

注册、登录、退出登录、修改密码、管理员管理、商品管理及其各自对应的增删改查部分等。

(系统持续完善 挺多没整完 设计设计页面 动画 动态效果啥的 暂时这么看吧......)

5. 功能化完成页面效果图

登陆账户页面注册账户页面首页管理员管理管理员管理-新增管理员管理-删除 管理员管理-编辑管理员管理-查询 商品管理商品管理-新增商品管理-删除商品管理-编辑商品管理-查询

二. 开发环境

前端：

脚手架Vue-CLI搭建版本：vue/cli@3.10.0

解决异步请求：axios

实现父子间通信：pubsub-js

后台页面组件库：element-ui

前端路由：Vue-Router

资源打包：webpack

后端：

后台搭建：Node.js中的express

解析Http请求体：bodyParser

数据加密：md5

路由请求：router

数据库：

mongo数据库存储数据

三. 项目实行

1. 前后台目录列表

后台：                                                                            

前台：

2.所遇问题报错或bug记录

问题1：

前后端api的id一样，但端口不一样，产生跨域问题。

跨域现象的报错：

解决方法：跨域问题，通过代理的方法将Api请求通过代理服务器请求到Api服务器，在开发环境中使用devServer.proxy进行代理配置。

代理的方式解决跨域的缺点:在vue-cli中只能在开发时代理解决跨域,上线后还要在上线后的服务器中解决跨域

代码实现：

module.exports = {
  // transpileDependencies: true,
  devServer:{
    port:8888,//端口号
    host:'localhost',//主机名
    https:false,//协议
    open:true,//启动服务器时自动打开浏览器访问
    proxy:{
      //解决跨域问题 通过代理的方法
      // 跨域问题的解决：给8888端口尾部添加/dev-api,在proxy中将/dev-api代理到3000端口，然后重写/dev-api为一个空数组
      // '^dev-api':{在.env.development开发环境中替换，方便后面代码的修改
        [process.env.VUE_APP_BASE_API]:{
        // 代理到http://localhost:3000这个位置
        // target:'http://localhost:3000',
        target:process.env.VUE_APP_SERVICE_URL,
        changeOrigin:true,//开启代理
        pathRewrite:{
          // "^/dev-api":'',//重写，将'dev-api'替换为空字符串
          ['^' + process.env.VUE_APP_BASE_API]:'',//字符串拼接进行替换，K替换后要加方括号[]
          //正则表达式将dev-api替换为空数组：写法 /dev-api
          //^表示精确智导
        }
      }
    }
  },
  lintOnSave:false,//关闭格式检查
  productionSourceMap:false,//打包时不会生成.map文件，加快打包速度
};

 问题2：

出现报错：404

出现错误点：

 修改错误点：

错误原因：

pathRewrite:{
          "^/dev-api":'',//重写，将'dev-api'替换为空字符串
          //正则表达式将dev-api替换为空数组：写法 /dev-api
          //^表示精确智导
        }

注意：

404报错：死链接 ；原因：前后台地址不对应。

500报错：服务器错误；原因：服务器代码书写错误或后台没启动。

问题3：

控制台不出现报错，但是不能进行选择和输入。

 原因：searchMap中没有传入参数

searchMap: {
        jobnumber: "",
        name: "",
        role: "",
        entrydate: "",
      }, //条件查询

问题4：

在新增管理员页面弹窗时，打开弹窗填写完信息后，再次打开弹窗本应重置弹窗中内容，重置表单出现报错。

 增加nextTick方法,vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码。

// 是一个异步事件，当渲染全部结束之后，执行内部回调函数，使表单form加载完成之后调用resetFields()方法
      // this.$nextTick();
      // 使弹窗框提交结束后自动重置里面的内容
      // resetFields重置作用 
      this.$nextTick(()=>{
        this.$refs["administratorForm"].resetFields();
      })

 问题5：

出现bug，在构建编辑管理员时，先点击编辑对管理员A进行编辑后，再点击新增按钮新增出管理员B，新增加的B替换掉了A的位置。

问题测试：
起始页面状态：

 对001进行编辑：

点击新增，新增006：

 增加006后本该出现在form最后面的006替换掉了001:

出现问题原因分析：

在根据判断id值是否为空而进行判断是编辑状态还是新增状态时，在id不为空而触发编辑状态后Id值未被清空，导致下一次新增判断出错。

改为在编辑管理员后就立即将_id值改为空值。

 再次测试：

 运行正常。

构建商品编辑又出现这问题，点击编辑按钮后再新增，新增的对象取代了上一次被编辑的对象。

 

 问题6：

再构建商品管理时，第一次选中的弹窗对应的管理，第二次再此被选中时，不触发dialog关闭。

 问题原因分析：在第一次点击时触发了数据发生改变，dialogForm = false，第二次再次点击时，数据未发生改变，不触发方法，没有前台页面的变化。逻辑错误，代码不会报错。

问题显示：

clickCurrentChange(val)方法只有在数据变化是在机型记录数据，当第一次和第二次数据未发生变化时不会触发，不执行下一阶段代码，不会自动关闭弹窗dialog

修改administrator点击事件：

 <!-- 添加单击事件 -->

    <!-- cell-click 当某个单元格被点击时会触发该事件 -->

    <!-- current-change 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 --!>

问题7(?)：

在进行goods新增时，已经设置了settimeout防抖节流，新增一次短时间多次点击确认依然会出现多个，且不报错

 尝试解决方法：

在lms/views/goods/index.js的data中定义isSend

 isSend:false,//是否正在发送请求

在提交新增goods中添加判断：

改为：

一次测试：

错误原因：

if (resp.flag) {
                  this.fetchData();
                  this.dialogFormVisible = false;
                  this.isSend = false;//请求成功不再发送请求
                }

中，顺序为：获取数据->关闭新增窗口->停止发送请求

在窗口还没关闭的时候，还在获取数据，但这个时候数据已经响应回来了，但按钮还在，还可以点击，再次进行修改：调整顺序为

 二次测试：

问题滞留

问题8： 

异常处理时发生报错：

当输入的密码不正确时，进行响应拦截

代码状态：

错误时页面状态：

错误原因：

当输入账号密码不对应时，在相应拦截器出warning警告一次，在登录login处还有警告一次，弹出两次弹窗

解决：

将组件中this.$message全部去掉 或者将响应拦截中去掉，但是除去前者更方便以后代码的实现

解决后效果：

 弹框只弹出一次

3.重难点

（1）理解SPA应用的路由的原理：利用改变路由时不刷新，一般有HashHistory模式和H5History模式两种方式。我选择H5History模式的原因第一是请求地址没有#号更美观，第二是H5History的pushState方法可以通过stateObject添加任意类型的数据到记录中，但HashHistory只能添加短字符串；而且H5History还能添加title（现在还没用上），这两点有助于我项目以后的扩展和改进，第三是H5History模式比HashHistory匹配的更精确一些，若使用HashHistory，在请求一个后端没有的接口时会自动把地址改为根目录，但是使用H5History时就会直接404，这样能在写项目时减少bug
（2）前端后端跨域问题：端口号不同产生跨域，通过代理请求的方式解决，将API请求通过代理服务器请求到API服务器。开发环境中，使用devServer.proxy选项进行代理配置，又在.env.development统一配置了开发环境用到的变量，其他模块均可通过process.env.VUE_APP_BASE_API获取
（3）封装axios：每个组件中都有一次或多次请求，一开始我次都使用axios，后来代码重复率太高了，所以我把axios封装了，其他模块导入使用
（4）加载页面和处理异常：在封装的axios对象里先写一个加载页面的loading方法，再请求拦截器中打开，在响应拦截器中关闭，注意加载页面的叠加问题；当每个组件中都需要写处理请求异常的代码，重复度很高，当我写完项目是才意识到，最终我再axios对象的响应拦截器了异常做了统一处理
（5）使用路由守卫
此系统最开始没有对访问权限的限制，不登陆的用户也能通过修改地址栏使用其他功能，我通过验证token 的方式来解决；通过地址栏访问其他功能且没有检测到token时会强制进入登陆页面
（6）在登陆时token的储存问题
token是在我们注册账号时后台创建的一个状态标识，跟随我们的账号密码等信息一起存在数据库中。当我们登录时，需要利用获取用户信息，把和用户信息token存到浏览器的localstorage中，以此来表示用户处于登陆状态。在存储时，要从响应回来的数据拿，用resp.data.token访问数据能成功，而 res.data.data.token却不行
（7）刷新后路由与页面显示不匹配
当我们引入ElemenUI的界面时，如果用到路由则一定要使用 :router="true"，:default-active="$route.path"
，不然刷新时页面会出问题
（8）添加商品信息的里的选择管理员和查询栏里的选择管理员有冲突
因为这两个功能选择管理员是都弹出的是同一个表单，所以不加特殊的标识就会全部回显到一个功能上。因为商品需要选择管理员，所以把管理员组件注册成商品组件的子组件，然后利用管理员组件定义props接收值，商品组件用v-bind来传值确定那个信息需要显示哪个不需要显示，使用管理员组件时绑定一个事件，管理员组件通过$emit来触发option-manager间接触发商品组件的optionManager。为了避免再选择管理员是回显错误，我们设置一个标识isEdit，当处于编辑是它是true，当点击编辑按钮时先触发editOptionManager把标识设为true，然后触发optionManager方法，进行逻辑判断并获取数据