vue express mongodb 电商项目(二)

最近花了几天时间把原来写的这个商城项目又改进了一点

部署到企鹅云

粗略的把项目打包了一下,然后部署到了腾讯云,试一下效果,既然都丢上去了,那也就留一个线上体验的地址

我看资料都要搞个nginx,我在云主机上也按了一个,但怎么配置,怎么搞这个反向代理,负载均衡啊,还是一头雾水!

不知道有没有大佬可愿意让我请教一下nginx的啊,第一次搞这个真不懂,先谢过了!

新增功能

1.目前所有上传的图片(因为没用到文件)都通过七牛存在七牛云空间了!

2.增加了注册时预先检验用户名是否被注册

3.重新封装了几个全局组件,然后很懊恼的发现,我这个项目的文件层级结构真的是十分的不合理啊,但要想重构又比较麻烦好揪心啊!其实还是以前对组件,页面等的定义和划分过于模糊(当然这是自我安慰的说法,其实以前就不懂这些!)

还未解决的问题

目前写到这里有一个关于route的问题我一直没想到好的办法解决,在这里也想请教各位一下

目前我的整个router说复杂不算复杂,但说简单应该也算不上了

const routes = [
  // 前段页面路由
  {
    path: '/',
    hidden: true,
    type: 'client',
    component: Home,
    children: [
      {
        path: '/',
        hidden: true,
        component: ConHome
      },
      {
        path: '/products',
        name: '商品',
        class: 'el-icon-goods',
        component: Products,
        redirect: '/product/全部商品',
        children: [
          {
            // 这里用的动态路由，需要一个冒号：
            path: '/product/:class',
            component: ProductList
          }
        ]
      },
      {
        path: '/product/:class/:productname',
        hidden: true,
        component: ProductContent
      },
      {
        path: '/news/:id',
        hidden: true,
        component: NewsContent
      },
      {
        path: '/FAQ',
        name: '文档',
        component: FAQ
      },
      {
        path: '/news',
        name: '动态',
        component: News
      },
      {
        path: '/manger',
        name: '工作台',
        redirect: '/manger/my',
        meta: {
          requireUser: true
        },
        component: Manger,
        hasChild: true,
        children: [
          {
            path: '/manger/my',
            meta: {
              requireUser: true
            },
            name: '我的信息',
            component: My
          },
          {
            path: '/manger/send',
            name: '发货管理',
            meta: {
              requireUser: true
            },
            component: Send
          },
          {
            path: '/manger/history',
            name: '发货记录',
            meta: {
              requireUser: true
            },
            component: MyHistory
          }
        ]
      }
    ]
  },
  // 后端页面路由
  // 后端主路由
  {
    path: '/admin',
    component: Admin,
    type: 'admin',
    hidden: true,
    meta: {
      requireAdminer: true
    },
    children: [
      // 后端首页
      {
        path: '/admin',
        meta: {
          requireAdminer: true,
          role: '发货员.管理员.商品管理员'
        },
        component: AdminHome,
        name: '管理首页'
      },
      // 商品管理
      {
        path: '/admin/mangeprods',
        name: '商品管理',
        meta: {
          requireAdminer: true,
          role: '管理员.商品管理员'
        },
        component: MangerProds,
        redirect: '/admin/mangeprods/allprods',
        children: [
          {
            path: '/admin/mangeprods/allprods',
            name: '全部商品',
            meta: {
              requireAdminer: true
            },
            component: AllProds
          },
          {
            path: '/admin/mangeprods/addprodstype',
            name: '添加商品分类',
            meta: {
              requireAdminer: true
            },
            component: AddType
          },
          {
            path: '/admin/mangeprods/addprod',
            name: '新增商品',
            meta: {
              requireAdminer: true
            },
            component: AddProd
          }
        ]
      },
      // 订单管理
      {
        path: '/admin/mangesends',
        name: '订单管理',
        meta: {
          requireAdminer: true,
          role: '发货员.管理员'
        },
        component: MangerSends,
        redirect: '/admin/mangesends/submitsends',
        children: [
          {
            path: '/admin/mangesends/submitsends',
            name: '打印发货运单',
            meta: {
              requireAdminer: true
            },
            component: SubmitSends
          },
          {
            path: '/admin/mangesends/hassends',
            name: '已发货订单',
            meta: {
              requireAdminer: true
            },
            component: HasSends
          }
        ]
      },
      // 用户管理
      {
        path: '/admin/mangeuser',
        name: '用户管理',
        meta: {
          requireAdminer: true,
          role: '管理员'
        },
        component: MangerUser
      },
      // 管理员账户管理
      {
        path: '/admin/mangeadmin',
        name: '管理人员',
        meta: {
          requireAdminer: true
        },
        component: MangerAdmin,
        redirect: '/admin/mangeadmin/alladminers',
        children: [
          {
            path: '/admin/mangeadmin/alladminers',
            name: '管理员列表',
            meta: {
              requireAdminer: true
            },
            component: AllAdminer
          },
          {
            path: '/admin/mangeadmin/newadminer',
            name: '新增管理员',
            meta: {
              requireAdminer: true
            },
            component: NewAdminer
          }
        ]
      },
      // 新闻管理
      {
        path: '/admin/mangenews',
        name: '新闻管理',
        component: MangeNews,
        meta: {
          requireAdminer: true,
          role: '管理员'
        },
        redirect: '/admin/mangenews/allnews',
        children: [
          {
            path: '/admin/mangenews/allnews',
            name: '全部新闻',
            component: AllNews,
            meta: {
              requireAdminer: true
            }
          },
          {
            path: '/admin/mangenews/addnews',
            name: '添加新闻动态',
            component: AddNews,
            meta: {
              requireAdminer: true
            }
          }
        ]
      },
      // FAQ文档管理
      {
        path: '/admin/mangeFAQ',
        name: '文档管理',
        component: MangeFAQ,
        meta: {
          requireAdminer: true
        },
        redirect: '/admin/mangeFAQ/all',
        children: [
          {
            path: '/admin/mangeFAQ/all',
            name: '全部帮助文档',
            component: AllFAQ,
            meta: {
              requireAdminer: true
            }
          },
          {
            path: '/admin/mangeFAQ/new',
            name: '添加FAQ文档',
            component: AddFAQ,
            meta: {
              requireAdminer: true
            }
          }
        ]
      },
      // 网站管理
      {
        path: '/admin/siteoption',
        name: '网站设置',
        component: SiteOption,
        meta: {
          requireAdminer: true
        },
        redirect: '/admin/siteoption/setoption',
        children: [
          {
            path: '/admin/siteoption/setoption',
            name: '网站基本设置',
            component: SetOption,
            meta: {
              requireAdminer: true
            }
          },
          {
            path: '/admin/siteoption/setabout',
            name: '关于我们',
            component: SetAbout,
            meta: {
              requireAdminer: true
            }
          },
          {
            path: '/admin/siteoption/newsetabout',
            name: '添加新内容',
            component: NewSetAbout,
            meta: {
              requireAdminer: true
            }
          }
        ]
      }
    ]
  },
  // 登录注册以及404页面路由
  {
    path: '/adminer/login',
    hidden: true,
    component: AdminLogin
  },
  {
    path: '/login',
    name: '',
    hidden: true,
    component: Login
  },
  {
    path: '/regin',
    name: '',
    hidden: true,
    component: Regin
  },
  {
    path: '/addadminer',
    name: '添加管理员',
    component: NewAdminer
  },
  {
    path: '*',
    hidden: true,
    component: Page404
  }
]
export default new Router({ routes: routes })

