当前位置：首页 > news >正文

【javaweb】学习日记Day3 - Ajax 前后端分离开发入门

news 文章来源：https://blog.csdn.net/weixin_61639349/article/details/132280872 2025/2/13 0:07:42

一、Ajax

1、简介

2、Axios （没懂暂留）

（1）请求方式别名

（2）发送get请求

（3）发送post请求

（4）案例

二、前端工程化

1、Vue项目-目录结构

2、Vue项目-启动

（1）vscode页面启动

（2）cmd命令框启动

3、配置Vue端口号

4、Vue项目开发流程

三、Vue组件库 - Element

1、快速入门

（1）在main.js引入ElementUI组件库

（2）根据文档选择想要的皮肤复制代码

2、常用组件介绍

（1）Table 表格标签

（2）Pagination 分页标签

（3）Dialog 对话框

（4）Form 表单

（5）案例

四、Vue路由

1、概念

2、案例

① 配置路由路径

② 给侧栏标签添加标签

③ 在APP.vue添加

五、打包部署

一、Ajax

1、简介

概念：异步的JavaScript和XML
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应数据
异步交互：可以在不重新加载整个页面情况下，与服务器交换数据并更新部分网页端技术，如：搜索框联想功能，校验用户名

2、Axios （没懂暂留）

（1）请求方式别名

axios.get(url[，config])
axios.delete(url[，config])
axios.post(url[，data，config])
axios.put(url[，data，config])

（2）发送get请求

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{console.log(request.data);
})

（3）发送post请求

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/list","id=1").then(result=>{console.log(request.data);
})

<!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>Ajax-Axios</title><script src="axios-0.18.0.js"></script>
</head>
<body><input type="button" value="获取数据GET" onclick="get()"><input type="button" value="删除数据POST" onclick="post()"></body><script>function get(){//通过axios发送异步请求-getaxios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{console.log(request.data);})// axios(//     {//         method:"get",//         url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"//     }).then(result=>{//         console.log(request.data);//     })}function post(){//通过axios发送异步请求-postaxios.post("http://yapi.smart-xwork.cn/mock/169327/emp/list","id=1").then(result=>{console.log(request.data);})// axios(//     {//         method:post,//         url:"http://yapi.smart-xwork.cn/mock/169327/emp/list",//         data:"id=1"//     }).then(result=>{//         console.log(request.data);//     })}
</script>
</html>

（4）案例

<!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>Ajax-Axios-案例</title><script src="js/axios-0.18.0.js"></script><script src="js/vue.js"></script></head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>图像</th><th>性别</th><th>职位</th><th>入职日期</th><th>最后操作时间</th></tr><tr align="center" v-for="(emp,index) in emps"><td>{{index + 1}}</td><td>{{emp.name}}</td><td><img :src="emp.image" width="70px" height="50px"></td><td><span v-if="emp.gender == 1">男</span><span v-if="emp.gender == 2">女</span></td><td>{{emp.job}}</td><td>{{emp.entrydate}}</td><td>{{emp.updatetime}}</td></tr></table></div>
</body>
<script>new Vue({el: "#app",data: {emps:[]},mounted () {//发送异步请求,加载数据axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {this.emps = result.data.data;})}});
</script>
</html>

二、前端工程化

1、Vue项目-目录结构

2、Vue项目-启动

（1）vscode页面启动

（2）cmd命令框启动

npm run serve

3、配置Vue端口号

4、Vue项目开发流程

Vue组件文件以.vue结尾，每个组件由三部分组成

<template> 模板部分，生成HTML代码
<script> 控制模板的数据来源和行为
<style> css样式部分

<template><div id="app"><h1>{{message}}</h1></div>
</template><script>
export default{   //设置导出模块 可以在别处用import导入data(){return {message:"坚持不懈哇哇！"}},methods:{}
}
</script><style>#app{text-align: center;color: cadetblue;}
</style>

三、Vue组件库 - Element

Element 是优化版组件库（也就是炫彩ui组件皮肤）

1、快速入门

（1）在main.js引入ElementUI组件库

//引入Element ui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

（2）根据文档选择想要的皮肤复制代码

Element官方文档入口！Element - The world's most popular Vue UI framework

2、常用组件介绍

Alt+Shift+F 自动格式化！！！

（1）Table 表格标签

表格戳这→Element - The world's most popular Vue UI framework

<template><div><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},
};
</script><style>
</style>

（2）Pagination 分页标签

分页戳这→Element - The world's most popular Vue UI framework

<template><div><el-pagination layout="sizes,prev, pager, next,jumper,total" @size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"> </el-pagination></div>
</template><script>
export default {data() {return {};},methods: {handleSizeChange(x){alert("每页记录数变化"+x)},handleCurrentChange(x){alert("页码发生变化"+x)}}
};
</script><style>
</style>

（3）Dialog 对话框

对话框戳这→Element - The world's most popular Vue UI framework

<template><div><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-columnproperty="date"label="日期"width="150"></el-table-column><el-table-columnproperty="name"label="姓名"width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog></div>
</template><script>
export default {data() {return {gridData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},],dialogTableVisible: false,};},methods: {handleSizeChange(x) {alert("每页记录数变化" + x);},handleCurrentChange(x) {alert("页码发生变化" + x);},},
};
</script><style>
</style>

（4）Form 表单

表单戳这→Element - The world's most popular Vue UI framework

<template><div><el-button type="text" @click="dialogTableVisible = true">打开嵌套表单的Dialog</el-button><el-dialog title="填写详情" :visible.sync="dialogTableVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item label="即时配送"><el-switch v-model="form.delivery"></el-switch></el-form-item><el-form-item label="活动性质"><el-checkbox-group v-model="form.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源"><el-radio-group v-model="form.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></el-dialog></div>
</template><script>
export default {data() {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},dialogTableVisible:false,dialogFormVisible:false,};},methods: {onSubmit(){alert(JSON.stringify(this.form))}},
};
</script><style>
</style>

（5）案例

<template><div><el-container style="height: 700px; border: 1px solid #f6bcbc"><el-header style="font-size: 40px; background-color: #f8d7d7">智能容宝学习辅助系统</el-header><el-container><!-- 边框 --><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>学员信息管理</template><el-menu-item-group><el-menu-item index="1-1">2020届</el-menu-item><el-menu-item index="1-2">2021届</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><!-- 主页面 --><el-main><el-main><!-- 表单 --><el-form :inline="true" :model="searchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="searchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchForm.sex" placeholder="性别"><el-option label="男" value="boy"></el-option><el-option label="女" value="girl"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item><!-- 日期选择器 --><el-form-item><el-date-picker v-model="searchForm.date"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker>                  </el-form-item></el-form>
<br><!-- 表格 --><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="160"></el-table-column><el-table-column prop="sex" label="性别" width="120"></el-table-column><el-table-column prop="class" label="班级" width="200"></el-table-column><el-table-column prop="job" label="职务" width="220"></el-table-column><el-table-column prop="school" label="学校" width="250"></el-table-column><el-table-column prop="date" label="入学日期" width="220"></el-table-column><el-button type="primary" round size="mini">编辑</el-button><el-button type="danger" round size="mini">删除</el-button></el-table>
<br><!-- 分页 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page.sync="currentPage1":page-size="1000"layout="sizes,prev, pager, next,jumper,total":total="100"></el-pagination></el-main></el-main></el-container></el-container></div>
</template><script>
import axios from 'axios';export default {data() {return {tableData: [],searchForm:{name:"",sex:"",data:[]}};},methods:{onSubmit(){alert(JSON.stringify(this.searchForm))},handleSizeChange(x){alert("每页记录数变化"+x)},handleCurrentChange(x){alert("页码发生变化"+x)}},mounted()  //发送异步请求，获取数据{axios.get("").then((result)=>{this.tableData=result.data.data;});}
};
</script><style>
</style>

四、Vue路由

1、概念

<router-link to> 请求链接组件，浏览器会传递到该链接
<router-view> 动态视图组件，渲染展示对应路由路径

2、案例

通过Vue路由完成左侧菜单栏点击切换效果

① 配置路由路径

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/emp',name: 'emp',component: () => import('../views/item 2/EmpView.vue')  },{path: '/dept',name: 'dept',component: () => import('../views/item 2/DeptView.vue')}
]const router = new VueRouter({routes
})export default router

② 给侧栏标签添加<router-link to>标签

<el-aside width="230px" style="border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-submenu></el-menu>
</el-aside>

③ 在APP.vue添加 <router-view>

<template><div><router-view></router-view></div>
</template>

五、打包部署

Day03-16. 打包部署_哔哩哔哩_bilibili

step1：点击允许build，进行打包

step2：此时目录出现dist文件，右键

step3：将dist文件内容复制，粘贴到nginx安装目录下的html目录下

step4：双击nginx.exe即可，在页面输入localhost：80（端口号）回车即可

【javaweb】学习日记Day3 - Ajax 前后端分离开发入门

目录一、Ajax 1、简介 2、Axios （没懂暂留） （1）请求方式别名 （2）发送get请求 （3）发送post请求 （4）案例二、前端工程化 1、Vue项目-目录结构 2、…...

编程日记 2023/8/27 15:50:01

SQL注入漏洞复现：探索不同类型的注入攻击方法

这篇文章旨在用于网络安全学习，请勿进行任何非法行为，否则后果自负。准备环境 sqlilabs靶场安装：详细安装sqlmap详细教程_sqlmap安装教程_mingzhi61的博客-CSDN博客一、基于错误的注入注入讲解介绍基于错误的注入（Err…...

编程日记 2023/8/27 15:48:59

大彩串口屏使用记录

写在最前面屏幕型号 DC10600M070 IDE VisualTFT（官方） VSCode（lua编程） 用之前看一下官方那个1小时的视频教程就大概懂控件怎么用了，用官方的软件VisualTFT很简单本文只是简单记录遇到的一些坑 lua编辑器 VisualTF…...

编程日记 2023/8/27 15:47:58

Qt http 的认证方式以及简单实现

http 的认证方式基本认证（Basic Authentication）: 基本认证是最简单的HTTP认证方式。客户端在请求头中使用Base64编码的用户名和密码进行身份验证由于仅使用Base64编码，基本认证并不安全，因此建议与HTTPS一起使用，以…...

编程日记 2023/8/27 15:46:57

【图像分割】实现snake模型的活动轮廓模型以进行图像分割研究（Matlab代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/27 15:45:56

【MongoDB系列】1.MongoDB 6.x 在 Windows 和 Linux 下的安装教程（详细）

本文主要介绍 MongoDB 最新版本 6.x 在Windows 和 Linux 操作系统下的安装方式，和过去 4.x 、5.x 有些许不同之处，供大家参考。 Windows 安装进入官网下载 Mongodb 安装包，点此跳转，网站会自动检测当前操作系统提供最新的版本&…...

编程日记 2023/8/27 15:44:51

5.网络原理之初识

文章目录 1.网络发展史1.1独立模式1.2网络互连1.3局域网LAN1.3.1基于网线直连1.3.2基于集线器组建1.3.3基于交换机组建1.3.4基于交换机和路由器组建1.3.4.1路由器和交换机区别 1.4广域网WAN 2.网络通信基础2.1IP地址2.2端口号2.3认识协议2.4五元组2.5 协议分层2.5.1 分层的作用…...

编程日记 2023/8/27 15:43:50

【Linux】进程状态|僵尸进程|孤儿进程

