Merge remote-tracking branch 'origin/master'

This commit is contained in:
purplenigma 2021-04-26 22:34:22 +08:00
commit 60dae47c26
1 changed files with 31 additions and 5 deletions

View File

@ -127,7 +127,7 @@ this.$router.go(n)
```
关于VueRouter部分内容参考自[懂懂kkw的博客](https://blog.csdn.net/jiandan1127/article/details/86170336),写的很清晰,分享给大家参考学习
**在初始项目中,路由存放在/router/index.js下可参照学习**
#### vuex状态管理
@ -187,7 +187,7 @@ this.$store.dispatch('increment') //在这里调用的是actions中的方法
*vuex内容部分对于新手不太好理解在本此实践中大家只需要学会如何使用即可等熟悉了一些再去了解原理*
**在初始项目中store文件夹下存放的就是相关的内容**
#### 熟悉vuetify、material design组件库并使用
@ -227,17 +227,31 @@ export default new Vuetify(opts)
vuetify中集成了material design图标库因此在使用的时候可以使用`<v-icon> 图标名 </v-icon>`就能看到图标了,图标库的链接[点这里查看](https://pictogrammers.github.io/@mdi/font/5.4.55/)至于图标对应的属性在vuetify中可查询到
------
以上知识点是在这次组队学习中可能涉及到或即将涉及到的,先给大家简略介绍一下,如果有遗漏的地方欢迎补充,下面带大家进入实操部分。说明:上面内容中讲解的代码均以组队学习初始代码为起点,提及的文件名也是项目中的,方便大家对照学习。
------
#### 基于交互图实现导航栏功能
前端部分实操的第一步:完成首页导航栏的基本跳转(**VueRouter**)与显示(**Vuetify的appBar或者ToolBars、List等组件**)
##### 1. 目标实现
<img src="https://tva1.sinaimg.cn/large/008i3skNly1gpxavql03fj327y06o0ue.jpg"/>
这是项目的初始运行效果
<img src="https://tva1.sinaimg.cn/large/008i3skNly1gpsigh2jbjj31rd079751.jpg" height="100px;" />
上面截图是实现的简易版本的导航栏,给大家做个参考,至于到底做成什么样式,大家可以自由发挥。需要实现的部分是
是实现的简易版本的导航栏,给大家做个参考,大家基于初始代码更改,至于到底做成什么样式,大家可以自由发挥。不过需要实现基本的部分:
**导航栏需要有的栏目:首页,文章,领域,交流,榜单,是否登录注册状态显示,未登录状态下,点击图标,下拉列表项为登录;登录状态下,点击图标,出现下拉列表,项目为个人主页,人员管理,设置,注销登录**
1. 首页,文章,领域,交流,榜单需要跳转到相应的路由,显示不同的内容,在本次组队学习中,侧重于实现领域模块和人员管理模块。
1. 首页,文章,领域,交流,榜单需要跳转到相应的页面(**需要用到路由相关知识**,显示不同的内容,在本次组队学习中,侧重于实现领域模块和人员管理模块。
2. 需要前后端配合,实现登录注册功能
3. 领域模块:在页面中嵌入md编辑器编辑器中输入内容,点击发布,在领域页面可以看到发布的内容
3. 领域模块:在编辑器中输入内容,点击发布,在领域页面可以看到发布的内容(**这里涉及到数据库的增删改查**)
4. 人员管理模块:人员角色分为管理员,用户,和游客,对于不同的身份,界面将呈现不同的内容,在组队学习中,具体体现在领域模块的管理,对于游客,只能够看过去发布的帖子;对于用户,可以发布帖子;对于管理员,可以管理用户发布的帖子,对其进行修改,删除等等操作。
可能涉及到的知识点:
@ -245,3 +259,15 @@ vuetify中集成了material design图标库因此在使用的时候可以使
- 前端路由跳转vuetify的使用api请求vuex状态管理
- 后端:数据库的增删改查
**上面提到的是整个前端部分需要实现的模块,帮助大家更好的理解导航栏中的项目,大家先了解一下就好,后面会专门对这几个模块进行学习开发**
导航栏开发步骤(仅供参考)
1. 运行初始项目
2. 了解代码结构,了解呈现的页面分别对应哪个文件,用了哪些组件
3. 找到导航栏所对应的文件,先把界面相关的部分实现,再与后端一起开发需要协作的部分
------
**PS对于小白上面内容可能不太好理解和应用需要大家一点点慢慢开始和大家一起讨论学习练习就能改善。**