Skip to content

G
gk
Commit 4b680083 authored by daniel's avatar daniel
Browse files
Options

fix(demo): 比赛助手后台管理引入naive ui+vue3 加快开发效率

parent 40bbec20
Hide whitespace changes
Inline Side-by-side
Showing with 401 additions and 4 deletions
src/main/java/com/dlbridge/jadp/plugins/cmpt/web/DemoController.java 0 → 100644
View file @ 4b680083
package com.dlbridge.jadp.plugins.cmpt.web;
import com.dlbridge.jadp.common.interceptor.PageView;
import com.dlbridge.jadp.plugins.cmpt.dao.model.Cmpt;
import com.dlbridge.jadp.plugins.cmpt.service.CmptService;
import lombok.extern.log4j.Log4j2;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import springfox.documentation.annotations.ApiIgnore;
import javax.annotation.Resource;
@RequestMapping(value = "/gk/demo/")
@RestController
@ApiIgnore
@Log4j2
public class DemoController {
@Resource
private CmptService cmptService;
@RequestMapping("index/{cmptId}")
@PageView
public ModelAndView index(@PathVariable("cmptId") Integer cmptId, ModelAndView mv) {
Cmpt cmpt = cmptService.queryCmptBycmptId(cmptId);
mv.setViewName("cmpt/demo");
mv.addObject("cmpt", cmpt);
return mv;
}
}
src/main/webapp/WEB-INF/views/cmpt/demo.jsp 0 → 100644
View file @ 4b680083
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %>
<%@ taglib prefix="fnc" uri="/WEB-INF/tlds/fnc.tld" %>
<c:set var="ctx" value="${pageContext.request.contextPath}${fns:getAdminPath()}" />
<c:set var="path" value="${pageContext.request.contextPath}${fns:getPath()}" />
<c:set var="jaaproot" value="${pageContext.request.contextPath}" />
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static" />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理系统</title>
<!-- ... 保留原有的 Vue 引入 ... -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- 添加 Naive UI 的引入 -->
<!-- 会使用最新版本，你最好指定一个版本 -->
<script src="https://unpkg.com/naive-ui"></script>
<!-- <script nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> -->
<script type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<!-- Favicon-->
<link rel="shortcut icon" href="https://img.geexek.com/files/home/favicon.ico">
<!-- 自定义css -->
<link rel="stylesheet" href="${ctxStatic}/css/base.css">
<style>
#app {
padding: 20px;
}
.layout {
min-height: 100vh;
}
.carousel-img {
width: 100%;
height: 240px;
object-fit: cover;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<n-config-provider>
<n-modal-provider>
<n-message-provider>
<n-notification-provider>
<my-app></my-app>
</n-notification-provider>
</n-message-provider>
</n-modal-provider>
</n-config-provider>
</div>
<script type="text/x-template" id="my-app">
<n-space>
<n-button tertiary>
Default
</n-button>
<n-button tertiary type="primary">
Primary
</n-button>
<n-button tertiary type="info">
Info
</n-button>
<n-button tertiary type="success">
Success
</n-button>
<n-button tertiary type="warning">
Warning
</n-button>
<n-button tertiary type="error">
Error
</n-button>
<n-button tertiary round>
Default
</n-button>
<n-button tertiary round type="primary">
Primary
</n-button>
<n-button tertiary round type="info">
Info
</n-button>
<n-button tertiary round type="success">
Success
</n-button>
<n-button tertiary round type="warning">
Warning
</n-button>
<n-button tertiary round type="error">
Error
</n-button>
<n-button tertiary circle>
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
<n-button tertiary circle type="primary">
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
<n-button tertiary circle type="info">
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
<n-button tertiary circle type="success">
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</n-button>
<n-button tertiary circle type="warning">
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
<n-button tertiary circle type="error">
<template #icon>
<n-icon>
<ion-icon name="cash"></ion-icon>
</n-icon>
</template>
</n-button>
</n-space>
<n-dropdown trigger="hover" :options="options" @select="handleSelect">
<n-button>找个地方休息</n-button>
</n-dropdown>
<n-space>
<n-tag>Real Love</n-tag>
<n-tag type="success">
Yes It Is
</n-tag>
<n-tag type="warning">
I'm Down
</n-tag>
<n-tag type="error">
Yesterday
</n-tag>
<n-tag type="info">
I'm Looking Through You
</n-tag>
</n-space>
<n-form
ref="formRef"
inline
:label-width="80"
:model="formValue"
:rules="rules"
size="small"
>
<n-form-item label="Name" path="user.name">
<n-input v-model:value="formValue.user.name" placeholder="Input Name" />
</n-form-item>
<n-form-item label="Age" path="user.age">
<n-input v-model:value="formValue.user.age" placeholder="Input Age" />
</n-form-item>
<n-form-item label="Phone" path="phone">
<n-input v-model:value="formValue.phone" placeholder="Phone Number" />
</n-form-item>
<n-form-item>
<n-button @click="handleValidateClick">
Validate
</n-button>
</n-form-item>
</n-form>
<pre>{{ JSON.stringify(formValue, null, 2) }}
</pre>
<n-slider v-model:value="slide" :step="10" />
<n-time-picker default-formatted-value="00:12:13" />
<n-data-table
:columns="columns"
:data="data"
:pagination="pagination"
:bordered="false"
/>
<n-button @click="handleClick">
Start me up
</n-button>
<n-modal title="Card preset draggable"
preset="card"
draggable v-model:show="showModal" >
<n-card
style="width: 600px"
title="Modal"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
666s
</n-card>
</n-modal>
<n-space>
<n-button @click="notify('info')">
Info
</n-button>
<n-button @click="notify('success')">
Success
</n-button>
<n-button @click="notify('warning')">
Warning
</n-button>
<n-button @click="notify('error')">
Error
</n-button>
</n-space>
</script>
<script>
const { createApp, defineComponent, ref } = Vue;
const { useMessage, useNotification } = naive
const MyApp = defineComponent({
name: 'MyApp',
template: '#my-app',
setup() {
const message = useMessage()
const notification = useNotification()
const formRef = ref(null)
const showModalRef = ref(false)
const handleClick = () => {
showModalRef.value = true
}
return {
notify(type) {
notification[type]({
content: 'What to say?',
meta: 'I don\'t know',
duration: 2500,
keepAliveOnHover: true
})
},
formRef,
showModal: showModalRef,
handleClick,
slide: ref(50),
formValue: ref({
user: {
name: '',
age: ''
},
phone: ''
}),
data: [
{ no: 3, title: 'Wonderwall', length: '4:18' },
{ no: 4, title: 'Don\'t Look Back in Anger', length: '4:48' },
{ no: 12, title: 'Champagne Supernova', length: '7:27' }
],
pagination: ref({ pageSize: 5 }),
columns: [{
title: 'No',
key: 'no'
},
{
title: 'Title',
key: 'title'
},
{
title: 'Length',
key: 'length'
},
{
title: 'Action',
key: 'actions'
}],
rules: {
user: {
name: {
required: true,
message: 'Please input your name',
trigger: 'blur'
},
age: {
required: true,
message: 'Please input your age',
trigger: ['input', 'blur']
}
},
phone: {
required: true,
message: 'Please input your number',
trigger: ['input']
}
},
handleValidateClick(e) {
e.preventDefault()
formRef.value?.validate((errors) => {
if (!errors) {
message.success('Valid')
}
else {
console.log(errors)
message.error('Invalid')
}
})
},
options: [
{
label: '滨海湾金沙，新加坡',
key: 'marina bay sands',
disabled: true
},
{
label: '布朗酒店，伦敦',
key: 'brown\'s hotel, london'
},
{
label: '亚特兰蒂斯巴哈马，拿骚',
key: 'atlantis nahamas, nassau'
},
{
label: '比佛利山庄酒店，洛杉矶',
key: 'the beverly hills hotel, los angeles'
}
],
handleSelect(key) {
message.info(String(key))
}
}
}
})
// app.use(naive).mount('#app');
// const MyApp = defineComponent({
// name: 'MyApp',
// template: '#my-app-template',
// setup() {
// const message = useMessage()
// const buttonText = ref("点击我")
// const handleClick = () => {
// message.success("你点了按钮！")
// }
// return { buttonText, handleClick }
// }
// })
const app = Vue.createApp({})
app.component('my-app', MyApp)
app.use(naive)
app.mount('#app')
</script>
</body>
</html>
\ No newline at end of file
src/main/webapp/WEB-INF/views/cmpt/outter-link.jsp
View file @ 4b680083
......@@ -572,7 +572,6 @@
layer.msg("AppId不能为空！", { icon: 5, duration: 1500 });
return;
}
console.log(this.letter.openType)
if (this.letter.openType == 0) {
this.letter.content = this.editor.getContent();
}
......@@ -582,7 +581,7 @@
}
$.ajax({
url: '/gk/sure-letter/updateName',
data: JSON.stringify(this.letter),
data: JSON.stringify({ ...this.letter, name: nameWeb }),
contentType: 'application/json',
type: 'post',
beforeSend: function () {
......@@ -637,7 +636,7 @@
layer.msg('上传成功', { icon: 1, time: 1500 });
this.$forceUpdate(); // 强制更新视图
} else {
layer.msg(res.msg, {icon: 2});
layer.msg(res.msg, { icon: 2 });
}
},
beforeSend: () => {
......@@ -685,7 +684,7 @@
$("#link").val(res.content)
this.$forceUpdate(); // 强制更新视图
} else {
layer.msg(res.msg, {icon: 2});
layer.msg(res.msg, { icon: 2 });
}
},
beforeSend: () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment