用户中心(上)

企业做项目流程

需求分析=>设计(概要设计,详细设计)=>技术选型 =>初始化/引入需要的技术=>
写demo=>写代码(实现业务逻辑)=>测试(单元测试)=>代码提交/代码评审=>部署=> 发布

需求分析

**1.登录/注册 **
**2.用户管理(仅管理员可见)对用户的的查询或修改 **
**3.用户校验(仅星球用户) **

技术选型

前端:三件套+React+组件库Ant Design+Umi+Ant Design Pro(现成的管理系统)
后端:
java
spring(依赖注入框架,帮助你管理Java对象,集成一些其他的内容)
springmvc(web框架,提供接口访问、restfu接口等能力)
mybatis(Java操作数据库的框架,持久层框架,对jdbc的封装)
mybatis-.plus(对mybatis的增强,不用写sql也能实现增删改查)
springboot(快速启动/快速集成项目。不用自己管理spring配置,不用自己整合各种框架)
junit 单元测试库
mysql
部署:服务器/容器(平台)

计划

初始化项目

1.前端初始化 ✔️

  1. 前端初始化

  2. 引入一些组件之类的

  3. 框架介绍/瘦身

2.后端初始化 ✔️

  1. 准备环境(MySql之类的)

  2. 引入框架

数据库设计

登录/注册

  1. 前端
  2. 后端

⽤户管理(仅管理员可⻅)

  1. 前端
  2. 后端

初始化项目

本项目Node.js请使用v16版本,JDK请使用8版本,Spring Boot使用2.x版本!

⼀、前端初始化

1.下载nodejs
2.Ant Design Pro
相关问题
1.前端项目启动时报错、无法启动?

大概率是本地环境、依赖版本和鱼皮的不一致,或者是文件权限问题,Node,js版本最好使用v16(鱼皮的是v16.20.0),如果不是的话建议去Node.js官方网站重新下载安装Node,或者使用nvm(Node.js版本管理工具)来切换多个不同的Node.js版本。

2.如何初始化前端项目?为什么初始化命令和鱼皮视频中的不同?为什么没有umi@3选项?

因为本项目使用的前端框架Ant Design Pro在持续更新,请以官方文档最新的初始化命令为主。
官方文档:https::/pro.ant.design/zh-CN/docs/getting-started
知道去看官方文档,你就能少走很多坑。
如果跟着视频做报错了,那么先去看最新官方文档上的命令和用法,或者切换文档版本为和视频一致。如果还有报错,那么就把错误信息贴到百度去查询。

如果你还想用umi@3和umi ui怎么办呢?

更新后的框架不能满足需求,那我们用更新前的不就好了???

执行命令安装老版本的脚手架:

npm i @ant-design/pro-cli@3.1.0 -g

然后使用pro-v查看版本号,保证是3.1.0,即可出现umi@3的选项:
image.png

选择框架版本时,一定要选V3!!!使用v4版本不支持umi ui悬浮按钮。
image.png

注意:像截图这里没有让你选择 umi3 还是 umi4 的,因为官方默认最新版本,就先按 ctrl+c 回退。
先卸载上面的版本npm uninstall -g @ant-design/pro-cli
选择这个方式安装指定版本npm install -g @ant-design/pro-cli@3.1.0
这样接着pro create myapp就可以选择版本了,我们选 umi3

升降级nodejs的博客

有可能nodejs和你的版本不匹配,可能nodejs版本过高,要么降低版本,要么把 start 这一行改成这样"start": "set NODE_OPTIONS=--openssl-legacy-provider && cross-env UMI_ENV=dev umi dev",

然后是 umi ui 的下载
yarn add @umijs/preset-ui -D

二、后端初始化

数据库

MySQL 5.7

方法一(不推荐)

去 GitHub 上面搜索 SpringBoot 模板,但从0开始做或者企业化做就最好不要

方法二

Spring官网的模板生成器

因为现在官网不支持java8,通过阿里云国服去间接创建Spring项目修改Server URL为https://start.aliyun.com

image.png
阿里云Spring模板生成器

方法三(推荐)

直接在 IDEA开发工具里生成
如果要引入java的包,可以去maven中心仓库寻找(http:/mvnrepository…com/)
直接在 IDEA开发工具里生成

流程
  1. 创建项目
  2. 点击右侧的 database 登录连接数据库
  3. 编写demo

MyBatis-Plus官方文档

DROP TABLE IF EXISTS `user`;

CREATE TABLE `user`
(
    id    BIGINT      NOT NULL COMMENT '主键ID',
    name  VARCHAR(30) NULL DEFAULT NULL COMMENT '姓名',
    age   INT         NULL DEFAULT NULL COMMENT '年龄',
    email VARCHAR(50) NULL DEFAULT NULL COMMENT '邮箱',
    PRIMARY KEY (id)
);

DELETE FROM `user`;

INSERT INTO `user` (id, name, age, email) VALUES 
    (1, 'Jone', 18, 'test1@baomidou.com'),
    (2, 'Jack', 20, 'test2@baomidou.com'),
    (3, 'Tom', 28, 'test3@baomidou.com'),
    (4, 'Sandy', 21, 'test4@baomidou.com'),
    (5, 'Billie', 24, 'test5@baomidou.com');

执行demo
image.png

  1. 引入依赖
<dependency>
	<groupId>com.baomidou</groupId>
	<artifactId>mybatis-plus-boot-starter</artifactId>
	<version>3.5.1</version>
</dependency>
  1. 配置文件 application.yml

原来是 application.properties,改为了 .yml

spring:
  application:
    name: user-center
  datasource:
    url: jdbc:mysql://localhost:3306/ania
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
server:
  port: 8080

这里要配置不然启动项目会因为 MyBatis 没配置而出错

  1. 创建 mapper 包

@SpringBootApplication
@MapperScan("com.hsu.usercenter.mapper")
public class UserCenterApplication {

    public static void main(String[] args) {
       SpringApplication.run(UserCenterApplication.class, args);
    }

}

在类上添加 @MapperScan("com.hsu.usercenter.mapper")

  1. 创建 model 包

复制 User 到 model 包

@Data
@TableName("`user`")
public class User {
    private Long id;
    private String name;
    private Integer age;
    private String email;
}

复制 UserMapper 到 mapper 包

public interface UserMapper extends BaseMapper<User> {

}

这里 BaseMapper 官方已经提供了很多方法了

  1. 编写测试类

@SpringBootTest
public class SampleTest {

    @Autowired
    private UserMapper userMapper;

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

}

记得导入对应的包
引入 Java 的包去 Maven 中心仓库
运行测试即可

  • 20
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值