JavaWeb 项目 --- 表白墙 和 在线相册

news2024/11/20 9:15:33

文章目录

  • 一. 案例: 表白墙 (使用模板引擎)
    • 1. 首先创建 maven 项目
    • 2. 创建好模板文件
    • 3. 使用数据库存储数据.创建一个类用于数据库连接
    • 4. 使用 监视器 来初始化 Thymeleaf
    • 5. 编写 Servlet 代码
      • ① 重写 doGet 方法
      • ② 重写 doPost 方法
      • ③ 实现 load 方法
      • ④ 实现 save 方法
    • 6. 注意事项
    • 7. 部署之后 运行截图
  • 二. 案例: 在线相册 (使用模板引擎)
    • 1. 首先创建 maven 项目
    • 2. 创建好模板文件
    • 3. 这是通过访问文件夹里的图片的
    • 4. 使用 监视器 来初始化 Thymeleaf
    • 5. 编写加载页面的 Servlet代码
      • 创建一个类,重写 doGet 方法
      • 实现 loadImage 方法
    • 6. 编写提交图片的 Servlet 代码
      • ① 创建一个类,重写 doPost 方法
    • 7. 注意事项
    • 8. 部署之后 运行截图

一. 案例: 表白墙 (使用模板引擎)

1. 首先创建 maven 项目

引入需要的依赖,创建必要的目录
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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>表白墙</title>
</head>
<body>
    <form action="confession" method="post">
        <div class="parent">
            <div id="wall">表白墙</div>
            <div id="remind">输入后点击提交,会将信息显示在表格中</div>
            <div class="one"><span class="two">谁:</span><input type="text" class="text" name="from"></div>
            <div class="one"><span class="two">对谁:</span><input type="text" class="text" name="to"></div>
            <div class="one"><span class="two">说什么:</span><input type="text" class="text" name="message"></div>
            <div class="one"><input type="submit" value="提 交" class="press"></div>
            <div class="elem" th:each="message : ${messages}">
                <span th:text="${message.from}">wz</span>对<span th:text="${message.to}">zw</span>说: <span th:text="${message.message}">wzz</span>
            </div>
        </div>
    </form>
    
    <style>
        /* 去除浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 设置总宽度 */
        .parent {
            width: 400px;
            margin: 0 auto;
        }
        /* 设置表白墙样式 */
        #wall {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
            margin: 5px;
        }
        /* 设置提示信息样式 */
        #remind{
            font-size:13px;
            text-align: center;
            color:gray;
            margin: 5px;
        }
        /* 设置弹性布局 */
        .one {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
        }
        /* 设置文字内容 */
        .two {
            width: 100px;
            line-height: 40px;
        }
        /* 设置输入框 */
        .one .text{
            width: 200px;
            height: 20px;
            padding-left: 3px;
        }
        /* 提交按钮的设置 */
        .one .press{
            width: 304px;
            height: 40px;
            color:white;
            background-color: orange;
            border-radius: 5px;
            border: none;
        } 
        /* 设置鼠标点击的时候改变颜色 */
        .one .press:active{
            background-color: red;
        }
        /* 提交之后内容的设置 */
        .elem {
            text-align: center;
            margin: 15px;
        }
    </style>
</body>
</html>

3. 使用数据库存储数据.创建一个类用于数据库连接

ConnectionDB 类

