编程导航会员会员
登录/注册

编程导航的第一个项目OJ

编程导航的第一个项目

  • OJ系统
▼
text
复制代码
介绍下自己呗,就一个普通的前端页面仔(双非大三),不信大环境就自己往死里钻!
AI的出现就有点慌了，感觉前端废了，直接学全栈了,这里对自己写的项目做个记录

Github：https://github.com/Musicys/javaOJ-LION

看完做完这项目大概用了一个月,我之前也写过springboot,就B站自学的，不过接口写的很慢，经过这个项目的洗礼：现在我感觉增删改查写的666的,养成了一个爱写文档的好习惯,下个项目直接写匹配中心，从0到1，现在教程看完了，任重道远，只为月薪过万-.-

项目介绍 （Gitub：文档摘要)

OJ-LION:

▼
text
复制代码
全栈OJ系统，自动判题，ai生成题，检错，评论注册登录，等功能，有帮助到您，可以点个start

技术选型


- 前端 
▼
text
复制代码
    初始化:vue3 webpack vue-cli Typescript
    插件：
    1.vuex：用户登录信息存储
    2.vue-router:路由权限控制
    3.md插件
    4.代码编辑器插件
    5.Arco Design Vue组件库
    6.open Api 自动化接口文档

- 后端 
▼
text
复制代码
    初始化:Sprinboot MYSQL Redis Mybtisplus 
    核心功能：
    1. QQ邮箱发送
    2. cos存储
    3. 千问模型
   4. Swagger + Knife4j 接口文档工具

项目介绍

OJ-LION

▼
txt
复制代码
    这是个简便的OJ系统（编程导航的教程二开），当然你可以进行三开！,毕设等（目前功能介绍）
    
    毕设我可以提供下思路：
    比如
    - 表格换成卡片
    - 登录界面UI完善（都是ai写了，所以简便）
    - 注册界面UI完善（都是ai写了，所以简便）
    列如：在线竞赛（功能）其他语言的实现等
    功能介绍：
    (用户)
    1.QQ邮箱注册
    2.账号密码登录
    3.评论点赞留言
    4.查看留言
    5.提交题目
    6.查看提交题目状态
    7.修改个人信息，个人提交数等
    
     (管理员)
    8.修改题目
    9.添加题目
    10.ai添加题目（有点费token，千问免费，就是有点慢）
    11.查看所有用户的提交信息

##目录介绍

  • .vscode
  • li-backend-master：后端代码
  • li-code-sandbox-master：代码在线沙箱
  • lioj-fonont：前端代码
  • ui：ui图片

搭建步骤

Windows(本地搭建)

  • git clone https://github.com/Musicys
  • 前端（lioj-fonont）：npm i 或者 yarn i
  • 运行npm run serve 打包 npm run bulid 部署推荐Nginx
  • 后端（li-code-sandbox-master）：配置 .env配置 数据库，启动 打包即可
  • 后端沙箱(本地li-code-sandbox-master)：可以使用第三方远程沙箱，或者docker配置沙箱

项目演示

管理员账号：liwang


密码：12345678


