首页个人信息组件以及搜索框
This commit is contained in:
45
package-lock.json
generated
45
package-lock.json
generated
@@ -12,7 +12,9 @@
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.13",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.1"
|
||||
"vue-cookie": "^1.1.4",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
@@ -20,6 +22,7 @@
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
@@ -11532,6 +11535,11 @@
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/tiny-cookie": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/tiny-cookie/-/tiny-cookie-1.0.1.tgz",
|
||||
"integrity": "sha512-4KJ21HYTNumxnHvCbLrtrrhSwtWXzpmaRJIUg4biBii5AiSe2izod5bauXiiQxVuf2Fta57U2DTW1Fa4/6Cmgw=="
|
||||
},
|
||||
"node_modules/to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
@@ -11803,6 +11811,14 @@
|
||||
"csstype": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-cookie": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/vue-cookie/-/vue-cookie-1.1.4.tgz",
|
||||
"integrity": "sha512-lxWIzmUTCVra0H7YPbNpYx0wbTQThV+n7ueUOcqtK8dlckmfB8fcyf4OEiRuQUd7iiVub2T3IDlWiisEM5Ku0Q==",
|
||||
"dependencies": {
|
||||
"tiny-cookie": "^1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-eslint-parser": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
|
||||
@@ -12031,6 +12047,14 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/vuex": {
|
||||
"version": "3.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
|
||||
"integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
|
||||
"peerDependencies": {
|
||||
"vue": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
|
||||
@@ -21724,6 +21748,11 @@
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
|
||||
"dev": true
|
||||
},
|
||||
"tiny-cookie": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/tiny-cookie/-/tiny-cookie-1.0.1.tgz",
|
||||
"integrity": "sha512-4KJ21HYTNumxnHvCbLrtrrhSwtWXzpmaRJIUg4biBii5AiSe2izod5bauXiiQxVuf2Fta57U2DTW1Fa4/6Cmgw=="
|
||||
},
|
||||
"to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
@@ -21932,6 +21961,14 @@
|
||||
"csstype": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"vue-cookie": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/vue-cookie/-/vue-cookie-1.1.4.tgz",
|
||||
"integrity": "sha512-lxWIzmUTCVra0H7YPbNpYx0wbTQThV+n7ueUOcqtK8dlckmfB8fcyf4OEiRuQUd7iiVub2T3IDlWiisEM5Ku0Q==",
|
||||
"requires": {
|
||||
"tiny-cookie": "^1.0"
|
||||
}
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "8.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
|
||||
@@ -22113,6 +22150,12 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
|
||||
"integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
|
||||
"requires": {}
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
|
||||
|
||||
@@ -12,7 +12,9 @@
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.15.13",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.1"
|
||||
"vue-cookie": "^1.1.4",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
@@ -20,6 +22,7 @@
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
|
||||
@@ -43,8 +43,8 @@
|
||||
<el-divider></el-divider>
|
||||
</ol>
|
||||
</ul>
|
||||
<p v-if="loading">加载中...</p>
|
||||
<p v-if="noMore">没有更多了</p>
|
||||
<p v-if="loading" style="color: #9ca3af">加载中...</p>
|
||||
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-model="activeName" label="最热" name="second">
|
||||
<div class="lsm-container">
|
||||
@@ -60,8 +60,8 @@
|
||||
<el-divider></el-divider>
|
||||
</ol>
|
||||
</ul>
|
||||
<p v-if="loading">加载中...</p>
|
||||
<p v-if="noMore">没有更多了</p>
|
||||
<p v-if="loading" style="color: #9ca3af">加载中...</p>
|
||||
<p v-if="noMore" style="color: #9ca3af">- 你不经意间触碰到了底线 -</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
@@ -70,16 +70,35 @@
|
||||
</div>
|
||||
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
|
||||
<el-card class="box-card" style="width: 13vw">
|
||||
<el-button type="info" plain @click="openLogin()">登 录</el-button>
|
||||
<el-button type="info" plain @click="openLogin()" v-show="this.$cookie.get('username')==null">登 录</el-button>
|
||||
<UserInfo></UserInfo>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 20px;width: 13vw">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>卡片名称</span>
|
||||
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
|
||||
<el-statistic group-separator="," :precision="0" decimal-separator="." :value="userTotal" title="用户总数">
|
||||
<template slot="prefix">
|
||||
<i class="el-icon-s-flag" style="color: red"></i>
|
||||
</template>
|
||||
<template slot="suffix">
|
||||
<i class="el-icon-s-flag" style="color: blue"></i>
|
||||
</template>
|
||||
</el-statistic>
|
||||
|
||||
<el-statistic group-separator="," :precision="0" decimal-separator="." :value="projectTotal" title="项目总数">
|
||||
<template slot="prefix">
|
||||
<i class="el-icon-s-flag" style="color: red"></i>
|
||||
</template>
|
||||
<template slot="suffix">
|
||||
<i class="el-icon-s-flag" style="color: blue"></i>
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
<div v-for="o in 4" :key="o" class="text item">
|
||||
{{ '列表内容 ' + o }}
|
||||
<div class="text item">
|
||||
<div style="font-size: 18px;color: #9ca3af;font-weight: bold"> 关于本站 </div>
|
||||
<span>
|
||||
HelloGitHub 是一个发现和分享有趣、入门级开源项目的平台。 希望大家能够在这里找到编程的快乐、 轻松搞定问题的技术方案、 大呼过瘾的开源神器， 顺其自然地开启开源之旅。
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
@@ -209,11 +228,15 @@
|
||||
<el-dialog
|
||||
:visible.sync="manageCategoryVisible"
|
||||
width="50vw">
|
||||
<div>
|
||||
<ManageCategory></ManageCategory>
|
||||
</div>
|
||||
<el-card class="box-card">
|
||||
<el-checkbox-group v-model="checkboxGroup" size="medium" :max="10">
|
||||
<el-checkbox style="margin-top: 20px" v-for="(tag,index) in tags" :key="index" v-html="tag.category" border size="medium"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
总共:
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
@@ -222,14 +245,17 @@
|
||||
import axios from 'axios'
|
||||
import Vue from "vue";
|
||||
import ProjectList from "@/components/Home/ProjectList.vue";
|
||||
import manageCategory from "@/components/Home/ManageCategory.vue";
|
||||
import ManageCategory from "@/components/Home/ManageCategory.vue";
|
||||
import UserInfo from "@/components/Home/UserInfo.vue";
|
||||
|
||||
export default {
|
||||
name: "HomeComponent",
|
||||
components: {ManageCategory, ProjectList},
|
||||
components: {UserInfo, ProjectList},
|
||||
|
||||
data() {
|
||||
return {
|
||||
userTotal:null,
|
||||
projectTotal:null,
|
||||
checkboxGroup: [],
|
||||
activeName: 'first',
|
||||
currentTabName:"综合",
|
||||
currentTabIndex:null,
|
||||
@@ -267,9 +293,11 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.account(); //获取cookie的方法
|
||||
// this.account(); //获取cookie的方法
|
||||
this.ProjectLists();
|
||||
this.categoryList();
|
||||
this.getUserTotal();
|
||||
this.getProjectTotal();
|
||||
},
|
||||
created() {
|
||||
// if (sessionStorage.getItem('current_name') == null){
|
||||
@@ -285,9 +313,6 @@ export default {
|
||||
// next()
|
||||
},
|
||||
computed: {
|
||||
manageCategory() {
|
||||
return manageCategory
|
||||
},
|
||||
noMore() {
|
||||
return this.count >= 10
|
||||
},
|
||||
@@ -300,6 +325,8 @@ export default {
|
||||
|
||||
openLogin() {
|
||||
this.loginDialogVisible = true;
|
||||
// this.$cookie.delete('username')
|
||||
// this.$cookie.delete('password')
|
||||
},
|
||||
closeLogin() {
|
||||
this.loginDialogVisible = false;
|
||||
@@ -311,49 +338,44 @@ export default {
|
||||
this.registerDialogVisible = false;
|
||||
},
|
||||
// ******登录*****
|
||||
account() {
|
||||
// console.log(this.getCookie("username"));
|
||||
this.ruleForm.username = this.getCookie("username");
|
||||
this.ruleForm.password = this.getCookie("password");
|
||||
},
|
||||
setCookie(c_name, c_pwd, exdate) {
|
||||
//账号，密码 ，过期的天数
|
||||
exdate = new Date();
|
||||
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
|
||||
document.cookie =
|
||||
"username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
|
||||
document.cookie =
|
||||
"password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
|
||||
},
|
||||
getCookie(name) {
|
||||
var arr = document.cookie.split(";");
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
var arr2 = arr[i].split("=");
|
||||
if (arr2[0].trim() == name) {
|
||||
return arr2[1];
|
||||
}
|
||||
}
|
||||
},
|
||||
clearCookie() {
|
||||
this.setCookie("", "", -1); //清除cookie
|
||||
},
|
||||
// account() {
|
||||
// this.ruleForm.username = this.getCookie("username");
|
||||
// this.ruleForm.password = this.getCookie("password");
|
||||
// this.CookieUserName=this.getCookie("username");
|
||||
// },
|
||||
// setCookie(c_name, c_pwd, exdate) {
|
||||
// //账号，密码 ，过期的天数
|
||||
// exdate = new Date();
|
||||
// exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate); //保存的天数
|
||||
// document.cookie =
|
||||
// "username=" + c_name + ";path=/;expires=" + exdate.toLocaleString();
|
||||
// document.cookie =
|
||||
// "password=" + c_pwd + ";path=/;expires=" + exdate.toLocaleString();
|
||||
// },
|
||||
// getCookie(name) {
|
||||
// var arr = document.cookie.split(";");
|
||||
// for (var i = 0; i < arr.length; i++) {
|
||||
// var arr2 = arr[i].split("=");
|
||||
// if (arr2[0].trim() == name) {
|
||||
// return arr2[1];
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// clearCookie() {
|
||||
// this.setCookie("", "", -1); //清除cookie
|
||||
// },
|
||||
|
||||
// 方法
|
||||
submitForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
//取参数
|
||||
// let params = new URLSearchParams();
|
||||
// params.append("username", this.ruleForm.username);
|
||||
// params.append("password", this.ruleForm.password);
|
||||
// params.append("code", this.ruleForm.code);
|
||||
// params.append("remember",this.ruleForm.remember)
|
||||
if (this.checked == true) {
|
||||
//存入cookie
|
||||
this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
|
||||
} else {
|
||||
this.clearCookie();
|
||||
}
|
||||
// this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
|
||||
this.$cookie.set('username',this.ruleForm.username,7);
|
||||
|
||||
// } else {
|
||||
// this.clearCookie();
|
||||
// }
|
||||
|
||||
//调用方法提交
|
||||
axios({
|
||||
@@ -380,6 +402,7 @@ export default {
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
window.location.reload();
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
@@ -387,7 +410,6 @@ export default {
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
});
|
||||
} else {
|
||||
this.closeLogin();
|
||||
@@ -435,12 +457,12 @@ export default {
|
||||
// params.append("password", this.ruleForm.password);
|
||||
// params.append("code", this.ruleForm.code);
|
||||
// params.append("remember",this.ruleForm.remember)
|
||||
if (this.checked == true) {
|
||||
//存入cookie
|
||||
this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
|
||||
} else {
|
||||
this.clearCookie();
|
||||
}
|
||||
// if (this.checked == true) {
|
||||
// //存入cookie
|
||||
// this.setCookie(this.ruleForm.username, this.ruleForm.password, 7); //保存7天
|
||||
// } else {
|
||||
// this.clearCookie();
|
||||
// }
|
||||
|
||||
//调用方法提交
|
||||
axios({
|
||||
@@ -473,7 +495,7 @@ export default {
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
console.log(res);
|
||||
// console.log(res);
|
||||
});
|
||||
} else {
|
||||
this.closeRegister();
|
||||
@@ -553,7 +575,6 @@ export default {
|
||||
name:name
|
||||
}
|
||||
}).then((res)=>{
|
||||
console.log(res.data);
|
||||
that.projectLists=res.data;
|
||||
});
|
||||
},
|
||||
@@ -578,11 +599,39 @@ export default {
|
||||
params: {
|
||||
}
|
||||
}).then((res)=>{
|
||||
console.log(res);
|
||||
// console.log(res);
|
||||
that.tags=res.data;
|
||||
});
|
||||
},
|
||||
|
||||
getUserTotal(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/userNum',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
}
|
||||
}).then((res)=>{
|
||||
that.userTotal=res.data;
|
||||
});
|
||||
},
|
||||
getProjectTotal(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/countNum',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
|
||||
}
|
||||
}).then((res)=>{
|
||||
that.projectTotal=res.data;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-checkbox-group v-model="checkboxGroup" size="medium">
|
||||
<el-checkbox label="备选项1" border></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ManageCategory",
|
||||
props: {
|
||||
tags: Object
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
checkboxGroup:[],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -7,40 +7,28 @@
|
||||
trigger="focus"
|
||||
:visible-arrow="false"
|
||||
style="padding-top: 0"
|
||||
v-model="visible">
|
||||
<div class="search-content">
|
||||
<div class="search-his" v-show="historySearch.length > 0">
|
||||
v-model="visible"
|
||||
>
|
||||
<div class="search-content" v-show="this.$cookie.get('username')!=null">
|
||||
<div class="search-his" v-show="historySearch.length!=null">
|
||||
<div>
|
||||
<span class="title">搜索历史</span>
|
||||
<span class="clear" @click="clearHistory"><i class="el-icon-circle-close"></i>清空</span>
|
||||
</div>
|
||||
<el-tag
|
||||
v-for="tag in historySearch"
|
||||
:key="tag.name"
|
||||
v-for="(tag,index) in historySearch"
|
||||
:key="index"
|
||||
size="small"
|
||||
closable
|
||||
@close="handleClose(tag)"
|
||||
style="margin-right: 10px; margin-top: 10px; cursor: pointer"
|
||||
@click="handleSearch(tag.name)"
|
||||
:type="tag.type">
|
||||
{{ tag.name }}
|
||||
@click="handleSearch(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div :class="'search-hot ' + (historySearch.length > 0 ? 'mt' : '') ">
|
||||
<span class="title">热门搜索</span>
|
||||
<ul class="hot-list">
|
||||
<li v-for="(item, index) in items" :key="index" class="hot-item">
|
||||
<span v-if="index < 3" class="top">
|
||||
<i class="iconvs vs-hot"></i>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ index + 1 }}
|
||||
</span>
|
||||
<span @click="handleSearch(item)">{{ item }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-popover>
|
||||
<el-input
|
||||
size="medium"
|
||||
@@ -57,34 +45,19 @@
|
||||
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
visible: false,
|
||||
isMouseOver: false,
|
||||
search: '',
|
||||
tipsWord: '',
|
||||
historySearch: [
|
||||
{name: '标签一66666', type: 'info'},
|
||||
{name: '标签二无敌无敌', type: 'info'},
|
||||
{name: '标签三66', type: 'info'},
|
||||
{name: '标签四1', type: 'info'},
|
||||
{name: '标签四2', type: 'info'},
|
||||
{name: '标签四3', type: 'info'},
|
||||
{name: '标签四4', type: 'info'},
|
||||
{name: '标签五', type: 'danger'}
|
||||
],
|
||||
historySearch: [],
|
||||
items: [
|
||||
'重生之我是都市霸主',
|
||||
'热搜',
|
||||
'热搜重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主重生之我是都市霸主',
|
||||
'热搜',
|
||||
'热搜',
|
||||
'热搜',
|
||||
'热搜',
|
||||
'热搜',
|
||||
'热搜',
|
||||
'热搜'
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -94,7 +67,29 @@ export default {
|
||||
this.searchRequest()
|
||||
},
|
||||
clearHistory() {
|
||||
this.historySearch = []
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/deleteAllLabel',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
}
|
||||
}).then((res)=>{
|
||||
if (res.data.code === 200) {
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
searchRequest() {
|
||||
const params = {
|
||||
@@ -103,10 +98,51 @@ export default {
|
||||
const queryString = new URLSearchParams(params).toString();
|
||||
const url = `${window.location.origin}/video/search?${queryString}`;
|
||||
window.open(url, '_blank');
|
||||
},
|
||||
gethistorySearch(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectUserLabel',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
}
|
||||
}).then((res)=>{
|
||||
// console.log(res.data);
|
||||
that.historySearch=res.data;
|
||||
});
|
||||
},
|
||||
handleClose(tag){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/deletelabel',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
tag:tag+';'
|
||||
}
|
||||
}).then((res)=>{
|
||||
if(res.date.code===200){
|
||||
that.$message({
|
||||
showClose: true,
|
||||
message: res.date.msg,
|
||||
type: 'success'
|
||||
});
|
||||
}else{
|
||||
that.$message({
|
||||
showClose: true,
|
||||
message: res.date.msg,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.tipsWord = this.items[0]
|
||||
this.tipsWord = "helloGithub";
|
||||
this.gethistorySearch();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
49
src/components/Home/UserInfo.vue
Normal file
49
src/components/Home/UserInfo.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap" v-show="this.$cookie.get('username')!=null">
|
||||
<div style="display: flex;flex-direction: row;align-items: center;width: 11vw;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row;align-items: center">
|
||||
<el-avatar shape="square" style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" size="large" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
|
||||
<div style="margin-left: 5px;display: flex;flex-direction: column;justify-content: space-evenly">
|
||||
<span style="font-weight: bold">{{this.$cookie.get('username')}}</span>
|
||||
<span style="font-weight: 800;font-size: 13px;color: #3b82f6">Lv.1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-switch v-model="switchValue" style="">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between;align-items: center">
|
||||
<span style="font-size: 10px;color: #9ca3af">贡献值</span>
|
||||
<span style="font-weight: bold;color: #59A3A4;font-size: 20px">0/64</span>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<el-progress :text-inside="true" :stroke-width="15" :percentage="0"></el-progress>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="display: flex;align-items: center;justify-content: space-between;flex-direction: row;flex-wrap: nowrap;">
|
||||
<el-link style="color: #9ca3af;font-size: 13px" icon="el-icon-s-custom" class="link">我的主页</el-link>
|
||||
<el-link style="color: #9ca3af;font-size: 13px" icon="el-icon-switch-button" class="link" @click="signOut">退出登录</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserInfo",
|
||||
data(){
|
||||
return{
|
||||
switchValue:false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
signOut(){
|
||||
this.$cookie.delete('username');
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
15
src/components/UserInfoPage.vue
Normal file
15
src/components/UserInfoPage.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
个人主页
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserInfoPage"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -5,13 +5,19 @@ import Element from 'element-ui'
|
||||
import './assets/styles/element-variables.scss'
|
||||
import axios from "axios";
|
||||
import './assets/icon/iconfont.css'
|
||||
import store from './store'
|
||||
axios.defaults.withCredentials=true;
|
||||
|
||||
import cookie from 'vue-cookie'
|
||||
Vue.prototype.$cookie = cookie;
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(Element);
|
||||
new Vue({
|
||||
router,
|
||||
axios,
|
||||
store,
|
||||
cookie,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
@@ -5,6 +5,7 @@ import home from "@/components/Home/Home.vue";
|
||||
import monthly from "@/components/Monthly.vue";
|
||||
import ranking from "@/components/Ranking.vue";
|
||||
import paper from "@/components/Paper.vue";
|
||||
import UserInfoPage from "@/components/UserInfoPage.vue";
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@@ -39,6 +40,11 @@ const routes = [
|
||||
name: 'paper',
|
||||
component: paper
|
||||
},
|
||||
{
|
||||
path: '/UserInfoPage',
|
||||
name: 'UserInfoPage',
|
||||
component: UserInfoPage
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
21
src/store/index.js
Normal file
21
src/store/index.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
// CookieUserName:""
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
// saveCookieUserName(state,userName){
|
||||
// state.pathName = userName;
|
||||
// },
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user