【Vue+Element-UI】实现登陆注册界面及axios之get、post请求登录功能实现、跨域问题的解决

news2024/11/16 9:36:56

目录

一、实现登陆注册界面

1、前期准备

2、登录静态页实现

2.1、创建Vue组件

2.2、静态页面实现

2.3、配置路由

2.4、更改App.vue样式

2.5、效果

3、注册静态页实现

3.1、静态页面实现

3.2、配置路由

3.3、效果

二、axios

1、前期准备

1.1、准备项目

1.2、安装axios

1.3、更改端口

2、GET请求

2.1、导入axios

2.2、编写get请求

3、POST请求

3.1、get、post的区别

3.2、导入qs

3.3、编写post请求

3.4、优化处理

3.4.1、下载安装vue-axios

3.4.2、写入api模块添加全局配置

3.4.2.1、action.js

3.4.2.2、http.js

3.4.3、main.js配置vue-axios

3.4.3、使用封装后的axios发送请求

3.4.4、修改后的提交事件

三、跨域

1、什么是跨域问题

2、解决跨域问题

一、实现登陆注册界面

1、前期准备

使用vue-cli构建SPA项目:

  1. 进入你想创建项目的目录位置
  2. 使用命令vue init webpack 项目名，构建一个vue项目 
    vue init webpack element_ui_spa
  3. 使用命令npm install element-ui -S，添加Element-UI模块
    1. npm install element-ui -S：后面有 -s，他们分别是：
      1. -g：将依赖下载node_global全局依赖。
      2. -d：下载依赖da到spa工程中，不会参与打包。
      3. -s：下载依赖da到spa工程中，会参与打包。
  4. 打开项目的package.json文件可查看具体添加模块信息。
  5. 在src目录下创建views目录（该目录用于存放vue组件）。
  6. 在main.js中引入element-ui模块
    // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'
import router from './router'

// 新添加3----实例进行一个挂载
Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

    在指定位置!!!在指定位置!!!在指定位置!!!---添加三行代码

2、登录静态页实现

2.1、创建Vue组件

在我们src里面创建我们的登录注册的vue组件。

2.2、静态页面实现

设置我们的html样式，当然我们也可以在组件 | Element里面自己进行一个自定义

<template>
  <div class="Login">
    <el-form class="login-container">
      <h1 class="title">用户登录</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="gotoRegister()">用户注册</el-link>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      msg: "登录界面",
      username: "",
      password: ""
    }
  },
  methods: {
    gotoRegister() {
      this.$router.push("/Register");
    },
    doSubmit() {

    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url(https://pic4.zhimg.com/v2-c5880f5a6d44766feb085c3ae94899c7_r.jpg);
  //background-image: url();
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

2.3、配置路由

在router/index.js中修改vue项目默认显示路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: Login
    }
  ]
})

2.4、更改App.vue样式

更改原有<style>样式

<template>
  <div id="app">
    <!--    <img src="./assets/logo.png"><br>-->
    <br>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  widows: 100%;
  height: 100%;
}
</style>

2.5、效果

3、注册静态页实现

在登陆的基础上实现一样的操作

3.1、静态页面实现

<template>
  <div class="Register">
    <el-form class="login-container">
      <h1 class="title">用户注册</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="注册账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="注册密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="gotoLogin()">用户注册</el-link>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "Register",
  data() {
    return {
      msg: "注册界面",
      username: "",
      password: ""
    }
  },
  methods: {
    gotoLogin() {
      this.$router.push("/Login");
    },
    doSubmit() {

    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

3.2、配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Register',
      name: 'Register',
      component: Register
    }
  ]
})

3.3、效果

二、axios

使用SSM项目构建Java后台，模拟提供一个用户登录的action地址，Vue通过请求指定的用户登录接口。

1、前期准备

1.1、准备项目

需要准备自己做好的一个项目，比如SSM的项目、maven项目、SpringMVC的项目都可，如果不会写可以参考我以前的博客内容spring系列_无法自律的人的博客-CSDN博客，

1.2、安装axios

