Skip to content

P
PersonalBlog

BeMount / PersonalBlog

通知 3
Star 1
Fork 0
P
PersonalBlog

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 2313eec2 编写于 作者: BeMount's avatar BeMount 💬
浏览文件
操作

fix(/personal-blog)

上级 10947978
展开全部 隐藏空白更改
内联 并排
Showing with 11403 addition and 112 deletion
package-lock.json 0 → 100644
浏览文件 @ 2313eec2
此差异已折叠。
package.json
浏览文件 @ 2313eec2
......@@ -7,7 +7,9 @@
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.4",
"view-design": "^4.1.3",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuex": "^3.1.3"
......
src/App.vue
浏览文件 @ 2313eec2
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
<style lang="less" scoped>
</style>
src/apis/login.js 0 → 100644
浏览文件 @ 2313eec2
//登录
export const login = vm =>{
vm.$axios.request({
url:'/login/signIn',
data:{
userName:vm.formData.user,
password:vm.formData.password
},
method:'post'
}).then(res=>{
if(res.data.result == false){
vm.$Message.warning(res.data.message);
}else{
vm.isShowlogDialog = false;
vm.isLogedIn = false;
vm.$Message.success('登录成功');
window.console.log(res.data.jwt);
localStorage.setItem('jwt',res.data.jwt);
}
}).catch(err=>{
window.console.log(err);
})
}
//注册
export const addUsers = vm =>{
vm.$axios.request({
url:'/login/addUser',
data:{
userName:vm.formData.user,
password:vm.formData.password
},
method:'post'
}).then(res=>{
if(res.data.result){
vm.$Message.success('新增用户成功');
}else{
vm.$Message.warning(res.data.message);
}
}).catch(err=>{
window.console.log(err);
})
}
// 根据JWT获取用户信息
// export const getUserInfo = vm =>{
// vm.$axios.request({
// url:'/login/getUserInfo',
// method:'get',
// params:{
// token:localStorage.getItem('jwt')
// }
// }).then(res => {
// window.console.log(res);
// })
// }
\ No newline at end of file
src/components/HelloWorld.vue 已删除 100644 → 0
浏览文件 @ 10947978
<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>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</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 lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/menu-component/menuComponent.vue 0 → 100644
浏览文件 @ 2313eec2
<template>
<Menu>
<template v-for='item in menuList' >
<MenuItem :key='item' v-if='item.children.length == 1' name='item.name' @on-select="redirectToOtherRouter(item.children[0].name)"> {{item.title}}</MenuItem>
</template>
</Menu>
</template>
<script>
// import {mapState} from 'vuex';
import {appRouters} from '@/router/router'
export default {
data(){
return {
menuList:appRouters
}
},
// computed:{
// ...mapState['menuList']
// },
methods:{
redirectToOtherRouter(name){
this.$router.push({name:name});
}
}
}
</script>
<style lang = 'less'>
@import './menuComponent.less';
</style>
\ No newline at end of file
src/main.js
浏览文件 @ 2313eec2
......@@ -2,11 +2,45 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import axios from 'axios';
Vue.use(ViewUI);
Vue.prototype.$axios = axios.create({
baseURL:"http://localhost:30000"
});
Vue.prototype.$axios.interceptors.request.use(function (config) {
config.headers['Authorization'] = localStorage.getItem('jwt');
config.headers['Accept'] = 'application/json';
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
Vue.prototype.$axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
Vue.config.productionTip = false
new Vue({
router,
store,
mounted(){
this.$store.commit('updateMenuList', appRouters);
window.console.log("appRouters",appRouters);
},
render: h => h(App)
}).$mount('#app')
src/router/index.js
浏览文件 @ 2313eec2
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import {appRouters, otherRouters} from './router.js'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
const routes = [
otherRouters,
...appRouters
]
const router = new VueRouter({
......
src/router/router.js 0 → 100644
浏览文件 @ 2313eec2
import Home from '@/views/Home.vue';
export const appRouters = [
{
path:'/articleManagement',
name:'articleManagement',
title:'文章管理',
component: Home,
children:[
{
path:'index',
name:'articleManagementIndex',
component: articleManagement => import('@/views/article-management/articleManagement')
}
]
},
{
path:'/aboutWriter',
name:'aboutWriter',
title:'作者相关',
component:Home,
children:[
{
path:'index',
name:'aboutWriterIndex',
component: aboutWriter => import('@/views/about-writer/aboutWriter')
}
]
}
]
export const otherRouters = {
path:'/',
component:Home,
name:'Home',
// redirect:'/personalCenter',
children:[
{
path:'personalCenter',
name:'personalCenter',
title:'个人中心',
component: personalCenter => import('@/views/personal-center/personalCenter')
}
]
}
src/store/index.js
浏览文件 @ 2313eec2
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app.js';
import user from './modules/user.js';
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
......@@ -11,5 +14,7 @@ export default new Vuex.Store({
actions: {
},
modules: {
app,
user
}
})
src/store/modules/app.js 0 → 100644
浏览文件 @ 2313eec2
const app = {
state:{
menuList:[]
},
mutations:{
updateMenuList(state,router){
}
},
actions:{
}
}
export default app;
\ No newline at end of file
src/store/modules/user.js 0 → 100644
浏览文件 @ 2313eec2
const user = {
state:{
},
mutations:{
},
actions:{
}
}
export default user
\ No newline at end of file
src/views/About.vue 已删除 100644 → 0
浏览文件 @ 10947978
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue
浏览文件 @ 2313eec2
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<Layout class='contentLayout'>
<Sider class="sider" width='240'>
<menuComponent></menuComponent>
</Sider>
<Layout>
<Header class="header" height='50'>
<div class="header-content-left">
<img src="../assets/blog_logo.jpg" alt="BeMount个人博客logo" height='50px' style="margin-top:22px">
</div>
<div class='header-content-right' @click="login" v-if="isLogedIn">
<Avatar icon="ios-person" size="large" style="marginRight:5px"/>
<span>登录</span>
</div>
<div v-else>
<Dropdown>
<a href="javascript:void(0)">
BeMount
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>个人中心</DropdownItem>
<DropdownItem>退出</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</Header>
<Modal
v-model="isShowlogDialog"
title="登录"
>
<Form ref="formData" :model="formData" :rules="rules" label-position="left" >
<FormItem prop="user" label="用户名:">
<Input type="text" v-model="formData.user" placeholder="用户名"/>
</FormItem>
<FormItem prop="password" label="密码:">
<Input type="password" v-model="formData.password" placeholder="密码"/>
</FormItem>
</Form>
<div slot="footer">
<Button type="primary" @click="handleSubmit('formData')" size='large'>Sign in</Button>
<Button type="primary" @click="handleSignUp('formData')" size="large">Sign up</Button>
</div>
</Modal>
<Content class="content">
<router-view/>
</Content>
</Layout>
</Layout>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import * as loginRequest from '../apis/login'
import {appRouters} from '@/router/router.js'
import menuComponent from '@/components/menu-component/menuComponent.vue';
export default {
name: 'Home',
components: {
HelloWorld
name: 'home',
data(){
return {
isShowlogDialog:false,//是否显示登陆弹框
isLogedIn:true,
formData:{
user:'',
password:'',
},
rules:{
user: [
{ required: true, message: 'Please fill in the user name', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please fill in the password.', trigger: 'blur' },
{ type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
]
}
}
},
components:{
menuComponent
},
methods:{
handleSignUp(name){
this.$refs[name].validate((valid) => {
if (valid) {
loginRequest.addUsers(this);
} else {
this.$Message.error('Fail!');
}
})
},
login(){
this.$refs['formData'].resetFields();
this.isShowlogDialog = true;
},
handleSubmit(name){
this.$refs[name].validate((valid) => {
if (valid) {
loginRequest.login(this);
} else {
this.$Message.error('Fail!');
}
})
}
}
}
</script>
<style lang="less" scoped>
.contentLayout,
.sider,
.home{
height:100vh;
}
.header{
background-color: yellow;
display: flex;
justify-content: space-between;
align-items: center;
}
.sider{
background-color:rgb(255, 255, 255);
}
.content{
height:calc(~"100vh - 50px");
background-color: aliceblue;
}
</style>
src/views/about-writer/aboutWriter.vue 0 → 100644
浏览文件 @ 2313eec2
<template>
</template>
<script>
export default {
}
</script>
<style lang="less">
@import './aboutWriter.less';
</style>
\ No newline at end of file
src/views/article-management/articleManagement.vue 0 → 100644
浏览文件 @ 2313eec2
<template>
</template>
<script>
export default {
}
</script>
<style lang="less">
@import './articleManagement.less';
</style>
\ No newline at end of file
src/views/personal-center/personalCenter.vue 0 → 100644
浏览文件 @ 2313eec2
<template>
<div>
个人中心
</div>
</template>
<script>
export default {
}
</script>
<style lang="less">
@import './personalCenter.less';
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或