最近花了几天时间把原来写的这个商城项目又改进了一点
部署到企鹅云
粗略的把项目打包了一下,然后部署到了腾讯云,试一下效果,既然都丢上去了,那也就留一个线上体验的地址
我看资料都要搞个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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。