小猫开源-在线考试/windows部署

本文详细介绍了V3.x在Windows环境下的部署过程,包括一键安装和手工安装两种方式。一键安装涉及下载安装包、启动程序、配置数据库和考试服务等步骤;手工安装则涵盖JDK、MySQL、Maven、Node.js和Python的安装,并指导如何启动前后端服务。文章特别提到了防火墙规则调整和外网访问设置,确保系统的正常运行。

小猫开源-在线考试/windows部署

windows安装

::: warning 注意事项
操作系统要求:win7、win10,win11、win2016
软件版本要求:jdk8、mysql5.7、maven3.8、node18
:::

基础配置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1、选择:控制面板/Windows 防火墙/打开或关闭windows防火墙
2、选择:关闭Windows 防火墙(不推荐)
3、确定
4、配置ip地址:192.168.0.86
5、确定

jdk下载

在这里插入图片描述
在这里插入图片描述

1、浏览器打开 https://www.oracle.com/java/technologies/downloads/#java8
2、选择 Windows/jdk-8u431-windows-x64.zip/I reviewed.../Download jdk-8u431-windows-x64.zip
3、输入账号密码,点击下一步
4、下载完成

jdk安装

在这里插入图片描述

1、解压jdk到D:\soft\
2、打开 计算机/属性/高级系统设置/高级/环境变量/新建
3、配置JAVA_HOME=D:\soft\jdk1.8.0_431
4、追加PATH=%JAVA_HOME%/bin;
5、打开dos窗口,执行java -version
6、校验完成:显示jdk版本

mysql下载

在这里插入图片描述

在这里插入图片描述

1、浏览器打开 https://dev.mysql.com/downloads/mysql/
2、选择 Archives
3、选择 5.7.44/Microsoft Windows/Windows (x86, 64-bit)/Download
4、下载完成

mysql安装

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

1、解压mysql到D:\soft\
2、打开 计算机/属性/高级系统设置/高级/环境变量/新建
3、配置MYSQL_HOME=D:\soft\mysql-5.7.44-winx64
4、追加PATH=%MYSQL_HOME%/bin;
5、打开dos窗口
6、初始化data目录:mysqld --initialize
7、安装服务:mysqld -install MYSQL_EXAM
8、启动服务:net start MYSQL_EXAM
9、打开文件:mysql-5.7.44-winx64/data/Win7-2021XTAINP.err
10、找到密码:[Note] A temporary password is generated for root@localhost: EUW:atN9sgLR
11、打开dos窗口
12、输入账号:mysql -uroot -p
13、输入密码:EUW:atN9sgLR
14、重置密码:alter user 'root'@'localhost' identified by 'root';
15、安装完成

maven下载

在这里插入图片描述

1、浏览器打开 https://maven.apache.org/download.cgi
2、点击 apache-maven-3.8.8-bin.zip
3、下载完成

maven安装

在这里插入图片描述

1、解压maven到D:\soft\
2、打开 计算机/属性/高级系统设置/高级/环境变量/新建
3、配置MVN_HOME=D:\soft\apache-maven-3.8.8
4、追加PATH=%MVN_HOME%/bin;
5、打开dos窗口,执行mvn -v
6、校验成功:显示mvn版本

node下载

在这里插入图片描述

1、浏览器打开 https://nodejs.org/zh-cn/download/prebuilt-binaries
2、选择 windows/x64/v18.20.4(LTS)/下载Node.js v18.20.4
3、下载完成

node安装

在这里插入图片描述

1、解压node到D:\soft\
2、打开 计算机/属性/高级系统设置/高级/环境变量/新建
3、配置NODE_HOME=D:\soft\node-v18.20.4-win-x64
4、追加PATH=%NODE_HOME;
5、配置NODE_SKIP_PLATFORM_CHECK=1
6、打开dos窗口,执行node -v
7、校验成功:显示node版本

HBuilderX下载

在这里插入图片描述

1、浏览器打开 https://www.dcloud.io/hbuilderx.html
2、点击 Download for Windows
3、下载完成

HBuilderX安装

在这里插入图片描述

1、解压HBuilderX到D:\soft\,并打开
2、浏览器打开 https://ext.dcloud.net.cn/plugin?id=5701
3、选择 下载插件并导入HBuilderX/是
4、校验成功:插件【dart-sass编译】安装成功!

wkhtmltopdf下载

在这里插入图片描述

1、浏览器打开 https://wkhtmltopdf.org/downloads.html
2、点击 7z Archive (XP/2003 or later) 64-bit
3、下载完成

wkhtmltopdf安装

  • V5.1.0新增,支持试卷导出,可选配置,需要导出试卷时使用

在这里插入图片描述

1、解压 wkhtmltox 到 D:\soft\
2、打开 计算机/属性/高级系统设置/高级/环境变量/新建
3、配置WK_HOME=D:\soft\wkhtmltox
4、追加PATH=%WK_HOME%/bin;
5、打开dos窗口,执行 wkhtmltopdf -V
6、校验完成:显示wkhtmltopdf版本

源码下载

在这里插入图片描述

1、浏览器打开 https://gitee.com/qq1247/xmky-exam
2、选择 克隆/下载/下载ZIP
3、下载完成