进入项目里面CMD窗口进行下载，必须要在你的项目文件路径里面进行CMD的窗口。

npm i axios -S

在我们的package.json里面可以看到我们下载的

1.3、更改端口

在config/index.js目录下修改vue项目运行端口

2、GET请求

2.1、导入axios

在登录的vue文件里面导入我们需要的axios。

import axios from 'axios'

2.2、编写get请求

测试的时候记得开启你的项目

//提交事件
    doSubmit() {
      //设置登录访问地址
      let url = "http://localhost:8080/ssm/user/userLogin";
      // 使用json格式进行传值
      let params = {
        username: this.username,
        password: this.password
      }
//get请求
      axios.get(url, {params: params}).then(r => {
        console.log(r);
        if (r.data.success) {//判断success是否为true
          // 为true给一个提示框
          this.$message({
            //message: '登陆成功',
            message: r.data.msg,
            type: 'success'
          });
        } else {
          this.$message({
            //message: '登陆失败',
            message: r.data.msg,
            type: 'warning'
          });
        }

      }).catch(e => {
        // console.log(e);
      });
    }

3、POST请求

3.1、get、post的区别

GET 请求和 POST 请求是两种常见的 HTTP 请求方法，它们的区别：

  1. 数据传输方式：GET 请求通过 URL 参数传输数据，而 POST 请求通过请求体传输数据。GET 请求的数据会附加在 URL 的末尾，可见于 URL 地址栏，而 POST 请求的数据则被放置在请求体中，不会在 URL 中暴露。
  2. 数据长度限制：由于 GET 请求的数据附加在 URL 中，URL 的长度有限制，一般约为 2048 个字符，超过该限制会导致 URL 过长，而 POST 请求则没有明确的数据长度限制。
  3. 安全性：GET 请求的参数以明文形式附加在 URL 上，因此不适合传输敏感信息，而 POST 请求的数据放置在请求体中，相对而言更安全。
  4. 缓存：GET 请求可以被浏览器缓存下来，可以被重复使用，而 POST 请求对浏览器不可缓存，每次都需要重新发送请求。
  5. 特殊字符处理：GET 请求会对特殊字符进行 URL 编码，如空格会被替换为 "%20"，而 POST 请求不会对特殊字符进行编码。
  6. 幂等性：GET 请求是幂等的，即多次相同的 GET 请求不会对服务器产生副作用，而 POST 请求不具有幂等性，每次 POST 请求都可能有副作用，如创建资源或修改数据。

3.2、导入qs

如上面的请求一样，怎么导入axios的，我们照样导入qs。

import qs from 'qs'

3.3、编写post请求

唯一和get请求不一样的是

  • get：axios.get(url, {params: params}).then(r => {}).catch(e => {});
  • post:axios.get(url,qs.stringify(params)).then(r => {}).catch(e => {});
//提交事件
    doSubmit() {
      //设置登录访问地址
      let url = "http://localhost:8080/ssm/user/userLogin";
      // 使用json格式进行传值
      let params = {
        username: this.username,
        password: this.password
      }
//post请求
      axios.post(url, qs.stringify(params)).then(r => {
        console.log(r);
        if (r.data.success) {//判断success是否为true
          // 为true给一个提示框
          this.$message({
            //message: '登陆成功',
            message: r.data.msg,
            type: 'success'
          });
        } else {
          this.$message({
            //message: '登陆失败',
            message: r.data.msg,
            type: 'warning'
          });
        }

      }).catch(e => {
        // console.log(e);
      });
    }

3.4、优化处理

3.4.1、下载安装vue-axios

在CMD命令窗口进行下载vue-axios。

3.4.2、写入api模块添加全局配置

在src目录下新建api文件夹，在下面建立两个文件action.js、http.js。

3.4.2.1、action.js
/**
 * 文件接口地址定义文件
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
  'SERVER': 'http://localhost:8080/ssm', //服务器访问地址
  'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆请求
  'SYSTEM_USER_DOREG': '/user/userRegister', //注册请求
  'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
    return this.SERVER + this[k];
  }
}
3.4.2.2、http.js
/**
 * vue项目对axios的全局配置
 */
