Skip to content
GitLab
Commit e59f5971 authored by chenhan wang's avatar chenhan wang
Browse files

feat:add frontend codes.

parent 1bc30dc4
Show whitespace changes
Inline Side-by-side
frontend/comment_area/src/pages/api/api.js 0 → 100644
View file @ e59f5971
// JavaScript source code
import React from 'react';
import axios from 'axios';
//const webSite="http:"
//请求拦截器 一个回调
axios.interceptors.request.use((config) => {
config.baseURL = 'http://localhost:8089'//修改baseURL
return config
})
//响应拦截器 两个回调
axios.interceptors.response.use(
//响应成功回调
(res)=> {
console.log('success')
return res.data
},
//响应失败回调
(err) => {
return Promise.reject(err)
return new Promise(() => { })//中断
}
)
async function test1() {
//get
//简化写法 let result = await axios.get('/persons')//await等成功de值
//console.log(result.data.data)
try {
let result = await axios({
url: '/persons234',
method: 'GET'
})
console.log('成功了', result)
} catch (error) {
console.log('失败了', error)
}
}//获取所有人 get无参数
//常见的request方式
//GET查 POST增 PUT改 DELETE删
//请求参数
//query参数 （查询字符串参数）
//params 参数
//请求体参数（json编码、urlencoded编码） 4*3除了GET+请求体
//GET 获取
async function test2(){//获取一个人 query参数
//参数直接写在路径 simple
//let result = await axios.get('/person?id=123456789')
//or写在配置项
let result = await axios.get('/person', {
params: {
id: '123123'
}
})
console.log(result)
}
//GET params 通过age获得一堆人
async function test3() {
//简单写法 没有配置项写法
//let result = await axios.get('/filter/18/男/学生')//params没有问号
//console.log(result)
//复杂写法
let result = await axios({
url: '/filter/19',
method: 'GET'
})
console.log(result)
}
async function posttext1(text,time,ttyy,pass) {
//ez
//axios.post('/file', { name: 'shuo', age: 18 })//option自带请求
//请求体参数 url[data[config]]
//urlencoded编码
//let result = await axios.post('/person','name=老八&age=32')
//复杂
let result = await axios({
url: '/api/file/upload',
method: 'post',
params: {//query
FileName: "i",// 文件名,比如 xxx
Type: ttyy ,//文件类型，比如c
Expiration: time,//过期时间,单位
User: "",//用户名
Passwd: pass,//密码
Content: text// 传输的文本，源代码
},
//data: 'name=xx&age=xx'//请求体参数
})
console.log(result)
}
async function posttext(text,fileContent,time,ttyy,pass) {
var content="";
if(text==""){
if(fileContent==""){
content="";
}else{
content=fileContent;
}
}else{
content=text;
}
if(time==""){
var curTime=new Date();
var timeD=new Date(curTime.setMinutes(curTime.getMinutes()+30));
time=timeD.toISOString();
}else{
time=new Date(time).toISOString();
}
//var content=fileContent;
fetch('http://localhost:8089/api/text/upload', {
method: 'POST',
body: JSON.stringify({
Name: "i",// 文件名,比如 xxx
FileType: ttyy ,//文件类型，比如c
Expiration: time,//过期时间,单位
User: "",//用户名
Passwd: pass,//密码
Content: content// 传输的文本，源代码
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
'Cookie': document.cookie // 在请求头中带上cookie
},
})
.then((response) => response.json())
//.then((data) =>{console.log(data)})
.catch((err) => {
console.log(err.message);
});
}
async function getText(url, pass) {
try {
const response = await fetch('http://localhost:8089/api/text/download', {
method: 'POST',
body: JSON.stringify({
Url: url,
Passwd: pass, //密码
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
'Cookie': document.cookie // 在请求头中带上cookie
},
});
const data = await response.json();
return data;
} catch (err) {
console.log(err.message);
return null;
}
}
export default posttext;
export { posttext, getText }
//PUT 更新
//DELETE 删除
\ No newline at end of file
frontend/comment_area/src/pages/components/.vs/ProjectSettings.json 0 → 100644
View file @ e59f5971
{
"CurrentProjectSetting": null
}
\ No newline at end of file
frontend/comment_area/src/pages/components/.vs/VSWorkspaceState.json 0 → 100644
View file @ e59f5971
{
"ExpandedNodes": [
""
],
"PreviewInSolutionExplorer": false
}
\ No newline at end of file
frontend/comment_area/src/pages/components/code.js 0 → 100644
View file @ e59f5971
import React, { useState, useEffect, useRef } from 'react';
import { Input } from 'antd';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/atom-one-dark.css';
hljs.registerLanguage('javascript', javascript);
export let text = '';
const Code = ({ onTextChange }) => {
const [value, setValue] = useState('');
const codeRef = useRef(null);
const onChange = (e) => {
text = e.target.value;
setValue(text);
};
useEffect(() => {
hljs.highlightAll();
}, [value]);
return (
<>
<Input.TextArea
value={value}
onChange={onChange}
placeholder="paste the file here"
style={{ width: '80%', height: '200px' }}
ref={codeRef}
/>
<pre ref={codeRef}>
<code className="hljs javascript" style={{ width: '80%', height: '200px' }}>
{value}
</code>
</pre>
</>
);
};
export default Code;
frontend/comment_area/src/pages/components/download.js 0 → 100644
View file @ e59f5971
import React, { useState } from 'react';
import { Button, Space, Input } from 'antd';
import {getText} from '../api/api';
import Code2 from './showCode';
import Pass from './password';
import {pass} from './password';
const Download = () => {
const [url, setUrl] = useState('');
const [text, setText] = useState('');
const [state_, setState_] = useState(1);
const handleUrl = (e) => {
setUrl(e.target.value);
};
const handleClick = () => {
getText(url, pass).then((response) => {
if (response != null) {
if (response.Code === 200) {
setText(response.Data.Content);
} else {
if (response.Code === 403) {
setText(response.Msg);
setState_(2); // to auth
} else {
setText(response.Msg);
setState_(3); // 过期
}
}
}
});
};
const handleReturn=()=>{
setState_(1);
setText("");
}
return (
<div>
{state_ === 1 ? (
<div>
<Input
placeholder="Enter URL"
style={{ width: '35%', height: '20px', marginBottom: '10px' }}
onChange={handleUrl}
onPressEnter={handleClick}
/>
<Pass />
<Code2 value={text} />
<Space wrap>
<Button type="primary" onClick={handleClick}>
Download
</Button>
</Space>
</div>
) : state_ === 2 ? (
<div>
<p>Authenticating...</p>
</div>
) : (
<div>
<p>{text}</p>
<Button type="primary" onClick={handleReturn}>
Return
</Button>
</div>
)}
</div>
);
};
export default Download;
frontend/comment_area/src/pages/components/link.js 0 → 100644
View file @ e59f5971
// JavaScript source code
import React from 'react';
import { Button, Popover } from 'antd';
const content = (
<div>
<p>https://www.baidu.com</p>
</div>
);
const Link = () => (
<Popover content={content} >
<Button type="primary">Link</Button>
</Popover>
);
export default Link;
\ No newline at end of file
frontend/comment_area/src/pages/components/password.js 0 → 100644
View file @ e59f5971
import React, { useState } from 'react';
import { Input } from 'antd';
export let pass = '';
const Pass = () => {
const handlePasswordChange = (e) => {
pass = e.target.value;
};
return (
<Input placeholder="Password" type="password" onChange={handlePasswordChange} />
);
};
export default Pass;
frontend/comment_area/src/pages/components/showCode.js 0 → 100644
View file @ e59f5971
import React, { useState, useEffect, useRef } from 'react';
import { Input } from 'antd';
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/atom-one-dark.css';
hljs.registerLanguage('javascript', javascript);
const Code2 = ({value}) => {
const codeRef = useRef(null);
useEffect(() => {
hljs.highlightAll();
}, [{value}]);
return (
<>
<pre ref={codeRef}>
<code className="hljs javascript" style={{ width: '80%', height: '200px' }}>
{value}
</code>
</pre>
</>
);
};
export default Code2;
frontend/comment_area/src/pages/components/submit.js 0 → 100644
View file @ e59f5971
import React from 'react';
import { Button, Space } from 'antd';
import posttext from '../api/api';
import {pass} from './password';
import {text} from './code';
import {time} from './time';
import {ttyy} from './type';
import { fileContent } from './upload';
const handleClick = () => {
posttext(text, fileContent.content, time, ttyy, pass);
};
const Submit = () => (
<Space wrap>
<Button type="primary" onClick={handleClick}>Submit</Button>
</Space>
);
export default Submit;
frontend/comment_area/src/pages/components/time.js 0 → 100644
View file @ e59f5971
import React, { useState } from 'react';
import { Input } from 'antd';
export let time = '';
const Time = () => {
const handleTimeChange = (e) => {
time = e.target.value;
};
return (
<Input placeholder="Time Of File (secs)"
type="datetime-local"
style={{ width: '35%', height: '20px' }}
onChange={handleTimeChange} />
);
};
export default Time;
\ No newline at end of file
frontend/comment_area/src/pages/components/times.js 0 → 100644
View file @ e59f5971
// JavaScript source code
import React from 'react';
import { Input } from 'antd';
export var times;
const Times = () => <Input placeholder="Allowed access times" onchange={()=>times=onchange} />;
export default Times;
\ No newline at end of file
frontend/comment_area/src/pages/components/type.js 0 → 100644
View file @ e59f5971
import React, { useState } from 'react';
import { Input } from 'antd';
export let ttyy = '';
const Type = () => {
const handleTypeChange = (e) => {
ttyy = e.target.value;
};
return (
<>
<input id="CardType"
type="text"
list="appNamelist"
class="input"
placeholder="file type"
autoComplete="off"
value={ttyy}
onChange={handleTypeChange}/>
<datalist id="appNamelist">
<option>.md</option>
<option>.txt</option>
<option>.tex</option>
<option>.csv</option>
</datalist>
</>
);
};
export default Type;
//<Input placeholder="file type" onChange={handleTypeChange} />
\ No newline at end of file
frontend/comment_area/src/pages/components/upload.js 0 → 100644
View file @ e59f5971
// JavaScript source code
import React from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Upload } from 'antd';
export const fileContent = {
content: ''
};
const props = {
name: 'file',
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
headers: {
authorization: 'authorization-text',
},
onChange(info) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`);
const file = info.file.originFileObj; // 获取上传文件的 File 对象
const reader = new FileReader();
reader.readAsText(file); // 以文本格式读取上传文件
reader.onload = function () {
fileContent.content = reader.result; // 将读取结果保存到 fileContent 对象的 content 属性中
console.log(fileContent.content); // 打印读取结果
};
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
fileContent.content = ''; // 上传失败时将 content 属性置为空字符串
}
},
};
const Up = () => (
<Upload {...props}>
<Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>
);
export default Up;
\ No newline at end of file
frontend/comment_area/src/pages/components/viewselect.js 0 → 100644
View file @ e59f5971
import React, { useState } from 'react';
import { Button, Space } from 'antd';
const ViewSelect = ({ setShow }) => {
const handleClick = (show) => {
setShow(show);
};
return (
<Space direction="horizontal" style={{ display: "inline-flex" }}>
<Button type="primary" onClick={() => handleClick(1)}>upload</Button>
<Button type="primary" onClick={() => handleClick(2)}>download</Button>
</Space>
);
};
export default ViewSelect;
frontend/comment_area/src/style/App.css 0 → 100644
View file @ e59f5971
.back{
position:relative;
height:70%;
width:70%;
}
.CodeBox{
position: relative;
height:70%;
width:70%;
}
Supports Markdown
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