-
仵航说 前后端分离，文件上传下载（springBoot+vue+elementUI）仵老大
1.介绍
本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都是可以上传下载的,前端就是一个页面,后端就是一个controller页面,就可以解决
代码不清晰的话,我把这个前端的vue 跟 后端的controller代码,以及本篇文章的MD版本放到了这个链接里 https://wwa.lanzous.com/b0cqr478f 密码:19qb
1.1前端样子
2.前端
2.1先分享一下前端的全部代码
<template>
<div>
<center>
</center>
<div style="float: left;margin-left: 100px">
<!-- <router-link to="/reportTools/customQuery" style="color: darkblue">-->
<!-- 上一步-->
<!-- </router-link>-->
<el-button type="primary" v-on:click="tocustomQuery" >上一步</el-button>
</div>
<div style="float: right;margin-right: 100px">
<el-button type="primary" v-on:click="saveResource" >保存</el-button>
</div>
<br>
<h1>基本信息设置</h1>
<br>
<br>
<center>
<div style="margin-right: 170px">
<el-form ref="form" :model="form" label-width="120px" >
<el-form-item label="报表名称中文:" style="width: 470px;">
<el-input v-model="form.reportName" ></el-input>
</el-form-item>
<el-form-item label="报表名称英文:" style="width: 470px;">
<el-input v-model="form.reportEnName"></el-input>
</el-form-item>
<el-form-item label="报表名称中英文:" style="width: 470px;">
<el-input v-model="form.reportChEnName"></el-input>
</el-form-item>
<el-form-item label="报表备注:" style="width: 470px;">
<el-input v-model="form.remarks"></el-input>
</el-form-item>
<el-form-item label="功能编号" style="width: 470px;">
<el-input v-model="form.code" ></el-input>
</el-form-item>
<el-form-item label="编辑模板:" style="width: 570px;">
<el-input placeholder="模板地址" style="width: 200px" disabled></el-input>
<el-upload class="upload-demo"
:action="uploadUrl"
:before-upload="handleBeforeUpload"
:on-error="handleUploadError"
:before-remove="beforeRemove"
multiple
:limit="5"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<a href="http://localhost:8080/file/download?fileName=test.xls">下载附件</a>
</el-form-item>
<el-form-item label="模板备注:" style="width: 480px;">
模板用于下载，打印EXCEL时使用。其中{ {CURRENT_USER} }表示当前用户名，
{ {TITLE} }表示表头，{ {DATA} }表示数据行，{ {FOOTER} }表示页脚区域。
导出的内容不可改动，页眉页脚区域可以自由编辑。
</el-form-item>
<el-form-item >
<el-select v-model="form.isPublic" style="width: 350px;">
<el-option label="私有查询" value="2" ></el-option>
<el-option label="公共查询" value="1"></el-option>
</el-select>
</el-form-item>
<el-form-item >
<el-checkbox label="是否打印" v-model="form.isPrinting" true-label="1" false-label="2"></el-checkbox>
<el-checkbox label="是否导出" v-model="form.isExport" true-label="1" false-label="2"></el-checkbox>
<el-form-item type="hidden" style="width: 470px;">
</el-form-item>
</el-form-item>
</el-form>
</div>
</center>
</div>
</template>
<script>
import axios from 'axios'
import { uuid } from 'vue-uuid';
export default {
data() {
return {
form: {
reportName:'',
reportEnName:'',
reportChEnName:'',
remarks:'',
code:'',
isPublic:'1',
isPrinting:"1",
isExport:"1",
datas:[{},{},{},{}],
A0010011:'',
A0010012:'',
A0010013:'',
A0010014:'',
},
// uuid1:'',
// cusList:{},
uploadUrl: 'file/upload',
fileList: [],
}
},
created() {
console.log("上个页面传来的是",sessionStorage)
// this.handleUUIDv1()
this.form.code = this.$uuid.v1()
console.log("页面刷新后新产生的uuid是",this.form.code)
},
watch:{
reportName: function (newVal,oldVal) {//新值和原值
console.log("name改变了 a:"+newVal+" b:"+oldVal)
}
},
methods: {
//使用uuid
// handleUUIDv1() {
// this.uuid1 = this.$uuid.v1()
// },
//点击多选按钮true和false变成1或者2
reset(form){
this.$refs['form'].resetFields();
},
//获取上个页面传来的数据
getcustomQuery() {
let reportName=this.form.reportName
sessionStorage.setItem("reportName",reportName)
let reportEnName = this.form.reportEnName
sessionStorage.setItem("reportEnName",reportEnName)
let reportChEnName = this.form.reportChEnName
sessionStorage.setItem("reportChEnName",reportChEnName)
let remarks = this.form.remarks
sessionStorage.setItem("remarks",remarks)
let code = this.form.code
sessionStorage.setItem("code",code)
let isPublic = this.form.isPublic
sessionStorage.setItem("isPublic",isPublic)
let isPrinting = this.form.isPrinting
sessionStorage.setItem("isPrinting",isPrinting)
let isExport = this.form.isExport
sessionStorage.setItem("isExport",isExport)
console.log("上个页面传来的是",sessionStorage)
},
// this.$router.push('/reportTools/cusMain'),点击保存发送链接 并跳转
tocustomQuery(){
this.$router.push('/reportTools/customQuery')
},
saveResource(){
console.log("当前页面表单的数据",this.form)
// sessionStorage.setItem("params",JSON.stringify(this.form))
console.log("sessionStorage中的数据",sessionStorage)
this.getcustomQuery()
this.$http.post("http://localhost:8080/reporttools/report-show/addReportShow",sessionStorage).then(
resp=>{
console.log(resp)
//this.$router.push('/reportTools/cusMain')
})
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
handleUploadError(error, file) {
console.log("文件上传出错："+error)
},
//测试上传文件(注意web的上下文)
handleBeforeUpload(file){
console.log("开始上传，上传的文件为："+file)
let formData = new FormData();
formData.append("multipartFiles", file);
axios({
method: 'post',
url: 'file/upload',
data: formData,
headers: {'Content-Type': 'multipart/form-data' }
}).then((res) => {
console.log("文件上传返回："+res)
}).catch(error => {
console.log("文件上传异常:"+error)
})
},
}
}
</script>
<style scoped>
a {
text-decoration: none;
}
</style>
2.2分享一下前端template层的代码
2.2.1上传下载template全部代码
<el-upload class="upload-demo"
:action="uploadUrl"
:before-upload="handleBeforeUpload"
:on-error="handleUploadError"
:before-remove="beforeRemove"
multiple
:limit="5"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<a href="http://localhost:8080/file/download?fileName=test.xls">下载附件</a>
2.2.2 上传代码
<el-upload class="upload-demo"
:action="uploadUrl"
:before-upload="handleBeforeUpload"
:on-error="handleUploadError"
:before-remove="beforeRemove"
multiple
:limit="5"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
2.2.3下载代码
下载代码就是一个a标签
<a href="http://localhost:8080/file/download?fileName=test.xls">下载附件</a>
2.3分享一下前端script代码
<script>
import axios from 'axios'
import { uuid } from 'vue-uuid';
export default {
data() {
return {
form: {
reportName:'',
reportEnName:'',
reportChEnName:'',
remarks:'',
code:'',
isPublic:'1',
isPrinting:"1",
isExport:"1",
datas:[{},{},{},{}],
A0010011:'',
A0010012:'',
A0010013:'',
A0010014:'',
},
// uuid1:'',
// cusList:{},
uploadUrl: 'file/upload',
fileList: [],
}
},
created() {
console.log("上个页面传来的是",sessionStorage)
// this.handleUUIDv1()
this.form.code = this.$uuid.v1()
console.log("页面刷新后新产生的uuid是",this.form.code)
},
watch:{
reportName: function (newVal,oldVal) {//新值和原值
console.log("name改变了 a:"+newVal+" b:"+oldVal)
}
},
methods: {
//使用uuid
// handleUUIDv1() {
// this.uuid1 = this.$uuid.v1()
// },
//点击多选按钮true和false变成1或者2
reset(form){
this.$refs['form'].resetFields();
},
//获取上个页面传来的数据
getcustomQuery() {
let reportName=this.form.reportName
sessionStorage.setItem("reportName",reportName)
let reportEnName = this.form.reportEnName
sessionStorage.setItem("reportEnName",reportEnName)
let reportChEnName = this.form.reportChEnName
sessionStorage.setItem("reportChEnName",reportChEnName)
let remarks = this.form.remarks
sessionStorage.setItem("remarks",remarks)
let code = this.form.code
sessionStorage.setItem("code",code)
let isPublic = this.form.isPublic
sessionStorage.setItem("isPublic",isPublic)
let isPrinting = this.form.isPrinting
sessionStorage.setItem("isPrinting",isPrinting)
let isExport = this.form.isExport
sessionStorage.setItem("isExport",isExport)
console.log("上个页面传来的是",sessionStorage)
},
// this.$router.push('/reportTools/cusMain'),点击保存发送链接 并跳转
tocustomQuery(){
this.$router.push('/reportTools/customQuery')
},
saveResource(){
console.log("当前页面表单的数据",this.form)
// sessionStorage.setItem("params",JSON.stringify(this.form))
console.log("sessionStorage中的数据",sessionStorage)
this.getcustomQuery()
this.$http.post("http://localhost:8080/reporttools/report-show/addReportShow",sessionStorage).then(
resp=>{
console.log(resp)
//this.$router.push('/reportTools/cusMain')
})
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
handleUploadError(error, file) {
console.log("文件上传出错："+error)
},
//测试上传文件(注意web的上下文)
handleBeforeUpload(file){
console.log("开始上传，上传的文件为："+file)
let formData = new FormData();
formData.append("multipartFiles", file);
axios({
method: 'post',
url: 'http://localhost:8080/file/upload',
data: formData,
headers: {'Content-Type': 'multipart/form-data' }
}).then((res) => {
console.log("文件上传返回："+res)
}).catch(error => {
console.log("文件上传异常:"+error)
})
},
}
}
</script>
<style scoped>
a {
text-decoration: none;
}
</style>
2.3.1上传script全部代码
主要是对前端做一些限制
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
handleUploadError(error, file) {
console.log("文件上传出错："+error)
},
//测试上传文件(注意web的上下文)
handleBeforeUpload(file){
console.log("开始上传，上传的文件为："+file)
let formData = new FormData();
formData.append("multipartFiles", file);
axios({
method: 'post',
url: 'http://localhost:8080/file/upload',
data: formData,
headers: {'Content-Type': 'multipart/form-data' }
}).then((res) => {
console.log("文件上传返回："+res)
}).catch(error => {
console.log("文件上传异常:"+error)
})
},
2.3.2在data的return里添加
uploadUrl: 'file/upload',
fileList: [],
也就是在data层的 return里写
data(){
return {
uploadUrl: 'http://localhost:8080/file/upload',
fileList: [],
}
}
就这样前端就完成了
后端主要就是一个controller层
2.3.3Axios的引入
很重要的一个,因为我的写法不一样可能有不兼容的地方,有的vue不能这么写,所以需要引入一下
直接引入就可以,在script里面,
不会就看我上面分享的
import axios from 'axios'
3.后端
3.1后端全部代码
package com.ciic.reporter.updownload.controller;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
@RestController
@RequestMapping("file")
public class CiicUpDownloadController {
private final static String rootPath = "E:/attachment/";
@RequestMapping("/upload")
public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){
File fileDir = new File(rootPath);
if (!fileDir.exists() && !fileDir.isDirectory()) {
fileDir.mkdirs();
}
try {
if (multipartFiles != null && multipartFiles.length > 0) {
for(int i = 0;i<multipartFiles.length;i++){
try {
//以原来的名称命名,覆盖掉旧的，这里也可以使用UUID之类的方式命名，这里就没有处理了
String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
System.out.println("上传的文件：" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
+"，保存的路径为：" + storagePath);
// 3种方法： 第1种
// Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
// 第2种
Path path = Paths.get(storagePath);
Files.write(path,multipartFiles[i].getBytes());
// 第3种
// multipartFiles[i].transferTo(new File(storagePath));
} catch (IOException e) {
e.printStackTrace();
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
//前端可以通过状态码，判断文件是否上传成功
return "文件上传成功";
}
/**
*
* @param fileName 文件名
* @param response
* @return
*/
@RequestMapping("/download")
public Object downloadFile(@RequestParam String fileName, HttpServletResponse response){
OutputStream os = null;
InputStream is= null;
try {
// 取得输出流
os = response.getOutputStream();
// 清空输出流
response.reset();
response.setContentType("application/x-download;charset=utf-8");
//Content-Disposition中指定的类型是文件的扩展名，并且弹出的下载对话框中的文件类型图片是按照文件的扩展名显示的，点保存后，文件以filename的值命名，
// 保存类型以Content中设置的为准。注意：在设置Content-Disposition头字段之前，一定要设置Content-Type头字段。
//把文件名按UTF-8取出，并按ISO8859-1编码，保证弹出窗口中的文件名中文不乱码，中文不要太多，最多支持17个中文，因为header有150个字节限制。
response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"),"ISO8859-1"));
//读取流
File f = new File(rootPath+fileName);
is = new FileInputStream(f);
if (is == null) {
System.out.println("下载附件失败，请检查文件“" + fileName + "”是否存在");
return "下载附件失败，请检查文件“" + fileName + "”是否存在";
}
//复制
IOUtils.copy(is, response.getOutputStream());
response.getOutputStream().flush();
} catch (IOException e) {
return "下载附件失败,error:"+e.getMessage();
}
//文件的关闭放在finally中
finally
{
try {
if (is != null) {
is.close();
}
} catch (IOException e) {
e.printStackTrace();
}
try {
if (os != null) {
os.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
//其实，这个返回什么都不重要
return "下载成功";
}
}
3.2后端定义一个class类
@RestController
@RequestMapping("file")
public class CiicUpDownloadController {
}
3.3后端定义一个上传的路径
private final static String rootPath = "E:/attachment/";
3.3.1加上上面定义的类也就是
@RestController
@RequestMapping("file")
public class CiicUpDownloadController {
private final static String rootPath = "E:/attachment/";
}
3.4后端定义上传方法
@RequestMapping("/upload")
public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){
File fileDir = new File(rootPath);
if (!fileDir.exists() && !fileDir.isDirectory()) {
fileDir.mkdirs();
}
try {
if (multipartFiles != null && multipartFiles.length > 0) {
for(int i = 0;i<multipartFiles.length;i++){
try {
//以原来的名称命名,覆盖掉旧的，这里也可以使用UUID之类的方式命名，这里就没有处理了
String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
System.out.println("上传的文件：" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
+"，保存的路径为：" + storagePath);
// 3种方法： 第1种
// Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
// 第2种
Path path = Paths.get(storagePath);
Files.write(path,multipartFiles[i].getBytes());
// 第3种
// multipartFiles[i].transferTo(new File(storagePath));
} catch (IOException e) {
e.printStackTrace();
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
//前端可以通过状态码，判断文件是否上传成功
return "文件上传成功";
}
3.4.3加上之前的路径和类就是
@RestController
@RequestMapping("file")
public class CiicUpDownloadController {
private final static String rootPath = "E:/attachment/";
@RequestMapping("/upload")
public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){
File fileDir = new File(rootPath);
if (!fileDir.exists() && !fileDir.isDirectory()) {
fileDir.mkdirs();
}
try {
if (multipartFiles != null && multipartFiles.length > 0) {
for(int i = 0;i<multipartFiles.length;i++){
try {
//以原来的名称命名,覆盖掉旧的，这里也可以使用UUID之类的方式命名，这里就没有处理了
String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
System.out.println("上传的文件：" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
+"，保存的路径为：" + storagePath);
// 3种方法： 第1种
// Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
// 第2种
Path path = Paths.get(storagePath);
Files.write(path,multipartFiles[i].getBytes());
// 第3种
// multipartFiles[i].transferTo(new File(storagePath));
} catch (IOException e) {
e.printStackTrace();
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
//前端可以通过状态码，判断文件是否上传成功
return "文件上传成功";
}
}
3.5后端定义下载方法
/**
*
* @param fileName 文件名
* @param response
* @return
*/
@RequestMapping("/download")
public Object downloadFile(@RequestParam String fileName, HttpServletResponse response){
OutputStream os = null;
InputStream is= null;
try {
// 取得输出流
os = response.getOutputStream();
// 清空输出流
response.reset();
response.setContentType("application/x-download;charset=utf-8");
//Content-Disposition中指定的类型是文件的扩展名，并且弹出的下载对话框中的文件类型图片是按照文件的扩展名显示的，点保存后，文件以filename的值命名，
// 保存类型以Content中设置的为准。注意：在设置Content-Disposition头字段之前，一定要设置Content-Type头字段。
//把文件名按UTF-8取出，并按ISO8859-1编码，保证弹出窗口中的文件名中文不乱码，中文不要太多，最多支持17个中文，因为header有150个字节限制。
response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"),"ISO8859-1"));
//读取流
File f = new File(rootPath+fileName);
is = new FileInputStream(f);
if (is == null) {
System.out.println("下载附件失败，请检查文件“" + fileName + "”是否存在");
return "下载附件失败，请检查文件“" + fileName + "”是否存在";
}
//复制
IOUtils.copy(is, response.getOutputStream());
response.getOutputStream().flush();
} catch (IOException e) {
return "下载附件失败,error:"+e.getMessage();
}
//文件的关闭放在finally中
finally
{
try {
if (is != null) {
is.close();
}
} catch (IOException e) {
e.printStackTrace();
}
try {
if (os != null) {
os.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
//其实，这个返回什么都不重要
return "下载成功";
}
3.5.1加上之前定义的路径类和上传方法就是
package com.ciic.reporter.updownload.controller;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
@RestController
@RequestMapping("file")
public class CiicUpDownloadController {
private final static String rootPath = "E:/attachment/";
@RequestMapping("/upload")
public Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){
File fileDir = new File(rootPath);
if (!fileDir.exists() && !fileDir.isDirectory()) {
fileDir.mkdirs();
}
try {
if (multipartFiles != null && multipartFiles.length > 0) {
for(int i = 0;i<multipartFiles.length;i++){
try {
//以原来的名称命名,覆盖掉旧的，这里也可以使用UUID之类的方式命名，这里就没有处理了
String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
System.out.println("上传的文件：" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
+"，保存的路径为：" + storagePath);
// 3种方法： 第1种
// Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
// 第2种
Path path = Paths.get(storagePath);
Files.write(path,multipartFiles[i].getBytes());
// 第3种
// multipartFiles[i].transferTo(new File(storagePath));
} catch (IOException e) {
e.printStackTrace();
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
//前端可以通过状态码，判断文件是否上传成功
return "文件上传成功";
}
/**
*
* @param fileName 文件名
* @param response
* @return
*/
@RequestMapping("/download")
public Object downloadFile(@RequestParam String fileName, HttpServletResponse response){
OutputStream os = null;
InputStream is= null;
try {
// 取得输出流
os = response.getOutputStream();
// 清空输出流
response.reset();
response.setContentType("application/x-download;charset=utf-8");
//Content-Disposition中指定的类型是文件的扩展名，并且弹出的下载对话框中的文件类型图片是按照文件的扩展名显示的，点保存后，文件以filename的值命名，
// 保存类型以Content中设置的为准。注意：在设置Content-Disposition头字段之前，一定要设置Content-Type头字段。
//把文件名按UTF-8取出，并按ISO8859-1编码，保证弹出窗口中的文件名中文不乱码，中文不要太多，最多支持17个中文，因为header有150个字节限制。
response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"),"ISO8859-1"));
//读取流
File f = new File(rootPath+fileName);
is = new FileInputStream(f);
if (is == null) {
System.out.println("下载附件失败，请检查文件“" + fileName + "”是否存在");
return "下载附件失败，请检查文件“" + fileName + "”是否存在";
}
//复制
IOUtils.copy(is, response.getOutputStream());
response.getOutputStream().flush();
} catch (IOException e) {
return "下载附件失败,error:"+e.getMessage();
}
//文件的关闭放在finally中
finally
{
try {
if (is != null) {
is.close();
}
} catch (IOException e) {
e.printStackTrace();
}
try {
if (os != null) {
os.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
//其实，这个返回什么都不重要
return "下载成功";
}
}
谢谢大家的阅读，原创不易，喜欢就随手点个赞
最新更新
python爬虫及其可视化
使用python爬取豆瓣电影短评评论内容
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀（爬取学校通知公告）
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求：requests模块基础使用必知必会
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析：SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL，这些神奇的特性你知道吗？
openGauss内核分析：执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
uniapp/H5 获取手机桌面壁纸 (静态壁纸）
[前端] DNS解析与优化
为什么在js中需要添加addEventListener（）？
JS模块化系统
js通过Object.defineProperty() 定义和控制对象
这是目前我见过最好的跨域解决方案！
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比