“开发日志” 共(4)篇
CentOS 7.9云服务器配置问答社区服务中间件 Docker安装# 查看系统版本 uname -r # 安装docker前的强制依赖 yum install -y yum-utils device-mapper-persistent-data lvm2 # 配置镜像源 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo # 该命令就是用来自动化地安装 Docker 并配置好必要的运行环境，以便在 CentOS 系统上顺利运行 Docker 容器 yum install docker-ce docker-ce-cli containerd.io -y # 启动docker systemctl start docker # 用于设置 Docker 服务在系统启动时自动启动 systemctl enable docker # 查看docker版本 docker version # 查看本地存储的docker镜像 docker imagesDocker安装mysql# 拉取mysql5.7镜像 docker pull mysql:5.7 # 查看docker镜像列表 docker images # 创建mysql的data文件夹 mkdir -p /home/service/mysql/data # 创建mysql的配置文件夹 mkdir -p /home/service/mysql/conf # 进入配置文件夹 cd /home/service/mysql/conf # 创建配置文件，使用vim命令编辑 touch my.cnf -------------配置文件------------ [mysqld] user=mysql character-set-server=utf8 default_authentication_plugin=mysql_native_password default-time_zone = '+8:00' [client] default-character-set=utf8 [mysql] default-character-set=utf8 ------------------------------- # 挂载目录。实现容器数据的持久化与共享，mysql密码123456 docker run -p 3306:3306 --name mysql -v /home/service/mysql/logs:/logs -v /home/service/mysql/data:/mysql_data -e MYSQL_ROOT_PASSWORD=123456 -d mysql:5.7 ## 如果发现已存在同名容器，docker报错： Error response from daemon: Conflict. The container name "/mysql" is already in use by container"....."。可使用以下命令删除现有的同名容器 docker rm -f /mysql # 启动mysql服务 docker exec -it mysql bash # 登录mysql mysql -uroot -p # 在mysql下相关命令 ## 1.创建admin用户，密码123456，这里的 'admin' 是用户名，'%' 表示允许从任何主机登录。 CREATE USER 'admin'@'%' IDENTIFIED BY '123456'; ## 2.分配权限，GRANT: 授予特定权限给用户。ALL: 表示授予所有权限。ON *.*: 表示对所有数据库和所有表授予权限。TO 'admin'@'%': 表示将权限授予给前面创建的 'admin' 用户，并允许从任何主机登录。 GRANT ALL ON *.* TO 'admin'@'%'; ## 3.重现加载授权表，确保权限为最新 flush privileges; # 查看启动状态 docker ps navicat直接连接即可，云服务器需要开启防火墙，需要检查服务器安全组是否开启对应端口，具体教程可参考https://cloud.tencent.com/developer/article/1988335
Vue 3 和 Element Plus 实现商品管理系统 - 表单校验部分解析 介绍在本博客中，我们将深入探讨如何使用 Vue 3 和 Element Plus 构建一个简单的商品管理系统，并重点关注表单校验的部分。这个系统允许用户添加、编辑和删除商品，以及对商品进行搜索。技术栈在这个项目中，我们使用了以下技术：Vue 3：一个流行的 JavaScript 框架，用于构建用户界面。Element Plus：一套基于 Vue 3 的组件库，用于创建漂亮的用户界面。Axios：一个用于处理 HTTP 请求的 JavaScript 库。表单校验在这个项目中，我们使用 Element Plus 的表单组件来实现商品信息的输入和校验。以下是与表单校验相关的关键知识点和注意事项：1. 引入 Element Plus在项目中首先要确保已正确引入 Element Plus，以便使用它的表单组件和验证规则。import { ref, reactive } from "vue"; import { ElForm, ElFormItem, ElInput, ElSelect, ElOption } from "element-plus";2. 创建表单数据和校验规则我们使用 ref 来创建表单数据，并使用 ref 来创建校验规则。校验规则通常包括字段的必填性、数据类型和自定义校验方法。const insertForm = ref({ sellerID: "", name: "", description: "", price: "", category: "", condition: "", quantity: "", // status: "", }); const insertFormRules = ref({ name: [ { required: true, message: "商品名称不能为空", trigger: "blur", }, ], description: [ { required: true, message: "商品描述不能为空", trigger: "blur", }, ], price: [ { required: true, validator: validatePrice, trigger: "blur", }, ], category: [ { required: true, message: "请选择商品类别", trigger: "change", }, ], condition: [ { required: true, message: "请选择商品成色", trigger: "change", }, ], quantity: [ { required: true, message: "商品数量不能为空", trigger: "blur", }, { type: "number", message: "商品数量必须为数字值", }, ], });3. 表单校验在提交表单之前，我们使用 el-form 的 validate 方法来进行表单校验。校验成功后才允许提交数据。<el-dialog v-model="dialogInsertFormVisible" title="上架商品"> <el-form ref="insertFormRulesRef" :model="insertForm" :rules="insertFormRules" > <el-form-item label="商品名称" label-width="80px" prop="name"> <el-input v-model="insertForm.name" autocomplete="off" /> </el-form-item> <el-form-item label="描述" label-width="80px" prop="description"> <el-input v-model="insertForm.description" autocomplete="off" /> </el-form-item> <el-form-item label="价格" label-width="80px" prop="price"> <el-input v-model="insertForm.price" autocomplete="off" /> </el-form-item> <el-form-item label="类别" label-width="80px" prop="category"> <el-select v-model="insertForm.category" placeholder="请选择类别"> <el-option label="服饰鞋帽" value="服饰鞋帽" /> <el-option label="家居用品" value="家居用品" /> <el-option label="电子数码" value="电子数码" /> <el-option label="美妆护肤" value="美妆护肤" /> <el-option label="食品生鲜" value="食品生鲜" /> <el-option label="图书音像" value="图书音像" /> <el-option label="儿童玩具" value="儿童玩具" /> <el-option label="运动户外" value="运动户外" /> <el-option label="汽车用品" value="汽车用品" /> <el-option label="医疗保健" value="医疗保健" /> <el-option label="工艺礼品" value="工艺礼品" /> <el-option label="虚拟物品" value="虚拟物品" /> </el-select> </el-form-item> <el-form-item label="成色" label-width="80px" prop="condition"> <el-select v-model="insertForm.condition" placeholder="请选择成色"> <el-option label="全新" value="全新" /> <el-option label="99新" value="99新" /> <el-option label="95新" value="95新" /> <el-option label="9成新" value="9成新" /> <el-option label="8成新" value="8成新" /> <el-option label="6成新" value="6成新" /> </el-select> </el-form-item> <el-form-item label="数量" label-width="80px" prop="quantity"> <el-input v-model.number="insertForm.quantity" autocomplete="off" /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogInsertFormVisible = false">取消</el-button> <el-button type="primary" @click="submitItemInform(insertFormRulesRef)" > 提交 </el-button> <el-button type="primary" @click="test"> 提交 </el-button> </span> </template> </el-dialog>ref[0].validate(async (valid) => { if (valid) { // 表单校验通过，可以提交数据 try { const res = await axios.post( "http://localhost:8080/userInsertItem", insertForm.value ); // 处理提交结果... } catch (err) { // 处理请求错误... } } else { // 表单校验不通过，不执行提交操作 console.log("表单校验不通过！"); } });4. 自定义校验规则在校验规则中，我们可以使用自定义校验方法来实现特定的验证逻辑。例如，我们可以编写一个验证价格是否为数字的自定义校验方法：const validatePrice = (rule, value, callback) => { if (!value) return callback(new Error("请输入金额")); if (!Number(value)) return callback(new Error("请输入数字值")); let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; if (!reg.test(value)) return callback(new Error("请输入正确价格")); callback(); };然后，在校验规则中应用该自定义校验方法：price: [ { required: true, validator: validatePrice, trigger: "blur", }, ],5. 提示用户在校验不通过时，使用 Element Plus 的消息提示功能来通知用户错误信息：if (!valid) { // 表单校验不通过，显示错误消息 this.$message.error("表单校验不通过，请检查输入！"); }6. 表单重置在提交成功后，你可以选择重置表单，以便用户继续添加新的商品信息：ref[0].resetFields(); // 重置表单总结在这篇博客中，我们深入探讨了如何使用 Vue 3 和 Element Plus 构建商品管理系统的表单校验部分。我们学习了如何创建表单数据、定义校验规则、进行表单校验以及处理校验结果。此外，我们还介绍了如何使用自定义校验方法和提示用户错误信息的方法。这个项目只是一个简单的示例，你可以根据实际需求扩展和定制更多功能，以满足你的项目要求。希望这篇博客对你有所帮助，如果有任何问题或建议，请随时留言。
博客加入评论ip属地显示功能 更新了评论去用户ip归属地显示功能，详情和教程如下。效果图实现这样的功能有两种方式,一种是自己编写方法引用，另一种是插件管理，我使用的是第二种。{lamp/}第一种本获取不支持IPV6地址只支持IPV4 调用纯真本地数据库 需要定时更新要不然 获取可能不准确{cloud title="获取代码资源" type="lz" url="https://suxiaoq.lanzoul.com/irWB6056johc" password=""/}首先找到主题的function.php文件这里我以Joe主题为例 各个主题的不相同 请自行判断Joe主题的function.php文件在/Joe/core/function.php将下载的压缩包解压到core目录下 然后编辑function.php文件然后在第2行引用这个文件代码require 'ipdata.class.php';然后新建一个方法 function convertip($ip){ echo convertips($ip); }写完保存这个文件 再找到评论模板的文件 一般都为comment.phpJoe主题的comment.php文件在/Joe/public/comment.php,然后插入以下代码即可显示,<?php echo convertip($comments->ip); ?>joe主题一般在class="agent"的div中插入<div class="agent"><?php XQLocation_Plugin::render($comments->ip); ?> · <?php _getAgentOS($comments->agent); ?> · <?php _getAgentBrowser($comments->agent); ?></div>此方法来自于 晓晴博客{dotted startColor="#ff6bc1" endColor="#18d6fb"/}第二种插件支持IPV6和IPV4归属地获取并且 为了避免卡顿或者获取失败 数据库都是本地 不调用任何第三方API接口{cloud title="获取代码资源" type="lz" url="https://suxiaoq.lanzoul.com/ipUtV10whrwf" password=""/}解压后修改文件夹名为 XQLocation，将插件上传至网站目录的 /usr/plugins 下在 Typecho 后台「插件管理」处启用插件Joe主题的comment.php文件在/Joe/public/comment.php,class="agent"的div中插入<div class="agent"><?php XQLocation_Plugin::render($comments->ip); ?> · <?php _getAgentOS($comments->agent); ?> · <?php _getAgentBrowser($comments->agent); ?></div>插入代码<?php XQLocation_Plugin::render($comments->ip); ?>（此项也适用于后台）此方法来自于 晓晴博客
博客bug等待解决。。。 今天发现了一个问题，当回复评论区的评论时，点击回复按钮，这时候刷新网页，这台手机就会在一段时间内获取不到这个博客网站的链接，这是移动端的问题，在pc端同样，点击回复按钮后，或者回复评论之后刷新网页，有概率会出现无法获取链接的情况，但是过一段时间会自动恢复，个人感觉时服务器网络的问题，但是又找不出问题在哪里，就很奇怪，这个问题有待考究。新问题发现(2023.10.11 10:43)：点击某些按钮也可能会出现上述情况，如文章下方爱心按钮，登录按钮等。。。{music id="2033080138" color="#fbb318" autoplay="autoplay"/}
人生倒计时
热门文章
舔狗日记