import axios from 'axios'
import qs from 'qs'

//引入action模块，并添加至axios的类属性urls上
import action from '@/api/action'
axios.urls = action

// axios默认配置
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.baseURL = 'http://localhost:8080/j2ee15'; // 默认地址
axios.defaults.baseURL = action.SERVER;

//整理数据
// 只适用于 POST,PUT,PATCH，transformRequest` 允许在向服务器发送前，修改请求数据
axios.defaults.transformRequest = function(data) {
	data = qs.stringify(data);
	return data;
};


// 请求拦截器
axios.interceptors.request.use(function(config) {
	return config;
}, function(error) {
	return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function(response) {
	return response;
}, function(error) {
	return Promise.reject(error);
});

export default axios;
3.4.3、main.js配置vue-axios

在main.js文件中引入api模块和vue-axios模块

import axios from '@/api/http'                 
import VueAxios from 'vue-axios' 

Vue.use(VueAxios,axios)

3.4.3、使用封装后的axios发送请求

从Login.vue组件中移除导入的axios和qs模块

import axios from 'axios'
import qs from 'qs'
3.4.4、修改后的提交事件
doSubmit() {
      //设置登录访问地址
      let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
      // 使用json格式进行传值
      let params = {
        username: this.username,
        password: this.password
      }
      this.axios.post(url, params).then(r => {
        console.log(r);
        if (r.data.success) {//判断success是否为true
          // 为true给一个提示框
          this.$message({
            message: r.data.msg,
            type: 'success'
          });
        } else {
          this.$message({
            message: r.data.msg,
            type: 'warning'
          });
        }

      }).catch(e => {
      });

    }

三、跨域

1、什么是跨域问题

        跨域问题（Cross-Origin Resource Sharing，CORS）指的是在浏览器端，由于安全策略限制，不同源（域/协议/端口）之间的网页（或者Ajax请求）无法直接进行交互或访问对方的资源。同源策略是浏览器的一种安全机制，用于保护用户信息和防止恶意攻击。

        同源策略要求网页只能与相同源的资源进行交互，源（Origin）由协议、域名和端口号组成。当源不一致时，浏览器会阻止跨域的请求。例如，一个网页在域A中运行，试图通过JavaScript向域B发送AJAX请求，此时就会触发跨域问题。

2、解决跨域问题

在你的项目里编写跨域过滤器CorsFilter2。

package com.zking.ssm.util;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

/**
 * 配置tomcat允许跨域访问
 * 
 * @author Administrator
 *
 */
public class CorsFilter2 implements Filter {

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
	}

	@Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
			throws IOException, ServletException {
		HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;

		// Access-Control-Allow-Origin就是我们需要设置的域名
		// Access-Control-Allow-Headers跨域允许包含的头。
		// Access-Control-Allow-Methods是允许的请求方式
		httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
		httpResponse.setHeader("Access-Control-Allow-Headers", "responseType,Origin, X-Requested-With, Content-Type, Accept");
		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");

		//允许客户端处理一个新的响应头jwt
		//httpResponse.setHeader("Access-Control-Expose-Headers", "jwt,Content-Disposition");
		filterChain.doFilter(servletRequest, servletResponse);
	}

	@Override
	public void destroy() {

	}
}

在web.xml里面添加过滤器的配置，然后就能解决我的跨域问题了。

  <!--CrosFilter跨域过滤器-->
  <filter>
    <filter-name>corsFilter</filter-name>
    <filter-class>com.zking.ssm.util.CorsFilter2</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>corsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

我的分享就到这里，欢迎各位大佬在评论区讨论！！！

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

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

相关文章

pytorch学习------数据集的使用方式

pytorch学习------数据集的使用方式

一、前言 在深度学习中&#xff0c;数据量通常是都非常多&#xff0c;非常大的&#xff0c;如此大量的数据&#xff0c;不可能一次性的在模型中进行向前的计算和反向传播&#xff0c;经常我们会对整个数据进行随机的打乱顺序&#xff0c;把数据处理成一个个的batch&#xff0c…
阅读更多...
【力扣1464】数组中两元素的最大乘积

