fdzcxy212206274
/
kaoshi_houduan
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: fdzcxy212206274:5986e7105b7ff70d0d91d7ed66e11dc569120e7c
Branches Tags
fdzcxy212206274:main
..
compare: fdzcxy212206274:8db5b1d7e4804db52fc301a75c0779eb1eec0b01
Branches Tags
fdzcxy212206274:main

3 Commits
5986e7105b ... 8db5b1d7e4

Author SHA1 Message Date
yuan 8db5b1d7e4 Merge remote-tracking branch 'origin/main'
3 weeks ago
yuan 05e691ae7d 合并前端vue2
3 weeks ago
yuan d206baadf2 合并前端vue2
3 weeks ago
21 changed files with 10670 additions and 2 deletions
Show Stats

4
ruoyi-admin/src/main/resources/application.yml
Unescape View File

@ -15,8 +15,8 @@ ruoyi:
# 开发环境配置 # 开发环境配置
server: server:
# 服务器的HTTP端口，默认为8080 # 服务器的HTTP端口，默认为8081
port: 8080 port: 8081
servlet: servlet:
# 应用的访问路径 # 应用的访问路径
context-path: / context-path: /

23
vue2/vue/.gitignore vendored
Unescape View File

@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

19
vue2/vue/README.md
Unescape View File

@ -0,0 +1,19 @@
# vue
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
vue2/vue/babel.config.js
Unescape View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

19
vue2/vue/jsconfig.json
Unescape View File

@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

10000
vue2/vue/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
vue2/vue/package.json
Unescape View File

@ -0,0 +1,27 @@
{
"name": "vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^1.7.7",
"core-js": "^3.8.3",
"element-ui": "^2.15.14",
"vue": "^2.6.14",
"vue-router": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"vue-template-compiler": "^2.6.14"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
vue2/vue/public/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
vue2/vue/public/index.html
Unescape View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

21
vue2/vue/src/App.vue
Unescape View File

@ -0,0 +1,21 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
/* 添加全局样式 */
</style>

14
vue2/vue/src/assets/gloable.css
Unescape View File

@ -0,0 +1,14 @@
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.ml-5{
margin-left: 5px;
}
.mr-5{
margin-right: 5px;
}
.pd-10{
padding: 10px 0;
}

BIN
vue2/vue/src/assets/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

58
vue2/vue/src/components/HelloWorld.vue
Unescape View File

@ -0,0 +1,58 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

146
vue2/vue/src/components/Login.vue
Unescape View File

@ -0,0 +1,146 @@
<template>
<div class="login-container">
<div class="login-box">
<h2 style="color: white">登录</h2>
<form @submit.prevent="login">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" v-model="username" placeholder="用户名" required />
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" v-model="password" placeholder="密码" required />
</div>
<div class="input-group captcha-group">
<i class="fas fa-shield-alt"></i>
<input type="text" v-model="captcha" placeholder="验证码" required />
<!-- 显示验证码图片 -->
<img :src="captchaUrl" @click="refreshCaptcha" alt="验证码" class="captcha-image" style="margin-top: 5px"/>
</div>
<button type="submit" class="login-button">登录</button>
</form>
<p>没有账户？<router-link to="/register">注册</router-link></p>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
captcha: '', // 存储用户输入的验证码
captchaUrl: '' // 验证码图片的 URL
};
},
methods: {
fetchCaptcha() {
fetch('http://localhost:8081/captchaImage')
.then(response => response.json()) // 将响应解析为 JSON
.then(data => {
if (data.code === 200) {
// 将 Base64 编码的图像转换为数据 URL
this.captchaUrl = `data:image/jpeg;base64,${data.img}`;
} else {
console.error('获取验证码失败:', data.msg);
}
})
.catch(error => {
console.error('获取验证码时出现错误:', error);
});
},
async login() {
try {
const response = await axios.post('http://localhost:8081/login', {
username: this.username,
password: this.password,
captcha: this.captcha // 将验证码传递给后端
});
// 处理成功登录的逻辑，比如存储 token
console.log('登录成功', response.data);
} catch (error) {
console.error('登录失败', error);
// 登录失败时可以选择刷新验证码
this.refreshCaptcha();
}
},
// 刷新验证码
refreshCaptcha() {
this.fetchCaptcha();
}
},
mounted() {
this.fetchCaptcha(); // 组件挂载时获取验证码
// 加载页面时获取初始验证码
this.refreshCaptcha();
}
};
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2e3a4e;
}
.login-box {
width: 350px;
padding: 20px;
background-color: #3c4d63;
border-radius: 8px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
.input-group {
margin-bottom: 15px;
position: relative;
}
.input-group i {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
color: #aaa;
}
.input-group input {
width: 100%;
padding: 10px 10px 10px 30px;
border: none;
border-radius: 4px;
background-color: #465675;
color: #fff;
}
.captcha-image {
height: 40px;
cursor: pointer;
margin-left: 10px;
vertical-align: middle;
}
.login-button {
width: 100%;
padding: 10px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.login-button:hover {
background-color: #0056b3;
}
</style>

57
vue2/vue/src/components/Register.vue
Unescape View File

@ -0,0 +1,57 @@
<template>
<div class="login-container">
<div class="login-box">
<h2>注册</h2>
<form @submit.prevent="register">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" v-model="username" placeholder="用户名" required />
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" v-model="password" placeholder="密码" required />
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" v-model="confirmPassword" placeholder="确认密码" required />
</div>
<button type="submit" class="login-button">注册</button>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
confirmPassword: ''
};
},
methods: {
async register() {
if (this.password !== this.confirmPassword) {
alert('密码不匹配');
return;
}
try {
const response = await axios.post('http://localhost:8081/register', {
username: this.username,
password: this.password
});
console.log('注册成功', response.data);
} catch (error) {
console.error('注册失败', error);
}
}
}
};
</script>
<style scoped>
/* 使用与 Login.vue 相同的样式 */
</style>

