详解 HttpServletResponse

news2025/1/21 22:11:27

详解 HttpServletResponse

    • 核心方法
    • 代码示例
      • 1.设置响应状态码
      • 2.设置响应头
      • 3.设置响应内容
        • （1）响应一个网页（简单HTML）
        • （2）响应一个网页（复杂HTML）
    • 返回已有的一个网页
      • 1.重定向
      • 2.转发
    • 返回一个文件
      • 渲染展示与下载
    • 返回 json 数据
    • 请求响应流程小结

前言

Servlet 中的 doXXX 方法的目的就是根据请求计算得到响应, 然后把响应的数据设置到HttpServletResponse 对象中，
然后 Tomcat 就会把这个 HttpServletResponse 对象按照 HTTP 协议的格式, 转成一个字符串, 并通过Socket 写回给浏览器；

核心方法

方法描述
void setStatus(int sc)设置响应状态码
void setHeader(String name,String value)设置一个带有给定的名称和值的Header，如果name已经存在，则覆盖旧的值
void addHeader(int sc)设置一个带有给定的名称和值的Header，如果name存在，不会覆盖旧的值，并列添加新的值
void setContentType(String type)设置被发送到客户端的响应的内容类型
void setCharacterEncoding(String charset)设置被发送到客户端的响应的字符编码(MIME 字符集)
void sendRedirect(String location)使用指定的重定向位置 URL 发送临时重定向响应到客户端
PrintWriter getWriter()用于往 body 中写入文本格式数据
OutputStream getOutStream()用于往 body 中写入二进制格式数据

需要注意的是：

  • 响应对象是服务器要返回给浏览器的内容, 这里的重要信息都是程序猿设置的， 因此上面的方法都是 "写" 方法；
  • 对于状态码/响应头的设置要放到 getWriter /getOutputStream 之前， 否则可能设置失效；

代码示例

1.设置响应状态码

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>设置状态码</h3>
    <input type="text" id="status">
    <br>
    <button onclick="setStatus()">提交</button>
</body>
<script>
    function setStatus(){
        //js中发请求：（1）ajax （2）直接修改地址栏URL
        let status = document.querySelector("#status");
        //后端将文本框输入的值作为响应状态码
        window.location.href= "response?status="+status.value;
    }
</script>
</html>

后端代码：

package response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/response")
public class ResponseStudyServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //获取请求发送的queryString数据：status=xxx
        String status = req.getParameter("status");
        resp.setStatus(Integer.parseInt(status));
        resp.getWriter().write("响应状态码设置成功");

    }
}

启动Tomcat 后，页面如下所示：
在这里插入图片描述

将 404 状态码进行提交后，fiddler抓包工具可查看到如下信息：
在这里插入图片描述

2.设置响应头

修改前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>设置状态码</h3>
    <input type="text" id="status">
    <br>
    <button onclick="setStatus()">提交</button>


    <h3>设置响应头</h3>
    <a href="response">设置</a>
</body>
<script>
    function setStatus(){
        //js中发请求：（1）ajax （2）直接修改地址栏URL
        let status = document.querySelector("#status");
        //后端将文本框输入的值作为响应状态码
        window.location.href= "response?status="+status.value;
    }
</script>
</html>

修改后端代码：

package response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/response")
public class ResponseStudyServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求发送的queryString数据：status=xxx
        String status = req.getParameter("status");
        //当请求数据中包含需要设置状态码，才会执行
        if (status != null) {
            resp.setStatus(Integer.parseInt(status));
            resp.getWriter().write("响应状态码设置成功");
        }
        //设置响应头的键值对，键可以是标准的HTTP响应头的键，也可以是自定义的
        //响应状态码是 301，302，307，响应头有location字段，才是重定向
        resp.setHeader("location","http://www.baidu.com" );
        resp.setHeader("username","晓茹");
    }
}

重新启动Tomcat ，刷新页面：
在这里插入图片描述

fiddler 抓包结果：
在这里插入图片描述
会发现设置了location字段，但并没有跳转，发现响应状态码为200（原因：只有3xx的状态码才会重定向）；