【力扣1464】数组中两元素的最大乘积

&#x1f451;专栏内容&#xff1a;力扣刷题⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、题目描述二、题目分析1、排序2、最值模拟 一、题目描述 题目链接&#xff1a;数组中两元素的最大乘积 给你一个整数数…
阅读更多...
针对 SAP 的增强现实技术

针对 SAP 的增强现实技术

增强现实技术是对现实世界的一种交互式模拟。这种功能受到各种企业和制造商的欢迎&#xff0c;因为它可以减少生产停机时间、快速发现问题并维护流程&#xff0c;从而提高运营效率。许多安卓应用都在探索增强现实技术。 使用增强现实技术&#xff08;AR&#xff09;的Liquid U…
阅读更多...
【Vue入门】语法 —— 事件处理器、自定义组件、组件通信

【Vue入门】语法 —— 事件处理器、自定义组件、组件通信

目录 一、事件处理器 1.1 样式绑定 1.2 事件修饰符 1.3 按键修饰符 1.4 常用控制符 1.4.1 常用字符综合案例 1.4.2 修饰符 二、自定义组件 2.1 组件介绍及定义 2.2 组件通信 2.2.1 组件传参&#xff08;父 -> 子&#xff09; 2.2.1 组件传参&#xff08;子 ->…
阅读更多...
【Leuanghing】ANSA入门——GUI界面介绍

【Leuanghing】ANSA入门——GUI界面介绍

【Leuanghing】ANSA入门——软件介绍 大家好&#xff01;今天为大家推荐一款软件 —— ANSA。ANSA是目前公认的全球最快捷的CAE前处理软件之一&#xff0c;也是一个功能强大的通用CAE前处理软件。 一、相关介绍 BETA CAE Systems S.A公司总部位地希腊的赛萨罗尼奇市(Thessalon…
阅读更多...
水平基准和垂直基准

水平基准和垂直基准

水平基准 针对不同的地理空间测量&#xff0c;水平基准可以是一个参考点或一个参考点集。在地球上&#xff0c;相同的位置上的点可能有不同的坐标&#xff0c;取决于使用了哪种基准。 水平基准用于测量地球上的位置&#xff08;position&#xff09;。因为地球不是一个完美的球…
阅读更多...
linux————zabbix搭建

linux————zabbix搭建

目录 一、zabbix的概述 二、构成 一、server 二、web页面 三、数据库 四、proxy 五、agent 三、zabbix监控对象 四、zabbix的常用术语 五、zabbix监控框架 一、zabbix——client架构 二、zabbix_proxy_client架构 六、zabbix部署 安装zabbix5.0存储库 ​编辑​编…
阅读更多...
flume安装及实战

flume安装及实战

flume官方下载地址&#xff1a;Welcome to Apache Flume — Apache Flume 一、flume安装 &#xff08;1&#xff09;解压至安装目录 tar -zxf ./apache-flume-1.9.0-bin.tar.gz -C /opt/soft/ &#xff08;2&#xff09;配置文件flume-env.sh cd /opt/soft/flume190/conf …
阅读更多...
Visual Studio 功能增强：CMake 目标视图

Visual Studio 功能增强：CMake 目标视图

Visual Studio 中的 CMake 目标视图&#xff0c;允许你按 CMake 目标可视化 CMake 项目结构&#xff0c;并生成指定的目标库和可执行文件。 为了使此视图更易于使用&#xff0c;我们实施了一些新的改进&#xff0c;使导航 CMake 目标比以往任何时候都更容易。这包括改进了到 C…
阅读更多...
网络安全——黑客（自学）

网络安全——黑客（自学）

想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01;&#xff01;&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队…
阅读更多...
通过人才测评系统来帮助Team Leader组建团队

通过人才测评系统来帮助Team Leader组建团队

