xjunjin的博客

项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。选择分支、分配容器

项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 教师端 发布通知 const releaseNotice = (curr: CurriculumDataIf) => { releaseNoticeForm.content = ''; releaseNoticeForm.title = ''; releaseNoticeForm.id = curr.id; releaseNoticeForm.idx = curriculum

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 教师端 新建组织 const AddCurriculum = () => { createCurrForm.name = ''; createCurrForm.courseId = ''; createCurrForm.des = ''; createCurrFormVisible.value = true; } const ConfirmAddCurr = () =&gt

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 学生项目管理 获取已有项目 const handleProjectTabClick = (pane: TabsPaneContext, ev: Event) => { if (pane.paneName == '3' && projectData.value.length == 0) { request('/weblab/project/getProjectLis

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 教师端建立组织，得到组织邀请码，并可以设置课程时间、发布作业、发布通知等操作。 学生端可以根据邀请码搜索并加入组织，并添加了通知模块。 教师组织模块 <el-tab-pane label="组织中心" name="1"> <el-dialog v-model="createCurrFormVisible" title="添加组织" width="30%"&g

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 添加上传用户信息、项目管理以及组织管理模块。 通过请求和响应拦截器验证token instance.interceptors.request.use( function (config) { if(config.headers!.access_token==''){ config.headers!.access_token=store.getT

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 添加教师模块 教师主页面 可以添加课程、班级，邀请学生、查看学生作业等功能 <template> <el-header> <topmenu active-index="2" @on-index-change="onMenuIdxChange"></topmenu> </el-header> <el-main

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 添加tab栏，并完成打包发送请求。 添加tab栏 coding页面结构 <template> <el-header> <topmenu :activeIndex=activeIndex @on-index-change="onIndexChange"></topmenu> </el-header> <el

前言 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 完善文件压缩类 import JSZip from 'jszip'; import { saveAs } from 'file-saver'; enum FileType { root, folder, ts, js, html, css, md, txt, } const fileTypes = function (type: string

前言 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 完善现有文件管理器 现有的文件管理器只实现了基本的样式，以及鼠标右键可以添加新文件，但是鼠标右键唤出的菜单栏是固定位置。因此需要进一步完善，首先更改文件列表的样式，实现文件夹与文本文件的区分；另外实现鼠标右键可以创建文件夹、创建文件、重命名、删除文件、删除文件夹等操作。 定义文件类型枚举和节点类型接口 enum FileType { folder, ts, js, html, css

前言 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 实现zip文件上传页面 代码 <template> <el-header> <topmenu-login-vue :activeIndex="'3'"></topmenu-login-vue> </el-header> <el-main> <div class="login-wrap">

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 实现登出和忘记密码功能 登出 function goto_codingview() { ElMessageBox.confirm( '是否确认退出?', '退出提示', { confirmButtonText: '确认', cancelButtonText: '取消', }

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 本周任务 利用axios实现像后端发送注册、校验、登录请求，并将返回的token存下来 解决axios跨域问题 在vite.config.ts中添加server配置 import { fileURLToPath, URL } from "url"; import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue";

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 用pinia、router和localStorage实现本地的注册、登录、重置密码、登出等功能。 store.ts import { defineStore } from "pinia"; export const useLoginStore = defineStore({ id: "login", state: () => ({ isLogin: Number(lo

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 任务 实现路由限制以及注册时的表单验证 路由限制 给需要登陆状态才能进入的页面添加meta属性 import { createRouter, createWebHistory } from 'vue-router'; import codingViewVue from '../views/coding-view.vue'; import registerViewVue from '../views

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 本周任务 实现登录时的图形验证功能，防止利用脚本恶意登录等行为。 创建component 创建CharacterVerification.vue组件 <template> <div class="CharacterVerification" :style="{'width' : width + 'px','height' : height + 'px'}" ref="Char

前言 项目地址 本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。 本周任务 利用vue和codemirror实现一个简易的在线代码编辑器。 环境安装 用vue自带的脚手架创建项目 vue create fevu 安装vue-codemirror组件 npm install vue-codemirror --save 全局引入 main.js中 import Vue from 'vue' import App from './App.vue' import V