注意：

  • 若响应头name键已有，就会覆盖原有的键值对；
  • addHeader ，当name键已存在时，不会覆盖，会添加一个新的；

3.设置响应内容

（1）响应一个网页（简单HTML）

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>响应正文为简单的html网页</h3>
    <a href="html?type=1">查看</a>
</body>
</html>

后端代码：

package response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/html")
public class HtmlTypeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //响应html:设置响应的content-type
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter pw = resp.getWriter();

        //获取queryString中，type的值
        String type = req.getParameter("type");
        if("1".equals(type)){
            //返回简单的html
            pw.println("<h3>获取网页成功</h3>");
        }
    }
}

重新启动，刷新页面，点击跳转：

在这里插入图片描述

（2）响应一个网页（复杂HTML）

前端代码：

 <body>
 <h3>响应正文为复杂的html（动态变化的）</h3>
    <input type="text" id="username" placeholder="输入姓名">
    <br>
    <button onclick="toWelcome()">跳转</button>
</body>
<script>
	    function toWelcome(){
        let username = document.querySelector("#username");
        window.location.href = "html?type=2&username=" +username.value;
    }
</script>

后端代码：

package response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/html")
public class HtmlTypeServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //响应html:设置响应的content-type
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter pw = resp.getWriter();

        //获取queryString中，type的值
        String type = req.getParameter("type");
        if("1".equals(type)){
            //返回简单的html
            pw.println("<h3>获取网页成功</h3>");
        }else if("2".equals(type)){
            //返回复杂的html
            //html?type=2&username=xxx
            String username = req.getParameter("username");
            pw.println("<p>");
            pw.println("欢迎你："+username);
            pw.println("</p>");
        }
    }
}

启动Tomcat ，刷新页面：

输入Java小菜鸟，点击跳转：
在这里插入图片描述
当输入另一个姓名(张三)时：
在这里插入图片描述
思考：如上Java代码中，写入了许多HTML代码，这样开发好嘛？

答案是肯定不好的，缺点：耦合性太强（两个完全不同的编程语言在一起开发），导致维护性和可扩展性变差！
解决方案：（1）模板技术（也存在一些问题） （2）进一步产生ajax技术；

返回已有的一个网页

1.重定向

前端代码：

<body>
   <h3>重定向到request.html</h3>
   <a href="goto?type=1">跳转</a>
 </body>

后端代码：

package response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/goto")
public class GoToServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //重定向到request.html
        //goto?type=xxx
        String type = req.getParameter("type");
        if("1".equals(type)){
            //重定向
            //设置响应状态码：301
            //设置location字段
            resp.setStatus(301);
            resp.setHeader("Location","request.html");
            //以上代码可简化为：
           // resp.sendRedirect("request.html");
        }
    }
}

启动Tomcat，点击跳转，URL地址栏由http://localhost:8080/servlet-study/response.html跳转到http://localhost:8080/servlet-study/resquest.html

结果如下所示：URL地址栏发生了变化
在这里插入图片描述
小结：

特点：URL地址栏会发生变化，会发起两次请求：
原理：
第一次返回301、302、307响应状态码及响应头location：网页的地址；
第二次：浏览器自动跳转到location设置的地址；
可以用在登陆成功后跳转到某个页面！

2.转发

前端代码：

<body>
    <h3>转发到request.html</h3>
    <a href="goto?type=2">跳转</a>
 </body>

修改后的后端代码：

package response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/goto")
public class GoToServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //重定向到request.html
        //goto?type=xxx
        String type = req.getParameter("type");
        if("1".equals(type)){
            //重定向
            //设置响应状态码：301
            //设置location字段
            resp.setStatus(301);
            resp.setHeader("Location","request.html");
            //以上代码可简化为：
           // resp.sendRedirect("request.html");
        }else if("2".equals(type)){
            //转发
            req.getRequestDispatcher("request.html")
                    .forward(req,resp);
        }
    }
}

启动Tomcat,刷新页面：
在这里插入图片描述
会发现URL地址栏并没有发生变化！！！

小结：

特点：URL地址栏不会发生变化，只有一次请求；
原理：当次请求servlet时，由servlet获取到转发路径的资源，并把这个路径的内容设置到响应正文；

