快速入门Web开发(下)(1)

本文涉及的产品
对象存储 OSS,OSS 加速器 50 GB 1个月
简介: 快速入门Web开发(下)(1)

你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客 这是我的 github gitee

如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^)

想看更多 那就点个关注吧 我会尽力带来有趣的内容

有没出现的图片 请访问 传送门 这是我的掘金账号 掘金文档的图片图片上传做的很好,欢迎关注我的掘金账号 😍

快速入门Web开发(下)

案列开发

部分详情见 文件 JavaWeb案列

  • 没写去全,想知道全部就去看JavaWeb案列,一定要去看

限定请求方式

//方案一
@RequestMapping  (value = "/depts",method = RequestMethod.GET)//限定请求方式为get
  //限定请求方式为get
  //不需要打出value,写路径后,直接写method=请求类型就好
//方案二
@GetMapping ("/depts")
    public Result list(){
        log.info("查询全部部门数据");
         return Result.success();
    }

开发部门相应功能

基本的开发方式及查询所有部门

  • 开发一个小的需求的时候,先看对接文档

比如,开发该需求,查询全部的部门数据先分析

  • 接口文档中注明了请求类型和请求地址

理清以上后,开始写代码

代码要实现的是

这三件事情。但我们需要将其分在不同的文件夹及java文件中。

  • 在dao层(mapper)中进行数据访问
  • 在service层中进行逻辑处理
  • 在controller层中接收请求,响应数据
  • pojo是存放对象的地方,比如检验是否成功的Result

流程是这样的:前端发送请求之后先进入到controller中的部门表(因为对部门进行操作),而该项会调用service来获取数据,在service中调用了mapper接口中的方法来查询信息,而mapper会对数据库进行操作,并将信息封住在list集合当中,将数据返回给service然后返回给controller最后返回给前端

  • 因为使用的是json格式,所以使用list集合

为什么没有创建相应对象却能够在几个不同的文件中互相调用,返回?

因为使用了依赖注入!


list() 方法中,通过调用 deptMapper.list() 来执行查询操作,并将查询结果作为方法的返回值。这里的 deptMapper.list() 就是调用 DeptMapper 接口的 list() 方法,从数据库中获取部门数据。

虽然代码中没有直接写出 DeptMapper 的调用,但通过依赖注入的方式,DeptMapper 实例已经被注入到了 deptMapper 字段中,可以在 list() 方法中通过 deptMapper 字段来调用 DeptMapper 的方法。

删除部门

@DeleteMapping("/depts/{id}")
public Result delete(@PathVariable Integer id){
    //使用以下写法可以,将{}替换成id
    log.info("删除部门数据:{}",id);
    List<Dept> deptList =deptService.delete();
    return Result.success(deptList);
}

@PathVariable 是一个Spring框架的注解,用于从URL路径中提取变量的值,并将其绑定到方法参数上。

在你提供的代码中,@PathVariable Integer id 表示使用 @PathVariable 注解将URL路径中的变量值绑定到方法参数 id 上。

具体来说,当请求的URL路径为 “/depts/{id}”,例如 “/depts/123”,@DeleteMapping("/depts/{id}") 注解表示这是一个用于处理HTTP DELETE请求的处理方法,并且路径中的 {id} 部分将被解析为方法参数 id

新增部门

@Override
public void add(Dept dept) {
    dept.setCreateTime(LocalDateTime.now());
    dept.setUpdateTime(LocalDateTime.now());
    deptMapper.add(dept);
}

补充属性指需要补充的属性

比如这里,前端传给我们其他参数,但修改时间和进入时间是我们来决定的,因此需要在这里增加

使用@RequestMapping优化

如何分辨使用注解获取服务器发过来的数据?(重点)

当请求数据是以下这样时(json格式)

{
  "id": 1,
  "name": "教研部"
}
  • 是一个请求体数据,要使用能将请求体数据绑定的注解来实现

当请求数据是以下这样时(写在导航栏上),要使用能将请求的URL中提取路径参数的注解来实现

/depts/1
详情见http笔记

更新部门

  • 在这个工程中更新部门需要点两次

  • 先点击编辑弹出页面,输入修改的name属性。这个过程就执行了一次查询操作

  • 然后点击确定,将修改好的name属性传递给后端

开发员工表相应功能

分页查询

  • 详细要求去看相应api接口文档

  • 接收参数需要默认值的时候,可以使用以上两种方式设置
public PageBean page(Integer page, Integer pageSize) {
    //获取总页数
    Long count = empMapper.count();
    //获取查询结果
    //计算起始页码
    Integer start = (page - 1) * pageSize;
    List<Emp> empList = empMapper.page(start, pageSize);
    //封装成对象
    PageBean pageBean=new PageBean(count,empList);
    return pageBean;
}
  • 遇到多个数据时候,将其封装成一个对象来传输

PageHelper插件

  • 该插件使用PageHelper对象进行操作

