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

初始化前端

安装及配置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就会自动将项目所需要的依赖下载

这里依赖安装完成后 在package.json文件中找到start运行

运行

这里遇到一个离谱的错误

解决方法就是将这个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);
    }

}

连接成功