用户中心--项目前后端初始化

最新推荐文章于 2024-09-13 17:30:19 发布

H_H;

最新推荐文章于 2024-09-13 17:30:19 发布

阅读量121

点赞数

分类专栏：项目文章标签： mybatis java yarn 前端框架 mvc mysql

本文链接：https://blog.csdn.net/TCDHanyongpeng/article/details/132078449

版权

项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何初始化前端安装node.js和AntDesignPro项目，管理依赖并解决常见问题，如Umi插件的配置，以及后端环境的搭建，包括Spring、MyBatis的连接设置。还讨论了项目瘦身和测试的方法。

摘要由CSDN通过智能技术生成

初始化前端

安装及配置node.js

尽量不要下载最新版的

node.js16.15.0

安装时只需要修改安装目录其他全部 next

node.js配置yarn npm（需要提前下载并安装配置好git,不然会出现问题）

git安装配置

注意在配置前需要在node.js安装目录下创建两个文件夹node_global和node_cache,如果出现问题，修改一下文件夹权限并且使用管理员模式打开

初始化Ant Design Pro

先在某个盘中创建项目存放位置，我的是存放在E:\\星球项目

根据官方文档进行项目初始化

安装项目所需依赖

安装依赖可以不用在cmd中使用$ cd myapp && npminstall 命令

进入webStorm中点击Terminal将目录进进入自己的项目输入yarn就会自动将项目所需要的依赖下载

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-24Qz7VXS-1691030684794)(C:\Users\Han\AppData\Roaming\Typora\typora-user-images\image-20230802160041446.png)]$
这里依赖安装完成后在package.json文件中找到start运行 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A5UsQqO7-1691030564053)(C:\Users\Han\AppData\Roaming\Typora\typora-user-images\image-20230802170352207.png)]$

运行

这里遇到一个离谱的错误
在这里插入图片描述
解决方法就是将这个index.md删除

效果

在这里插入图片描述

添加Umi插件

打开webStorm的控制台输入yarn add @umijs/preset-ui -D下载这个插件

解决Umi插件区块无法显示问题

打开FastGitHu工具加速

项目各目录功能

在这里插入图片描述

存储一些配置文件
在这里插入图片描述

存储前端模拟数据

在这里插入图片描述

存放静态资源【图标视频音频】

在这里插入图片描述

src中存放代码

在这里插入图片描述

存放组件

在这里插入图片描述

存放页面

页面和组件的关系：页面是由多个组件组成的

在这里插入图片描述

存放国际化信息

项目瘦身

可以将不用的页面或文件删除，但是删除了文件等信息，需要将他的路由也删除

初始化后端

准备环境

技术栈： spring springMvc myBatis mybatis-plus springBoot

引入框架

使用IDEA的spring Initialize 脚手架创建

选择对应的环境
在这里插入图片描述

选择要创建的依赖

在这里插入图片描述

测试连接

配置连接信息

连接的是yupi这个数据库

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/yupi
    username: root
    password: hyp
    type: com.zaxxer.hikari.HikariDataSource
    # 定义项目名称
  application:
    name: User-Center

配置mybatis

# 配置Mybatis
mybatis:
  configuration:
    # 开启驼峰命名
    map-underscore-to-camel-case: true
  mapper:
  mapper-locations: classpath:/mapper/*.xml
  type-aliases-package: com.hyp.usercenter.moder

连接

@SpringBootTest
public class SampleTest {

    @Resource
    private UserMapper userMapper;

    @Test
    public void testSelect() {
        System.out.println(("----- selectAll method test ------"));
        List<User> userList = userMapper.selectList(null);
        userList.forEach(System.out::println);
    }

}