目录
一、京淘项目搭建
1）京淘项目后台搭建
1、创建项目
2、导入pom.xml文件
<!--1.parent标签 2.依赖信息 3.build插件-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.2</version>
<relativePath/>
</parent>
<properties>
<java.version>1.8</java.version>
<!--跳过测试类打包-->
<skipTests>true</skipTests>
</properties>
<!--原则: 按需导入 -->
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<!--springboot启动项(器)在包的内部SpringBoot
已经完成了项目的"整合"(配置) 用户拿来就用
web导入SpringMVC
-->
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--支持热部署 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<!--添加lombok依赖-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<!--引入数据库驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!--springBoot数据库连接 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!--导入MP包之后,删除原有的Mybatis的包 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.5.2</version>
</plugin>
</plugins>
</build>
3、后台项目结构
4、代码测试
2）京淘前端搭建
1、node.js安装
成功后效果：
2、安装vue 客户端程序
npm是node 安装软件/环境的工具.
配置淘宝镜像: 1).npm install -g cnpm --registry=https://registry.npm.taobao.org
安装VUE客户端: 命令: npm install -g @vue/cli --force
安装成功后的效果:
3）导入前端项目文件
1、找到前端文件：
2、导入前端项目
3、编辑路径，成功后，导入项目即可
4、项目运行
引入项目之后,启动服务.
5.终止
3）脚手架
1、什么是脚手架
原来写前端代码时 需要自己手动维护html/css/js. 并且如果文件如果很多 缺乏一种统一的方式进行管理.
可以向后端代码一样Controller/Service/Mapper 将代码进行分层管理. 前端仿照后端 开发了一个脚手架项目结构.
2、脚手架结构分析
3、正确理解.vue文件
知识复习:
1. 组件 HTML/CSS/JS 这些都可以封装到组件中.
2. ** 重点:在脚手架中 xxx.vue 代表一个组件 **
4、理解main.js
总结: main.js作用
- 导入整个项目中所用到的js.
- 实例化VUE对象
- 通过实例化的VUE对象渲染程序.
5.关于脚手架路由规范
6.路由规则
7.路由策略
4）总结
1、Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 前端脚手架运行的一个平台
类比: java程序 -----tomcat服务器.
2、脚手架 前端框架 类似于: java中的 spring框架
VUE.JS 类似于: java代码
3、vue-cli 构建脚手架的一个客户端工具 以视图的方式直观的给用户展现.
类比: SqlYog!!!
二、用户登录操作
1）数据库设计user表
2）user对象说明
3）用户登陆业务实现流程
步骤1: 用户输入完 用户名和密码之后,点击登录按钮
步骤2: 准备username/password数据 向后台服务器发送请求, 请求类型: post类型
步骤3: 后台服务器接收用户的请求参数 username/password
步骤4: 根据用户名和密码查询数据库 结果: 有数据 用户名和密码正确
| 没有结果 用户名和密码错误
步骤5: 后端服务器应该返回一个业务回执 标识业务逻辑是否正确执行
假设: status 200 正确, 201 表示失败
步骤6: 前端服务器根据用户的200/201 提示用户操作成功/操作失败.
4）业务接口文档
说明:一般做前后端交互时,必须有业务接口文档. 文档中详细阐述了业务需求/url地址/参数/返回值信息等要素.
前后端严格按照业务接口文档进行编码
5）系统返回值SysResult对象
关于SysResult对象的说明: 该对象用来实现 后端与前端业务的交互.
业务执行正确 status=200 业务执行错误 status=201
概念: 前后端交互的层级 定义为 VO层
6）编辑SysResult对象
//作用: 实现前后端交互
@Data
@Accessors(chain = true)
@NoArgsConstructor //无参构造
@AllArgsConstructor //全参构造
public class SysResult implements Serializable { //规范的写法
private Integer status; //状态码 200 201
private String msg; //服务器返回的提示信息
private Object data; //服务器返回的业务数据
//重载: 方法名称相同,参数不同
//为了用户使用VO对象 更加的方便 重载一些方法 简化程序的调用
public static SysResult fail(){
return new SysResult(201, "业务执行失败",null);
}
//1.不带参数的正确返回
public static SysResult success(){
return new SysResult(200, "服务器处理成功", null);
}
//2.带返回值的正确返回 用户传递什么/返回值就是什么
public static SysResult success(Object data){
return new SysResult(200, "服务器处理成功", data);
}
//3.带返回值,携带提示信息
public static SysResult success(String msg,Object data){
return new SysResult(200, msg,data);
}
}
7）MD5介绍
1.MD5信息摘要算法
2.通常可以将数据进行MD5加密 生成 “数字指纹”
3.现阶段md5的加密的算法应用于各大网站中
4.md5加密之后 理论上来说 无法由密文转化为明文 不可以反向编译
5. 限定输入密码的次数!!! 3-5次 锁定账户!!!
8）后端代码
1、编辑UserController
业务要求： 完成用户信息校验,并且返回特定的token数据
/**
* 业务需求:用户登陆校验
* 类型:POST
* URL: /user/login
* 参数: username/password json串 {username: "xxx", password: "xxx"}
* 返回值: SysResult对象 data的String类型的信息 token
* 用户名/密码 admin123/admin123456
*/
@PostMapping("/login")
public SysResult login(@RequestBody User user){
//System.out.println(user);
//1.根据用户名和密码校验 返回token Service层中完成
String token = userService.login(user);
//2. token 有值业务正确 | null 业务操作失败
if(token == null){
return SysResult.fail();
}
return SysResult.success(token);
}
2、编辑UserServiceImpl实现类
/**
* 需求:
* 1.根据用户名和密码查询数据库
* 2.将密码进行加密处理 md5加密方式
* 3.如果用户名和密码正确 返回token
* 4 UUID: 每次生成的UUID几乎不重复. 重复概率 2^128/1
* b809cd3e-f4fa-11eb-b396-52152e05da50
* @param user 作用: 在未来生成API文档时 有效果 一般都是默认的
* @return
*/
@Override
public String login(User user) {
//1.将密码进行加密的处理
String password = user.getPassword(); //明文
//2. 将字符串 转化为字节数组
byte[] passByte = password.getBytes();
// 将明文加密
String md5Pass = DigestUtils.md5DigestAsHex(passByte);
//3. 根据用户名和密文查询数据库
//Sql: select * from user where uname="xxx" and ps="xx"
//根据对象中不为null的属性充当where条件!!!!
user.setPassword(md5Pass);
QueryWrapper<User> queryWrapper = new QueryWrapper<>(user);
//从数据库中获取结果
User userDB = userMapper.selectOne(queryWrapper);
//不能理解!! 面向对象的知识 理解不到位!!!
if(userDB == null){ //用户名和密码错误 返回null
return null; //业务流程结束
}
//如果程序执行到这一行,则数据用户的输入正确的. 返回token
String token = UUID.randomUUID().toString()
.replace("-","");
return token;
}
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
