##开发助贫网站,需要登录注册,新闻中心,个人信息,新闻详情,助贫购物等组件。需要发表文章,点赞评论,购物等功能。不直接写css,用现成的ui库来构写组件页面,包括elementui,bootstrapvue等ui库。使用模板打包工具vue—cli创建模板。
使用vue-cli自动生成一个单页面应用模板。然后删除不必要的代码和文件,整理出一个空网页,导入vue-router,elementUI库,将app.vue文件分为四个部分,顶部为网页的logo,网站名称等,导航栏部分的a标签改为router-link。中间主体部分为router-view。底部区域为网关部认证,网页详情。写Login,register,index组件,打算将index作为父组件添加二级路由,让Login,register在父组件中直接切换。其中登录后的token和cookie还需了解一下机制,登录后的个人中心还得看看。关于游客登录,在APP.vue中的导航栏不删除,路由直接到/Login。然后点导航栏的东西可以操作,个人中心评论点赞这些就需要验证token太进行,直接跳转到登录组件。
2.关于主页的设计,应该着重于网站的介绍,侧边栏和主体内容构成,侧边栏有网站介绍,贫困地区介绍,关于我们。
##关于新闻中心的设计
上面轮播图播放热点新闻,下面关键字,还有新闻列表,新闻列表点击通过id跳转到相应的新闻详情组件,其中新闻详情具有评论功能转发功能。
##关于助贫购物的设计
进去页面为商品列表,点击商品列表到商品详情页面,具有评论功能收藏功能添加购物车功能和购买功能。
##个人中心的设计
组件页面为路由侧边栏右边子组件进行局部切换,有个人信息,发表的文章,收藏的物品,购物车,我的评论,设置,退出登录等路由链接。
##将评论功能模块分离为子组件
由于多个组件需要用到评论功能,将评论功能制作为子组件,用富文本编辑器代替textarea标签,有点赞功能。