用户中心(上)

文章目录

    • 企业做项目流程
    • 需求分析
    • 技术选型
    • 计划
      • 初始化项目
      • 数据库设计
      • 登录/注册
      • ⽤户管理(仅管理员可⻅)
    • 初始化项目
      • ⼀、前端初始化
        • 1.下载nodejs
        • 2.Ant Design Pro
        • 相关问题
          • 1.前端项目启动时报错、无法启动?
          • 2.如何初始化前端项目?为什么初始化命令和鱼皮视频中的不同?为什么没有umi@3选项?
      • 二、后端初始化
        • 数据库
        • 方法一(不推荐)
        • 方法二
        • 方法三(推荐)
          • 流程

企业做项目流程

需求分析=>设计(概要设计,详细设计)=>技术选型 =>初始化/引入需要的技术=>
写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-centerdatasource:url: jdbc:mysql://localhost:3306/aniausername: rootpassword: 123456driver-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 {@Autowiredprivate UserMapper userMapper;@Testpublic 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 中心仓库
运行测试即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/4970.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 模板字符串

1.模板字符串换行问题 white-space: pre-wrap; 2. 鼠标移入 显示提示框 点击手动隐藏 myChart.on("mouseover", function (params) {myChart.dispatchAction({type: "downplay",}); }); tooltip: {show: true, //是否显示提示框组件&#xff0c;包括…

机器人实验室CNRS-AIST JRL, IRL介绍

一、背景 作为搞机器人方向的学生&#xff0c;必须时常关注国际上顶尖实验室的研究成果&#xff0c;以免自己做的方向out&#xff0c;除了大家耳熟能详的Boston Dynamics&#xff0c;还有许多非常厉害的机器人实验室值得我们关注&#xff0c;如日本的CNRS-AIST JRL, IRL实验室…

spring cache(一)介绍

一、介绍 1、背景 项目中使用最多的缓存技术就是Redis,用Redis就可以实现了&#xff0c;为什么需要使用spring cache&#xff1f; 先看下我们使用缓存步骤: &#xff08;1&#xff09;查寻缓存中是否存在数据&#xff0c;如果存在则直接返回结果 &#xff08;2&#xff09…

虚函数表与虚函数表指针

虚函数表与虚函数表是用来实现多态的&#xff0c;每一个类只有一个虚函数表 静态多态&#xff1a;函数重载&#xff08;编译期确定&#xff09; 动态多态&#xff1a;虚函数&#xff08;运行期确定&#xff09; 虚函数表的创建时机&#xff1a; 生成时间&#xff1a; 编译期…

【k8s】(九)kubernetes1.29.4离线部署之-Token过期后加入节点

&#xff08;一&#xff09;kubernetes1.29.4离线部署之-安装文件准备 &#xff08;二&#xff09;kubernetes1.29.4离线部署之-镜像文件准备 &#xff08;三&#xff09;kubernetes1.29.4离线部署之-环境初始化 &#xff08;四&#xff09;kubernetes1.29.4离线部署之-组件安装…

生活服务推出品牌实惠团购,覆盖五一假期“吃喝玩乐”多场景

4月26日&#xff0c;抖音生活服务平台上线“跟着大牌过五一”活动会场&#xff0c;携手22家连锁品牌商家&#xff0c;于“五一”前推出优价团购和时令新品&#xff0c;覆盖“吃喝玩乐”多重购物需求&#xff0c;助力假期消费。同时&#xff0c;伴随各地涌现的文旅热潮&#xff…

SAP-ABAP-创建数据元素-02

事物码&#xff1a;SE11 三种数据对象&#xff0c;此处选择‘数据元素’ 基本类型&#xff1a;可以使用预定义或者域&#xff0c;下面一预定义为例&#xff0c;维护数据类型CHAR和长度10 点击字段标签&#xff0c;维护长度和描述&#xff0c; 激活&#xff0c;那么这个数据元素…

JavaSE-14笔记【反射机制(+2024新)】

文章目录 1.反射机制概述2.获取Class的四种方式3.通过反射机制实例化对象*4.反射机制结合配置文件灵活实例化对象*5.java.lang.reflect.Field5.1反编译类中的所有字段/属性5.2 通过反射机制给属性赋值* 6.java.lang.reflect.Method6.1反编译类中的所有方法6.2 通过反射机制调用…

变革 Perplexica:AI驱动的问答搜索引擎

Perplexica是一个开源的人工智能搜索工具&#xff0c;也可以说是一款人工智能搜索引擎&#xff0c;它深入互联网以找到答案。受Perplexity AI启发&#xff0c;它是一个开源选择&#xff0c;不仅可以搜索网络&#xff0c;还能理解您的问题。它使用先进的机器学习算法&#xff0c…

什么是环比折年率

环比折年率是月度&#xff08;或季度&#xff09;统计中一个十分重要的统计指标&#xff0c;由环比增速推算得到&#xff0c;用于反映经济的发展速度与趋势变化。环比折年率与同比增速相比具有对趋势变化灵敏度高的优点&#xff0c;在统计分析、趋势预测等领域有着广泛应用。 …

Docker-容器的前世今生

文章目录 Docker为什么产生&#xff1f;硬件虚拟化硬件虚拟化解决的问题硬件虚拟化定义硬件虚拟化技术虚拟机的优点虚拟机的缺点 操作系统虚拟化即容器容器化解决的问题容器化定义容器化技术历史 容器和虚拟机对比 Docker的发展历史Docker架构客户端服务端仓库Registry Docker重…

Docker 容器创建与使用问题汇总

目录 常用命令 Docker 18.09 Error response from daemon: Container is not running unknown flag: --gpus CUDA error: "cudaSetDevice(device_)" Docker 19.03 容器创建时指定GPU&#xff0c;执行 nvidia-smi 命令只显示指定的显卡 容器创建时指定GPU&…

K8S安装网络插件flannel问题修复(cni plugin not initialized)

K8S安装网络插件问题修复 卸载flannel网络步骤&#xff1a; #第一步&#xff0c;在master节点删除flannel kubectl delete -f https://raw.githubusercontent.com/coreos/flannel/master/Documentation/kube-flannel.yml kubectl delete -f kube-flannel.yml #第二步&#xff…

Linux工具篇 之 vim概念 操作 及基础指令讲解

学校不大 创造神话 讲桌两旁 陨落的王 临时抱佛脚 佛踹我一脚 书山有路勤为径 游戏玩的很起劲 想要计算机学的好&#xff0c;我的博客列表是个宝 –❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀-正文开始-❀–❀–❀–❀–❀–❀–❀–❀…

八大元素定位方法

四、元素定位4.1 为什么要使用元素定位&#xff1f;要使用web自动化操作元素&#xff0c;必须首先找到此元素。4.2 定位工具火狐&#xff1a;Firebug &#xff08;F12获取直接点击 Friebug图标&#xff09;谷歌&#xff1a;F12键(开发者工具)4.3 定位元素时依赖于什么&#xff…

这份详细的智慧校园建设方案,赶紧收藏

高等教育信息化是促进高等教育改革创新和提高质量的有效途径&#xff0c;是教育信息化发展的创新前沿。进一步加强基础设施和信息资源建设&#xff0c;重点推进信息技术与高等教育的深度融合&#xff0c;能促进教育内容、教学手段和方法现代化&#xff0c;创新人才培养、科研组…

渗透之sql注入---实战1

本期的sql注入实战在&#xff1a;BUUCTF在线评测 (buuoj.cn) 该网站上进行。 启动靶机&#xff1a; 1.进来后搜索web1 2.点击【SWPU2019】Web1启动靶机。 3.进来之后在此界面进行注入。 开始注入&#xff1a; 1.找注入点&#xff1a; 我们输入1 后查看广告详情发现报错&a…

我用suno做了人生中第一首歌

前几周AI已经杀入音乐制作领域&#xff0c;Suno正式发布V3音乐生成模型&#xff0c;被业界誉为AI音乐的"ChatGPT"时刻。 借此机会&#xff0c;我也生成了人生中第一首歌&#xff0c;下面是歌词和对应的音频。 歌词&#xff1a; [Verse] 烽火连天万里霜 英雄豪杰赴…

你不知道的CSS链接:解锁网页导航的秘密武器

在网页设计中&#xff0c;链接&#xff08;<a>标签&#xff09;是构建信息桥梁的关键元素&#xff0c;它们不仅承载着导航的功能&#xff0c;还是提升用户体验的重要手段。然而&#xff0c;CSS赋予了链接无限的风格潜力&#xff0c;远远超出了基础的下划线和颜色变化。本…

记录不会的方法操作(C++)——容器后面插入一个容器的值

1.将一个容器中的值全部追加在另一个容器后面 记录起因&#xff1a;我想要将一个vector中的值全部追加到另一个vector后面&#xff0c;于是我想到了push_back这个函数&#xff0c;但是好像它一次只能在vector末尾插入一个值。而我上网搜索&#xff0c;也只能发现在前面插入的方…