网站建设柒金手指花总12,php网站开发缓存的运用,做图片网站会被,wordpress安装提示500文章目录 博客系统项目介绍前言项目演示前台演示后台演示 组织结构后端组织结构前端组织结构 技术选型前端技术后端技术架构图系统架构图业务架构图 模块介绍前端模块后端模块 环境搭建开发工具开发环境项目运行 未完待续结语 博客系统项目介绍
前言 本项目已开源在Gitee 后端… 文章目录 博客系统项目介绍前言项目演示前台演示后台演示 组织结构后端组织结构前端组织结构 技术选型前端技术后端技术架构图系统架构图业务架构图 模块介绍前端模块后端模块 环境搭建开发工具开发环境项目运行 未完待续结语 博客系统项目介绍
前言 本项目已开源在Gitee 后端代码仓库blog: 博客系统后端代码仓库 (gitee.com)前端代码仓库 前台blog-fe: 博客系统前端代码仓库前台展示 (gitee.com)后台blog-be: 博客系统前端代码仓库后台管理 (gitee.com) 说明本项目属于二次开发我之前是跟着三更老师开发的后面也就是现在我自己花了一周的时间复盘重新再次开发一遍。所以在此致谢三更老师三更老师并不是培训机构的而是利用工作业余时间出的教程这里也为三更老师做一波宣传 三更老师B站地址https://space.bilibili.com/663528522?spm_id_from333.337.0.0 这个项目也是继瑞吉外卖后的一个比较完整的项目了从项目的 开发 - 部署 - 上线这段时间前前后后花了大约两周时间学到了很多东西比如SpringSecurityJWT实现登录流程项目开发的流程、如何进行模块划分项目如何上线这里老师没教纯自学数据库表如何设计才更加优雅三跟老师交给我的更多的并不是如何使用某某技术而是为什么要使用这个技术做到了真正的“授人以鱼不如授人以渔”这个技术好在哪些地方。 项目演示
前台演示 在线体验暂无部署失败┭┮﹏┭┮。。。由于我没有配置好域名怕暴露服务器IP所以这里就不透露了 项目前台截图 首页 登录页面 注册页面 文章简介 文章详情 友链展示 评论 赞赏 个人中心 安全中心
后台演示 在线体验暂无 项目后台截图 首页 登录 写博文 系统管理 用户管理 角色管理 菜单管理 内容管理 文章管理 分类管理 友链管理 标签管理
组织结构
后端组织结构
blog
├─.idea
│ ├─dataSources
│ │ └─f902d677-27d9-4dcf-bcf6-2750320cbe2c
│ │ └─storage_v2
│ │ └─_src_
│ │ └─schema
│ ├─inspectionProfiles
│ ├─mybatisx
│ └─sonarlint
├─blog-be
│ ├─src
│ │ ├─main
│ │ │ ├─java
│ │ │ │ └─com
│ │ │ │ └─hhxy
│ │ │ │ ├─config
│ │ │ │ └─controller
│ │ │ └─resources
│ │ └─test
│ │ └─java
│ │ └─com
│ │ └─hhxy
│ │ ├─mapper
│ │ └─service
│ └─target
│ ├─classes
│ │ └─com
│ │ └─hhxy
│ │ ├─config
│ │ └─controller
│ ├─generated-sources
│ │ └─annotations
│ ├─generated-test-sources
│ │ └─test-annotations
│ ├─maven-archiver
│ ├─maven-status
│ │ └─maven-compiler-plugin
│ │ ├─compile
│ │ │ └─default-compile
│ │ └─testCompile
│ │ └─default-testCompile
│ └─test-classes
│ └─com
│ └─hhxy
│ ├─mapper
│ └─service
├─blog-fe
│ ├─src
│ │ ├─main
│ │ │ ├─java
│ │ │ │ └─com
│ │ │ │ └─hhxy
│ │ │ │ ├─config
│ │ │ │ ├─controller
│ │ │ │ ├─job
│ │ │ │ └─runner
│ │ │ └─resources
│ │ └─test
│ │ └─java
│ │ └─com
│ │ └─hhxy
│ │ └─utils
│ └─target
│ ├─classes
│ │ └─com
│ │ └─hhxy
│ │ ├─config
│ │ ├─controller
│ │ ├─job
│ │ └─runner
│ ├─generated-sources
│ │ └─annotations
│ ├─generated-test-sources
│ │ └─test-annotations
│ ├─maven-archiver
│ ├─maven-status
│ │ └─maven-compiler-plugin
│ │ ├─compile
│ │ │ └─default-compile
│ │ └─testCompile
│ │ └─default-testCompile
│ └─test-classes
│ └─com
│ └─hhxy
│ └─utils
└─blog-framework├─src│ ├─main│ │ ├─java│ │ │ └─com│ │ │ └─hhxy│ │ │ ├─annotation│ │ │ ├─aspect│ │ │ ├─config│ │ │ ├─constants│ │ │ ├─controller│ │ │ ├─filter│ │ │ ├─handler│ │ │ │ ├─exception│ │ │ │ ├─mybatisplus│ │ │ │ └─security│ │ │ ├─mapper│ │ │ ├─model│ │ │ │ ├─dto│ │ │ │ ├─entity│ │ │ │ └─vo│ │ │ ├─service│ │ │ │ └─impl│ │ │ └─utils│ │ │ ├─convert│ │ │ ├─redis│ │ │ └─response│ │ └─resources│ │ ├─mapper│ │ ├─sql│ │ └─static│ └─test│ └─java└─target├─classes│ ├─com│ │ └─hhxy│ │ ├─annotation│ │ ├─aspect│ │ ├─config│ │ ├─constants│ │ ├─controller│ │ ├─filter│ │ ├─handler│ │ │ ├─exception│ │ │ ├─mybatisplus│ │ │ └─security│ │ ├─mapper│ │ ├─model│ │ │ ├─dto│ │ │ ├─entity│ │ │ └─vo│ │ ├─service│ │ │ └─impl│ │ └─utils│ │ ├─convert│ │ ├─redis│ │ └─response│ ├─mapper│ ├─META-INF│ └─sql├─generated-sources│ └─annotations├─maven-archiver└─maven-status└─maven-compiler-plugin├─compile│ └─default-compile└─testCompile└─default-testCompile前端组织结构 前台项目 blog-admin:
├─api
├─assets
│ └─css
├─components
├─pages
├─router
├─store
└─utils后台项目 blog-vue:
├─public
├─src
│ ├─api
│ │ ├─content
│ │ └─system
│ ├─assets
│ │ ├─404_images
│ │ ├─icons
│ │ │ └─svg
│ │ └─images
│ ├─components
│ │ ├─Breadcrumb
│ │ ├─Hamburger
│ │ ├─ParentView
│ │ └─SvgIcon
│ ├─directive
│ │ └─permission
│ ├─layout
│ │ ├─components
│ │ │ ├─InnerLink
│ │ │ └─Sidebar
│ │ └─mixin
│ ├─plugins
│ ├─router
│ ├─store
│ │ └─modules
│ ├─styles
│ ├─utils
│ └─views
│ ├─content
│ │ ├─article
│ │ │ └─write
│ │ ├─category
│ │ ├─link
│ │ └─tag
│ ├─dashboard
│ ├─login
│ ├─nested
│ │ └─menu1
│ │ └─menu1-2
│ └─system
│ ├─menu
│ ├─role
│ └─user
├─static
└─tests└─unit├─components└─utils技术选型
前端技术
技术说明文档HTML网页结构https://developer.mozilla.org/zh-CN/docs/Web/HTMLCSS网页样式https://developer.mozilla.org/zh-CN/docs/Learn/CSSVue2.5.2前端框架https://vuejs.org/NodeJS16.15.0前端依赖的环境https://nodejs.org/enVue-router3.0.1路由框架https://router.vuejs.org/Vuex3.0.1全局状态管理框架https://vuex.vuejs.org/Element1.4.12前端UI框架https://element.eleme.ioAxios0.17.0前端HTTP框架https://github.com/axios/axiosJs-cookie2.2.0cookie管理工具https://github.com/js-cookie/js-cookie
后端技术
技术说明文档JDK1.8Java8https://www.java.com/zh-CN/SpringBoot2.5.0Web应用开发框架https://spring.io/projects/spring-bootSpringSecurity认证和授权框架https://spring.io/projects/spring-securityMyBatisPlus3.4.3ORM框架http://www.mybatis.org/mybatis-3/zh/index.htmlMyBatisGenerator数据层代码生成器http://www.mybatis.org/generator/index.htmlRedis6.2.6缓存数据https://redis.io/MySQL8.0.27持久化存储数据https://www.mysql.comDruid1.2.15数据库连接池https://github.com/alibaba/druidOSS对象存储https://github.com/aliyun/aliyun-oss-java-sdkLombok1.8.24Java语言增强库https://github.com/rzwitserloot/lombokPageHelperMyBatis物理分页插件http://git.oschina.net/free/Mybatis_PageHelperSwagger-UI2.0.2API文档生成工具https://github.com/swagger-api/swagger-uiKnife4j3.0.3API文档生成工具https://doc.xiaominfo.com/Validation-api参数校验https://beanvalidation.org/FastJson1.2.23序列化反序列化https://github.com/alibaba/fastjson/Jwt0.9.0JWT登录支持http://jboot.com.cn/docs/jwt.htmlEasyExcel3.0.5导入导出Excelhttps://easyexcel.opensource.alibaba.com
架构图
系统架构图 业务架构图 模块介绍 项目整体采用三层架构的形式进行开发在此基础上还进行了模块的划分让项目整体结构显得更加清晰明了从而大大提高代码的复用性系统的可维护性 前端模块 前台模块 后台模块
后端模块 公共模块 公共模块存哪些东西 主要放置公共的代码比如通用的Controller、通用的方法类、以及数据模型对象Model、Dto、Entity、VO同时存放将前台模块和后台模块的Service、Mapper层的代码。并且还设置有一个公共的配置文件。 为什么要单独配置一个公共模块 提高代码的复用性提高代码的可维护性 …… 前台模块 前台模块的作用主要用于处理项目博客前台的请求DDL操作较少、DQL操作较多 后台模块 后台模块的作用主要用于处理项目博客后台的请求DDL和DQL操作都较多
环境搭建 手把手教你如何搭建项目环境并成功运行起来 开发工具
工具说明InntelliJ IDEA 2022.2.1Java编译器VSCode 2022前端编译器Navicat Premium 12可视化操作数据库Maven 3.6.1用于构建和管理Java项目Git版本控制Postman接口测试VMware用于部署RedisFinalShellLinux终端远程来连接LinuxRESP可视化操作RedisProcessOn流程图绘制工具Snipaste屏幕截图工具TyporaMarkdown编辑器
开发环境 前端使用VueCLI3Vue2 dependencies: {axios: ^0.17.0,element-ui: ^1.4.12,js-cookie: 2.2.0,mavon-editor: ^2.10.4,vue: ^2.5.2,vue-router: ^3.0.1,vuex: ^3.0.1},devDependencies: {vue/cli-plugin-babel: 4.4.4,vue/cli-plugin-eslint: 4.4.4,vue/cli-plugin-unit-jest: 4.4.4,vue/cli-service: 4.4.4,vue/test-utils: 1.0.0-beta.29,autoprefixer: ^7.1.2,babel-core: ^6.22.1,babel-helper-vue-jsx-merge-props: ^2.0.3,babel-loader: ^7.1.1,babel-plugin-syntax-jsx: ^6.18.0,babel-plugin-transform-runtime: ^6.22.0,babel-plugin-transform-vue-jsx: ^3.5.0,babel-preset-env: ^1.3.2,babel-preset-stage-2: ^6.22.0,chalk: ^2.0.1,copy-webpack-plugin: ^4.0.1,css-loader: ^0.28.0,extract-text-webpack-plugin: ^3.0.0,file-loader: ^1.1.4,friendly-errors-webpack-plugin: ^1.6.1,less: ^2.7.2,less-loader: ^4.0.5,html-webpack-plugin: ^2.30.1,node-notifier: ^5.1.2,optimize-css-assets-webpack-plugin: ^3.2.0,ora: ^1.2.0,portfinder: ^1.0.13,postcss-import: ^11.0.0,postcss-loader: ^2.0.8,postcss-url: ^7.2.1,rimraf: ^2.6.0,semver: ^5.3.0,shelljs: ^0.7.6,uglifyjs-webpack-plugin: ^1.1.1,url-loader: ^0.5.8,vue-loader: ^13.3.0,vue-style-loader: ^3.0.1,vue-template-compiler: ^2.5.2,webpack: ^3.6.0,webpack-bundle-analyzer: ^2.9.0,webpack-dev-server: ^2.9.1,webpack-merge: ^4.1.0}后端SpringBoot2.5.0JDK1.8 ?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersiongroupIdcom.hhxy/groupIdartifactIdblog/artifactIdpackagingpom/packagingversion1.0-SNAPSHOT/versionmodulesmoduleblog-framework/modulemoduleblog-be/modulemoduleblog-fe/module/modulespropertiesmaven.compiler.source8/maven.compiler.sourcemaven.compiler.target8/maven.compiler.targetproject.build.sourceEncodingUTF-8/project.build.sourceEncodingjava.version1.8/java.versionmaven.plugin.version3.1/maven.plugin.versionspringboot.version2.5.0/springboot.versionlombok-version1.18.24/lombok-versiondruid-version1.2.15/druid-versionfastjson.version1.2.33/fastjson.versionjwt.version0.9.0/jwt.versionmybatisplus.version3.4.3/mybatisplus.versionaliyun.sdk.oss3.10.2/aliyun.sdk.ossqiniuyun.sdk.version[7.7.0, 7.7.99]/qiniuyun.sdk.versioneasyexcel.version3.0.5/easyexcel.versionknife4j-version3.0.3/knife4j-version/propertiesdependencyManagementdependencies!-- SpringBoot的依赖配置--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-dependencies/artifactIdversion${springboot.version}/versiontypepom/typescopeimport/scope/dependency!--Lombok--dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion${lombok-version}/version/dependency!--Druid--dependencygroupIdcom.alibaba/groupIdartifactIddruid-spring-boot-starter/artifactIdversion${druid-version}/version/dependency!--Fastjson依赖--dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion${fastjson.version}/version/dependency!--Jwt依赖--dependencygroupIdio.jsonwebtoken/groupIdartifactIdjjwt/artifactIdversion${jwt.version}/version/dependency!--MybatisPlus依赖--dependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactIdversion${mybatisplus.version}/version/dependency!--阿里云OSS--dependencygroupIdcom.aliyun.oss/groupIdartifactIdaliyun-sdk-oss/artifactIdversion${aliyun.sdk.oss}/version/dependency!--七牛云sdk--dependencygroupIdcom.qiniu/groupIdartifactIdqiniu-java-sdk/artifactIdversion${qiniuyun.sdk.version}/version/dependency!--EasyExcel--dependencygroupIdcom.alibaba/groupIdartifactIdeasyexcel/artifactIdversion${easyexcel.version}/version/dependency!--Knife4j--dependencygroupIdcom.github.xiaoymin/groupIdartifactIdknife4j-spring-boot-starter/artifactIdversion${knife4j-version}/version/dependency/dependencies/dependencyManagementbuildpluginsplugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-compiler-plugin/artifactIdversion${maven.plugin.version}/versionconfigurationsource${java.version}/sourcetarget${java.version}/targetencoding${project.build.sourceEncoding}/encoding/configuration/plugin/plugins/build/project项目运行 温馨提示 后端的blog-be模块对应前端的blog-admin模块后端的blog-fe模块对应前端的blog-vue模块需要先启动后端模块再启动前端模块才能够正常访问页面后端模块运行之前一定要将项目配置文件application-common.yml位于blog-framework下的resource中中的MySQL和Redis的账号、密码、主机改成你自己的SQL文件也位于改目录下直接使用Navicate运行改目录下的blog.sql即可后端数据库中的密码已通过PasswordEncoding采用MD5进行了加密无法直接查看。我设置的初识账号密码是 admin 123qwe如果想要修改密码直接可以通过测试类EncryptionPasswordTest双击Shift搜索该测试类进行加密然后将加密后的密码复制到数据库即可修改初识密码由于本项目没有使用本地上传功能我使用的七牛云图床所以如果想要上传图片需要修改一下配置在application-common.yml将upload设置为falsetrue-使用七牛云图床false-使用本地存储 前端 Step1进入项目根目录在文件路径中输入cmd Step2执行npm i或者是 npm install都一样下载项目所需依赖前提是先要有node环境这里不过多介绍node的安装了不懂的可以自行百度 Step3执行npm run dev启动项目 注意要想成功访问项目需要先启动后端 后端 Step1使用IDEA打开项目刷新Maven等待依赖加载 PS依赖加载慢可以配置Maven镜像这里也不多做解释了不会的可以自行百度 Step2开启虚拟机然后启动Redis关闭防火墙 PS关于Redis的安装部署这里也不多做解释了不会的可以参考这篇文章 Redis基础篇 Step3右击启动类然后运行后者在服务中添加SpringBoot程序也可以启动
未完待续
我还想要完善的一些功能 点赞功能包括文章、评论点赞功能Redis实现 文章收藏功能 用户关注功能Redis实现 共同关注功能并查集实现 对页面进行美化加入一些有意思的动画效果比如主题切换、看板娘 对于登录功能 添加忘记密码和记住我两个功能接入QQ或者微信的扫码登录接口实现扫码登录 对于注册功能添加验证码校验提高系统的安全性防止恶意注册 对于后台管理首页展示区缺乏动态数据查询功能
……
结语 本项目历时一周开发完成。本次开发采用分模块开发由我设计接口并将接口分发给组员通过Gitee版本控制工具最终同理合作完成本项目。其中印象最深的是对通用代码的抽取比如查询字段是否存在删除已有关联关系SpringSecurityJWT完成登录功能时拦截器的编写这两块卡了一段时间最终在组员的商议下共同合力解决。 本项目在我看来难点应该是对于权限的控制SpringSecurity的使用很多时候稍不注意就控制失败抛出各种异常其次就是前端前端各种组件的设计也显得有点力不从心但好在在组员的通力合作下最终完成了这个博客系统…… 动力满满继续加油冲冲冲丫( •̀ ω •́ )y