后端程序启动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1、解压源码到D:\soft\
2、打开dos窗口
3、连接到mysql服务器:mysql -uroot -proot
4、创建exam库,指定编码为utf-8:create database xmky_exam default character set utf8 collate utf8_general_ci;
5、和服务端通信使用utf-8编码:set names utf8;
6、进入exam库:use xmky_exam;
7、导入初始脚本:source D:\soft\exam-master\db\mysql\4.6.0.sql
8、打开dos窗口
9、切换到后端目录:cd ./src
10、打包(使用国内镜像):mvn clean package
11、切换到打包文件目录:cd ./sys-web/target/
12、启动程序:java -Dfile.encoding=UTF-8 -jar xmky-exam-4.6.0.jar
13、校验成功:启动端口8000,启动时间:12.526秒

PC端程序启动

在这里插入图片描述
在这里插入图片描述

1、打开dos窗口
2、切换到h5目录:cd h5
3、npm使用国内镜像源:npm config set registry https://registry.npmmirror.com/
4、npm安装:npm install
5、pc端打包:npm run build
6、复制h5/dist到src/sys-web/target/下,并重命名为h5(后端集成了PC端无须nginx)
7、编辑src/sys-web/target/h5/config.js,修改ip为对外ip
8、保存配置
9、浏览器打开 http://192.168.0.86:8000
10、校验成功:输入账号密码登录(admin/111111)

移动端程序启动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1、拖拽m文件夹到HBuilderX
2、在项目根目录(m文件夹)右键/使用命令行窗口打开所在目录(U)/使用外部终端(E)/npm install
2、在项目根目录(m文件夹)左键/发行(U)/网站-PC Web或手机H5(仅适用于uni-app)(H)/发行(P)
3、输入账号密码,点击登录(没有的需要先注册)
4、复制 m\unpackage\dist\build\web到src/sys-web/target/下,并重命名为m(后端集成了移动端无须nginx)
5、编辑src/sys-web/target/m/static/config.js,修改ip为对外ip
6、保存配置
7、浏览器打开,按F12打开调试模式,选择响应式设计模式(移动端模式)
8、浏览器输入 http://192.168.0.86:8000
9、校验成功:考试用户账号密码登录
### Element UI `el-table` 组件中的行选中和全选功能 为了实现在 `el-table` 中的行选中以及全选操作,可以利用 `el-table-column` 的 `type="selection"` 属性来启用选择列。对于跨分页全选的需求,则需额外处理数据源与已选项之间的关系。 #### 基础配置 通过设置 `<el-table>` 和带有 `type="selection"` 类型的选择框列,能够使表格支持单行或多行记录的手动勾选: ```html <template> <div> <!-- 表格 --> <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <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> <!-- 底部工具栏 --> <span class="example-pagination-block"> <el-button size="small" @click="toggleSelectAll">切换全部</el-button> <el-button size="small" @click="clearSelections">清空选择</el-button> </span> </div> </template> ``` 此部分代码定义了一个基本结构用于展示列表并允许用户手动挑选特定条目[^2]。 #### 跨分页全选逻辑 当涉及到多个页面的数据时,简单的本地状态不足以跟踪所有被标记的对象。因此,在 Vuex 或者其他全局管理器的帮助下保存整个集合的状态变得至关重要。下面是一个简化版的方法概述: - 创建一个独立数组存储已被选中的 ID 列表。 - 当点击全选按钮时,遍历当前显示的数据集并将它们加入到上述提到的外部维护的ID列表里去。 - 对于取消全选的操作则相反,移除对应范围内的项目即可。 - 更新视图层面上的表现形式(即哪些行应该呈现为“已选中”的样式),这通常意味着同步更新内部缓存同实际渲染出来的DOM节点间的一致性。 具体实现细节会依赖于应用的具体架构设计和个人偏好,但核心思路保持不变[^1]。 #### 方法示例 以下是几个辅助函数的例子,用来控制选择行为: ```javascript <script setup lang="ts"> import { ref, onMounted } from 'vue'; const multipleTableRef = ref(null); let tableData = [ { date: "2016-05-03", name: "Tom", address: "No. 189, Grove St, Los Angeles" }, // ...更多模拟数据... ]; // 存储所有选中的id const selectedIds = new Set(); function handleSelectionChange(selection) { selection.forEach(item => { selectedIds.add(item.id); // 添加至Set集合 }); } function toggleSelectAll() { const allRows = [...Array(tableData.length).keys()].map(i => i + 1); if (selectedIds.size === allRows.length) { clearSelections(); } else { selectAllRows(allRows); } } function selectAllRows(rows) { rows.forEach(rowId => { const row = tableData.find(r => r.id === rowId); if (!selectedIds.has(row.id)) { selectedIds.add(row.id); multipleTableRef.value?.toggleRowSelection(row, true); } }); } function clearSelections() { selectedIds.clear(); // 清理set multipleTableRef.value?.clearSelection(); // 移除UI上的高亮 } </script> ``` 这段脚本展示了如何监听选择变化事件,并提供了两个主要的功能——一键全选/反向全选(`toggleSelectAll`)和清除现有选择(`clearSelections`)。注意这里假设每一条记录都有唯一的 `id` 字段以便追踪。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值