import com.mysql.cj.jdbc.MysqlDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class ConnectionDB {
    private static final String URL = "jdbc:mysql://127.0.0.1:3306/confessionWall2?characterEncoding=utf-8&useSSL=true&serverTimezone=UTC";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "0000";

    private static volatile DataSource dataSource = null;

    public static DataSource getDataSource() {
        if(dataSource == null){
            synchronized (ConnectionDB.class){
                if(dataSource == null) {
                    dataSource = new MysqlDataSource();
                    ((MysqlDataSource) dataSource).setURL(URL);
                    ((MysqlDataSource) dataSource).setUser(USERNAME);
                    ((MysqlDataSource) dataSource).setPassword(PASSWORD);

                }
            }
        }
        return dataSource;

    }

    public static Connection getConnection() throws SQLException {
        return getDataSource().getConnection();
    }

    public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){
        if(resultSet != null){
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(statement != null){
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(connection != null){
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

4. 使用 监视器 来初始化 Thymeleaf

ThymeleafConfig 类
注意加上注解

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;

@WebListener
public class ThymeleafConfig implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent servletContextEvent) {
        System.out.println("ServletContext 初始化完毕!");
        ServletContext context = servletContextEvent.getServletContext();
        TemplateEngine engine = new TemplateEngine();
        ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(context);
        resolver.setPrefix("/WEB-INF/template/");
        resolver.setSuffix(".html");
        resolver.setCharacterEncoding("utf-8");
        engine.setTemplateResolver(resolver);
        context.setAttribute("engine",engine);
    }

    @Override
    public void contextDestroyed(ServletContextEvent servletContextEvent) {

    }
}

5. 编写 Servlet 代码

首先创建一个 Confession 类

class Confession{
    public String from;
    public String to;
    public String message;
}

① 重写 doGet 方法

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        List<Confession> list = load();

        TemplateEngine engine = (TemplateEngine) getServletContext().getAttribute("engine");
        WebContext webContext = new WebContext(req,resp,getServletContext());
        webContext.setVariable("messages",list);
        engine.process("confessionwall",webContext, resp.getWriter());
    }

② 重写 doPost 方法

        resp.setContentType("text/html;charset=utf-8");
        Confession confession = new Confession();
        confession.from = req.getParameter("from");
        confession.to = req.getParameter("to");
        confession.message = req.getParameter("message");

        save(confession);
        resp.sendRedirect("confession");

③ 实现 load 方法

    private List<Confession> load() {
        List<Confession> list = new ArrayList<>();
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            connection = ConnectionDB.getConnection();
            String sql = "select * from confession";
            statement = connection.prepareStatement(sql);
            resultSet = statement.executeQuery();
            while(resultSet.next()){
                Confession confession = new Confession();
                confession.from =resultSet.getString("from");
                confession.to = resultSet.getString("to");
                confession.message = resultSet.getString("message");
                list.add(confession);
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            ConnectionDB.close(connection,statement,resultSet);
        }
        return list;
    }

④ 实现 save 方法

    private void save(Confession confession) {
        Connection connection = null;
        PreparedStatement statement = null;
        try{
            connection = ConnectionDB.getConnection();
            String sql = "insert into confession values (?,?,?)";
            statement = connection.prepareStatement(sql);
            statement.setString(1,confession.from);
            statement.setString(2, confession.to);
            statement.setString(3,confession.message);
            int ret = statement.executeUpdate();
            if(ret == 1){
                System.out.println("插入成功");
            }else{
                System.out.println("插入失败");
            }
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        } finally {
            ConnectionDB.close(connection,statement,null);
        }
    }

6. 注意事项

  1. 注意模板引擎
    在这里插入图片描述

  2. 注意 乱码的情况,要添加utf-8
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  3. 用数据库的方法存数据,要先创建好数据库

create database confessionWall2;

use confessionWall2;

create table confession(
    `from` varchar(1024),
    `to` varchar(1024),
    `message` varchar(1024)
);
  1. 还有一些必要的注解也要加上.
    在这里插入图片描述
    在这里插入图片描述

7. 部署之后 运行截图

浏览器输入对应的URL
在数据库为空的时候界面如下
在这里插入图片描述
在这里插入图片描述
在输入几个数据之后 如下
在这里插入图片描述
此时的数据库中表的内容
在这里插入图片描述
重新部署再进入URL发现数据还是存在.
在这里插入图片描述

二. 案例: 在线相册 (使用模板引擎)

1. 首先创建 maven 项目

引入必要的依赖,已经必要的目录
在这里插入图片描述
在这里插入图片描述

2. 创建好模板文件

image.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="nav">
        <form action="upload" method="POST" enctype="multipart/form-data" >
            <input type="file" name="myImage">
            <input type="submit" value="上传图片">
        </form>
    </div>
    <div class="parent">
            <!-- 第一组图片 -->
        <figure class="sample" th:each="image : ${images}"> 
            <img th:src="${image.url}" alt="sample1" />
            <figcaption>
                <div>
                    <h2 th:text="${image.name}">Deconovo</h2>
                </div>
            </figcaption>
            <a th:href="${image.url}"></a>
        </figure>
    </div>
    
</body>
</html>

style.css

/* 引入文字样式库 */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
*{
    margin: 0 auto;
    padding: 0 auto;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height: calc(100% - 50px);
    background-color: #212121;
}
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    margin: 0;
    height: 100%;
}
.nav{
    background-color: rgba(255,255,255,0.3);
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
}
/* sample 部分的整体样式 */
.sample {
    font-family: 'Raleway', Arial, sans-serif;
    position: relative;
    overflow: hidden;
    margin: 10px;
    min-width: 230px;
    max-width: 315px;
    width: 100%;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    background-color: #000000;
}
.sample *,
.sample *:before,
.sample *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* 当过了 0.55s 过渡效果 */
    -webkit-transition: all 0.55s ease;
    transition: all 0.55s ease;
}
/* 图片部分的样式 */
.sample img {
    max-width: 100%;
    backface-visibility: hidden;
    vertical-align: top;
}
/* figcaption 用作文档中插图的图像，带有一个标题 */
.sample figcaption {
    position: absolute;
    bottom: 25px;
    right: 25px;
    padding: 5px 10px 10px;
}
/* 绘制线条 */
.sample figcaption:before,
.sample figcaption:after {
    height: 2px;
    width: 400px;
    position: absolute;
    content: '';
    background-color: #ffffff;
}
/* 上面一条线 */
.sample figcaption:before {
    top: 0;
    left: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
/* 下面一条线 */
.sample figcaption:after {
    bottom: 0;
    right: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
/* 绘制线条 */
.sample figcaption div:before,
.sample figcaption div:after {
    width: 2px;
    height: 300px;
    position: absolute;
    content: '';
    background-color: #ffffff;
}
/* 左面一条线 */
.sample figcaption div:before {
    top: 0;
    left: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* 右面一条线 */
.sample figcaption div:after {
    bottom: 0;
    right: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* 文字部分 */
.sample h2,
.sample h4 {
    margin: 0;
    text-transform: uppercase;
}
.sample h2 {
    font-weight: 400;
}
.sample h4 {
    display: block;
    font-weight: 700;
    background-color: #ffffff;
    padding: 5px 10px;
    color: #000000;
}
.sample a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
/* 当鼠标放到图片时的效果, .hover 仅演示需要，可自行取消 */
.sample:hover img,
.sample.hover img {
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: 0.5;
    opacity: 0.5;
}
.sample:hover figcaption:before,
.sample.hover figcaption:before,
.sample:hover figcaption:after,
.sample.hover figcaption:after,
.sample:hover figcaption div:before,
.sample.hover figcaption div:before,
.sample:hover figcaption div:after,
.sample.hover figcaption div:after {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.sample:hover figcaption:before,
.sample.hover figcaption:before,
.sample:hover figcaption:after,
.sample.hover figcaption:after {
    /* 过渡延时 0.15s */
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
/* 背景仅演示作用 */

3. 这是通过访问文件夹里的图片的

在webapp下创建一个文件夹 image,里面存放图片.
通过 getServletContext().getRealPath("/image") 来获取绝对路径
在这里插入图片描述

4. 使用 监视器 来初始化 Thymeleaf

这里的代码不变

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.templateresolver.ServletContextTemplateResolver;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;

@WebListener
public class ThymeleafConfig implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent servletContextEvent) {
        System.out.println("ServletContext 初始化完毕");
        ServletContext context = servletContextEvent.getServletContext();
        TemplateEngine engine = new TemplateEngine();
        ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(context);
        resolver.setPrefix("/WEB-INF/template/");
        resolver.setSuffix(".html");
        resolver.setCharacterEncoding("utf-8");
        engine.setTemplateResolver(resolver);

        context.setAttribute("engine",engine);
    }

    @Override
    public void contextDestroyed(ServletContextEvent servletContextEvent) {

    }
}

5. 编写加载页面的 Servlet代码

创建一个 Image 类

class Image {
    public String name;
    public String url;
}

创建一个类,重写 doGet 方法

@WebServlet("/Image")
public class OnlineImageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        // 1. 扫描指定路径 /webapp/image 路径
        List<Image> images = loadImage();
        // 2. 构造到模板页面
        TemplateEngine engine = (TemplateEngine) getServletContext().getAttribute("engine");
        WebContext webContext = new WebContext(req,resp,getServletContext());
        webContext.setVariable("images",images);
        String html = engine.process("image",webContext);
        resp.getWriter().write(html);
    }
}

实现 loadImage 方法

注意使用 getRealPath 方法
以及注意使用 file.listFiles()方法

    private List<Image> loadImage() {
        List<Image> images = new ArrayList<>();
        // 首先得到 /webapp/image 的绝对路径
        ServletContext context = this.getServletContext();
        // 这里是将 webapp下的目录转换成一个绝对路径
        String path = context.getRealPath("/image");
        // 根据路径 看里面有哪些图片.
        File file = new File(path);
        File[] files = file.listFiles();
        for(File f:files){
            Image image = new Image();
            image.name = f.getName();
            image.url = "image/"+f.getName();
            images.add(image);
        }
        return images;
    }

6. 编写提交图片的 Servlet 代码

① 创建一个类,重写 doPost 方法

注意一定要加上注解@MultipartConfig

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

// 这个注解在上传文件的功能中是必要的
@MultipartConfig
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String path = getServletContext().getRealPath("/image");
        Part part = req.getPart("myImage");
        part.write(path + "/" + part.getSubmittedFileName());
        resp.sendRedirect("Image");
    }
}