18
vue2/vue/src/main.js
Unescape View File

@ -0,0 +1,18 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/gloable.css'
import request from "@/utils/request";
Vue.config.productionTip = false
Vue.use(ElementUI,{size:'small'});
Vue.prototype.request=request
new Vue({
router,
render: h => h(App)
}).$mount('#app')

36
vue2/vue/src/router/index.js
Unescape View File

@ -0,0 +1,36 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;

43
vue2/vue/src/utils/request.js
Unescape View File

@ -0,0 +1,43 @@
import axios from 'axios'
const request = axios.create({
baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request

5
vue2/vue/src/views/AboutView.vue
Unescape View File

@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

156
vue2/vue/src/views/HomeView.vue
Unescape View File

@ -0,0 +1,156 @@
<template>
<el-container style="min-height: 100vh">
<el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
background-color="rgb(48,65,86)"
text-color="#fff"
active-text-color="#ffd04b"
:collapse-transition="false"
:collapse="isCollapse"
>
<div style="height: 60px;line-height: 60px;text-align: center">
<img src="../assets/logo.png" alt="" style="width: 20px;position: relative;top: 5px;margin-right: 5px">
<b style="color: white" v-show="logoTextShow">后台管理系统</b>
</div>
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>
<span slot="title">导航三</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="font-size: 12px;border-bottom:1px solid #ccc;line-height: 60px;display: flex">
<div style="flex: 1;font-size: 20px">
<span :class="collapseBtnClass" style="cursor:pointer" @click="collapse"></span>
</div>
<el-dropdown style="width: 70px; cursor: pointer">
<span>王小虎</span>
<i class="el-icon-arrow-down" style="margin-left: 5px"></i>
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>-->
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<div style="padding: 10px 0">
<el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
<el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"></el-input>
<el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input>
<el-button class="ml-5" type="primary">搜索</el-button>
</div>
<el-table :data="tableData" border stripe header-row-class-name="headerBg">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<div>
<el-pagination
:page-sizes="[5, 10, 15, 20]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: 'HomeView',
data(){
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(10).fill(item),
collapseBtnClass:'el-icon-s-fold',
isCollapse: false,
sideWidth: 200,
logoTextShow: true
}
},
methods:{
collapse(){
//点击收缩按钮触发
this.isCollapse = !this.isCollapse
if(this.isCollapse){
this.sideWidth = 64
this.collapseBtnClass = 'el-icon-s-unfold'
this.logoTextShow = false
}else{
this.sideWidth = 200
this.collapseBtnClass = 'el-icon-s-fold'
this.logoTextShow = true
}
}
}
}
</script>
<!--<style>-->
<!--.headerBg{-->
<!-- background-color: #cccccc;-->
<!--}-->
<!--</style>-->

4
vue2/vue/vue.config.js
Unescape View File

@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
Write Preview
Loading…
Cancel
Save