首先路由分为前端,后端,以及登录注册,404
那现在就有一个很现实的问题,假如我要渲染的路由只有后端---->商品管理--->children的子路由

// 商品管理
      {
        path: '/admin/mangeprods',
        name: '商品管理',
        meta: {
          requireAdminer: true,
          role: '管理员.商品管理员'
        },
        component: MangerProds,
        redirect: '/admin/mangeprods/allprods',
        children: [
          {
            path: '/admin/mangeprods/allprods',
            name: '全部商品',
            meta: {
              requireAdminer: true
            },
            component: AllProds
          },
          {
            path: '/admin/mangeprods/addprodstype',
            name: '添加商品分类',
            meta: {
              requireAdminer: true
            },
            component: AddType
          },
          {
            path: '/admin/mangeprods/addprod',
            name: '新增商品',
            meta: {
              requireAdminer: true
            },
            component: AddProd
          }
        ]
      },
      // 订单管理

也就是我只需要这里的children

我现在的办法是

<!-- 商品管理路由 -->
    <div class="prodmenu">
      <el-menu
        mode="horizontal"
        :default-active="$router.path"
        router>
        <el-menu-item 
          v-for="item in $router.options.routes[1].children[1].children"
          :key="item.path"
          :index="item.path">
          {{item.name}}
        </el-menu-item>
      </el-menu>
    </div>

v-for="item in $router.options.routes[1].children[1].children"
这样我的确可以正确获取到路由,但这这根本就不符合程序员的思维嘛!
相当于把路由的顺序写死了,要是在后端路由上加个新菜单,那这一片的路由都不能正常显示了啊!顺序改变了也许就是children[2]或者其它的了

我本来打算写一个公共class函数,传入整个routes,然后定义方法,根据需求来筛选,但写了之后发现很不靠谱啊,因为不同页面的需求不同,我有时不需要children,或者children下面还有好几个children

在此请教一下,各位大佬这方面平时是怎么做的,能不能给个思路参考一下?先谢过了

这个项目预计还要实现的功能

1.完成后台管理的权限功能

2.完成第三方登录,至少包含微信

3.其实商品/新闻/发货信息等的分页都还没写,各位同学有兴趣的话,可以帮我添点内容,然后我写个分页

4.评论功能,一直没写评论功能但评论也是个很重要的功能,需要写一个!

5.微信支付功能,有预计,但要实现可能要点时间

6.也许我会真的让这个项目上线,如果真的上线的话,可能还会做一个和快递对接的接口,实现在线生成订单,打印电子面单的功能,预计中,看能否找到合伙人了!

7.可能我会用mp-vue重构一下本项目,做成微信小程序,就算不完全做完,至少也会体验一番,如果能上线的话,就肯定会做这一步!

线上体验怎么进入后台管理

因为管理员登录并没有写在前端页面上,所以需要手动在浏览器地址栏#后面输入/admin,进入管理员登录页面
默认 admin admin
当然也可以去#/addadminer 页面创建一个管理员

如果有愿意去线上体验一番的小伙伴,请无需顾虑的随意增删数据!

最后欢迎star

客户端地址:https://github.com/lyttonlee/...

服务端地址:https://github.com/lyttonlee/...

最后由于readme写的并不完善,如果有啥问题,可以留言,当然也可以issue