以下是使用 PageHelper 进行分页查询的一般步骤:

  1. 在项目的依赖管理中引入 PageHelper 的相关依赖,通常需要包括 pagehelper-coremybatis-spring-boot-starter
  2. 在 MyBatis 的配置文件中,配置 PageInterceptor 作为拦截器。这样,PageHelper 就能够拦截查询语句,自动实现分页功能。
  3. 在需要进行分页查询的方法中,直接使用 PageHelper.startPage(pageNum, pageSize) 来设置当前页码和每页显示的记录数。
  4. 执行查询操作,PageHelper 会自动进行分页处理,并返回一个包含分页结果的 PageInfo 对象。
  • 插件原理

在执行empMapper.list()方法时,就是执行:select * from emp 语句,怎么能够

实现分页操作呢?

分页插件帮我们完成了以下操作:

  1. 先获取到要执行的SQL语句:select * from emp
  2. 把SQL语句中的字段列表,变为:count(*)
  3. 执行SQL语句:select count(*) from emp //获取到总记录数
  4. 再对要执行的SQL语句:select * from emp 进行改造,在末尾添加 limit ? ,

?

  1. 执行改造后的SQL语句:select * from emp limit ? , ?

  • 使用中的第一条,调用插件中的本体方法来设置分页参数
  • 第二条通过插件将该条变成分页查询语句
//方式一:service层
public PageBean page(Integer page, Integer pageSize) {
    //获取总页数
    Long count = empMapper.count();
    //获取查询结果
    //计算起始页码
    Integer start = (page - 1) * pageSize;
    List<Emp> empList = empMapper.page(start, pageSize);
    //封装成对象
    PageBean pageBean=new PageBean(count,empList);
    return pageBean;
}
//dao层
  //查询总记录
    @Select("select count(*) from webcase.emp")
    public Long count();
   // 分页查询列表数据
    @Select("select * from webcase.emp limit #{start},#{pageSize}")
    public List<Emp> page(Integer start,Integer pageSize);
//方式一:service层(使用插件)
    public PageBean page(Integer page, Integer pageSize) {
        //设置分页参数
        PageHelper.startPage(page, pageSize);
        //获取数据
        List<Emp> empList= empMapper.list();
        Page<Emp> p=(Page<Emp>)  empList;
        // 封装成对象
        PageBean pageBean = new PageBean(p.getTotal(), p.getResult());
        return pageBean;
    }
//dao层
/*员工信息查询(使用插件)*/
 @Select("select * from webcase.emp")
 public List<Emp> list();
}
//(其中Emp用于接收传递的数据)

条件分页查询

  • 后面还有新增员工和删除员工就不多赘述了

  • 文件上传前端三要素
  • 请求方式为post,要有file,特殊的编码格式

文件上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
    //使用multipart/form-data格式能将数据提交上去,而不是将文件名提交
    //使用该提交方式后,提交项会分成三个
        姓名: <input type="text" name="username"><br>
        年龄: <input type="text" name="age"><br>
        头像: <input type="file" name="image"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

  • 生成临时文件来上传,上传后将文件删除
@Slf4j
@RestController
public class UploadController {
    @PostMapping("/upload")
    public Result upload(String name, Integer age, MultipartFile image) throws IOException {
        log.info("接收到的参数name:{},age:{},image:{}",name,age,image);
        // 获取文件的原始名
        String originalFilename= image.getOriginalFilename();
        // 产生的临时文件保存在本地E:\image
        image.transferTo(new File("E:\\image\\"+originalFilename ));
        return Result.success();
    }
}//这样写,有一个明显的问题:后来的同名文件会替代原本的文件
@Slf4j
@RestController
public class UploadController {
    @PostMapping("/upload")
    public Result upload(String name, Integer age, MultipartFile image) throws IOException {
        log.info("接收到的参数name:{},age:{},image:{}",name,age,image);
        // 获取文件的原始名
        String originalFilename= image.getOriginalFilename();
        int index=originalFilename.lastIndexOf(".");//找到文件名最后.的位置
        String extname=originalFilename.substring(index);//截取字符
        //使用uuid创建文件名
        String newFileName= UUID.randomUUID().toString()+extname;
        // 产生的临时文件保存在本地E:\image
        image.transferTo(new File("E:\\image\\"+newFileName ));
        return Result.success();
    }
}

  • 在application.properties中配置

使用云来存储图片

