commit
9634cc0a91
27 changed files with 20621 additions and 0 deletions
@ -0,0 +1,25 @@ |
|||||||
|
.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? |
||||||
|
|
||||||
|
.vercel |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
# myspace |
||||||
|
|
||||||
|
## Project setup |
||||||
|
``` |
||||||
|
npm install |
||||||
|
``` |
||||||
|
|
||||||
|
### Compiles and hot-reloads for development |
||||||
|
``` |
||||||
|
npm run serve |
||||||
|
``` |
||||||
|
|
||||||
|
### Compiles and minifies for production |
||||||
|
``` |
||||||
|
npm run build |
||||||
|
``` |
||||||
|
|
||||||
|
### Lints and fixes files |
||||||
|
``` |
||||||
|
npm run lint |
||||||
|
``` |
||||||
|
|
||||||
|
### Customize configuration |
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/). |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
presets: [ |
||||||
|
'@vue/cli-plugin-babel/preset' |
||||||
|
] |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
{ |
||||||
|
"compilerOptions": { |
||||||
|
"target": "es5", |
||||||
|
"module": "esnext", |
||||||
|
"baseUrl": "./", |
||||||
|
"moduleResolution": "node", |
||||||
|
"paths": { |
||||||
|
"@/*": [ |
||||||
|
"src/*" |
||||||
|
] |
||||||
|
}, |
||||||
|
"lib": [ |
||||||
|
"esnext", |
||||||
|
"dom", |
||||||
|
"dom.iterable", |
||||||
|
"scripthost" |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,51 @@ |
|||||||
|
{ |
||||||
|
"name": "myspace", |
||||||
|
"version": "0.1.0", |
||||||
|
"private": true, |
||||||
|
"scripts": { |
||||||
|
"serve": "vue-cli-service serve", |
||||||
|
"build": "vue-cli-service build", |
||||||
|
"lint": "vue-cli-service lint" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"@popperjs/core": "^2.11.5", |
||||||
|
"bootstrap": "^5.2.0", |
||||||
|
"core-js": "^3.8.3", |
||||||
|
"jquery": "^3.6.0", |
||||||
|
"jwt-decode": "^3.1.2", |
||||||
|
"vue": "^3.2.13", |
||||||
|
"vue-router": "^4.0.3", |
||||||
|
"vuex": "^4.0.0" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@babel/core": "^7.12.16", |
||||||
|
"@babel/eslint-parser": "^7.12.16", |
||||||
|
"@vue/cli-plugin-babel": "~5.0.0", |
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0", |
||||||
|
"@vue/cli-plugin-router": "^5.0.8", |
||||||
|
"@vue/cli-plugin-vuex": "~5.0.0", |
||||||
|
"@vue/cli-service": "~5.0.0", |
||||||
|
"eslint": "^7.32.0", |
||||||
|
"eslint-plugin-vue": "^8.0.3" |
||||||
|
}, |
||||||
|
"eslintConfig": { |
||||||
|
"root": true, |
||||||
|
"env": { |
||||||
|
"node": true |
||||||
|
}, |
||||||
|
"extends": [ |
||||||
|
"plugin:vue/vue3-essential", |
||||||
|
"eslint:recommended" |
||||||
|
], |
||||||
|
"parserOptions": { |
||||||
|
"parser": "@babel/eslint-parser" |
||||||
|
}, |
||||||
|
"rules": {} |
||||||
|
}, |
||||||
|
"browserslist": [ |
||||||
|
"> 1%", |
||||||
|
"last 2 versions", |
||||||
|
"not dead", |
||||||
|
"not ie 11" |
||||||
|
] |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -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> |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
<template> |
||||||
|
<NavBar/> |
||||||
|
<router-view :key="$route.fullPath"/> |
||||||
|
</template> |
||||||
|
|
||||||
|
|
||||||
|
<script> |
||||||
|
import 'bootstrap/dist/css/bootstrap.css'; |
||||||
|
import 'bootstrap/dist/js/bootstrap'; |
||||||
|
import NavBar from "@/components/NavBar.vue" |
||||||
|
export default { |
||||||
|
name:'app', |
||||||
|
components:{ |
||||||
|
NavBar, |
||||||
|
} |
||||||
|
} |
||||||
|
</Script> |
||||||
|
|
||||||
|
<style> |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,22 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<div class="card"> |
||||||
|
<div class="card-body"> |
||||||
|
<slot> |
||||||
|
</slot> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name:"ContentBase", |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.container { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -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-eslint" target="_blank" rel="noopener">eslint</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> |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
<template> |
||||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-light"> |
||||||
|
<div class="container"> |
||||||
|
<route-link class="navbar-brand" :to="{ name: 'home' }" |
||||||
|
>MySpace</route-link |
||||||
|
> |
||||||
|
<button |
||||||
|
class="navbar-toggler" |
||||||
|
type="button" |
||||||
|
data-bs-toggle="collapse" |
||||||
|
data-bs-target="#navbarText" |
||||||
|
aria-controls="navbarText" |
||||||
|
aria-expanded="false" |
||||||
|
aria-label="Toggle navigation" |
||||||
|
> |
||||||
|
<span class="navbar-toggler-icon"></span> |
||||||
|
</button> |
||||||
|
<div class="collapse navbar-collapse" id="navbarText"> |
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> |
||||||
|
<li class="nav-item"> |
||||||
|
<router-link class="nav-link" :to="{ name: 'home' }" |
||||||
|
>首页</router-link |
||||||
|
> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<router-link class="nav-link" :to="{ name: 'userlist' }" |
||||||
|
>好友列表</router-link |
||||||
|
> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<ul class="navbar-nav" v-if="!$store.state.user.is_login"> |
||||||
|
<li class="nav-item"> |
||||||
|
<router-link class="nav-link" :to="{ name: 'login' }" |
||||||
|
>登陆</router-link |
||||||
|
> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<router-link class="nav-link" :to="{ name: 'register' }" |
||||||
|
>注册</router-link |
||||||
|
> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<ul class="navbar-nav" v-else> |
||||||
|
<li class="nav-item"> |
||||||
|
<router-link |
||||||
|
class="nav-link" |
||||||
|
:to="{name:'userprofile',params: {userId: $store.state.user.id},}" |
||||||
|
>{{ $store.state.user.username }}</router-link |
||||||
|
> |
||||||
|
</li> |
||||||
|
<li class="nav-item"> |
||||||
|
<a class="nav-link" style="cursor: pointer" @click="logout">退出</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
|
</template> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script> |
||||||
|
import { useStore } from "vuex"; |
||||||
|
export default { |
||||||
|
name: "NavBar", |
||||||
|
setup(){ |
||||||
|
const store = useStore(); |
||||||
|
const logout = () => { |
||||||
|
store.commit("logout"); |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
logout, |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
</style> |
||||||
@ -0,0 +1,113 @@ |
|||||||
|
<template> |
||||||
|
<div class="card"> |
||||||
|
<div class="card-body"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-3 img-field"> |
||||||
|
<img class="img-fluid" :src="userInfo.photo" alt=""> |
||||||
|
</div> |
||||||
|
<div class="col-9"> |
||||||
|
<div class="username">{{ userInfo.username }}</div> |
||||||
|
<div class="fans">粉丝数: {{ userInfo.followerCount }}</div> |
||||||
|
<button @click="follow" v-if="!userInfo.is_followed&&!is_me" type="button" |
||||||
|
class="btn btn-success btn-sm">+关注</button> |
||||||
|
<button @click="unfollow" v-if="userInfo.is_followed&&!is_me" type="button" |
||||||
|
class="btn btn-danger btn-sm">取消关注</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import {computed} from "vue"; |
||||||
|
import $ from "jquery"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "UserProfileInfo", |
||||||
|
props: { |
||||||
|
userInfo: { |
||||||
|
type: Object, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
setup(props, context) { |
||||||
|
const store = useStore(); |
||||||
|
const follow = () => { |
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/myspace/follow/", |
||||||
|
type: "POST", |
||||||
|
headers: { |
||||||
|
"Authorization": "Bearer " + store.state.user.access, |
||||||
|
}, |
||||||
|
data: { |
||||||
|
target_id: props.userInfo.id, |
||||||
|
}, |
||||||
|
success(resp) { |
||||||
|
if(resp.result === "success") |
||||||
|
// 在前端进行修改 |
||||||
|
context.emit("follow123"); // 触发父组件中的follow123事件 |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
const unfollow = () => { |
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/myspace/follow/", |
||||||
|
type: "POST", |
||||||
|
headers: { |
||||||
|
"Authorization": "Bearer " + store.state.user.access, |
||||||
|
}, |
||||||
|
data: { |
||||||
|
target_id: props.userInfo.id, |
||||||
|
}, |
||||||
|
success(resp) { |
||||||
|
if(resp.result === "success") |
||||||
|
// 在前端进行修改 |
||||||
|
context.emit("unfollow1234"); // 触发父组件中的follow1234事件 |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
// 如果是自己的页面，不展示关注和取消关注按钮 |
||||||
|
let is_me = computed(()=> store.state.user.id === props.userInfo.id); |
||||||
|
|
||||||
|
return { |
||||||
|
follow, |
||||||
|
unfollow, |
||||||
|
is_me, |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
img { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.username { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.fans { |
||||||
|
color: gray; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
padding: 2px 4px; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.img-field { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,71 @@ |
|||||||
|
<template> |
||||||
|
<div class="card"> |
||||||
|
<div class="card-body"> |
||||||
|
<div v-for="post in posts.posts" :key = "post.id"> |
||||||
|
<div class="card singlePost"> |
||||||
|
<div class="card-body"> |
||||||
|
{{post.content}} |
||||||
|
<button @click="delete_a_post(post.id)" v-if="is_me" type="button" class="btn btn-danger btn-sm">删除该贴</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {computed} from "vue"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import $ from "jquery"; |
||||||
|
|
||||||
|
|
||||||
|
export default { |
||||||
|
name: "UserProfilePost", |
||||||
|
props: { |
||||||
|
// 父组件发送过来两个属性:posts和user |
||||||
|
posts:{ |
||||||
|
type : Object, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
user: { |
||||||
|
type : Object, |
||||||
|
required: true, |
||||||
|
} |
||||||
|
}, |
||||||
|
setup(props,context) { |
||||||
|
const store = useStore(); |
||||||
|
// 如果不是自己的页面，不展示删除帖子按钮 |
||||||
|
let is_me = computed(() => store.state.user.id === props.user.id); |
||||||
|
const delete_a_post = post_id => $.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/myspace/post/", |
||||||
|
type: "DELETE", |
||||||
|
headers: { |
||||||
|
"Authorization": "Bearer " + store.state.user.access, |
||||||
|
}, |
||||||
|
data:{ |
||||||
|
post_id: post_id, |
||||||
|
}, |
||||||
|
success(resp) { |
||||||
|
if (resp.result === "success"){ |
||||||
|
context.emit("delete_a_post",post_id); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
return { |
||||||
|
is_me, |
||||||
|
delete_a_post, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.singlePost{ |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
button { |
||||||
|
float: right; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,68 @@ |
|||||||
|
<template> |
||||||
|
<div class="card edit-field"> |
||||||
|
<div class="card-body"> |
||||||
|
<div class="mb-3"> |
||||||
|
<label for="edit-input" class="form-label">编辑区</label> |
||||||
|
<textarea v-model="content" class="form-control" id="edit-input" rows="3"></textarea> |
||||||
|
<!--点击button会触发子组件send_msg函数--> |
||||||
|
<button @click="send_msg" type="button" class="btn btn-primary btn-sm">发送</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import { ref } from "vue"; |
||||||
|
import $ from "jquery"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "UserProfileWrite", |
||||||
|
setup(props, context) { |
||||||
|
let content = ref(''); |
||||||
|
const store = useStore(); |
||||||
|
const send_msg = () => { |
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/myspace/post/", |
||||||
|
type: "POST", |
||||||
|
headers: { |
||||||
|
"Authorization": "Bearer " + store.state.user.access, |
||||||
|
}, |
||||||
|
data: { |
||||||
|
content: content.value, |
||||||
|
}, |
||||||
|
success(resp){ |
||||||
|
// 帖子成功提交数据库，前端页面进行刷新 |
||||||
|
if (resp.result === "success"){ |
||||||
|
// 会触发父组件的send_msg事件(发帖) |
||||||
|
context.emit("send_msg", content.value); |
||||||
|
content.value = ""; |
||||||
|
} |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
content, |
||||||
|
send_msg, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.edit-field { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import { createApp } from 'vue' |
||||||
|
import App from './App.vue' |
||||||
|
import router from './router' |
||||||
|
import store from './store' |
||||||
|
|
||||||
|
createApp(App).use(store).use(store).use(router).mount('#app') |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import { createRouter, createWebHistory } from 'vue-router' |
||||||
|
import HomeView from '@/views/HomeView.vue' |
||||||
|
import UserList from '@/views/UserList.vue' |
||||||
|
import LoginView from "@/views/LoginView.vue" |
||||||
|
import RegisterView from "@/views/RegisterView.vue" |
||||||
|
import NotFound from "@/views/NotFoundView.vue" |
||||||
|
import UserProfile from '@/views/UserProfile.vue' |
||||||
|
|
||||||
|
const routes = [ |
||||||
|
{ |
||||||
|
path: '/', |
||||||
|
name: 'home', |
||||||
|
component: HomeView |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/userlist/', |
||||||
|
name: 'userlist', |
||||||
|
component: UserList |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/login/', |
||||||
|
name: 'login', |
||||||
|
component: LoginView |
||||||
|
}, { |
||||||
|
path: '/register/', |
||||||
|
name: 'register', |
||||||
|
component: RegisterView |
||||||
|
}, { |
||||||
|
path: '/userprofile/:userId/', |
||||||
|
name: 'userprofile', |
||||||
|
component: UserProfile |
||||||
|
}, { |
||||||
|
path: '/404/', |
||||||
|
name: 'error', |
||||||
|
component: NotFound |
||||||
|
},{ |
||||||
|
path: '/:catchAll(.*)', |
||||||
|
name: 'other', |
||||||
|
redirect: '/404/', |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
|
const router = createRouter({ |
||||||
|
history: createWebHistory(), |
||||||
|
routes |
||||||
|
}) |
||||||
|
|
||||||
|
export default router |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import { createStore } from 'vuex' |
||||||
|
import moduleUser from './user'; |
||||||
|
|
||||||
|
export default createStore({ |
||||||
|
state: { |
||||||
|
}, |
||||||
|
getters: { |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
}, |
||||||
|
modules: { |
||||||
|
user: moduleUser, |
||||||
|
} |
||||||
|
}); |
||||||
@ -0,0 +1,100 @@ |
|||||||
|
import $ from 'jquery'; |
||||||
|
import jwt_decode from 'jwt-decode'; |
||||||
|
const moduleUser = { |
||||||
|
state: { |
||||||
|
id: "", |
||||||
|
username: "", |
||||||
|
photo: "", |
||||||
|
folllowerCount: 0, |
||||||
|
access: "", |
||||||
|
refresh: "", |
||||||
|
is_login: false, |
||||||
|
}, |
||||||
|
getters: { |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
updateUser(state,user) { |
||||||
|
state.id = user.id; |
||||||
|
state.username = user.username; |
||||||
|
state.photo = user.photo; |
||||||
|
state.folllowerCount = user.folllowerCount; |
||||||
|
state.access = user.access; |
||||||
|
state.refresh = user.refresh; |
||||||
|
state.is_login = user.is_login; |
||||||
|
}, |
||||||
|
updateAccess(state,access) { |
||||||
|
state.access = access; |
||||||
|
}, |
||||||
|
|
||||||
|
logout(state) { |
||||||
|
state.id = "", |
||||||
|
state.username = ""; |
||||||
|
state.photo = ""; |
||||||
|
state.folllowerCount = 0; |
||||||
|
state.access = ""; |
||||||
|
state.refresh = ""; |
||||||
|
state.is_login = false; |
||||||
|
} |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
login(context,data) { |
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/api/token/", |
||||||
|
type: "POST", |
||||||
|
data: { |
||||||
|
username: data.username, |
||||||
|
password: data.password, |
||||||
|
}, |
||||||
|
|
||||||
|
success(resp) { |
||||||
|
const {access,refresh} = resp; |
||||||
|
const access_obj = jwt_decode(access); |
||||||
|
|
||||||
|
// 每隔4.5分钟刷新依次令牌(access)
|
||||||
|
|
||||||
|
setInterval(()=> { |
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/api/token/refresh/", |
||||||
|
type: "POST", |
||||||
|
data: { |
||||||
|
refresh:refresh, |
||||||
|
}, |
||||||
|
|
||||||
|
success(resp) { |
||||||
|
context.commit("updateAccess",resp.access);
|
||||||
|
} |
||||||
|
}) |
||||||
|
},4.5 * 60 * 1000); |
||||||
|
|
||||||
|
|
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/myspace/getinfo/", |
||||||
|
type: "get", |
||||||
|
data: { |
||||||
|
user_id: access_obj.user_id, |
||||||
|
}, |
||||||
|
headers:{ |
||||||
|
'Authorization': "Bearer " + access, |
||||||
|
}, |
||||||
|
success(resp) { |
||||||
|
context.commit("updateUser",{ |
||||||
|
...resp, |
||||||
|
access:access, |
||||||
|
refresh:refresh, |
||||||
|
is_login:true, |
||||||
|
}); |
||||||
|
data.success(); |
||||||
|
}, |
||||||
|
}); |
||||||
|
}, |
||||||
|
error() { |
||||||
|
data.error(); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
modules: { |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
export default moduleUser; |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
<template> |
||||||
|
<ContentBase> |
||||||
|
首页 |
||||||
|
</ContentBase> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ContentBase from '@/components/ContentBase.vue' |
||||||
|
export default { |
||||||
|
name: "HomeView", |
||||||
|
components: { |
||||||
|
ContentBase, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
</style> |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
<template> |
||||||
|
<ContentBase> |
||||||
|
<div class="row justify-content-md-center"> |
||||||
|
<div class="col-3"> |
||||||
|
<form @submit.prevent="login"> |
||||||
|
<div class="mb-3"> |
||||||
|
<label for="username" class="form-label">用户名</label> |
||||||
|
<input |
||||||
|
v-model="username" |
||||||
|
type="text" |
||||||
|
class="form-control" |
||||||
|
id="username" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="mb-3"> |
||||||
|
<label for="password" class="form-label">密码</label> |
||||||
|
<input |
||||||
|
v-model="password" |
||||||
|
type="password" |
||||||
|
class="form-control" |
||||||
|
id="password" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="error-msg">{{error_msg}}</div> |
||||||
|
<button type="submit" class="btn btn-primary">登录</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ContentBase> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ContentBase from "@/components/ContentBase.vue"; |
||||||
|
import { ref } from "vue"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import router from "@/router/index"; |
||||||
|
export default { |
||||||
|
name: "LoginView", |
||||||
|
components: { |
||||||
|
ContentBase, |
||||||
|
}, |
||||||
|
|
||||||
|
setup() { |
||||||
|
const store = useStore(); |
||||||
|
let username = ref(""); |
||||||
|
let password = ref(""); |
||||||
|
let error_msg = ref(""); |
||||||
|
const login = ()=> { |
||||||
|
// 登陆前先清空error_msg |
||||||
|
error_msg.value = ""; |
||||||
|
// 调用moduleUser组件中的函数，第一个参数是函数名，第二个参数是一些传入的数据 |
||||||
|
store.dispatch("login",{ |
||||||
|
username: username.value, |
||||||
|
password: password.value, |
||||||
|
success() { // 登陆成功的回调函数 |
||||||
|
router.push({name: "userlist"}); |
||||||
|
}, |
||||||
|
error () { // 登陆失败的回调函数 |
||||||
|
error_msg.value = "用户名不存在或者密码错误!"; |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
username, |
||||||
|
password, |
||||||
|
error_msg, |
||||||
|
login, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
button { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.error-msg { |
||||||
|
font-weight: bold; |
||||||
|
color: red; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,20 @@ |
|||||||
|
<template> |
||||||
|
<ContentBase>404! Not Found!</ContentBase> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ContentBase from "@/components/ContentBase.vue"; |
||||||
|
export default { |
||||||
|
name:"NotFound", |
||||||
|
components:{ |
||||||
|
ContentBase, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,117 @@ |
|||||||
|
<template> |
||||||
|
<ContentBase> |
||||||
|
<div class="row justify-content-md-center"> |
||||||
|
<div class="col-3"> |
||||||
|
<form @submit.prevent="register"> |
||||||
|
<div class="mb-3"> |
||||||
|
<label for="username" class="form-label">用户名</label> |
||||||
|
<input |
||||||
|
v-model="username" |
||||||
|
type="text" |
||||||
|
class="form-control" |
||||||
|
id="username" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="mb-3"> |
||||||
|
<label for="password" class="form-label">密码</label> |
||||||
|
<input |
||||||
|
v-model="password" |
||||||
|
type="password" |
||||||
|
class="form-control" |
||||||
|
id="password" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="mb-3"> |
||||||
|
<label for="password_confirm" class="form-label">确认密码</label> |
||||||
|
<input |
||||||
|
v-model="password_confirm" |
||||||
|
type="password" |
||||||
|
class="form-control" |
||||||
|
id="password" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="error-msg">{{error_msg}}</div> |
||||||
|
<button type="submit" class="btn btn-primary">注册</button> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ContentBase> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ContentBase from "@/components/ContentBase.vue"; |
||||||
|
import { ref } from "vue"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import router from "@/router/index"; |
||||||
|
import $ from "jquery"; |
||||||
|
export default { |
||||||
|
name: "RegisterView", |
||||||
|
components: { |
||||||
|
ContentBase, |
||||||
|
}, |
||||||
|
|
||||||
|
setup() { |
||||||
|
const store = useStore(); |
||||||
|
let username = ref(""); |
||||||
|
let password = ref(""); |
||||||
|
let password_confirm = ref(""); |
||||||
|
let error_msg = ref(""); |
||||||
|
const register = ()=> { |
||||||
|
// 注册前先清空error_msg |
||||||
|
error_msg.value = ""; |
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/myspace/user/", |
||||||
|
type: "POST", |
||||||
|
data: { |
||||||
|
username: username.value, |
||||||
|
password: password.value, |
||||||
|
password_confirm: password_confirm.value, |
||||||
|
}, |
||||||
|
success(resp) { |
||||||
|
// 注册成功 |
||||||
|
if(resp.result == "success"){ |
||||||
|
// 进入登录界面 |
||||||
|
store.dispatch("login",{ |
||||||
|
username: username.value, |
||||||
|
password: password.value, |
||||||
|
success() { |
||||||
|
router.push({name: "userlist"}); |
||||||
|
}, |
||||||
|
error () { |
||||||
|
error_msg.value = "系统异常，请稍后重试!"; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
else { |
||||||
|
// 出现错误 |
||||||
|
error_msg.value = resp.result; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
username, |
||||||
|
password, |
||||||
|
error_msg, |
||||||
|
password_confirm, |
||||||
|
register, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
button { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.error-msg { |
||||||
|
font-weight: bold; |
||||||
|
color: red; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,99 @@ |
|||||||
|
<template> |
||||||
|
<ContentBase> |
||||||
|
<div class="card" v-for="user in users" :key="user.id" @click="open_user_profile(user.id)"> |
||||||
|
<div class="card-body"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-1 img-field"> |
||||||
|
<!--将冒号后的字符串视为变量，而不是一个字符串--> |
||||||
|
<img class="img-fluid" :src="user.photo" alt="" /> |
||||||
|
</div> |
||||||
|
<div class="col-11"> |
||||||
|
<div class="username">{{ user.username }}</div> |
||||||
|
<div class="followcount">粉丝数: {{ user.followerCount }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ContentBase> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ContentBase from "@/components/ContentBase.vue"; |
||||||
|
import $ from "jquery"; |
||||||
|
import { ref } from "vue"; |
||||||
|
import router from "@/router/index"; |
||||||
|
import { useStore } from "vuex"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "UserList", |
||||||
|
components: { |
||||||
|
ContentBase, |
||||||
|
}, |
||||||
|
|
||||||
|
setup() { |
||||||
|
const store = useStore(); |
||||||
|
let users = ref([]); |
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/myspace/userlist/", |
||||||
|
type: "get", |
||||||
|
success(resp) { |
||||||
|
users.value = resp; |
||||||
|
}, |
||||||
|
}); |
||||||
|
const open_user_profile = (userId) => { |
||||||
|
// 如果登录成功，跳转到用户动态 |
||||||
|
if (store.state.user.is_login) { |
||||||
|
router.push({ |
||||||
|
name: "userprofile", |
||||||
|
params: { |
||||||
|
userId: userId, |
||||||
|
}, |
||||||
|
}); |
||||||
|
} |
||||||
|
else { // 没有登录，跳转到登陆页面 |
||||||
|
router.push({name: "login"}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return { |
||||||
|
users, |
||||||
|
open_user_profile, |
||||||
|
}; |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
img { |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.username { |
||||||
|
font-weight: bold; |
||||||
|
height: 40%; |
||||||
|
} |
||||||
|
|
||||||
|
.followcount { |
||||||
|
font-size: 12px; |
||||||
|
color: gray; |
||||||
|
height: 60%; /*上下46开*/ |
||||||
|
} |
||||||
|
|
||||||
|
.card { |
||||||
|
margin-bottom: 20px; |
||||||
|
cursor: pointer; /*选中卡片变成鼠标变成小手形状*/ |
||||||
|
} |
||||||
|
|
||||||
|
.card:hover { |
||||||
|
box-shadow: 2px 2px 10px lightblue; |
||||||
|
transition: 500ms; |
||||||
|
} |
||||||
|
.img-field { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,146 @@ |
|||||||
|
<template> |
||||||
|
<ContentBase> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-3"> |
||||||
|
<!--将user信息传递给子组件的userInfo--> |
||||||
|
<!--触发了follow123事件会调用follow函数--> |
||||||
|
<!--触发了follow1234事件会调用unfollow函数--> |
||||||
|
<UserProfileInfo @follow123="follow" @unfollow1234="unfollow" :userInfo="user" /> |
||||||
|
<!--父组件的send_msg事件会调用父组件send_msg函数(@某事件="某个函数"，事件与函数绑定起来了)--> |
||||||
|
<UserProfileWrite v-if="is_me" @send_msg="send_msg" /> |
||||||
|
</div> |
||||||
|
<div class="col-9"> |
||||||
|
<div class="alert alert-primary" role="alert"> |
||||||
|
<div class="all-post"> 我的帖子 </div> |
||||||
|
</div> |
||||||
|
<UserProfilePost :user="user" :posts="posts" @delete_a_post="delete_a_post" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ContentBase> |
||||||
|
|
||||||
|
</template> |
||||||
|
<!--父组件的信息发送给子组件，利用prop实现--> |
||||||
|
<!--子组件想更新父组件的内容，通过emit实现--> |
||||||
|
<script> |
||||||
|
import ContentBase from "@/components/ContentBase.vue"; |
||||||
|
import UserProfileInfo from "@/components/UserProfileInfo.vue"; |
||||||
|
import UserProfilePost from "@/components/UserProfilePost.vue"; |
||||||
|
import UserProfileWrite from "@/components/UserProfileWrite.vue"; |
||||||
|
import { reactive } from "vue"; |
||||||
|
import { useRoute } from "vue-router"; |
||||||
|
import $ from "jquery"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import {computed} from "vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "UserProfile", |
||||||
|
components: { |
||||||
|
ContentBase, |
||||||
|
UserProfileInfo, |
||||||
|
UserProfilePost, |
||||||
|
UserProfileWrite, |
||||||
|
}, |
||||||
|
|
||||||
|
setup() { |
||||||
|
const route = useRoute(); |
||||||
|
const store = useStore(); |
||||||
|
// 提取路径中的用户id |
||||||
|
const userId = parseInt(route.params.userId); |
||||||
|
// 下面的数据从云端拉取 |
||||||
|
const user = reactive({}); |
||||||
|
const posts = reactive({}); |
||||||
|
|
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/myspace/getinfo/", |
||||||
|
type: "GET", |
||||||
|
headers: { |
||||||
|
"Authorization": "Bearer " + store.state.user.access, |
||||||
|
}, |
||||||
|
data: { |
||||||
|
user_id : userId, |
||||||
|
}, |
||||||
|
success(resp) { |
||||||
|
user.id = resp.id; |
||||||
|
user.username = resp.username; |
||||||
|
user.photo = resp.photo; |
||||||
|
user.followerCount = resp.followerCount; |
||||||
|
user.is_followed = resp.is_followed; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
$.ajax({ |
||||||
|
url: "https://app165.acapp.acwing.com.cn/myspace/post/", |
||||||
|
type: "GET", |
||||||
|
headers: { |
||||||
|
"Authorization": "Bearer " + store.state.user.access, |
||||||
|
}, |
||||||
|
data: { |
||||||
|
user_id : userId, |
||||||
|
}, |
||||||
|
success(resp) { |
||||||
|
posts.count = resp.count; |
||||||
|
posts.posts = resp; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// 判断当前页面是不是自己 |
||||||
|
const is_me = computed(() => userId === store.state.user.id); |
||||||
|
|
||||||
|
// 收到子组件的点击关注 |
||||||
|
const follow = () => { |
||||||
|
if (user.is_followed) return; // 不重复关注 |
||||||
|
user.is_followed = true; |
||||||
|
user.followerCount++; |
||||||
|
} |
||||||
|
|
||||||
|
// 收到子组件的取消关注 |
||||||
|
|
||||||
|
const unfollow = () => { |
||||||
|
if (!user.is_followed) return; // 不重复取消关注 |
||||||
|
user.is_followed = false; |
||||||
|
user.followerCount--; |
||||||
|
} |
||||||
|
|
||||||
|
// 收到子组件发来的帖子内容content |
||||||
|
const send_msg = (content) => { |
||||||
|
posts.count++; |
||||||
|
// 收到的帖子内容放在第一个位置 |
||||||
|
// 进行发帖操作 |
||||||
|
posts.posts.unshift({ |
||||||
|
id: posts.count, |
||||||
|
userId: 2, |
||||||
|
content: content, |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
// 删除一个帖子,根据post_id依次判断所有帖子，和post_id相同删除掉 |
||||||
|
const delete_a_post = post_id => { |
||||||
|
posts.posts = posts.posts.filter(post=> post.id !== post_id); |
||||||
|
posts.count = posts.posts.length; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
user: user, |
||||||
|
follow, |
||||||
|
unfollow, |
||||||
|
posts: posts, |
||||||
|
send_msg: send_msg, |
||||||
|
is_me, |
||||||
|
delete_a_post, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.all-post { |
||||||
|
font-weight: bold; |
||||||
|
font-size: 20px; |
||||||
|
color: red; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,4 @@ |
|||||||
|
const { defineConfig } = require('@vue/cli-service') |
||||||
|
module.exports = defineConfig({ |
||||||
|
transpileDependencies: true |
||||||
|
}) |
||||||
Loading…
Reference in new issue