摘要：最近花了幾天時間把原來寫的這個商城項目又改進了一點部署到企鵝云粗略的把項目打包了一下然后部署到了騰訊云試一下效果既然都丟上去了那也就留一個線上體驗的地址我看資料都要搞個我在云主機上也按了一個但怎么配置怎么搞這個反向代理負載均衡啊還是一頭霧水

最近花了幾天時間把原來寫的這個商城項目又改進了一點

粗略的把項目打包了一下,然后部署到了騰訊云,試一下效果,既然都丟上去了,那也就留一個線上體驗的地址

我看資料都要搞個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