返回一个文件

需要设置一下 content-Type 和 content-Length ，然后将文件的二进制数据放在响应正文即可；

渲染展示与下载

示例：图片与音乐

前端代码：

<body>
   <h3>获取一个图片（渲染展示）</h3>
    <img src="file?type=photo&show=1">
    <h3>获取一个音乐（渲染展示）</h3>
    <audio src="file?type=music&show=1" controls></audio>

    <h3>获取一个图片（下载）</h3>
    <a href="file?type=photo&show=0">下载</a>
    <h3>获取一个音乐（下载）</h3>
    <a href="file?type=music&show=0">下载</a>

 </body>

后端代码：

package response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.OutputStream;
import java.nio.file.Files;

@WebServlet("/file")
public class FileServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // 获取响应对象的字节输出流
        OutputStream os = resp.getOutputStream();

        // 返回的文件类型：1.图片
        String type = req.getParameter("type");
        // 返回时的操作：1.渲染 2.下载
        String show = req.getParameter("show");

        File file = null;

        // <img src="file?type=photo&show=1">
        if("photo".equals(type)){//返回图片
            if("1".equals(show)) {
                resp.setContentType("image/jpeg");//jpg格式
            }else {
            //文件下载
                resp.setContentType("application/octet-stream");
            }
            file = new File("D:\\servlet-study\\src\\main\\resources\\doge.jpg");

            //<audio src="file?type=music&show=1" controls></audio>
        }else if("music".equals(type)){//返回音乐
            if("1".equals(show)) {
                resp.setContentType("audio/mp3");//mp3格式
            }else {
                resp.setContentType("application/octet-stream");
            }
            file = new File("D:\\servlet-study\\src\\main\\resources\\ 晴天.mp3");
        }


        //返回一个文件类型：Content-Length，body
        byte[] data = Files.readAllBytes(file.toPath());
        resp.setContentLength(data.length);//=setHeader("Content-Length", xxx)
        os.write(data);
    }
}

启动Tomcat ,刷新页面，渲染方式如下：

在这里插入图片描述

下载方式如下：

在这里插入图片描述
打开文件，修改文件后缀名即可查看图片；
在这里插入图片描述

http 菜鸟教程：查看 content-type 对应格式；

思考：图片、音乐、视频等都是静态文件，直接放在webapp 下，就可以直接访问，还需要servlet来返回嘛？

’
如果文件总的大小非常大，放在web应用的webapp下就不合适（打包比较费劲），但通过servlet去读取本地其他地方的文件来返回就比较合适；

返回 json 数据

常用于ajax请求，返回一些数据，用于动态的填充网页；

前端代码：

 <body>
 <h3>获取ajax响应数据，动态生成网页内容</h3>
    <button onclick="gen()">试试呗</button>
    <div id="content"></div>
</body>
<script>
    function gen(){
        let content = document.querySelector("#content");
        ajax({
            url: "ajax-response",
            method: "get",
            callback: function(status, resp){
                console.log(resp);//resp是一个字符串
                //转换为json对象
                let array = JSON.parse(resp);
                for(json of array){//遍历
                    //每一个json对象，创建一个dom来保存信息
                    let p = document.createElement("p");
                    p.innerHTML = json.from+" 对 "+json.to+" 说："+json.info;
                    content.appendChild(p);
                }
            }
        });
    }

    function ajax(args){//var ajax = function(){}
        let xhr = new XMLHttpRequest();
        // 设置回调函数
        xhr.onreadystatechange = function(){
            // 4: 客户端接收到响应后回调
            if(xhr.readyState == 4){
                // 回调函数可能需要使用响应的内容，作为传入参数
                args.callback(xhr.status, xhr.responseText);
            }
        }
        xhr.open(args.method, args.url);
        //如果args中，contentType属性有内容，就设置Content-Type请求头
        if(args.contentType){//js中，if判断，除了判断boolean值，还可以判断字符串，对象等，有值就为true
            xhr.setRequestHeader("Content-Type", args.contentType);
        }
        //如果args中，设置了body请求正文，调用send(body)
        if(args.body){
            xhr.send(args.body);
        }else{//如果没有设置，调用send()
            xhr.send();
        }
    }
