用MySQL+node+vue做一个学生信息管理系统（五）：学生信息增删改的实现

先实现增加信息：
在这里插入图片描述

post参数的获取：express中接受post请求参数需要借助第三方包 body-parser
下载npm install body-parser

//引入body-parser模块
const bodyParser = require('body-parser');
//拦截所有请求,配置body-parser模块
//extended:false 方法内部使用querystring模块处理请求参数的格式,并且把参数保存在req当中
//extended:true 方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({extended:false}));
//接收请求
app.post('/add',(req,res)=>{//接收请求参数console.log(req.body);
})

req.body可以拿到全部的post请求参数，是一个json对象，以键值对的形式保存，键是input的name，值就是表单输入的内容，接下来只需要获取到值并且保存在MySQL数据库当中就行

在这里插入图片描述

通过结构赋值把需要的值拿到，然后插入到数据库，最后重定向到主页面

//接收请求
app.post('/add',(req,res)=>{//接收请求参数const { id, name, sex,class1}= req.body;var  addSql = 'INSERT INTO student(id,name,sex,class) VALUES(?,?,?,?)';var  addSqlParams = [id,name,sex,class1];connection.query(addSql,addSqlParams,function (err, result) {if(err){console.log('[INSERT ERROR] - ',err.message);return;}        console.log('--------------------------INSERT----------------------------');//console.log('INSERT ID:',result.insertId);        console.log('INSERT ID:',result);        console.log('-----------------------------------------------------------------\n\n');  });res.redirect('/index.html');
})

在这里插入图片描述

删除功能的实现：
思路：点击删除按钮的时候创建一个ajax对象，发送请求del，并且携带post学号的参数，post请求参数就是学号，在创建button按钮的时候把学号赋值给button按钮的id属性，点击button按钮时vue的e.target可以获取到触发事件的对象，e.target.id就可以获取到按钮的id属性,删除完之后如果使用node的redirect重定向因为是同一个页面而不会生效，我们需要在html文件中写location.href重定向才行

代码：
init.vue

<template><div id="init"><div class="div2"><div class="div21">学号</div><div class="div21">姓名</div><div class="div21">性别</div><div class="div21">班级</div><div class="div21"></div><div class="div21"></div></div><div class="div3" v-for="item in people"><div class="div31">{{item.id}}</div><div class="div31">{{item.name}}</div><div class="div31">{{item.sex}}</div><div class="div31">{{item.class}}</div><div class="div31"><router-link to='/update'>更改</router-link></div><div class="div31"><button @click="del" :id="item.id">删除</button></div></div><div class="div4"><router-link to='/add'>增加</router-link></div></div>
</template><script>export default {data(){return{msg:'66',people:[]}},mounted:function(){var xhr = new XMLHttpRequest();xhr.open('POST','http://localhost:3000/init');xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send();var that = this;xhr.onload = function(){that.people = JSON.parse(xhr.responseText);}},methods:{del:function(e){console.log('del'+e.target.id);var xhr = new XMLHttpRequest();xhr.open('POST','http://localhost:3000/del');xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send('id='+e.target.id);location.href='http://localhost:3000/index.html'}}
}</script><style scoped="scoped">#init{width: 800px;margin: auto;border: 1px solid transparent;}.div2{width: 100%;height: 50px;display: flex;}.div21{text-align: center;line-height: 50px;border: 1px solid aqua;flex: 1;}.div3{width: 100%;height: 50px;display: flex;}.div31{border: 1px solid aqua;text-align: center;line-height: 50px;flex: 1;}</style>

