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

布置到企鵝雲

大略的把項目打包了一下,然後布置到了騰訊雲,試一下結果,既然都丟上去了,那也就留一個線上體驗的地點

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