项目演示地址：(http://101.42.172.99/)


请勿dos攻击，服务器崩溃不在上线

在线判题项目
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
cv大师
cv大师
等级
内容推荐
更多
各位同学好，在做 OJ 项目，做到了 java 操作 docker，遇到了这个问题卡住了。自己目前做过以下修改，添加netty 依赖，想使用 netty 代替 Jersey HTTP 失败。尝试linux上添加 配置文件也是失败。 卡了好久，谢谢各位老师。
3
请问一下，OJ 项目的 rabbitMQ ，之前电脑装过 3.11.10版本，看到课程中使用的是 3.12.4 的版本，请问我如果不换还是使用之前的版本是否可行？
0
请问一下老师，在OJ 项目中，权限拦截那 使用的是： Spring Cloud Gateway 的 Filter 请求拦截器（内部接口拦截） + （可以进行扩展的 JWT token 实现）。我想根据目前学到的知识，这样做是否可以： Spring Cloud Gateway 的 Filter 请求拦截器 （内部接口拦截） + @AuthCheck 自定义注解 + AOP 切面这种方法
1
有大佬帮忙远程布局部署一下鱼皮的oj判题系统吗？有偿
1
OJ在线判题系统（一）
3
作者分享
更多
前端vue3后台管理系统模板
4
＃ 大三浅谈vuerouter https://router.vuejs.org/zh/guide/ 1）组件： <RouterView /> <RouterLink to="/about">Go to About</RouterLink> 本质上是普通的vue组件 动态路由事例 import User from './User.vue' // 这些都会传递给 `createRouter` const routes = [ // 动态字段以冒号开始 { path: '/users/:id', component: User }, ] 路由配置 url后缀 route.params 单个参数 /users/:username /users/eduardo { username: 'eduardo' } 多个参数/users/:username/:postId /users/eduardo/123 { username: 'eduardo', postId: '123' } <template> <div> <!-- 当前路由可以通过 $route 在模板中访问 --> User {{ $route.params.id }} </div> </template> 动态路由参数监测 <script setup> import { watch } from 'vue' import { useRoute } from 'vue-router' const route = useRoute() watch(() => route.params.id, (newId, oldId) => { // 对路由变化做出响应... }) </script> 任意参数参考高级匹配 router 框架给的方法集全 1.push(跳转，不刷新页面跳转，更新routerview) vue2 this.$router.push(...) vue3 router.push(.......) // 字符串路径 router.push('/users/eduardo') // 带有路径的对象 router.push({ path: '/users/eduardo' }) // 命名的路由，并加上参数，让路由建立 url router.push({ name: 'user', params: { username: 'eduardo' } }) // 带查询参数，结果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // 带 hash，结果是 /about#team router.push({ path: '/about', hash: '#team' }) const username = 'eduardo' // 我们可以手动建立 url，但我们必须自己处理编码 router.push(`/user/${username}`) // -> /user/eduardo // 同样 router.push({ path: `/user/${username}` }) // -> /user/eduardo // 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益 router.push({ name: 'user', params: { username } }) // -> /user/eduardo // `params` 不能与 `path` 一起使用 router.push({ path: '/user', params: { username } }) // -> /user 2全局前置守卫 router.beforeEach 用途路由权限验证 const router = createRouter({ ... }) router.beforeEach((to, from) => { // ... // 返回 false 以取消导航 return false }) router.beforeEach(async (to, from，next) => { if ( // 检查用户是否已登录 !isAuthenticated && // ❗️ 避免无限重定向 to.name !== 'Login' ) { // 将用户重定向到登录页面 return { name: 'Login' } ‖ return '/login' || next({ name: 'Login' }) || ”next(〞Login〞) } }) 3.全局后置钩子 router.afterEach((to, from) => { sendToAnalytics(to.fullPath) }) 它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。 4.路由独享的守卫 进入路由触发，权限校验的一种方式 const routes = [ { path: '/users/:id', component: UserDetails, beforeEnter: (to, from) => { // reject the navigation return false }, }, ] 路由元信息 const routes = [ { path: '/posts', component: PostsLayout, children: [ { path: 'new', component: PostsNew, // 只有经过身份验证的用户才能创建帖子 meta: { requiresAuth: true }, }, { path: ':id', component: PostsDetail // 任何人都可以阅读文章 meta: { requiresAuth: false }, } ] } 路由参数需要监测 组件路由数据获取 import { useRoute } from 'vue-router' import { getPost } from './api.js' const route = useRoute() 常用组合式api <script setup> import { useRouter, useRoute } from 'vue-router' const router = useRouter() const route = useRoute() function pushWithQuery(query) { router.push({ name: 'search', query: { ...route.query, ...query, }, }) } </script> <script setup> import { useRoute } from 'vue-router' import { ref, watch } from 'vue' const route = useRoute() const userData = ref() // 当参数更改时获取用户信息 watch( () => route.params.id, async newId => { userData.value = await fetchUser(newId) } ) </script>
3
下载 APP