9 | {{ comment.username }}
10 | {{ comment.createTime | date }}
11 |
12 | {{ comment.content }}
13 |
├── .browserslistrc ├── .env ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── api │ ├── auth │ │ └── auth.js │ ├── billboard.js │ ├── comment.js │ ├── follow.js │ ├── post.js │ ├── promote.js │ ├── search.js │ ├── tag.js │ ├── tip.js │ └── user.js ├── assets │ ├── app.css │ ├── image │ │ └── doubao.png │ ├── logo.png │ └── plugins │ │ └── font-awesome-4.7.0 │ │ ├── css │ │ ├── font-awesome.css │ │ └── font-awesome.min.css │ │ └── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 ├── components │ ├── Backtop │ │ └── BackTop.vue │ ├── Comment │ │ ├── Comments.vue │ │ ├── CommentsForm.vue │ │ └── CommentsItem.vue │ ├── Layout │ │ ├── Footer.vue │ │ └── Header.vue │ └── Pagination │ │ └── index.vue ├── main.js ├── permission.js ├── router │ └── index.js ├── store │ ├── getters.js │ ├── index.js │ └── modules │ │ └── user.js ├── user.js ├── utils │ ├── auth.js │ ├── get-page-title.js │ ├── request.js │ └── scroll-to.js └── views │ ├── Home.vue │ ├── Search.vue │ ├── auth │ ├── Login.vue │ └── Register.vue │ ├── card │ ├── CardBar.vue │ ├── LoginWelcome.vue │ ├── Promotion.vue │ └── Tip.vue │ ├── error │ └── 404.vue │ ├── post │ ├── Author.vue │ ├── Create.vue │ ├── Detail.vue │ ├── Edit.vue │ ├── Index.vue │ └── Recommend.vue │ ├── tag │ └── Tag.vue │ └── user │ ├── Profile.vue │ └── Setting.vue └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | VUE_APP_SERVER_URL = 'http://127.0.0.1:8000' -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### 豆宝社区项目实战视频教程简介 2 | 本项目实战视频教程全部免费,配套代码完全开源。手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目。本项目难度适中,为便于大家学习,每一集视频教程对应在Github上的每一次提交。 3 | 4 | ### 致谢 5 | 本项目大量借鉴了[极光社区项目](https://github.com/haoyu21/aurora),在此感谢原作者的无私开源。本项目在其基础上做了一些增删,删除了一些未完成的模块(活动,旅游),新增了评论功能,简化了后端认证与授权功能。最主要的工作是将原项目从零开始开始搭建,各个功能的实现分解成几十步来完成,便于大家更好的学习。 6 | ### 在线体验 7 | 8 | http://kamiba.gitee.io/doubao_deploy_frontend/ 9 | 10 | ### 代码开源地址 11 | [前端](https://github.com/songboriceman/doubao_community_frontend) 12 | [后端](https://github.com/songboriceman/doubao_community_backend) 13 | 14 | ### 视频教程地址 15 | [视频教程](https://www.bilibili.com/video/BV1Wz4y1U7vC) 16 | 17 | ### 项目主要业务及实现的功能 18 | 本项目类似一个简版的掘金这样的技术社区,实现了多个用户注册,登录,发帖,回帖,评论,关注,用户中心等功能。 19 | 20 | ### 前端技术栈 21 | Vue 22 | 23 | Vuex 24 | 25 | Vue Router 26 | 27 | Axios 28 | 29 | Bulma 30 | 31 | Buefy 32 | 33 | Element 34 | 35 | Vditor 36 | 37 | DarkReader 38 | 39 | ### 后端技术栈 40 | Spring Boot 41 | 42 | Mysql 43 | 44 | Mybatis 45 | 46 | MyBatis-Plus 47 | 48 | Spring Security 49 | 50 | JWT 51 | 52 | Lombok 53 | 54 | ### 项目实战大纲: 55 | 01.豆宝社区项目介绍 56 | 57 | 02.豆宝社区项目所需的基础知识 58 | 59 | 03.前端项目搭建 60 | 61 | 04.前端公告板功能实现 62 | 63 | 05.初始化springboot后端项目 64 | 65 | 06.初始化后端数据库,springboot配置mybatis连接 66 | 67 | 07.后端项目目录结构初始化 68 | 69 | 08.后端公告板接口功能实现01 70 | 71 | 09.后端公告板接口功能实现02 72 | 73 | 10.前端端公告板接口功能实现 74 | 75 | 11.实现跨域,前后端接口联调 76 | 77 | 12.每日一句功能前端界面实现01 78 | 79 | 13.每日一句功能前端界面实现02 80 | 81 | 14.每日一句功能前端接口实现 82 | 83 | 15.每日一句功能后端接口实现 84 | 85 | 16.(非常重要)善用github提交记录进行项目学习 86 | 87 | 17.推广链接功能 前后端实现 88 | 89 | 18.用户注册前端实现 90 | 91 | 19.用户注册后端实现 92 | 93 | 20.jwt以及web通信流程 94 | 95 | 21.用户登录后端实现 96 | 97 | 22.vuex简介 98 | 99 | 23.js-cookie介绍 100 | 101 | 24.用户登录前端实现 102 | 103 | 25.前端侧边栏,马上入驻,社区登入功能 104 | 105 | 26.前端在axios请求拦截器中在请求头中加入jwt 106 | 107 | 27.后端设置请求拦截器检查用户请求头中是否包含jwt01 108 | 109 | 28.后端设置请求拦截器检查用户请求头中是否包含jwt02 110 | 111 | 29.前端header实现01 112 | 113 | 30.前端header实现02 114 | 115 | 31.退出登录 116 | 117 | 32.前端页脚功能实现 118 | 119 | 33.帖子列表功能前端 120 | 121 | 34.帖子列表功能后端 122 | 123 | 35.帖子分页功能实现 124 | 125 | 36.前端实现发表帖子功能 126 | 127 | 37.后端实现发表帖子功能 128 | 129 | 38.前端实现帖子详情功能 130 | 131 | 39.后端实现帖子详情功能 132 | 133 | 40.帖子详情右侧边栏帖子作者详情功能实现(前端) 134 | 135 | 41.帖子详情右侧边栏帖子作者详情用户关注功能实现(后端) 136 | 137 | 42.随便看看模块前端实现 138 | 139 | 43.随便看看模块后端实现 140 | 141 | 44.评论列表功能前端实现 142 | 143 | 45.评论列表功能后端实现 144 | 145 | 46.添加评论功能前端实现 146 | 147 | 47.添加评论功能后端实现 148 | 149 | 48.帖子更新与删除功能前后端实现 150 | 151 | 49.显示某个标签的全部文章功能前端 152 | 153 | 50.显示某个标签的全部文章功能后端实现 154 | 155 | 51.帖子搜索功能前端实现 156 | 157 | 52.帖子搜索功能前端实现 158 | 159 | 53.用户中心功能前端实现 160 | 161 | 54.用户中心功能前端实现 162 | 163 | 55.用户个人信息修改 164 | 165 | 56.前端发帖,留言等页面登录权限验证 166 | 167 | 57.后端发帖,留言等需要登录页面的权限验证 168 | 169 | 58.项目总结及遗留问题说明 170 | 171 | 59.(重要的说明)如何利用github上开源的项目代码提交记录更有效的学习本项目 172 | 173 | ### 豆约翰团队: 174 | 一群热爱分享技术,拥有多年开发经验及培训经验的老司机组成 175 | 176 | ### 擅长的领域: 177 | java,python,前端,c++,.net 178 | 179 | ### 项目部分截图 180 | #### PC 181 | #### 首页 182 |  183 | #### 发表文章 184 |  185 | 186 | #### 文章详情及评论页面 187 |  188 | 189 | #### 个人中心 190 |  191 | #### 用户设置 192 |  193 | #### 移动端 194 | #### 首页 195 |  196 | #### 用户中心 197 |  198 | #### 详情页 199 |  200 | 201 | ### 技术讨论群 202 | 203 | 为方便同学们讨论项目中的技术,建了一个QQ群: 204 | 205 |  206 | 207 | 208 | 209 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "doubao_community_frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "axios": "^0.21.1", 11 | "buefy": "^0.9.4", 12 | "core-js": "^3.6.5", 13 | "darkreader": "^4.9.27", 14 | "date-fns": "^2.17.0", 15 | "dayjs": "^1.10.4", 16 | "element-ui": "^2.15.0", 17 | "js-cookie": "^2.2.1", 18 | "nprogress": "^0.2.0", 19 | "vditor": "^3.8.1", 20 | "vue": "^2.6.11", 21 | "vue-router": "^3.2.0", 22 | "vuex": "^3.4.0" 23 | }, 24 | "devDependencies": { 25 | "@vue/cli-plugin-babel": "~4.5.0", 26 | "@vue/cli-plugin-router": "~4.5.0", 27 | "@vue/cli-plugin-vuex": "~4.5.0", 28 | "@vue/cli-service": "~4.5.0", 29 | "vue-template-compiler": "^2.6.11" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/songboriceman/doubao_community_frontend/d36b5d06a013cefb0be56c48eb624115a2a7e612/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |
9 | {{ comment.username }}
10 | {{ comment.createTime | date }}
11 |
12 | {{ comment.content }}
13 |
43 |
{{ list.length }}
6 | 条关于 {{ query.keyword }}
的记录
7 |
18 |
8 | {{ item.title }} 9 |
10 |UH OH! 页面丢失
6 |7 | 您所寻找的页面不存在, {{ times }} 秒后,将返回首页! 8 |
9 |{{ topic.title }}
15 |
16 |
62 |
8 |
{{ topicUser.alias || topicUser.username }}
9 |积分:{{ topicUser.score }}
入驻:{{ dayjs(topicUser.createTime).format("YYYY/MM/DD HH:MM:ss") }}
13 |简介:{{ topicUser.bio }}
14 |
4 |
Comments
5 |