private AliOSSUtils aliOSSUtils;
/* 使用阿里云来上传图片 */
@PostMapping("/upload")
public Result upload(MultipartFile image) throws IOException {
    log.info("文件上传,文件原始名:{}",image.getOriginalFilename();
    /* 使用工具来将文件上传,并获得该文件的网络地址 */
    String url= aliOSSUtils.upload(image);
    log.info("文件上传的地址:{}",url);
    return Result.success(url);
}
@Component
public class AliOSSUtils {
//工具类
    private String endpoint = "https://oss-cn-beijing.aliyuncs.com";
    private String accessKeyId = "LTAI5tJcyLUHaXqJiTaw74Rd";
    private String accessKeySecret = "mwRBKzxPC0BHFEwqQHZvCtvvlOIpho";
    private String bucketName = "web-tlias-ww";
    /**
     * 实现上传图片到OSS
     */
    public String upload(MultipartFile file) throws IOException {
        // 获取上传的文件的输入流
        InputStream inputStream = file.getInputStream();
        // 避免文件覆盖
        String originalFilename = file.getOriginalFilename();
        String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));
        //上传文件到 OSS
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        ossClient.putObject(bucketName, fileName, inputStream);
        //文件访问路径
        String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;
        // 关闭ossClient
        ossClient.shutdown();
        return url;// 把上传到oss的路径返回
    }
}

在postman中测试上传

  • 选择Body中的form—data,在key中选择Filr

使用不同配置文件优化

使用@ConfigurationProperties代码再优化

登录

//  登录接口
@Slf4j
@RestController
public class LoginController {
    @Autowired
    private EmpService empService;
    @PostMapping("/login")
    public Result login(@RequestBody Emp emp){
        log.info("用户登录:{}",emp);
        // 登录
        Emp emp1= empService.Login(emp);
        return emp1!=null?Result.success():Result.error("用户名或秘密错误");
    }//多了此项步骤,其他都一样
}

登录校验

会话技术

  • Cookie技术

  • Session技术


快速入门Web开发(下)(2):https://developer.aliyun.com/article/1548594

相关实践学习
对象存储OSS快速上手——如何使用ossbrowser
本实验是对象存储OSS入门级实验。通过本实验,用户可学会如何用对象OSS的插件,进行简单的数据存、查、删等操作。
目录
相关文章
|
6月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
538 4
|
10月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
10月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。
|
前端开发 JavaScript Shell
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
本文为鸿蒙开发者整理了Web性能优化的实战案例解析,结合官方文档深度扩展。内容涵盖点击响应时延核心指标(≤100ms)、性能分析工具链(如DevTools时间线、ArkUI Trace抓取)以及高频优化场景,包括递归函数优化、网络请求阻塞解决方案和setTimeout滥用问题等。同时提供进阶技巧,如首帧加速、透明动画陷阱规避及Web组件初始化加速,并通过优化前后Trace对比展示成果。最后总结了快速定位问题的方法与开发建议,助力开发者提升Web应用性能。
|
10月前
|
JSON 开发框架 自然语言处理
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(三)
本文主要介绍了应用开发中的三大核心内容:生命周期管理、资源限定与访问以及多语言支持。在生命周期部分,详细说明了应用和页面的生命周期函数及其触发时机,帮助开发者更好地掌控应用状态变化。资源限定与访问章节,则聚焦于资源限定词的定义、命名规则及匹配逻辑,并阐述了如何通过 `$r` 引用 JS 模块内的资源。最后,多语言支持部分讲解了如何通过 JSON 文件定义多语言资源,使用 `$t` 和 `$tc` 方法实现简单格式化与单复数格式化,为全球化应用提供便利。
338 104
|
10月前
|
JavaScript 前端开发 API
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(二)
本文介绍了HarmonyOS应用开发中的HML、CSS和JS语法。HML作为标记语言,支持数据绑定、事件处理、列表渲染等功能;CSS用于样式定义,涵盖尺寸单位、样式导入、选择器及伪类等特性;JS实现业务逻辑,包括ES6语法支持、对象属性、数据方法及事件处理。通过具体代码示例,详细解析了页面构建与交互的实现方式,为开发者提供全面的技术指导。
358 104
|
10月前
|
开发框架 编解码 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(一)
该文档详细介绍了一个兼容JS的类Web开发范式的方舟开发框架,涵盖概述、文件组织、js标签配置及app.js等内容。框架采用HML、CSS、JavaScript三段式开发方式,支持单向数据绑定,适合中小型应用开发。文件组织部分说明了目录结构、访问规则和媒体文件格式;js标签配置包括实例名称、页面路由和窗口样式信息;app.js则描述了应用生命周期与对象管理。整体内容旨在帮助开发者快速构建基于方舟框架的应用程序。
371 102
|
10月前
|
Linux 数据库 数据安全/隐私保护
Python web Django快速入门手册全栈版,共2590字,短小精悍
本教程涵盖Django从安装到数据库模型创建的全流程。第一章介绍Windows、Linux及macOS下虚拟环境搭建与Django安装验证;第二章讲解项目创建、迁移与运行;第三章演示应用APP创建及项目汉化;第四章说明超级用户创建与后台登录;第五章深入数据库模型设计,包括类与表的对应关系及模型创建步骤。内容精炼实用,适合快速入门Django全栈开发。
510 1
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
2685 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
11月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。