网站地图建设,设计公司企业官网,如何制作网页导航栏,做商城网站系统文章目录 一、项目介绍二、需求设计三、数据库设计四、项目构建项目技术选型:构建项目说明:项目架构mavenMySQLRedis 五、项目开发#xff1a;项目开发思路#xff1a;项目开发过程#xff1a;1. 导入文件包/新建项目2. 新建子模块#xff1a;common模块pojo模块server模块… 文章目录 一、项目介绍二、需求设计三、数据库设计四、项目构建项目技术选型:构建项目说明:项目架构mavenMySQLRedis 五、项目开发项目开发思路项目开发过程1. 导入文件包/新建项目2. 新建子模块common模块pojo模块server模块 3. 明确需求开始开发4. server模块配置让项目跑起来5. 项目开发开始6. SpringBoot操作数据库配置7. 开发功能8. 增删改查功能开发9. 登录注册功能开发10. AOP权限校验11.前端相关vue.config.jsmain.js页面向后端发送请求 六、总结 一、项目介绍
这是个简单的项目大概功能就是一个简单的记事本吧发布文章查看文章登录注册。 项目仓库链接仓库 接下来的文章最好是参考仓库里的代码来读不要跟着文章敲。文章里面不会手把手带你敲的。
二、需求设计
就是登录注册文章增删改查吧。
三、数据库设计
很简单得设计了一下就三张表。一张用户表一张分类表一张文章表。 用户表 id,username,password,name,email,role 分类表 id,name 文章表 id,title,content,category_id,user_id
四、项目构建
项目技术选型:
我们这个项目太简单了就用用SpringBoot来构建项目。
构建项目说明:
项目架构 我们的项目主要就是3个模块 common公用模块公用的东西都在里面。(common模块的东西是照抄苍穹外卖的) pojo数据模块很多数据相关的东西就在这里面比如说数据实体类什么的。 server服务模块这个模块就是负责提供各种服务了。
maven
maven是一款为Java项目提供构建和依赖管理支持的工具。 我们的项目会有很多依赖这些依赖就得依靠maven了。 而依赖的东西添加的话就可以在pom.xml文件里面加。
MySQL
关系型数据库。所谓的数据持久化就是将数据存起来一般就是将数据存在本地。我们前面的数据库设计就是针对的MySQL数据库的设计。
Redis
非关系型数据库。KV存储结构。
五、项目开发
项目开发思路
一个字抄。 要自己写项目首先你的要去B站找个项目先抄着学里面的思路跟着敲里面的代码慢慢理解里面代码的功能不然你想在0基础的情况下从0开始自己写个做梦 我前面的那个SpringBoot开发记录就是个例子。我就打算自己写但是自己不是那么了解流程不知道自己该做什么导致我频频出错项目开发进度贼迟缓最后这个项目就逐渐搁浅了。是个败笔 这个项目的开发是我在完成80%苍穹外卖后开始进行的。整个项目的基础文件也是拿的苍穹外卖的。
项目开发过程
1. 导入文件包/新建项目
其实这一步很简单的我们只需要新建一个目录文件夹然后用IDEA打开这个目录再在里面复制粘贴我们的总pom.xml文件就行了。当然你也可以新建一个项目再打开项目中的pom.xml文件将我们的pom.xml文件的内容复制粘贴上 其实我们的这些pom.xml文件也都是苍穹外卖的你要是照着敲过一次项目那么你就会对这个流程有一个深刻的了解。 总pom.xml:
?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/modelVersionparentartifactIdspring-boot-starter-parent/artifactIdgroupIdorg.springframework.boot/groupIdversion2.7.3/version/parentartifactIdCodeHome/artifactIdgroupIdcom.codehome/groupIdversion1.0-SNAPSHOT/versionpackagingpom/packagingpropertiesmybatis.spring2.2.0/mybatis.springdruid1.2.1/druidpagehelper1.3.0/pagehelperlombok1.18.20/lombokfastjson1.2.76/fastjsoncommons.lang2.6/commons.langaliyun.sdk.oss3.10.2/aliyun.sdk.ossknife4j3.0.2/knife4jaspectj1.9.4/aspectjjjwt0.9.1/jjwtjaxb-api2.3.1/jaxb-apipoi3.16/poispring-boot-starter-mail2.7.3/spring-boot-starter-mail/propertiesdependencyManagementdependencies!-- mybatis依赖 --dependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion${mybatis.spring}/version/dependency!-- lombok依赖 --dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdversion${lombok}/version/dependency!-- fastjson依赖 --dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion${fastjson}/version/dependency!-- commons-lang依赖 --dependencygroupIdcommons-lang/groupIdartifactIdcommons-lang/artifactIdversion${commons.lang}/version/dependency!-- druid依赖 --dependencygroupIdcom.alibaba/groupIdartifactIddruid-spring-boot-starter/artifactIdversion${druid}/version/dependency!-- pagehelper依赖 --dependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper-spring-boot-starter/artifactIdversion${pagehelper}/version/dependency!-- knife4j依赖 --dependencygroupIdcom.github.xiaoymin/groupIdartifactIdknife4j-spring-boot-starter/artifactIdversion${knife4j}/version/dependency!-- aspectj依赖 --dependencygroupIdorg.aspectj/groupIdartifactIdaspectjrt/artifactIdversion${aspectj}/version/dependencydependencygroupIdorg.aspectj/groupIdartifactIdaspectjweaver/artifactIdversion${aspectj}/version/dependencydependencygroupIdio.jsonwebtoken/groupIdartifactIdjjwt/artifactIdversion${jjwt}/version/dependencydependencygroupIdcom.aliyun.oss/groupIdartifactIdaliyun-sdk-oss/artifactIdversion${aliyun.sdk.oss}/version/dependencydependencygroupIdjavax.xml.bind/groupIdartifactIdjaxb-api/artifactIdversion${jaxb-api}/version/dependency!-- poi --dependencygroupIdorg.apache.poi/groupIdartifactIdpoi/artifactIdversion${poi}/version/dependencydependencygroupIdorg.apache.poi/groupIdartifactIdpoi-ooxml/artifactIdversion${poi}/version/dependency!--微信支付--dependencygroupIdcom.github.wechatpay-apiv3/groupIdartifactIdwechatpay-apache-httpclient/artifactIdversion0.4.8/version/dependency!--邮箱服务--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-mail/artifactIdversion${spring-boot-starter-mail}/version/dependency/dependencies/dependencyManagement/project2. 新建子模块 common模块
这个模块的文件我就是照搬苍穹外卖的了。这个一个公共模块里面的东西都还是很通用的。
pojo模块
这个模块的作用就是放项目涉及到的一些实体类。按规范来的话分为dto(查询实体类前端传过来的数据类),entity(实体类对应数据库里的表的实体类),vo(返回实体类返回给前端的数据类)。按照实际情况设置。
server模块
这个就是我们的功能模块了。后端的功能就在这个模块里使用。
3. 明确需求开始开发
按照我们前面的需求设计和数据库来整。 先看数据库 看到数据库是这样的了我们就可以开始写pojo模块的entity部分 entity的类要和表里的字段对应 Category类
Data
Builder
AllArgsConstructor
NoArgsConstructor
public class Category {private Integer id;private String name;
}Paper类
Data
Builder
AllArgsConstructor
NoArgsConstructor
public class Paper {private Integer id;private String title;private String content;private Integer categoryId;private Long userId;
}
Users:
Data
Builder
AllArgsConstructor
NoArgsConstructor
public class Users implements Serializable {private Long id;private String username;private String password;private String name;private String email;private Integer role;
}好了entity实体类就好了。
4. server模块配置让项目跑起来
进行配置
pom.xml文件 老规矩了。
?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/modelVersionparentgroupIdcom.codehome/groupIdartifactIdCodeHome/artifactIdversion1.0-SNAPSHOT/version/parentgroupIdcom.codehome.server/groupIdartifactIdserver/artifactIdpropertiesmaven.compiler.source17/maven.compiler.sourcemaven.compiler.target17/maven.compiler.targetproject.build.sourceEncodingUTF-8/project.build.sourceEncoding/propertiesdependencies!--springboot 启动依赖--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactIdscopecompile/scope/dependency!-- mysql和mybatis相关依赖 --dependencygroupIdmysql/groupIdartifactIdmysql-connector-java/artifactIdscoperuntime/scope/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactId/dependencydependencygroupIdcom.alibaba/groupIdartifactIddruid-spring-boot-starter/artifactId/dependency!--redis相关依赖--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-redis/artifactId/dependencydependencygroupIdredis.clients/groupIdartifactIdjedis/artifactIdoptionaltrue/optional/dependency!--分页查询依赖--dependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper-spring-boot-starter/artifactId/dependency!--lombok相关依赖--dependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/dependency!--swagger相关依赖--dependencygroupIdcom.github.xiaoymin/groupIdartifactIdknife4j-spring-boot-starter/artifactId/dependencydependencygroupIdorg.aspectj/groupIdartifactIdaspectjrt/artifactId/dependencydependencygroupIdorg.aspectj/groupIdartifactIdaspectjweaver/artifactId/dependency!-- poi --dependencygroupIdorg.apache.poi/groupIdartifactIdpoi/artifactId/dependencydependencygroupIdorg.apache.poi/groupIdartifactIdpoi-ooxml/artifactId/dependency!--邮箱服务--dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-mail/artifactId/dependencydependencygroupIdcom.codehome.common/groupIdartifactIdcommon/artifactIdversion1.0-SNAPSHOT/versionscopecompile/scope/dependencydependencygroupIdcom.codehome.pojo/groupIdartifactIdpojo/artifactIdversion1.0-SNAPSHOT/versionscopecompile/scope/dependency/dependenciespackagingjar/packagingbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId!--这里写上main方法所在类的路径--configurationmainClasscom.codehome.server.CodeHomeApplication/mainClass/configurationexecutionsexecutiongoalsgoalrepackage/goal/goals/execution/executions/plugin/plugins/build/projectyml文件配置 yml文件
# 配置项目的端口
server:port: 8083 启动类
SpringBootApplication
Slf4j
ComponentScan(basePackages {com.codehome.server,com.codehome.common,com.codehome.pojo})
public class CodeHomeApplication {public static void main(String[] args) {SpringApplication.run(CodeHomeApplication.class, args);log.info(代码芝士启动);}
}配置类
/*** 配置类注册web层相关组件*/
Configuration
Slf4j
public class WebMvcConfiguration extends WebMvcConfigurationSupport {/*** 通过knife4j生成接口文档* return*/Beanpublic Docket docket() {ApiInfo apiInfo new ApiInfoBuilder().title(代码芝士后端接口文档).version(1.0).description(代码芝士后端接口文档).build();Docket docket new Docket(DocumentationType.SWAGGER_2).apiInfo(apiInfo).select().apis(RequestHandlerSelectors.basePackage(com.codehome.server.controller)).paths(PathSelectors.any()).build();return docket;}/*** 设置静态资源映射* param registry*/protected void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler(/doc.html).addResourceLocations(classpath:/META-INF/resources/);registry.addResourceHandler(/webjars/**).addResourceLocations(classpath:/META-INF/resources/webjars/);}/*** 消息转换器*/protected void extendMessageConverters(ListHttpMessageConverter? converters){log.info(开始扩展消息转换器);MappingJackson2HttpMessageConverter converter new MappingJackson2HttpMessageConverter();converter.setObjectMapper(new JacksonObjectMapper());converters.add(0,converter);}
}
这样基础就实现了。项目应该就可以跑起来了。
5. 项目开发开始
开发server模块。 这里就要讲一讲controller层service层mapper层。 controller层 controller层里放Controller类通俗的来讲Controller类的作用就是接收前端请求数据和返回信息的。 如这样 我们在前端就可以通过向http://localhost:8083/api/paper/add发送带参数的Post请求来实现添加文章功能。
service层 这个层主要负责的就是业务功能的实现了。写接口实现接口。 mapper层 这个层负责操作数据库里的内容。
6. SpringBoot操作数据库配置
Spring操作数据库一般可以通过MyBatisMyBatisPlus来。 这里我们就需要进行一些配置了。 1.在pom.xml文件里配置。前面复制粘贴已经整好了。 2.在yml文件里配置
spring:datasource:druid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/codehomebase?serverTimezoneAsia/ShanghaiuseUnicodetruecharacterEncodingutf-8zeroDateTimeBehaviorconvertToNulluseSSLfalseallowPublicKeyRetrievaltrueusername: root # 这里用你自己的账号密码password: 123456mybatis:#mapper配置文件mapper-locations: classpath:mapper/*.xmltype-aliases-package: com.codehome.pojo.entityconfiguration:#开启驼峰命名map-underscore-to-camel-case: true配置完成后应该怎么操作数据库呢 很简单我们可以整一个Mapper类 像这样就可以操作数据库了。具体内容可以看后面。
7. 开发功能
首先我们再看看我们的后端需求有哪些 一般都是先进行登录注册功能的开发但老实说登录注册还是有点难度的我们就先从文章的增删改查开始开发。
8. 增删改查功能开发
首先我们就要在controller层创建对应的controller类 然后就是在service层创建对应的service接口以及serviceImpl实现类 再然后就是在mapper层创建Mapper类了 建好后项目结构大概是这样的 开发CategoryController类 这里就讲个大概详情请看源码。 在类名上面 RestController是controller层必须加的注解 RequestMapping(/***)就是请求路径的写法
在类中各个方法上面 PostMapping(/add)这个就是请求方式有PostMappingGetMappingPutMapping等等
这里的ApiApiOperation是接口文档相关的东西详情可以查看 接口文档
RestController
RequestMapping(/api/category)
Api(tags 分类管理)
public class CategoryController {Autowired //自动装配注解public CategoryService categoryService;PostMapping(/add)ApiOperation(保存分类数据)public Result add(RequestBody CategoryDTO categoryDTO){Category category Category.builder().name(categoryDTO.getName()).build();categoryService.save(category);return Result.success(新建成功);}顺承下去CategoryController有了后就得要去写CategoryService接口在CategoryServiceImpl类中实现它们的功能。 大概就是这样要注意加上Service注解 然后就开发mapper层的CategoryMapper: 关于Mapper我们可以直接在上面写注解也可以使用xml文件
Mapper
public interface CategoryMapper {Select(select * from category where name #{name})Category getCategoryByName(String name);void insert(Category category);Delete(delete from category where id #{id})void deleteById(Integer id);void update(Category category);Select(select * from category where id #{id})Category getById(Integer id);Select(select * from category)ListCategory list();
}有了上面的这些解释大家就可以想想文章增删改查怎么写了。基本上都一样大差不差的。
9. 登录注册功能开发
这里就得要参考登陆注册功能开发
10. AOP权限校验
参考AOP简单的权限校验
11.前端相关
这就很简单了前端的内容无非就是向后端发送请求得到返回数据更加返回的数据再在页面上进行渲染显示。 vue需要配置的部分
vue.config.js
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,lintOnSave: false,devServer: {proxy: {/api: {target: http://localhost:8083/api/,changeOrigin: true,pathRewrite: {^/api: }}}},})
main.js
import { createApp } from vue
import App from ./App.vue
import router from ./router
import store from ./store
import axios from axiosconst app createApp(App);const axiosInstance axios.create({baseURL: /api // 代理前缀对应vue.config.js中的配置
});app.config.globalProperties.$axios axiosInstance;app.use(store).use(router).mount(#app)
页面向后端发送请求
// 获取数据const getData async () {const token localStorage.getItem(token);try {//以下就是一个带token的请求的发送方式const res await axios.get(/api/category/list, {headers: {token: ${token},}});console.log(paperData.value);} catch (error) {alert(权限不足)}}六、总结
大概就是这样了。总之就是要多抄多总结。总结下来的东西才是你自己的。加油
