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

我现在的办法是

    

      
        
          {{item.name}}
        
      
    

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 页面创建一个管理员

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

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

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

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