作为HR除了对外招聘、培训、员工关系以外&#xff0c;如果有部门立项需要进行团队建设&#xff0c;也需要HR向领导推送相关简历&#xff0c;看似简单的过程&#xff0c;实际上也是困难重重&#xff0c;因为大多团建需求 都不是那么详细&#xff0c;然后挑简历的时候&#xff0c…
阅读更多...
9.22数电（触发器寄存器一些电路分析reg的思考）

9.22数电（触发器寄存器一些电路分析reg的思考）

用作存储元件的电路 新输入的信号可能使电路保持同样的状态也可能使电路进入另一种新的状态 输入信号置位与复位可以用于改变构成存储元件的电路状态 RS锁存器 通过或非门就是说输入信号中有一个是1&#xff0c;输出就的是0 在RS0时&#xff0c;RS对或非门的结果无影响&am…
阅读更多...
【多态】为什么析构函数的名称统一处理为destructor？

【多态】为什么析构函数的名称统一处理为destructor？

析构函数的名称统一处理为destructor的目的是为了解决析构函数的重写。 而这又引出了一个问题&#xff1a;为什么要进行析构函数的重写&#xff1f; 是为了下面这种情况&#xff1a; class Person { public:~Person() { cout << "~Person" << endl; } }…
阅读更多...
java：java.util.MissingResourceException: Cant find bundle for base name解决方式

java：java.util.MissingResourceException: Cant find bundle for base name解决方式

java&#xff1a;java.util.MissingResourceException: Cant find bundle for base name解决方式 1 前言 代码执行如下&#xff1a; ResourceBundle.getBundle("res.Message",Locale.getDefault(), ReadMyProps.class.getClassLoader());或 ResourceBundle.getBu…
阅读更多...
WPF Panel笔记

WPF Panel笔记

1、StackPanel默认垂直排列&#xff0c;不会自动换行&#xff0c;展示可能不全。改变内元素的排列方式&#xff0c;需要用orientation属性 2、wrapPanel默认横向排列&#xff0c;会自动换行。改变内元素的排列方式&#xff0c;需要用orientation属性。 3、DockPanel默认属性&am…
阅读更多...
获取文件上次访问时间

获取文件上次访问时间

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Java源码 public void testGetFileTime() {try {String string "E://test.txt";File file new File(string);Path path file.toPath();BasicFileAttributes ba…
阅读更多...
07_ElasticSearch：倒排序索引与分词Analysis

07_ElasticSearch：倒排序索引与分词Analysis

07_ElasticSearch&#xff1a;倒排序索引与分词Analysis 一、 倒排索引是什么&#xff1f;1.1 通过示例&#xff0c;简单理解下1.2 核心组成 二、倒排索引是怎么工作的&#xff1f;2.1 创建倒排索引2.2 倒排索引搜索 三、Analysis 进行分词3.1 Analyzer 由三部分组成3.2 Analyz…
阅读更多...
ARP协议-介于数据链路层和网络层之间的协议

ARP协议-介于数据链路层和网络层之间的协议

通过上一篇 IP协议 我们知道 目标IP目标网络 目标主机 &#x1f64b;‍ 也就是说 必须知道 接收方的接收方的 MAC地址 > 没有MAC地址无法封装 MAC帧 在网络层&#xff0c;我们可以知道目标主机的 IP 地址&#xff0c; 但是 我们不知道对方的MAC地址 。 在同一个网段&…
阅读更多...
Win10安装Docker Desktop并运行Tutorial示例

Win10安装Docker Desktop并运行Tutorial示例

背景 前段时间一个项目需要在开发环境直接使用 Docker &#xff0c;为了省事便计划在本地安装 Desktop 版的 Docker 。其实安装过程比较简单&#xff0c;可视化安装即可&#xff0c;主要是对安装与初步使用时遇到的问题做个记录。 下载安装 下载地址&#xff1a;https://dow…
阅读更多...
体验facechain

体验facechain

安装Anaconda 下载页面&#xff1a;https://www.anaconda.com/download/ Clone代码仓 git clone https://github.com/modelscope/facechain.git --depth 1 GIT_LFS_SKIP_SMUDGE1安装依赖 cd ./facechain pip install -r requirements.txt pip install -U openmim 运行 修改…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023