</script>

后端代码：

package response;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/ajax-response")
public class AjaxJsonServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Message> messages = new ArrayList<>();
        Message m1 = new Message("花花", "小菜鸟", "你一定可以顺利毕业");
        Message m2 = new Message("小菜鸟", "花花", "我肯定行!!!");
        messages.add(m1);
        messages.add(m2);
        ObjectMapper mapper = new ObjectMapper();
        //把Java对象，转换为一个json字符串。list和数组会转换为[]，一个对象{成员变量名: 值}
        String json = mapper.writeValueAsString(messages);
        System.out.println("转换的json字符串："+json);

        //设置json可以不设置Content-Length，tomcat会设置
        resp.setContentType("application/json; charset=utf-8");
        resp.getWriter().println(json);
    }

    static class Message{
        private String from;//谁
        private String to;//对谁
        private String info;//说了什么


        //构造方法
        public Message(String from, String to, String info) {
            this.from = from;
            this.to = to;
            this.info = info;
        }
        //getter与setter
        public String getFrom() {
            return from;
        }

        public void setFrom(String from) {
            this.from = from;
        }

        public String getTo() {
            return to;
        }

        public void setTo(String to) {
            this.to = to;
        }

        public String getInfo() {
            return info;
        }

        public void setInfo(String info) {
            this.info = info;
        }
    }
}

启动Tomcat，打开网页，查看：
在这里插入图片描述
点击试试呗按钮，网页显示：
在这里插入图片描述

后端输出：
在这里插入图片描述

请求响应流程小结

在这里插入图片描述

简单来说就是：

  1. 客户端浏览器发起HTTP请求

客户端浏览器发起请求的方式：
（1）queryString：
（2）表单：
（3）form-data：
（4）json：

如下表所示：

在这里插入图片描述

  1. 服务端进行处理

服务端处理步骤：
（1）通过 HttpServletRequest 先获取到请求数据；