7. 注意事项

  1. 主要是得到文件夹,找到路径的步骤复杂点.重点掌握这几种方法的使用
    在这里插入图片描述
    在这里插入图片描述

  2. 前后端约定好的名称要对应.
    在这里插入图片描述
    在这里插入图片描述

  3. 传文件需要加上注解,否则会报500的错误.@MultipartConfig

8. 部署之后 运行截图

文件中已经存了两个图片,一运行就可以看到这些图片
在这里插入图片描述
点击图片还能放大
在这里插入图片描述
上传图片,上传两个图片
在这里插入图片描述

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

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

相关文章

Vue中key的作用及原理

Vue中key的作用及原理

1. 先说结论 key在Vue是DOM对象的标识&#xff1b;进行列表展示时&#xff0c;默认key是index&#xff1b;如果数据只做展示使用&#xff0c;使用index作为key是没有任何问题的&#xff1b;如果使用index作为key&#xff0c;而后续操作会破坏顺序&#xff0c;一定会带来效率问…
阅读更多...
vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式

vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式

vue3 antd项目实战——修改ant design vue组件中table表格的默认样式&#xff08;二&#xff09;知识调用场景复现修改table表格的行样式一、rowClassName添加行样式二、表格的不可控操作写在最后知识调用 文章中可能会用到的知识链接vue3ant design vuets实战【ant-design-vu…
阅读更多...
解决：在 VSCode 中如何设置默认的浏览器为Chrome或Firefox

