博客管理系统

<template>
    <div>
        <h3>注册页面</h3>
        <p>账号：<input type="text" v-model="user"></p>
        <p>密码：<input type="password" v-model="pwd"></p>
        <p><button @click="but1">注册</button></p>
    </div>
</template>

<script>
import {post} from '../../utils/request'
export default {
    name:'Register',
    data(){
        return{
            user:'',
            pwd:''
        }
    },
    methods:{
        but1(){
            post('/register',{user:this.user,pwd:this.pwd}).then(resp=>{
                console.log(resp);
                alert('注册成功')
                this.$router.push('/login')
            }).catch(err=>{
                console.log('err')
            })
    }
}
}
</script>

<style>

</style>

<template>
    <div>
        <h3>登录页面</h3>
        <p>账号：<input type="text" v-model="user"></p>
        <p>密码：<input type="password" v-model="pwd"></p>
        <p><button @click="but1">登录</button></p>
    </div>
</template>

<script>
import {post} from '../../utils/request'
export default {
    name:'Login',
    data(){
        return{
            user:'',
            pwd:''
        }
    },
    methods:{
        but1(){
            post('/login',{user:this.user,pwd:this.pwd}).then(resp=>{
                console.log(resp);
                alert('登录成功')
                this.$store.commit('user',this.user)
                this.$store.commit('pwd',this.pwd)
                this.$router.push('/books')
            }).catch(err=>{
                console.log('err')
            })
    }
}
}
</script>

<style>

</style>

<template>
    <div>
        <h3>博客管理系统</h3>
        <p>欢迎用户：{{user}}!</p>
        <table width=800 border="1" align="center">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>内容</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,i) in biao" :key="i">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <!-- <td>{{item.content}}</td> -->
                <td><button @click="but1(i)">详情</button></td>
                <td><button @click="but2(i)">删除</button></td>
            </tr>
        </table>
        <p>博客名：{{rong.name}}</p>
        <textarea cols="50" rows="20" v-m
        
        odel="rong.content"></textarea>
        <p><button @click="but3">修改</button></p>
        <p>添加博客</p>
        <p>编号：<input type="text" v-model="id"></p>
        <p>名字：<input type="text" v-model="name"></p>
        <p>
            内容：<br>
            <textarea  cols="30" rows="10" v-model="content"></textarea>
        </p>
        <p><button @click="but4">添加</button></p>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import {get,del,put,post} from '../../utils/request'
export default {
    name:'Books',
    data(){
        return{
            biao:[],
            rong:{},
            id:'',
            name:"",
            content:'',
        }
    },
    computed:{
        ...mapState(['user']),
        ...mapState(['pwd'])

    },
    mounted(){
        if(this.user==''||this.pwd==''){
            alert('请进行登录');
            this.$router.push('/login')
        }
        get('/getall').then(resp=>{
            console.log(resp);
            this.biao=resp.data;
        }).catch(err=>{
            console.log(err)
            })
    },
    methods:{
        but1(i){
            this.rong = this.biao[i];
        },
        but2(i){
            del('/delete',{id:this.biao[i].id}).then(resp=>{
                console.log(resp);
                alert('删除成功');
                this.biao.splice(i,1)
            }).catch(err=>{
                console.log(err)
            })
            
        },
        but3(){
            put('/update',this.rong).then(resp=>{
                console.log(resp);
                alert('修改成功');
            }).catch(err=>{
                console.log(err)
            })
        },
        but4(){
            let obj = {id:this.id,name:this.name,content:this.content}
            post('/add',obj).then(resp=>{
                console.log(resp);
                alert('添加成功')
                this.biao.push(obj)
            }).catch(err=>{
                console.log(err)
            })
        }
    }

}
</script>

<style>

</style>

import { createStore } from 'vuex'

export default createStore({
  state: {
    user:'',
    pwd:'',
  },

  mutations: {
    user(state,data){
      state.user = data
    },
    pwd(state,data){
      state.pwd = data
    }

  },
  actions: {
  },
  modules: {
  },
  getters: {
   
  },
})

import Axios from 'axios'
// 常用请求封装
export function get(url,params){
    return Axios.get(url,params);
}

export function post(url,params){
    return Axios.post(url,params);
}

export function put(url,params){
    return Axios.put(url,params);
}

export function del(url,params){
    return Axios.delete(url,params);
}