获取方式queryString表单form-datajson
getParameter√√可以获取简单类型
getPart√（上传的文件）
getInputStream(可以获取任意格式的请求正文的数据）√

注意：json字符串中的键需要和自定义类型中的成员变量名一致（一般为自定义格式）！

（2）根据请求数据进行校验，业务逻辑处理（如：数据库操作或者根据请求数据的某个字段，执行不同的逻辑，如上面的type=1，返回简单的html，type=2，返回动态变化的 html）；
(3)返回响应的内容；内容有：

  • 网页：一般使用模板技术，而不是在servlet拼接动态的html；
  • 文件：根据需要；
  • json：前端发送的是ajax请求；

3.返回HTTP响应给客户端

客户端接收并处理服务端HTTP响应

三种方式：

（1）网页：渲染方式（浏览器自动完成）；
（2）文件：下载或渲染（浏览器自动完成）
（3）json：JavaScript 写 ajax 代码完成；

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码（适用于 uniapp 微信小程序项目，源代码直接开箱即用）超级详细的代码及注释

uniapp - 编译微信小程序项目的微信授权登录、获取微信手机号登录、最新版微信直接登录、手机与验证码登录的示例源码（适用于 uniapp 微信小程序项目，源代码直接开箱即用）超级详细的代码及注释

效果图 uniapp 项目编译微信小程序，一些常见的登录方式及源代码，示例代码干净整洁无BUG拿来即用。 本文示例实现了 uniapp 微信小程序项目的登录功能，包含微信授权登录、获取微信手机号登录、最新直接登录等， 你可以选择一个，直接复制源代码，稍微改改就能应用到你的项目…
阅读更多...
后台管理系统

后台管理系统

后台管理系统主要是我们内部人员使用的一款用来管理我们产品的一个系统&#xff0c;然后呢&#xff0c;我们今天写的呢是一个电商的后台管理系统。主要是可以用来管理我们的用户还有我们是商品的。 我们这个系统呢采用的是一个前后端分离的模式&#xff0c;主要是使用后端给我…
阅读更多...
Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题

Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题

在前两天进行页面全屏时&#xff0c;一切都还好好的&#xff0c;可当使用element-ui中的el-select时&#xff0c;下拉菜单却怎么也显示不出来&#xff0c;但只要退出全屏状态&#xff0c;立马就好。 非全屏时&#xff1a; 全屏时&#xff1a; 开始我以为是层级问题&#xff0…
阅读更多...
前端加载高德离线地图的解决方案

前端加载高德离线地图的解决方案

核心是需要下载地图瓦片放在本地&#xff0c;脱离在线地图服务&#xff0c;实现离线加载地图。使用BIGMap工具下载地图离线瓦片到本地 下载地址&#xff1a;http://www.bigemap.com/reader/download/detail201802015.html BIGEMAP GIS Office-全能版需要注册试用版&#xff08;…
阅读更多...
web前端面试宝典——带你直击面试重难点（40个经典题目，涵盖近90%的考点，码字2w，干货满满！）

web前端面试宝典——带你直击面试重难点（40个经典题目，涵盖近90%的考点，码字2w，干货满满！）

系列文章目录 JavaScript 知识梳理&#xff0c;收录了web前端面试 95%以上 的高频考点&#xff0c;满满的干货。给你做一个高效的知识梳理&#xff0c;为你的面试保驾护航&#xff01; 内容参考链接HTML & CSS 篇HTML & CSS 篇JavaScript 篇&#xff08;一&#xff09;…
阅读更多...
【微信小程序】条件渲染和列表渲染

【微信小程序】条件渲染和列表渲染

&#x1f352;&#x1f352; 观众老爷们好啊&#xff0c;牛牛又更新了&#xff0c;上文我们详细了解了微信小程序中的事件绑定&#xff0c;那么今天我们就来讲讲WXML语法中的列表渲染和条件渲染&#xff0c;它俩也是非常重要的知识点&#xff0c;赶紧学起来吧。 &#x1f352;&…
阅读更多...
如何更改ElementUI组件的图标大小以及标签属性

如何更改ElementUI组件的图标大小以及标签属性

话不多说&#xff0c;直接上菜。 ElementUI提供的Rate评分组件的默认大小是这样的 图标太小了&#xff0c;想设置宽高、行高、尺寸&#xff0c;但代码不起作用。 打开浏览器调试&#xff0c;发现是用font-size设置才有用。 由此代码存在优先级问题&#xff0c;要提高优先级。…
阅读更多...
vscode里面使用vue的一些插件，方便开发

vscode里面使用vue的一些插件，方便开发

1、vue 2 Snippets &#xff08;vue语法提示&#xff09; vue提示这个也可以 1.1 Vue VSCode Snippets 2、vetur Vetur支持.vue文件的语法高亮显示&#xff0c;除了支持template模板以外 3、Element UI Snippets(饿了么的提示) 4、indent-rainbow&#xff08;缩进高亮提示) 5…
阅读更多...
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用

Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用

一、效果图 目前10种筛选类型 看看是否是你需要的&#xff0c;本文可能有点长 &#xff0c;我尽可能的给讲清楚&#xff0c;包括源码附上 二、无聊发言 点击当前行跳转部分数据后缀追加图标某列数据根据状态增加颜色标识 三、前言 实现图中的表格&#xff0c;特定的两个要求&…
阅读更多...
css-两种画弧线方法

css-两种画弧线方法

第一种&#xff1a;::after <template><view><view class"bg"></view></view> </template> <style> .bg{background-color: pink; } .bg::after{content: ;position: absolute;width: 160%;height: 100px;background: sk…
阅读更多...
多项目版本管理：monorepo 策略

多项目版本管理：monorepo 策略

monorepo 是什么 一个产品会有多个项目&#xff0c;每个项目之间会存在版本同步的问题&#xff0c;如何在其中一个项目发布上线后&#xff0c;保证每个项目版本升级后的版本同步问题&#xff0c;提出的解决方案就是 monorepo 策略。 monorepo 是一种将多个项目代码存储在一个…
阅读更多...
【小程序项目开发-- 京东商城】uni-app之商品列表页面 （上）

【小程序项目开发-- 京东商城】uni-app之商品列表页面 （上）

&#x1f935;‍♂️ 个人主页: 计算机魔术师 &#x1f468;‍&#x1f4bb; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 该文章收录专栏 ✨ 2022微信小程序京东商城实战 ✨ 文章目录一、前言介绍二、创建goodlist 分支&#xff08;选读*)三、商品列…
阅读更多...
H5页面跳转小程序的三种方式

H5页面跳转小程序的三种方式

文章目录前言一、web-view标签返回小程序1.小程序启动页面只写web-view标签跳转到授权页面。2.编写auth.html3、把auth.html放到服务器就可以测试访问&#xff0c;打开小程序默认进入启动页面中的webview跳转到H5&#xff0c;授权成功后&#xff0c;通过wx.miniProgram.reLaunc…
阅读更多...
Vue自定义网页顶部导航栏

Vue自定义网页顶部导航栏

Vue自定义web网页顶部导航栏 说明&#xff1a;此组件是为论坛类项目定制的一个实用的顶部导航栏&#xff0c;当然也可以用于其他的Web项目&#xff0c;只需要稍作修改便可以达到想要的效果。其中导航栏包含了搜索栏&#xff0c;用户头像&#xff0c;以及基本的导航标题。导航栏…
阅读更多...
uniapp小程序自定义顶部导航栏，输入框软键盘把顶部顶上去的解决方法

uniapp小程序自定义顶部导航栏，输入框软键盘把顶部顶上去的解决方法

首先在小程序input标签增加:adjust-position"false"的属性&#xff0c;然后已经可以把软键盘不使上方顶出&#xff0c;但是输入框也会因此被遮挡 解决方法&#xff1a;在input输入框聚焦的方法中增加操作 focus"inputBindFocus" 定义方法 inputBindFoc…
阅读更多...
【vue3】基础概念的介绍

【vue3】基础概念的介绍

⭐【前言】 首先&#xff0c;恭喜你打开了一个系统化的学习专栏&#xff0c;在这个vue专栏中&#xff0c;大家可以根据博主发布文章的时间顺序进行一个学习。博主vue专栏指南在这&#xff1a;vue专栏的学习指南 &#x1f973;博主&#xff1a;初映CY的前说(前端领域) &#x1f…
阅读更多...
Vue提升：理解vue中的 slot-scope=“scope“

Vue提升：理解vue中的 slot-scope=“scope“

slot是插槽&#xff0c;slot-scope“scope“语义更加明确&#xff0c;相当于一行的数据&#xff0c;在实际开发中会碰到如下的场景 这个工作状态是变化的&#xff0c;而我们就可以通过后端返回的具体值来判断这里应该显示什么样的内容&#xff0c;具体代码如下 <el-table-co…
阅读更多...
利用vue实现登陆界面及其跳转

利用vue实现登陆界面及其跳转

1.做登录框 步骤&#xff1a; &#xff08;1&#xff09; 创建vue项目&#xff0c;使用vite方式创建&#xff1b;npm init vuelatest &#xff08;2&#xff09;项目结构&#xff1a; src&#xff1a;代码书写位置&#xff1b; app.vue&#xff1a;根组件&#xff1b; main…
阅读更多...
vue配置开发环境和生产环境

vue配置开发环境和生产环境

介绍 本文主要介绍开发、测试以及生产环境的配置。&#xff08;以下内容可根据需求进行配置&#xff09; 步骤 1、在src同级目录也就是根目录下新建文件&#xff1a;.env.development&#xff08;开发环境&#xff09;、.env.test&#xff08;测试环境&#xff09;、.env.pr…
阅读更多...
微信小程序授权获取用户信息之wx.getUserInfo 切换到 wx.getUserProfile的使用(已弃用)

微信小程序授权获取用户信息之wx.getUserInfo 切换到 wx.getUserProfile的使用(已弃用)

目录更新&#xff1a;wx.getUserProfile() 已弃用背景一、小程序获取用户信息相关接口调整说明二、wx.getUserProfile的使用1. 之前的wx.getUserInfo接口的使用2. 现在的wx.getUserProfile接口的使用三、wx.getUserInfo 切换到 wx.getUserProfile前后对比更多问题可参考&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023