前言本文继续深入讲解进程内容——进程状态。一个进程包含有多种状态，有运行状态，阻塞状态，挂起状态，僵尸状态，死亡状态等等，其中，阻塞状态还包含深度睡眠和浅度睡眠状态。个人主页&#xff…...

编程日记 2023/8/27 15:42:49

ASEMI快恢复二极管APT80DQ60BG特点应用

编辑-Z APT80DQ60BG参数描述： 型号：APT80DQ60BG 最大峰值反向电压(VRRM)：600V 最大直流阻断电压VR(DC)：600V 平均整流正向电流(IF)：80A 非重复峰值浪涌电流(IFSM)：600A 工作接点温度和储存温度(TJ, …...

编程日记 2023/8/27 15:41:48

【Python爬虫】使用代理ip进行网站爬取

前言使用代理IP进行网站爬取可以有效地隐藏你的真实IP地址，让网站难以追踪你的访问行为。本文将介绍Python如何使用代理IP进行网站爬取的实现，包括代理IP的获取、代理IP的验证、以及如何把代理IP应用到爬虫代码中。 1. 使用代理IP的好处在进行网站爬…...

编程日记 2023/8/27 15:40:47

识别图片中的文字

前言 PearOCR 是一款免费无限制网页版文字识别工具。优点如下： 免费：完全免费，没有任何次数、大小限制，可以无限使用； 安全：全部数据本地运算，所有图片均不会被上传； 智能&#xf…...

编程日记 2023/8/27 15:39:45

第七章：借阅管理【基于Servlet+JSP的图书管理系统】

借阅管理 1. 借书卡 1.1 查询借书卡借书卡在正常的CRUD操作的基础上，我们还需要注意一些特殊的情况。查询信息的时候。如果是管理员则可以查询所有的信息，如果是普通用户则只能查看自己的信息。这块的控制在登录的用户信息然后就是在Dao中处理的时候需…...

编程日记 2023/8/27 15:38:43

栈 #include <iostream> #include <stack>int main() {std::stack<int> intStack;// 压入元素到堆栈intStack.push(5);intStack.push(10);intStack.push(15);// 查看堆栈顶部元素std::cout << "Top element: " << intStack.top() <…...

编程日记 2023/8/27 15:37:41

自研分布式IM-HubuIM RFC草案

HubuIM RFC草案消息协议设计基本协议评估标准【性能】协议传输效率，尽可能降低端到端的延迟，延迟高于200ms用户侧就会有所感知【兼容】既要向前兼容也要向后兼容【存储】减少消息包的大小，降低空间占用率，一个字节在亿…...

编程日记 2023/8/27 15:36:40

tableau基础学习1：数据源与绘图

文章目录读取数据常用绘图方法1. 柱状图2. 饼图3. 散点图4. 热力图第一部分是一些较容易上手的内容，以及比较常见的可视化内容，包括：柱状图、饼图、散点图与热力图读取数据打开界面后，选择数据源之后就可以导入数据&#xf…...

编程日记 2023/8/27 15:35:37

探索经典算法问题与解决方案

探索经典算法问题与解决方案在计算机科学领域，有许多经典算法问题需要我们思考和解决。本文将深入介绍一些著名的经典算法问题，包括旅行商问题、背包问题的变种、N皇后问题、钢条切割问题、最大子数组和问题、最长公共子串问题以及矩阵连乘问题&#x…...

编程日记 2023/8/27 15:34:36

【Linux】DNS系统，ICMP协议，NAPT技术

遏制自己内心的知识优越感，才能让你发自内心的去尊重他人，避免狂妄自大，才能让你不断的丰富自己的内心。文章目录一、DNS系统1.DNS服务器返回域名对应的ip2.使用dig工具分析DNS过程3.浏览器中输入url后发生的事情？ 二、ICMP协议…...

编程日记 2023/8/27 15:33:35

BI技巧丨Window应用之同环比

白茶曾介绍过OFFSET可以用来解决同环比的问题，其实微软最近推出的开窗函数WINDOW也可以用来解决同环比。 WINDOW函数基础语法 WINDOW ( from[, from_type], to[, to_type][, <relation>][, <orderBy>][, <blanks>][, <partitionBy>][, &l…...

编程日记 2023/8/27 15:32:33

【Mac】编译Spring 源码和Idea导入

今天我们开始Spring源码的阅读之旅。阅读Spring的源码的第一步当然是编译Spring源码。首先我们要去GitHub上将spring源码给clone下来。笔者编译环境如下： Spring版本：5.28 https://github.com/spring-projects/spring-framework/tree/v5.2.8.RELEASE …...

编程日记 2023/8/27 15:31:32

手把手教你用 ANSYS workbench

ANSYS Workbench ANSYS Workbench是一款基于有限元分析（FEA）的工程仿真软件。其基本概念包括： 工作区（Workspace）：工程仿真模块都在此区域内，包括几何建模、网格划分、边界条件设置、分析求解等…...

编程日记 2023/8/27 15:30:32

Kotlin开发笔记：协程基础

Kotlin开发笔记：协程基础导语本章内容与书的第十五章相关，主要介绍与协程相关的知识。总的来说，本文将会介绍Kotlin中关于异步编程的内容，主要就是与协程有关。在Kotlin中协程是利用continuations数据结构构建的，用…...

编程日记 2023/8/27 15:29:30

自学设计模式（简单工厂模式、工厂模式、抽象工厂模式）

使用工厂模式来生产某类对象（代码简化且容易维护，类之间有血缘关系，可以通过工厂类进行生产）； 简单工厂模式（用于创建简单对象） 对于简单工厂模式，需要的工厂类只有一个&#xff1…...

编程日记 2023/8/27 15:28:20

NFS：使⽤ NFS 为远程客户端提供共享文件系统

写在前面分享一些 nfs 搭建的笔记考试顺便整理内容涉及 nfs 服务端客户端的搭建配置理解不足小伙伴帮忙指正对每个人而言，真正的职责只有一个：找到自我。然后在心中坚守其一生，全心全意，永不停息。所有其它的路都是不完整的&…...

编程日记 2023/8/27 15:27:20

2022-kaggle-nlp赛事：Feedback Prize - English Language Learning（超多注释讲解）

2022-kaggle-nlp赛事：Feedback Prize - English Language Learning 零、比赛介绍比赛地址Feedback Prize - English Language Learning | Kaggle 0.1 比赛目标写作是一项基本技能。可惜很少学生能够磨练，因为学校很少布置写作任务。学习英语作为第…...

编程日记 2023/8/27 15:26:18

第十三课宾语从句

文章目录前言一、宾语从句1、主语及物动词宾语从句2、主语双宾动词间接宾语直接宾语3、主语特定及物动词宾语从句（作宾语）宾补4、主语be某些形容词宾语从句5、动词不定式后面的宾语从句6、动名词后面的宾语从句7、介词后面的宾语从句9、间接引语前言一…...

编程日记 2023/8/27 15:25:15

Docker容器与虚拟化技术：GitHub账户注册

目录一、实验 1.GitHub 一、实验 1.GitHub （1）GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为唯一的版本库格式进行托管，故名GitHub。 （2）官网 GitHub: Let’s build from here …...

编程日记 2023/8/27 15:24:14

thinkphp安装workman

需要加版本，版本太高了不行 composer require topthink/think-worker1.0.*...

编程日记 2023/8/27 15:23:11

L1-036 A乘以B(Python实现) 测试点全过

题目看我没骗你吧 —— 这是一道你可以在 10 秒内完成的题：给定两个绝对值不超过 100 的整数 A 和 B，输出 A 乘以 B 的值。输入格式输入在第一行给出两个整数 A 和 B （ − 100 ≤ A , B ≤ 100 ） A 和 B（−100≤…...

编程日记 2023/8/27 15:22:10

代码随想录第五十三天

代码随想录第五十三天 Leetcode 1143. 最长公共子序列Leetcode 1035. 不相交的线Leetcode 53. 最大子数组和 Leetcode 1143. 最长公共子序列题目链接: 最长公共子序列自己的思路:没想出来！！！ 正确思路:首先这道题由于是涉及到了两个数组&…...

编程日记 2023/8/27 15:21:08

cmd - 如何在不重启的情况下让修改后的hosts生效

cmd - 如何在不重启的情况下让修改后的hosts生效亲测有效一般在修改了hosts文件后，需要重启电脑才能生效；其实可以不通过重启电脑也可以令其生效，方法如下： 打开cmd窗口输入ipconfig /flushdns，然后回车。…...

编程日记 2023/8/27 15:20:08

石家庄网站建设平台有哪些/建站系统主要包括

文章目录前言（一）套接字（1）认识套接字（2）套接字的属性1. 套接字的域2. 套接字类型3. 套接字协议前言套接字接口 : 类似于管道的用法套接字用途： 同一台计算机的进程通信支持分布在网络中的客户…...

编程日记 2025/2/12 23:08:22

杭州培训网站建设/上海官网seo

前言区别于java设计模式，下面介绍的是在多线程场景下，如何设计出合理的思路。不可变对象模式场景 1. 对象的变化频率不高每一次变化就是一次深拷贝，会影响cpu以及gc，如果频繁操作会影响性能 2. 作为hashmap的key key如果是可变…...

编程日记 2025/2/12 20:01:36

自己电脑做网站服务器广域网访问/如何做网销

过去不久曾写过一篇视频如何添加字幕的教程，主要是让用户学会使用狸窝全能视频转换器可以把srt、ass类型的字幕添加到视频。大家可以看下(视频怎么加字幕支持srt，ass字幕添加转换格式: http://www.leawo.cn/space-627-do-thread-id-31840.html)。那么有…...

编程日记 2025/2/12 19:33:57

南江县住房和城乡建设局网站/投放广告找什么平台

主从复制原理主从复制三个线程主节点： dump Thread：为每个Slave的I/O Thread启动一个dump线程，用于向其发送binary log events 从节点： I/O Thread：向Master请求二进制日志事件，并保存于中继日志中 SQL Th…...

编程日记 2025/2/12 18:39:14

如何把地图放到自己做的网站上/百度推广登录地址

转载于:https://www.cnblogs.com/lianghong881018/p/10761990.html...

编程日记 2025/2/12 14:16:39

wordpress b/s分离/制作网站的软件叫什么

目录一、图标icon 二、进度条progress 三、文本text 四、富文本rich-text 一、图标icon 属性类型默认值必填说明typestring 是icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizenumber/st…...

编程日记 2025/2/12 8:49:48

一、Ajax

1、简介

2、Axios （没懂 暂留）

（1）请求方式别名

（2）发送get请求

（3）发送post请求

（4）案例

二、前端工程化

1、Vue项目-目录结构

2、Vue项目-启动

（1）vscode页面启动

（2）cmd命令框启动

3、配置Vue端口号

4、Vue项目开发流程

三、Vue组件库 - Element

1、快速入门

（1）在main.js引入ElementUI组件库

（2）根据文档选择想要的皮肤 复制代码

2、常用组件介绍

（1）Table 表格标签

（2）Pagination 分页标签

（3）Dialog 对话框

（4）Form 表单

（5）案例

四、Vue路由

1、概念

2、案例

① 配置路由路径

② 给侧栏标签添加<router-link to>标签

③ 在APP.vue添加 <router-view>

五、打包部署

相关文章：

2、Axios （没懂暂留）

（2）根据文档选择想要的皮肤复制代码