const express = require('express');
const app = express();
const path = require('path');
//引入body-parser模块
const bodyParser = require('body-parser');
//拦截所有请求,配置body-parser模块
//extended:false 方法内部使用querystring模块处理请求参数的格式,并且把参数保存在req当中
//extended:true 方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({extended:false}));//开放静态资源访问，只需要输入文件名即可，不需要输入文件夹
app.use(express.static(path.join(__dirname,'src')));app.all("*",function(req,res,next){//设置允许跨域的域名，*代表允许任意域名跨域res.header("Access-Control-Allow-Origin","*");//允许的header类型res.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Accept,Content-type");res.header("Access-Control-Allow-Credentials",true);//跨域允许的请求方式res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");res.header("Content-Type","application/json;charset=utf-8")if (req.method.toLowerCase() == 'options')res.sendStatus(200);  //让options尝试请求快速结束elsenext();
});//引入MySQL模块
var mysql      = require('mysql');
//创建MySQL的连接
var connection = mysql.createConnection({host     : 'localhost',user     : 'root',password : '1234',database : 'students'
});//连接MySQL
connection.connect();//接收请求
app.post('/add',(req,res)=>{//接收请求参数const { id, name, sex,class1}= req.body;var  addSql = 'INSERT INTO student(id,name,sex,class) VALUES(?,?,?,?)';var  addSqlParams = [id,name,sex,class1];connection.query(addSql,addSqlParams,function (err, result) {if(err){console.log('[INSERT ERROR] - ',err.message);return;}        console.log('--------------------------INSERT----------------------------');//console.log('INSERT ID:',result.insertId);        console.log('INSERT ID:',result);        console.log('-----------------------------------------------------------------\n\n');  });res.redirect('/index.html');
})app.post('/update',(req,res)=>{res.send('update');
})app.post('/del',(req,res)=>{const {id}=req.body;var delSql = 'DELETE FROM student where id='+id;//删connection.query(delSql,function (err, result) {if(err){console.log('[DELETE ERROR] - ',err.message);return;}        console.log('--------------------------DELETE----------------------------');console.log('DELETE affectedRows',result.affectedRows);console.log('-----------------------------------------------------------------\n\n');  });
})app.post('/init',(req,res)=>{//query操作可以对数据库进行操作connection.query('SELECT * from student', function (err, result, fields) {if(err){//err.message会返回错误的信息console.log('[SELECT ERROR] - ',err.message);return;}console.log('--------------------------SELECT----------------------------');console.log(result);res.send(result);console.log('------------------------------------------------------------\n\n');  });})app.listen(3000);

修改数据思路：更改替换为<button id=“upd” @click=“upd” :id=“item.id”>更改
当点击更改按钮时，把数据保存在本地，同时也把这个数据发送给后台，在update.vue组件当中提取本地数据，给location.hash=‘/update’赋值，也会造成路由的变化。但是由于路由的组件是一加载完页面就加载了全部的路由，所以保存数据之后update组件当中的数据还是空，所以需要使用location.reload();重新刷新页面读取数据

在这里插入图片描述

在这里插入图片描述
app.js代码

var id = 0;
app.post('/server',(req,res)=>{console.log('server');id=req.body.id;console.log(id);
})app.post('/update',(req,res)=>{console.log('update');const {name,sex,class1}=req.body;var modSql = 'UPDATE student SET name = ?,sex = ?,class = ? WHERE Id = ?';var modSqlParams = [name,sex,class1,id];//改connection.query(modSql,modSqlParams,function (err, result) {if(err){console.log('[UPDATE ERROR] - ',err.message);return;}        console.log('--------------------------UPDATE----------------------------');console.log('UPDATE affectedRows',result.affectedRows);console.log('-----------------------------------------------------------------\n\n');});res.redirect('/index.html');
})

init.vue代码

upd:function(e){console.log('upd');sessionStorage.setItem('id',e.target.id);var xhr = new XMLHttpRequest();xhr.open('POST','http://localhost:3000/server');xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send('id='+e.target.id);location.hash='/update';location.reload();}

完整代码：
app.js：

const express = require('express');
const app = express();
const path = require('path');
//引入body-parser模块
const bodyParser = require('body-parser');
//拦截所有请求,配置body-parser模块
//extended:false 方法内部使用querystring模块处理请求参数的格式,并且把参数保存在req当中
//extended:true 方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({extended:false}));//开放静态资源访问，只需要输入文件名即可，不需要输入文件夹
app.use(express.static(path.join(__dirname,'src')));app.all("*",function(req,res,next){//设置允许跨域的域名，*代表允许任意域名跨域res.header("Access-Control-Allow-Origin","*");//允许的header类型res.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Accept,Content-type");res.header("Access-Control-Allow-Credentials",true);//跨域允许的请求方式res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");res.header("Content-Type","application/json;charset=utf-8")if (req.method.toLowerCase() == 'options')res.sendStatus(200);  //让options尝试请求快速结束elsenext();
});//引入MySQL模块
var mysql      = require('mysql');
//创建MySQL的连接
var connection = mysql.createConnection({host     : 'localhost',user     : 'root',password : '1234',database : 'students'
});//连接MySQL
connection.connect();//接收请求
app.post('/add',(req,res)=>{//接收请求参数const { id, name, sex,class1}= req.body;var  addSql = 'INSERT INTO student(id,name,sex,class) VALUES(?,?,?,?)';var  addSqlParams = [id,name,sex,class1];connection.query(addSql,addSqlParams,function (err, result) {if(err){console.log('[INSERT ERROR] - ',err.message);return;}        console.log('--------------------------INSERT----------------------------');//console.log('INSERT ID:',result.insertId);        console.log('INSERT ID:',result);        console.log('-----------------------------------------------------------------\n\n');  });res.redirect('/index.html');
})var id = 0;
app.post('/server',(req,res)=>{console.log('server');id=req.body.id;console.log(id);
})app.post('/update',(req,res)=>{console.log('update');const {name,sex,class1}=req.body;var modSql = 'UPDATE student SET name = ?,sex = ?,class = ? WHERE Id = ?';var modSqlParams = [name,sex,class1,id];//改connection.query(modSql,modSqlParams,function (err, result) {if(err){console.log('[UPDATE ERROR] - ',err.message);return;}        console.log('--------------------------UPDATE----------------------------');console.log('UPDATE affectedRows',result.affectedRows);console.log('-----------------------------------------------------------------\n\n');});res.redirect('/index.html');
})
app.post('/del',(req,res)=>{console.log('del');const {id}=req.body;var delSql = 'DELETE FROM student where id='+id;//删connection.query(delSql,function (err, result) {if(err){console.log('[DELETE ERROR] - ',err.message);return;}        console.log('--------------------------DELETE----------------------------');console.log('DELETE affectedRows',result.affectedRows);console.log('-----------------------------------------------------------------\n\n');  });
})app.post('/init',(req,res)=>{console.log('init');//query操作可以对数据库进行操作connection.query('SELECT * from student', function (err, result, fields) {if(err){//err.message会返回错误的信息console.log('[SELECT ERROR] - ',err.message);return;}console.log('--------------------------SELECT----------------------------');console.log(result);console.log('------------------------------------------------------------\n\n');res.send(result);});})app.listen(3000);

index.html：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"></div><script src="./bundle.js" type="text/javascript" charset="utf-8"></script></body>
</html>

app.vue

<template><div id="app"><router-view></router-view></div>
</template><script></script><style scoped="scoped"></style>

init.vue：

<template><div id="init"><div class="div2"><div class="div21">学号</div><div class="div21">姓名</div><div class="div21">性别</div><div class="div21">班级</div><div class="div21"></div><div class="div21"></div></div><div class="div3" v-for="item in people"><div class="div31">{{item.id}}</div><div class="div31">{{item.name}}</div><div class="div31">{{item.sex}}</div><div class="div31">{{item.class}}</div><div class="div31"><button id="upd" @click="upd" :id="item.id">更改</button></div><div class="div31"><button @click="del" :id="item.id">删除</button></div></div><div class="div4"><router-link to='/add'>增加</router-link></div></div>
</template><script>export default {data(){return{msg:'66',people:[]}},mounted:function(){var xhr = new XMLHttpRequest();xhr.open('POST','http://localhost:3000/init');xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send();var that = this;xhr.onload = function(){that.people = JSON.parse(xhr.responseText);}},methods:{del:function(e){console.log('del'+e.target.id);var xhr = new XMLHttpRequest();xhr.open('POST','http://localhost:3000/del');xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send('id='+e.target.id);location.href='http://localhost:3000/index.html'},upd:function(e){console.log('upd');sessionStorage.setItem('id',e.target.id);var xhr = new XMLHttpRequest();xhr.open('POST','http://localhost:3000/server');xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send('id='+e.target.id);location.hash='/update';location.reload();}}
}</script><style scoped="scoped">#init{width: 800px;margin: auto;border: 1px solid transparent;}.div2{width: 100%;height: 50px;display: flex;}.div21{text-align: center;line-height: 50px;border: 1px solid aqua;flex: 1;}.div3{width: 100%;height: 50px;display: flex;}.div31{border: 1px solid aqua;text-align: center;line-height: 50px;flex: 1;}</style>

router.js：

import Vue from 'vue'
import Router from 'vue-router/dist/vue-router.js'
import init from '../components/init.vue'
import app from '../components/app.vue'
import add from '../components/add.vue'
import del from '../components/del.vue'
import update from '../components/update.vue'
Vue.use(Router);export default new Router({routes: [{path: '/',redirect:'/init'},{path: '/init',component: init},{path: '/add',name:'add',component: add},{path: '/del',name:'del',component: del},{path: '/update',name:'update',component: update},]
})

update.vue：

<template><div id="update"><form action="http://localhost:3000/update" method="post"><div class="div1"><div class="div11">学号</div><div class="div12"><input type="text" name="id" placeholder="请输入学号" id="num" disabled="disabled"></div></div><div class="div1"><div class="div11">姓名</div><div class="div12"><input type="text" name="name" placeholder="请输入姓名"></div></div><div class="div1"><div class="div11">性别</div><div class="div12"><input type="text" name="sex" placeholder="请输入性别"></div></div><div class="div1"><div class="div11">班级</div><div class="div12"><input type="text" name="class1" placeholder="请输入班级"></div></div><br><button type="submit">更改</button></form></div>
</template><script>window.onload=function(){var k = sessionStorage.getItem('id');console.log(k);if(k){var num = document.querySelector('#num');num.value=k;}
}</script><style>#update{width: 60%;height: 600px;margin: auto;border: 1px solid royalblue;}.div1{margin-top: 10px;margin-left: 10px;}
</style>

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

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

相关文章

视频太大怎么压缩变小？6款视频压缩软件免费版分享

视频太大怎么压缩变小？6款视频压缩软件免费版分享

视频太大怎么压缩得又小又清晰呢&#xff1f;无论是视频文件传输、视频文件存储&#xff0c;还是进行自媒体视频上传&#xff0c;都对视频文件的大小有一定的限制。高质量的视频文件往往伴随着文件占据大量存储空间&#xff0c;导致文件传输速度变慢。今天教大家6种视频压缩软件…
阅读更多...
拥抱智能化，WMS系统让仓库管理精细化与人性化结合-亿发

拥抱智能化，WMS系统让仓库管理精细化与人性化结合-亿发

在当今竞争激烈的市场环境中&#xff0c;仓库管理不再是简单的货物存储和流通&#xff0c;而是一个复杂而精细的管理系统。仓库管理系统&#xff08;Warehouse Management System, WMS&#xff09;作为现代仓库管理的核心技术&#xff0c;通过“有过程”的管理理念&#xff0c;…
阅读更多...
真的假不了，假的真不了

真的假不了，假的真不了

大家好&#xff0c;我是瑶琴呀&#xff0c;拥有一头黑长直秀发的女程序员。 最近&#xff0c;17岁的中专生姜萍参加阿里巴巴 2024 年的全球数学竞赛&#xff0c;取得了 12 名的好成绩&#xff0c;一时间在网上沸腾不止。 从最开始的“数学天才”&#xff0c;到被质疑&#xff…
阅读更多...
STM32开发工具STM32CubeMX 6.11.1版本在Windows系统上的下载与安装配置

STM32开发工具STM32CubeMX 6.11.1版本在Windows系统上的下载与安装配置

目录 前言一、STM32CubeMX安装二、使用配置总结 前言 STM32CubeMX是使用STM32微控制器的开发人员不可或缺的工具。该软件配置实用程序由意法半导体精心设计&#xff0c;提供了一个强大的平台&#xff0c;可以轻松高效地配置和初始化STM32器件。在其核心&#xff0c;STM32CubeM…
阅读更多...
宠物洗澡机缺水提醒功能如何实现

宠物洗澡机缺水提醒功能如何实现

如今随着养宠物的人越来越多&#xff0c;宠物用品也越来越多&#xff0c;宠物洗澡机也为养宠物的人带来很大方便&#xff0c;在宠物洗澡机内部通常会加一个缺液提醒功能&#xff0c;那么宠物洗澡机缺水提醒功能如何实现&#xff0c;其实只需加一个光电液位传感器即可。 光电液…
阅读更多...
实战whisper第三天：fast whisper 语音识别服务器部署，可远程访问，可商业化部署（全部代码和详细部署步骤）

实战whisper第三天：fast whisper 语音识别服务器部署，可远程访问，可商业化部署（全部代码和详细部署步骤）

Fast Whisper 是对 OpenAI 的 Whisper 模型的一个优化版本，它旨在提高音频转录和语音识别任务的速度和效率。Whisper 是一种强大的多语言和多任务语音模型，可以用于语音识别、语音翻译和语音分类等任务。 Fast Whisper 的原理 Fast Whisper 是在原始 Whisper 模型的基础上进…
阅读更多...
springboot dynamic配置多数据源

springboot dynamic配置多数据源

pom.xml引入jar包 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.5.2</version> </dependency> application配置文件配置如下 需要主要必须配置…
阅读更多...
动手RAG: ocr调研

动手RAG: ocr调研

对于rag应用来说&#xff0c;文档是第一步&#xff0c;对于部分扫描件的文件来讲&#xff0c;主要就需要OCR. OCR tesseractppocrmmocr OCR包含几类&#xff0c; 自然场景中的文字识别&#xff0c;文档中的文字识别pipeline: 文本检测&#xff0c;文本识别&#xff0c;文…
阅读更多...
Latex 绘图：Tikz 包

Latex 绘图：Tikz 包

参考文献&#xff1a; TiKZ入门教程 - LaTeX工作室 (latexstudio.net)Latex-TiKZ绘制数学平面几何图教程_latex绘制几何图形-CSDN博客【TikZ 简单学习(上)&#xff1a;基础绘制】Latex下的绘图宏包-CSDN博客LaTeX—Tikz 宏包入门使用教程 - 知乎 (zhihu.com)Latex 实时编译 &a…
阅读更多...
安卓Framework开发快速分析日志及定位源码

安卓Framework开发快速分析日志及定位源码

文章目录 如何区分源码中 main system events 日志查看 Activity 生命周期日志分析 events 日志在源码中位置应用进程ID助分析具体应用ProtoLog 动态开关日志如何快速定位相关流程的代码位置 本文首发地址 https://h89.cn/archives/285.html 最新更新地址 https://gitee.com/ch…
阅读更多...
2024年【建筑电工(建筑特殊工种)】考试报名及建筑电工(建筑特殊工种)考试资料

2024年【建筑电工(建筑特殊工种)】考试报名及建筑电工(建筑特殊工种)考试资料

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 建筑电工(建筑特殊工种)考试报名参考答案及建筑电工(建筑特殊工种)考试试题解析是安全生产模拟考试一点通题库老师及建筑电工(建筑特殊工种)操作证已考过的学员汇总&#xff0c;相对有效帮助建筑电工(建筑特殊工种)考…
阅读更多...
10年铲屎官亲自体验后，告诉你好用的空气净化器排名

10年铲屎官亲自体验后，告诉你好用的空气净化器排名

作为一名资深铲屎官博主&#xff0c;很多铲屎官一到春季换季就开始各种疯狂打喷嚏、全身过敏红肿&#xff0c;这是因为猫咪在换季的时候就疯狂掉毛&#xff0c;家里就想下雪一样&#xff0c;空气中都是猫浮毛。而猫毛上附带的细菌会跟随浮毛被人吸入人体&#xff0c;从而产生打…
阅读更多...
Graspnet复现笔记

Graspnet复现笔记

前言 参考文章&#xff1a;Baseline model for "GraspNet-1Billion: A Large-Scale Benchmark for General Object Grasping" (CVPR 2020).[paper] [dataset] [API] [doc] 代码仓库&#xff1a;https://github.com/graspnet/graspnet-baseline 一、确定配置 Ubunt…
阅读更多...
固态硬盘好用，还是机械硬盘好用？

固态硬盘好用，还是机械硬盘好用？

在当前的电脑存储设备市场中&#xff0c;固态硬盘&#xff08;SSD&#xff09;和机械硬盘&#xff08;HDD&#xff09;是两种最主流的选择。它们各有优缺点&#xff0c;适用于不同的使用场景和需求。本文将详细对比固态硬盘和机械硬盘的性能、价格、耐用性等方面&#xff0c;并…
阅读更多...
C# 验证PDF数字签名的有效性

C# 验证PDF数字签名的有效性

数字签名作为PDF文档中的重要安全机制&#xff0c;不仅能够验证文件的来源&#xff0c;还能确保文件内容在传输过程中未被篡改。然而&#xff0c;如何正确验证PDF文件的数字签名&#xff0c;是确保文件完整性和可信度的关键。本文将详细介绍如何使用免费.NET控件通过C#验证PDF签…
阅读更多...
window系统openssl开发环境搭建(VS2017)

window系统openssl开发环境搭建(VS2017)

window系统openssl开发环境搭建 VS2017 一、下载openssl二、安装openssl三、openssl项目配置3.1 配置include文件3.2 配置openssl动态库四、编写openssl测试代码五、问题总结5.1 问题 一5.2 问题二一、下载openssl https://slproweb.com/products/Win32OpenSSL.html 根据自己…
阅读更多...
2024年地球生态学与绿色发展国际会议 (EEGD 2024)

2024年地球生态学与绿色发展国际会议 (EEGD 2024)

2024年地球生态学与绿色发展国际会议 (EEGD 2024) International Conference on Earth Ecology and Green Development in 2024 【重要信息】 大会地点&#xff1a;济南 大会官网&#xff1a;http://www.iceegd.com 投稿邮箱&#xff1a;iceegdsub-conf.com 【注意&#xff1a…
阅读更多...
【docker】容器内配置环境变量

【docker】容器内配置环境变量

背景&#xff1a; 我要把下面的环境变量写到bash脚本里&#xff0c;起名叫environment_start.sh。 目的&#xff1a; 用于每次进入容器dev_into.sh的时候&#xff0c;让系统获取到环境变量。 先进入容器找个合适的位置写环境变量bash脚本&#xff0c;environment_start.sh …
阅读更多...
当下环境下如何提升自己以拥抱未来的机会-程序员的自我提升

当下环境下如何提升自己以拥抱未来的机会-程序员的自我提升

一、前言 看看今年的行情，无论是国内还是国外，仿佛都没有什么活力，经济下行压力越来越大，企业经营越来越困难。对于程序员的工作机会越来越少。这可能是现阶段乃至几年内的现象。现在是现金为王，拥有其他资产仿佛没有多大的增值空间，经济一片惨淡，消费不活跃，我看到的…
阅读更多...
LLM RAG with Agent

LLM RAG with Agent

题意&#xff1a;基于代理的LLM检索增强生成 问题背景&#xff1a; I was trying the application code in the link. 我正在尝试链接中的应用程序代码。 I am using the following Llang Chain version 我正在使用以下Llang Chain版本 langchain 0.0.327 langchain-commun…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023