解决：在 VSCode 中如何设置默认的浏览器为Chrome或Firefox

1、问题描述&#xff1a; 在 VSCode 编辑器中&#xff0c;其一般默认打开的浏览器是 IE 浏览器&#xff0c;而我已经习惯使用 Chrome 浏览器&#xff0c;以及会遇到页面的调试等不同的问题&#xff0c;因此需要将 VSCode 的默认浏览器调整为 Chrome 浏览器&#xff1b; 2、操…
阅读更多...
【web前端开发】超详细讲解CSS盒子模型

【web前端开发】超详细讲解CSS盒子模型

文章目录1.盒子模型介绍2.内容3.边框4.内边距5.⭐盒子大小计算6.⭐内减模式7.外边距外边距的合并外边距的塌陷行内元素的垂直外边距8.⭐清除默认样式9.⭐版心居中1.盒子模型介绍 所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子&#xff0c;封装周围的HTML元素&#xff0c…
阅读更多...
使用Vue来完成项目中的首页导航+左侧菜单

使用Vue来完成项目中的首页导航+左侧菜单

目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 2.3.2 配置路由 2.3.3 修改LeftAside组件 2.3.4 修改Main组件 3. …
阅读更多...
8个不能错过的程序员必备网站，惊艳到我了！！！

8个不能错过的程序员必备网站，惊艳到我了！！！

程序员是一个需要不断学习的职业&#xff0c;不少朋友每天来逛CSDN、掘金等网站&#xff0c;但一直都抱着“收藏从未停止&#xff0c;学习从未开始”的态度&#xff0c;别骗自己了兄弟。在编程体系中&#xff0c;有很多不错的小工具&#xff0c;可以极大得提升我们的开发效率。…
阅读更多...
前端技术：解决执行npm install提示 xxx packages are looking for funding run `npm fund` for details的问题 详述npm fund

前端技术：解决执行npm install提示 xxx packages are looking for funding run `npm fund` for details的问题 详述npm fund

目录复现问题分析问题npm fund的命令npm fund的由来npm fund与npm ls解决问题参看文献&#x1f610; 我的博客&#xff0c;不仅帮你解决此类问题&#xff0c;还会告诉如何去分析定位问题。 复现问题 今天执行如下命令时&#xff1a; npm install报出如下问题&#xff1a; 2…
阅读更多...
cookie、localStorage和sessionStorage详解

cookie、localStorage和sessionStorage详解

目录 一、cookie 二、Web storage 1、localStorage 2、sessionStorage的使用 3、复杂数据类型储存 Web Storage带来的好处&#xff1a; 三、sessionStorage、localStorage和cookie的区别 一、cookie cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储…
阅读更多...
vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)

vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)

vue引入elementUi后打开页面报错 本人在用idea创建vue项目并引入elemenUi之后网页报错&#xff1a; Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype’)。 百度了很多办法都说是因为在vue3中引入了elementUi&#xff0c;vue3.0之后是不支持el…
阅读更多...
基于Java+Springmvc+vue+element员工信息管理系统详细设计

