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

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
对象存储 OSS,恶意文件检测 1000次 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搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
182 45
|
21天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
28天前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
30 7
|
1月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
38 2
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
53 1
|
1月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
1月前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
65 2
WK
|
1月前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
99 0
|
1月前
|
JavaScript 前端开发 Java
SpringBoot_web开发-webjars&静态资源映射规则
https://www.91chuli.com/ 举例:jquery前端框架
23 0