基于Java+Springmvc+vue+element员工信息管理系统详细设计

博主介绍&#xff1a;✌公司项目主程、全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,CSDN博客之星TOP100、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业设计✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f345;…
阅读更多...
React中实现插槽效果的方案

React中实现插槽效果的方案

文章目录React实现插槽children实现插槽props实现插槽React实现插槽 在开发中&#xff0c;我们抽取了一个组件&#xff0c;但是为了让这个组件具备更强的通用性&#xff0c;我们不能将组件中的内容限制为固定的div、span等等这些元素。 我们应该让使用者可以决定某一块区域到…
阅读更多...
项目部署，一点也不难！

项目部署，一点也不难！

目录 一、部署前准备 &#xff08;一&#xff09;前端多环境准备 &#xff08;二&#xff09;后端多环境准备 二、项目部署 &#xff08;一&#xff09;原始部署 1、前端部署 2、前端部署测试 3、后端部署 &#xff08;二&#xff09;宝塔 Linux 部署 1、前端部署 2…
阅读更多...
前端面试八股文--Vue篇（持续更新）

前端面试八股文--Vue篇（持续更新）

一. Vue2 篇 1.MVC MVVM区别 首先呢这是两种模式 MVC指的是 modal&#xff0c;view&#xff0c; controller MVVM 指的是 modal &#xff0c;view&#xff0c; view modal mvc和mvvm区别是&#xff1a;1、处理业务的模式不同&#xff0c;MVC里&#xff0c;View是可以直接访…
阅读更多...
在 Vue3 中使用 Vuex

在 Vue3 中使用 Vuex

本篇文章主要记录 Vue3 中使用 Vuex 的步骤和注意事项&#xff1a; 1、安装依赖库 npm install vuex --save-dev2、配置 Vuex 实例 对比 Vue2 和 Vue3 各自创建 Store 实例的区别&#xff1b; Vue2 是用 Vue.use(Vuex)注入 Vuex 插件&#xff0c;然后通过 new Vuex.Store(o…
阅读更多...
真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路，切实可行！

真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路，切实可行！

PS&#xff1a;想直接看解决方法的可以跳过前面的废话阶段从后往前看~ 前情回顾&#xff1a;萌新最近从Vue2转战Vue3&#xff0c;一边自学一遍自己做点娱乐项目练练手&#xff0c;这次Vue3项目权限管理用到动态路由&#xff0c;由于以前一直用的addRoutes()方法已经被废弃&…
阅读更多...
如何在Windows server 2012配置Web服务器

如何在Windows server 2012配置Web服务器

现在&#xff0c;我们浏览网页已经成为了一种常态&#xff0c;但是你知道网页是怎么运行的吗&#xff1f; 我们浏览网页&#xff0c;首先会打开浏览器&#xff0c;然后输入网页的地址&#xff08;当然这里现在已经可以不用我们自己输入地址了&#xff0c;一般现在就是直接搜索…
阅读更多...
在vite里获取env环境变量

在vite里获取env环境变量

在vite里获取env环境变量.env环境配置文件在cli项目中我们可以是配置.env.[mode]文件来配置环境变量在cli项目中使用.env.[mode]在vite中使用.env文件.env环境配置文件 在项目中总会遇到一些默认的配置,需要我们配置到静态文件中方便我们去获取,这时候就可以用到这个.env环境变…
阅读更多...
vue项目中使用vuedraggable

vue项目中使用vuedraggable

最近在学习一个可视化搭建的项目&#xff0c;里面用的拖拽就是draggable.js。看了几个中文的文档&#xff0c;有很多坑&#xff0c;可能是没有及时更新的原因。 VUe 建议去看vuedraggable的官方文档&#xff0c;只不过是英文的。官方文档&#xff1a;https://github.com/Sor…
阅读更多...
【HTML】筑基篇

【HTML】筑基篇

&#x1f348;作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f347;个人主页&#xff1a;亦世凡华、的csdn博客 &#x1f353;系列专栏&#xff1a;HTML专栏 &#x1f95d;推荐一款模拟面试刷题神器&#x1f525;&#xff1a;…
阅读更多...
echarts 定制legend内容，显示和位置

echarts 定制legend内容，显示和位置

echarts 定制legend内容&#xff0c;显示和位置1.type(当图例很多的时候可以用到)2.orient(图例的排版方向)3.top,bottom,left,right(图例在容器中的位置)4.width,height&#xff08;图例组件的大小&#xff09;;itemWidth,itemHeight(图例图标的大小)5. align&#xff08;图例…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023